refactor: clean config context read

src/components/SideBar.tsx

@@ -28,8 +28,8 @@ export function SideBar() {
   const state = useLoadedContext(SideBarStateContext).value
   const configContext = useConfigs()
 
-  const accessToken = configContext.value.accessToken || ''
-  const [baseSize] = React.useState(() => configContext.value.sideBarWidth)
+  const { sideBarWidth } = configContext.value
+  const [baseSize] = React.useState(() => sideBarWidth)
 
   const [showSettings, setShowSettings] = React.useState(false)
   const toggleShowSettings = React.useCallback(() => setShowSettings(show => !show), [])
@@ -52,8 +52,7 @@ export function SideBar() {
     if (detectBrowser() === 'Safari') DOMHelper.markGitakoSafariFlag()
   }, [])
 
-  const sidebarToggleMode = configContext.value.sidebarToggleMode
-  const intelligentToggle = configContext.value.intelligentToggle
+  const { sidebarToggleMode, intelligentToggle } = configContext.value
   const $shouldShow = useStateIO(() =>
     intelligentToggle === null
       ? sidebarToggleMode === 'persistent'
@@ -99,7 +98,7 @@ export function SideBar() {
   const toggleShowSideBar = React.useCallback(() => {
     if (!error) $shouldShow.onChange(show => !show)
   }, [error]) // eslint-disable-line react-hooks/exhaustive-deps
-  useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
+  useToggleSideBarWithKeyboard(state, toggleShowSideBar)
 
   const updateSideBarVisibility = React.useCallback(() => {
     if (intelligentToggle === null && sidebarToggleMode === 'persistent') {
@@ -114,6 +113,7 @@ export function SideBar() {
   usePJAX()
 
   // Hide sidebar when error due to auth but token is set  #128
+  const { accessToken } = configContext.value
   const hideSidebarOnInvalidToken: boolean =
     intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
   React.useEffect(() => {

src/components/settings/AccessTokenSettings.tsx

@@ -12,8 +12,9 @@ const ACCESS_TOKEN_REGEXP = /^([0-9a-fA-F]+|gh[pousr]_[A-Za-z0-9_]+)$/
 
 export function AccessTokenSettings() {
   const configContext = useConfigs()
-  const hasAccessToken = Boolean(configContext.value.accessToken)
-  const [accessToken, setAccessToken] = React.useState('')
+  const { accessToken } = configContext.value
+  const hasAccessToken = Boolean(accessToken)
+  const [accessTokenInputValue, setAccessTokenInputValue] = React.useState('')
   const useAccessTokenHint = useStateIO<React.ReactNode>('')
   const focusInput = useStateIO(false)
 
@@ -21,12 +22,12 @@ export function AccessTokenSettings() {
 
   React.useEffect(() => {
     // clear input when access token updates
-    setAccessToken('')
-  }, [configContext.value.accessToken])
+    setAccessTokenInputValue('')
+  }, [accessToken])
 
   const onInputAccessToken = React.useCallback(
     ({ currentTarget: { value } }: React.FormEvent<HTMLInputElement>) => {
-      setAccessToken(value)
+      setAccessTokenInputValue(value)
       useAccessTokenHint.onChange(
         ACCESS_TOKEN_REGEXP.test(value) ? '' : 'Gitako does not recognize the token.',
       )
@@ -45,13 +46,13 @@ export function AccessTokenSettings() {
         </span>
       ),
     ) => {
-      if (accessToken) {
-        configContext.onChange({ accessToken })
-        setAccessToken('')
+      if (accessTokenInputValue) {
+        configContext.onChange({ accessToken: accessTokenInputValue })
+        setAccessTokenInputValue('')
         useAccessTokenHint.onChange(hint)
       }
     },
-    [accessToken], // eslint-disable-line react-hooks/exhaustive-deps
+    [accessTokenInputValue], // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const onPressAccessToken = React.useCallback(
@@ -109,14 +110,14 @@ export function AccessTokenSettings() {
             <TextInput
               sx={{ marginRight: 1 }}
               className={'access-token-input'}
-              value={accessToken}
+              value={accessTokenInputValue}
               placeholder="Or input here manually"
               onFocus={() => focusInput.onChange(true)}
               onBlur={() => focusInput.onChange(false)}
               onChange={onInputAccessToken}
               onKeyPress={onPressAccessToken}
             />
-            <Button onClick={() => saveToken()} disabled={!accessToken}>
+            <Button onClick={() => saveToken()} disabled={!accessTokenInputValue}>
               Save
             </Button>
           </div>

src/components/settings/FileTreeSettings.tsx

@@ -39,6 +39,7 @@ const recursiveToggleFolderOptions: Option<Config['recursiveToggleFolder']>[] =
 
 export function FileTreeSettings() {
   const configContext = useConfigs()
+  const { recursiveToggleFolder, icons } = configContext.value
   return (
     <SettingsSection title={'File Tree'}>
       <SelectInput
@@ -49,7 +50,7 @@ export function FileTreeSettings() {
             recursiveToggleFolder: v,
           })
         }}
-        value={configContext.value.recursiveToggleFolder}
+        value={recursiveToggleFolder}
       />
 
       <SelectInput<Config['icons']>
@@ -60,7 +61,7 @@ export function FileTreeSettings() {
             icons: v,
           })
         }}
-        value={configContext.value.icons}
+        value={icons}
       />
       <SimpleToggleField
         field={{

src/components/settings/SidebarSettings.tsx

@@ -8,8 +8,7 @@ import * as keyHelper from 'utils/keyHelper'
 import { SettingsSection } from './SettingsSection'
 
 export function SidebarSettings() {
-  const configContext = useConfigs()
-  const { sidebarToggleMode } = configContext.value
+  const { sidebarToggleMode } = useConfigs().value
 
   return (
     <SettingsSection title={'Sidebar'}>

src/utils/hooks/useToggleSideBarWithKeyboard.ts

@@ -1,27 +1,22 @@
-import { ConfigsContextShape } from 'containers/ConfigsContext'
+import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import * as keyHelper from 'utils/keyHelper'
 import { SideBarState } from '../../containers/SideBarState'
 
-export function useToggleSideBarWithKeyboard(
-  state: SideBarState,
-  configContext: ConfigsContextShape,
-  toggleShowSideBar: () => void,
-) {
-  const isDisabled = state === 'disabled'
+export function useToggleSideBarWithKeyboard(state: SideBarState, toggleShowSideBar: () => void) {
+  const { shortcut } = useConfigs().value
+  const isDisabled = state === 'disabled' || !shortcut
   React.useEffect(
     function attachKeyDown() {
-      if (isDisabled || !configContext.value.shortcut) return
+      if (isDisabled) return
 
       function onKeyDown(e: KeyboardEvent) {
         const keys = keyHelper.parseEvent(e)
-        if (keys === configContext.value.shortcut) {
-          toggleShowSideBar()
-        }
+        if (keys === shortcut) toggleShowSideBar()
       }
       window.addEventListener('keydown', onKeyDown)
       return () => window.removeEventListener('keydown', onKeyDown)
     },
-    [toggleShowSideBar, isDisabled, configContext.value.shortcut],
+    [toggleShowSideBar, isDisabled, shortcut],
   )
 }