From eb604a471751145250b1aba012ac17fc53b77cd6 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:56:06 +0200
Subject: [PATCH] remove theme context in favour of hook

---
 .../src/contexts/theme-context.tsx            | 59 -------------------
 packages/status-react/src/hooks/use-theme.tsx | 30 ++++++++++
 packages/status-react/src/routes/index.tsx    | 39 ++++++------
 3 files changed, 50 insertions(+), 78 deletions(-)
 delete mode 100644 packages/status-react/src/contexts/theme-context.tsx
 create mode 100644 packages/status-react/src/hooks/use-theme.tsx

diff --git a/packages/status-react/src/contexts/theme-context.tsx b/packages/status-react/src/contexts/theme-context.tsx
deleted file mode 100644
index 58c0fc8a..00000000
--- a/packages/status-react/src/contexts/theme-context.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-} from 'react'
-
-import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
-
-import type { Theme } from '../styles/config'
-import type { Config } from '../types/config'
-
-const ThemeContext = createContext<Theme | undefined>(undefined)
-
-interface Props {
-  theme: Config['theme']
-  children: React.ReactNode
-}
-
-export const ThemeProvider = (props: Props) => {
-  const { children, theme = 'light' } = props
-
-  const appTheme = useMemo(() => {
-    if (!theme || theme === 'light') {
-      return defaultTheme
-    }
-
-    if (theme === 'dark') {
-      return darkTheme
-    }
-
-    return createTheme({
-      colors: theme.colors,
-      fonts: theme.fonts,
-    })
-  }, [theme])
-
-  useLayoutEffect(() => {
-    document.body.classList.add(appTheme)
-
-    return () => {
-      document.body.classList.remove(appTheme)
-    }
-  }, [appTheme])
-
-  return (
-    <ThemeContext.Provider value={appTheme}>{children}</ThemeContext.Provider>
-  )
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext)
-
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-
-  return context
-}
diff --git a/packages/status-react/src/hooks/use-theme.tsx b/packages/status-react/src/hooks/use-theme.tsx
new file mode 100644
index 00000000..5ac9193c
--- /dev/null
+++ b/packages/status-react/src/hooks/use-theme.tsx
@@ -0,0 +1,30 @@
+import { useLayoutEffect, useMemo } from 'react'
+
+import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
+
+import type { Config } from '../types/config'
+
+export const useTheme = (theme?: Config['theme']) => {
+  const appTheme = useMemo(() => {
+    if (!theme || theme === 'light') {
+      return defaultTheme
+    }
+
+    if (theme === 'dark') {
+      return darkTheme
+    }
+
+    return createTheme({
+      colors: theme.colors,
+      fonts: theme.fonts,
+    })
+  }, [theme])
+
+  useLayoutEffect(() => {
+    document.body.classList.add(appTheme)
+
+    return () => {
+      document.body.classList.remove(appTheme)
+    }
+  }, [appTheme])
+}
diff --git a/packages/status-react/src/routes/index.tsx b/packages/status-react/src/routes/index.tsx
index 9583da36..ef0662d4 100644
--- a/packages/status-react/src/routes/index.tsx
+++ b/packages/status-react/src/routes/index.tsx
@@ -11,12 +11,13 @@ import {
 import { MainSidebar } from '~/src/components/main-sidebar'
 import { AppProvider } from '~/src/contexts/app-context'
 import { DialogProvider } from '~/src/contexts/dialog-context'
-import { ThemeProvider } from '~/src/contexts/theme-context'
 import { ProtocolProvider, useProtocol } from '~/src/protocol'
 import { Chat } from '~/src/routes/chat'
 import { styled } from '~/src/styles/config'
 import { GlobalStyle } from '~/src/styles/GlobalStyle'
 
+import { useTheme } from '../hooks/use-theme'
+
 import type { Config } from '~/src/types/config'
 
 interface Props extends Config {
@@ -44,28 +45,28 @@ const Gate = (props: { children: JSX.Element }) => {
 export const Community = (props: Props) => {
   const { theme, router: Router = BrowserRouter } = props
 
+  useTheme(theme)
+
   return (
     <Router>
       <ProtocolProvider options={{ publicKey: props.publicKey }}>
         <AppProvider config={props}>
-          <ThemeProvider theme={theme}>
-            <DialogProvider>
-              <GlobalStyle />
-              <Wrapper>
-                <MainSidebar />
-                <Routes>
-                  <Route
-                    path="/:id"
-                    element={
-                      <Gate>
-                        <Chat />
-                      </Gate>
-                    }
-                  />
-                </Routes>
-              </Wrapper>
-            </DialogProvider>
-          </ThemeProvider>
+          <DialogProvider>
+            <GlobalStyle />
+            <Wrapper>
+              <MainSidebar />
+              <Routes>
+                <Route
+                  path="/:id"
+                  element={
+                    <Gate>
+                      <Chat />
+                    </Gate>
+                  }
+                />
+              </Routes>
+            </Wrapper>
+          </DialogProvider>
         </AppProvider>
       </ProtocolProvider>
     </Router>