feat: configs context

src/components/Gitako.tsx

@@ -1,5 +1,6 @@
 import { raiseError } from 'analytics'
 import { SideBar } from 'components/SideBar'
+import { ConfigsContextWrapper } from 'containers/ConfigsContext'
 import * as React from 'react'
 
 export class Gitako extends React.PureComponent {
@@ -8,6 +9,10 @@ export class Gitako extends React.PureComponent {
   }
 
   render() {
-    return <SideBar />
+    return (
+      <ConfigsContextWrapper>
+        <SideBar />
+      </ConfigsContextWrapper>
+    )
   }
 }

src/components/Resizable.tsx

@@ -1,6 +1,7 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
+import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { configKeys, setOne } from 'utils/configHelper'
+import { configKeys } from 'utils/configHelper'
 import { cx } from 'utils/cx'
 import { bodySpacingClassName } from 'utils/DOMHelper'
 import * as features from 'utils/features'
@@ -17,6 +18,7 @@ const GITHUB_WIDTH = 1020
 
 export function Resizable({ baseSize, className, children }: React.PropsWithChildren<Props>) {
   const [size, setSize] = React.useState(baseSize)
+  const configContext = useConfigs()
 
   React.useEffect(() => {
     setSize(baseSize)
@@ -32,7 +34,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
-    setOne(configKeys.sideBarWidth, size)
+    configContext.set({ [configKeys.sideBarWidth]: size })
   }, [size])
 
   useMediaStyleSheet(

src/containers/ConfigsContext.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Config, getAll, setAll } from 'utils/configHelper'
+
+type Props = {}
+
+type ContextShape = PartialValSet<Config>
+
+const ConfigsContext = React.createContext<ContextShape | null>(null)
+
+export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
+  const [configs, setConfigs] = React.useState<Config | null>(null)
+  React.useEffect(() => {
+    getAll().then(setConfigs)
+  }, [])
+  const set = React.useCallback(
+    () => (configs: Config) => {
+      setAll(configs)
+      setConfigs(configs)
+    },
+    [setConfigs],
+  )
+  if (configs === null) return null
+  return (
+    <ConfigsContext.Provider value={{ val: configs, set }}>
+      {props.children}
+    </ConfigsContext.Provider>
+  )
+}
+
+export const useConfigs = useNonNullContext(ConfigsContext)
+
+function useNonNullContext<T, R extends Exclude<T, null>>(theContext: React.Context<T>): () => R {
+  return () => {
+    const context = React.useContext(theContext)
+    if (context === null) throw new Error(`Empty context`)
+    return context as R
+  }
+}

src/global.d.ts

@@ -0,0 +1,9 @@
+type ValSet<T> = {
+  val: T
+  set: (val: T) => void
+}
+
+type PartialValSet<T> = {
+  val: T
+  set: (val: Partial<T>) => void
+}

src/utils/configHelper.ts

@@ -20,7 +20,7 @@ export enum configKeys {
   intelligentToggle = 'intelligentToggle',
 }
 
-const defaultConfigs: Config = {
+export const defaultConfigs: Config = {
   sideBarWidth: 260,
   shortcut: undefined,
   access_token: undefined,