From db23b69d7f97c389efca022840b74799b746ca4b Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 10 Nov 2019 17:36:43 +0800
Subject: [PATCH] feat: configs context

---
 src/components/Gitako.tsx         |  7 +++++-
 src/components/Resizable.tsx      |  6 +++--
 src/containers/ConfigsContext.tsx | 38 +++++++++++++++++++++++++++++++
 src/global.d.ts                   |  9 ++++++++
 src/utils/configHelper.ts         |  2 +-
 5 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/containers/ConfigsContext.tsx
 create mode 100644 src/global.d.ts

diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 16ba16a..4088a27 100644
--- a/src/components/Gitako.tsx
+++ b/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>
+    )
   }
 }
diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index b14f40a..2cba2fa 100644
--- a/src/components/Resizable.tsx
+++ b/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(
diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx
new file mode 100644
index 0000000..1be1551
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..fac9ed3
--- /dev/null
+++ b/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
+}
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index 9e093ac..f00dae7 100644
--- a/src/utils/configHelper.ts
+++ b/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,