remove theme context in favour of hook

This commit is contained in:
Pavel Prichodko 2022-07-01 14:56:06 +02:00
parent 3ef824da55
commit eb604a4717
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
3 changed files with 50 additions and 78 deletions

View File

@ -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
}

View File

@ -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])
}

View File

@ -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>