refactor: simplify hooks

src/components/SideBar.tsx

@@ -36,9 +36,7 @@ export function SideBar() {
 
   const $showSettings = useStateIO(false)
   const showSettings = $showSettings.value
-  const toggleShowSettings = React.useCallback(function toggleShowSettings() {
+  const toggleShowSettings = React.useCallback(() => $showSettings.onChange(show => !show), [])
-    $showSettings.onChange(show => !show)
-  }, [])
 
   const $logoContainerElement = useStateIO<HTMLElement | null>(null)
 
@@ -57,58 +55,34 @@ export function SideBar() {
   const shouldShow = $shouldShow.value
   React.useEffect(() => {
     DOMHelper.setBodyIndent(shouldShow)
-  }, [shouldShow])
-
-  React.useEffect(() => {
     if (shouldShow) {
       DOMHelper.focusFileExplorer() // TODO: verify if it works
     }
   }, [shouldShow])
-  const toggleShowSideBar = React.useCallback(() => {
-    $shouldShow.onChange(shouldShow => {
-      const {
-        value: { intelligentToggle },
-      } = configContext
-      if (intelligentToggle !== null) {
-        configContext.onChange({ intelligentToggle: !shouldShow })
-      }
-
-      return !shouldShow
-    })
-  }, [])
-  useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
 
   const intelligentToggle = configContext.value.intelligentToggle
-  // Hide sidebar when error due to auth but token is set  #128
+
-  const hideSidebarOnInvalidToken: boolean =
+  // Save expand state on toggle if auto expand if not on
-    intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
   React.useEffect(() => {
-    if (hideSidebarOnInvalidToken) {
+    if (intelligentToggle !== null) {
-      $shouldShow.onChange(false)
+      configContext.onChange({ intelligentToggle: shouldShow })
-    } else {
-      const shouldShow = intelligentToggle === null ? platform.shouldShow() : intelligentToggle
-      $shouldShow.onChange(shouldShow)
     }
-  }, [intelligentToggle, hideSidebarOnInvalidToken, metaData])
+  }, [shouldShow, intelligentToggle])
 
   const error = useLoadedContext(SideBarErrorContext).value
+  // Lock shouldShow on error
   React.useEffect(() => {
-    if (error) {
+    if (error && shouldShow) {
       $shouldShow.onChange(false)
     }
-  }, [error])
+  }, [error, shouldShow])
 
-  const updateSideBarVisibility = React.useCallback(
+  const toggleShowSideBar = React.useCallback(() => {
-    function updateSideBarVisibility() {
+    if (!error) $shouldShow.onChange(show => !show)
-      if (hideSidebarOnInvalidToken) {
+  }, [error])
-        $shouldShow.onChange(false)
+  useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
-      } else if (intelligentToggle === null) {
+
-        $shouldShow.onChange(platform.shouldShow())
+  useSetShouldShowOnPJAXDone(intelligentToggle, $shouldShow.onChange)
-      }
-    },
-    [metaData?.branchName, intelligentToggle, hideSidebarOnInvalidToken],
-  )
-  useOnPJAXDone(updateSideBarVisibility)
 
   useGitHubAttachCopyFileButton(configContext.value.copyFileButton)
   useGitHubAttachCopySnippetButton(configContext.value.copySnippetButton)
@@ -116,13 +90,20 @@ export function SideBar() {
   usePJAX()
   useProgressBar()
 
+  // Hide sidebar when error due to auth but token is set  #128
+  const hideSidebarOnInvalidToken: boolean =
+    intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
+  React.useEffect(() => {
+    if (hideSidebarOnInvalidToken) {
+      $shouldShow.onChange(false)
+    }
+  }, [hideSidebarOnInvalidToken])
+
   return (
     <Theme>
       <div className={'gitako-side-bar'}>
         <Portal into={$logoContainerElement.value}>
-          {!shouldShow && (
+          {!shouldShow && <ToggleShowButton error={error} onClick={toggleShowSideBar} />}
-            <ToggleShowButton error={error} onClick={error ? undefined : toggleShowSideBar} />
-          )}
         </Portal>
         <Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
           <div className={'gitako-side-bar-body'}>
@@ -175,3 +156,19 @@ export function SideBar() {
     </Theme>
   )
 }
+
+function useSetShouldShowOnPJAXDone(
+  intelligentToggle: boolean | null,
+  set: (value: boolean) => void,
+) {
+  useOnPJAXDone(
+    React.useCallback(
+      function updateSideBarVisibility() {
+        if (intelligentToggle === null) {
+          set(platform.shouldShow())
+        }
+      },
+      [intelligentToggle],
+    ),
+  )
+}