From 1e323bc2d5759c0584c54cdada160b1151631792 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 4 Jun 2022 15:41:33 +0800
Subject: [PATCH] feat: reload context

---
 src/components/Gitako.tsx           | 29 ++++++++++++++++-------------
 src/components/ToggleShowButton.tsx | 18 +++++++++++++++++-
 src/containers/ReloadContext.tsx    | 17 +++++++++++++++++
 src/styles/index.scss               |  7 ++++---
 4 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 src/containers/ReloadContext.tsx

diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 13039b3..8fc22db 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,5 +1,6 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { ReloadContextWrapper } from 'containers/ReloadContext'
 import * as React from 'react'
 import { ErrorBoundary } from '../containers/ErrorBoundary'
 import { StateBarErrorContextWrapper } from '../containers/ErrorContext'
@@ -9,18 +10,20 @@ import { StateBarStateContextWrapper } from '../containers/SideBarState'
 
 export function Gitako() {
   return (
-    <ErrorBoundary>
-      <ConfigsContextWrapper>
-        <StateBarStateContextWrapper>
-          <StateBarErrorContextWrapper>
-            <OAuthWrapper>
-              <RepoContextWrapper>
-                <SideBar />
-              </RepoContextWrapper>
-            </OAuthWrapper>
-          </StateBarErrorContextWrapper>
-        </StateBarStateContextWrapper>
-      </ConfigsContextWrapper>
-    </ErrorBoundary>
+    <ReloadContextWrapper>
+      <ErrorBoundary>
+        <ConfigsContextWrapper>
+          <StateBarStateContextWrapper>
+            <StateBarErrorContextWrapper>
+              <OAuthWrapper>
+                <RepoContextWrapper>
+                  <SideBar />
+                </RepoContextWrapper>
+              </OAuthWrapper>
+            </StateBarErrorContextWrapper>
+          </StateBarStateContextWrapper>
+        </ConfigsContextWrapper>
+      </ErrorBoundary>
+    </ReloadContextWrapper>
   )
 }
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index 5e51750..180477f 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -1,9 +1,12 @@
+import { SyncIcon } from '@primer/octicons-react'
 import iconURL from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
+import { ReloadContext } from 'containers/ReloadContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import { useResizeHandler } from 'utils/hooks/useResizeHandler'
+import { RoundIconButton } from './RoundIconButton'
 
 type Props = {
   error?: string | null
@@ -19,6 +22,7 @@ function getSafeDistance(y: number, height: number) {
 }
 
 export function ToggleShowButton({ error, className, onClick, onHover }: Props) {
+  const reload = React.useContext(ReloadContext)
   const ref = React.useRef<HTMLDivElement>(null)
   const config = useConfigs()
   const [distance, setDistance] = React.useState(config.value.toggleButtonVerticalDistance)
@@ -68,7 +72,19 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
       >
         <img className={'tentacle'} draggable={false} src={iconURL} />
       </button>
-      {error && <span className={'error-message'}>{error}</span>}
+      {error && (
+        <span className={'error-message'}>
+          {error}
+          <RoundIconButton
+            sx={{ ml: 1 }}
+            variant="danger"
+            size="small"
+            aria-label={'Reload Gitako'}
+            icon={SyncIcon}
+            onClick={reload}
+          />
+        </span>
+      )}
     </div>
   )
 }
diff --git a/src/containers/ReloadContext.tsx b/src/containers/ReloadContext.tsx
new file mode 100644
index 0000000..4e30436
--- /dev/null
+++ b/src/containers/ReloadContext.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { noop } from 'utils/general'
+
+export type ReloadContextShape = () => void
+
+export const ReloadContext = React.createContext<ReloadContextShape>(noop)
+
+export function ReloadContextWrapper({ children }: React.PropsWithChildren<{}>) {
+  const [key, setKey] = React.useState(0)
+  const reload = React.useCallback(() => setKey(key => key + 1), [])
+
+  return (
+    <ReloadContext.Provider key={key} value={reload}>
+      {children}
+    </ReloadContext.Provider>
+  )
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c797a3b..2d78fa8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -357,17 +357,18 @@ $minimal-z-index: max(
   .error-message {
     display: none;
     margin-left: 4px;
-    padding: 2px 4px;
+    padding: 4px;
     font-size: 12px;
     color: var(--color-danger-fg);
     border: 1px solid var(--color-border-default);
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: var(--color-bg-subtle);
   }
 
   &:hover {
     .error-message {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
     }
   }
 }