remove theme context in favour of hook
This commit is contained in:
parent
3ef824da55
commit
eb604a4717
|
@ -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
|
||||
}
|
|
@ -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])
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue