Function App

apps/chrome-ext/src/App.tsx:31–87

()

})

export const App = () => {
  const [showSettingPanel, setShowSettingPanel] = useState(false)
  const [state, actualDispatch] = useReducer(globalReducer, getDefaultGlobalState())

  const dispatch: IGlobalDispatch = (info) => {
    actualDispatch([info])
  }

  const toggleSettingPanel = () => {
    setShowSettingPanel(!showSettingPanel)
  }

  useEffectOnce(() => {
    const cacheUserConfigStr = window.localStorage.getItem(CONSTS.USER_INFO_LOCAL_STORAGE)

    if (cacheUserConfigStr) {
      const cacheUserConfig = JSON.parse(cacheUserConfigStr) as UserConfig
      dispatch({
        type: 'userConfig',
        value: cacheUserConfig,
      })
    }
  })

  return (
    // eslint-disable-next-line
    <GlobalContext.Provider value={{ state, dispatch, batchDispatch: actualDispatch }}>
      <ThemeProvider theme={theme}>
        <Box sx={{ flexGrow: 1 }}>
          <AppBar position="relative">
            <Toolbar sx={{ minHeight: 46 }}>
              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                Sync To Github
              </Typography>
              <IconButton
                color="inherit"
                aria-label="add an alarm"
                sx={
                  showSettingPanel
                    ? {
                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
                      }
                    : {}
                }
                onClick={toggleSettingPanel}
              >
                <SettingsIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          {!showSettingPanel && <SyncPanel />}
          {showSettingPanel && <SettingPanel />}
        </Box>
      </ThemeProvider>
    </GlobalContext.Provider>
  )
}