From 659274256af7e479f8d6ec829b9a3b2a1b679178 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 12 May 2021 22:31:31 +0800
Subject: [PATCH] chore: UX details on error

---
 src/components/AccessDeniedDescription.tsx |  6 ++++-
 src/components/SideBar.tsx                 | 31 +++++++++++-----------
 src/components/ToggleShowButton.tsx        |  5 +++-
 src/styles/index.scss                      |  5 ++++
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/AccessDeniedDescription.tsx b/src/components/AccessDeniedDescription.tsx
index cc8290b..6705aa8 100644
--- a/src/components/AccessDeniedDescription.tsx
+++ b/src/components/AccessDeniedDescription.tsx
@@ -1,9 +1,13 @@
+import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
 
-export function AccessDeniedDescription({ hasToken }: { hasToken: boolean }) {
+export function AccessDeniedDescription() {
+  const configContext = useConfigs()
+  const hasToken = Boolean(configContext.value.accessToken)
+
   return (
     <div className={'description'}>
       <h2>Access Denied</h2>
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 536195d..80aa238 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -59,10 +59,10 @@ export function SideBar(props: {
 
   const $shouldShow = useStateIO(false)
   const shouldShow = $shouldShow.value
-  const setShouldShow = React.useCallback((shouldShow: boolean) => {
-    $shouldShow.onChange(shouldShow)
+  React.useEffect(() => {
     DOMHelper.setBodyIndent(shouldShow)
-  }, [])
+  }, [shouldShow])
+
   React.useEffect(() => {
     if (shouldShow) {
       DOMHelper.focusFileExplorer() // TODO: verify if it works
@@ -70,16 +70,15 @@ export function SideBar(props: {
   }, [shouldShow])
   const toggleShowSideBar = React.useCallback(() => {
     $shouldShow.onChange(shouldShow => {
-      DOMHelper.setBodyIndent(!shouldShow)
+      const {
+        value: { intelligentToggle },
+      } = configContext
+      if (intelligentToggle !== null) {
+        configContext.onChange({ intelligentToggle: !shouldShow })
+      }
+
       return !shouldShow
     })
-
-    const {
-      value: { intelligentToggle },
-    } = configContext
-    if (intelligentToggle !== null) {
-      configContext.onChange({ intelligentToggle: !shouldShow })
-    }
   }, [])
   useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
 
@@ -89,10 +88,10 @@ export function SideBar(props: {
     intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
   React.useEffect(() => {
     if (hideSidebarOnInvalidToken) {
-      setShouldShow(false)
+      $shouldShow.onChange(false)
     } else {
       const shouldShow = intelligentToggle === null ? platform.shouldShow() : intelligentToggle
-      setShouldShow(shouldShow)
+      $shouldShow.onChange(shouldShow)
     }
   }, [intelligentToggle, hideSidebarOnInvalidToken, metaData])
 
@@ -106,9 +105,9 @@ export function SideBar(props: {
   const updateSideBarVisibility = React.useCallback(
     function updateSideBarVisibility() {
       if (hideSidebarOnInvalidToken) {
-        setShouldShow(false)
+        $shouldShow.onChange(false)
       } else if (intelligentToggle === null) {
-        setShouldShow(platform.shouldShow())
+        $shouldShow.onChange(platform.shouldShow())
       }
     },
     [metaData?.branchName, intelligentToggle, hideSidebarOnInvalidToken],
@@ -147,7 +146,7 @@ export function SideBar(props: {
                   case 'meta-loading':
                     return <LoadingIndicator text={'Fetching repo meta...'} />
                   case 'error-due-to-auth':
-                    return <AccessDeniedDescription hasToken={Boolean(accessToken)} />
+                    return <AccessDeniedDescription />
                   default:
                     return metaData ? (
                       <>
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index 85bb34f..53a8d1a 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -2,6 +2,7 @@ import iconSrc from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
+import { cx } from 'utils/cx'
 import { Icon } from './Icon'
 
 type Props = {
@@ -37,7 +38,9 @@ export function ToggleShowButton({ error, onClick }: Props) {
   return (
     <div ref={ref} className={'gitako-toggle-show-button-wrapper'}>
       <button
-        className={'gitako-toggle-show-button'}
+        className={cx('gitako-toggle-show-button', {
+          error,
+        })}
         onClick={onClick}
         draggable
         onDragStart={event => {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 85a3e31..78ce4a6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -188,6 +188,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     background: transparent;
     border: none;
     padding: 0;
+
+    &.error {
+      cursor: not-allowed;
+    }
+
     .octoface-icon {
       @include flex-center();