Merge pull request #203 from tmshv/issue-202

Split Config and Menu

pages/404.tsx

@@ -1,7 +1,7 @@
 import { NextPage } from "next"
 import { Wrapper } from "@/components/Wrapper"
 import { NotFound } from "@/components/NotFound"
-import { Copyright } from "@/components/Copyright"
+import Copyright from "@/components/Copyright"
 import { Spacer } from "@/components/Spacer"
 import { Box } from "@/ui/Box"
 

src/components/App/index.tsx

@@ -1,6 +1,5 @@
 import { Wrapper } from "../Wrapper"
-import { ConfigContext } from "src/context/ConfigContext"
+import { MenuContext } from "@/context/MenuContext"
-import config from "src/config"
 import { Footer } from "../Footer"
 import { Content } from "../Content"
 import { Breadcrumbs } from "../Breadcrumbs"
@@ -10,7 +9,7 @@ import { useMobile } from "src/hooks/useMobile"
 import { Navigation } from "@/components/Navigation"
 import { Box } from "@/ui/Box"
 import { AccessibilityButton } from "../AccessibilityButton"
-import { Copyright } from "../Copyright"
+import Copyright from "@/components/Copyright"
 import { Spacer } from "../Spacer"
 import { Author } from "../Author"
 import { Title } from "@/ui/Title"
@@ -45,10 +44,7 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
     }
 
     return (
-        <ConfigContext.Provider value={{
+        <MenuContext.Provider value={menu}>
-            ...config,
-            menu,
-        }}>
             <Wrapper
                 header={(
                     <header>
@@ -157,6 +153,6 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                     </Content>
                 </Box>
             </Wrapper>
-        </ConfigContext.Provider>
+        </MenuContext.Provider>
     )
 }

src/components/Contacts/index.tsx

@@ -1,12 +1,12 @@
 import s from "./contacts.module.css"
 
-import { useContext } from "react"
-import { ConfigContext } from "src/context/ConfigContext"
 import Link from "next/link"
 import { Title } from "@/ui/Title"
+import { useSnapshot } from "valtio"
+import { state } from "@/store/config"
 
 export const Contacts: React.FC = props => {
-    const { contacts } = useContext(ConfigContext)
+    const { contacts } = useSnapshot(state)
 
     return (
         <>

src/components/Copyright/index.tsx

@@ -1,10 +1,13 @@
-import { useContext } from "react"
+import { state } from "@/store/config"
-import { ConfigContext } from "src/context/ConfigContext"
+import { useSnapshot } from "valtio"
 
-export const Copyright: React.FC = () => {
+function Copyright() {
-    const { yearStart, yearEnd } = useContext(ConfigContext)
+    const { years } = useSnapshot(state)
+    const year = years.map(String).join("—")
 
     return (
-        <span>©&nbsp;{yearStart}—{yearEnd} Шлиссельбургская детская художественная школа</span>
+        <span>©&nbsp;{year} Шлиссельбургская детская художественная школа</span>
     )
 }
+
+export default Copyright

src/components/Navigation/DesktopNavigation.tsx

@@ -1,6 +1,6 @@
 import { Menu } from "../Menu"
 import { useContext } from "react"
-import { ConfigContext } from "src/context/ConfigContext"
+import { MenuContext } from "@/context/MenuContext"
 import { Box } from "@/ui/Box"
 import { HudozkaLogo } from "../HudozkaLogo"
 import { useDarkTheme } from "@/hooks/useDarkTheme"
@@ -14,7 +14,7 @@ export type DesktopNavigationProps = {
 
 export const DesktopNavigation: React.FC<DesktopNavigationProps> = ({ style }) => {
     const dark = useDarkTheme()
-    const { menu } = useContext(ConfigContext)
+    const menu = useContext(MenuContext)
 
     return (
         <Box wrap gap={"var(--size-s)"} style={style}>

src/components/Navigation/MobileNavigation.tsx

@@ -2,7 +2,7 @@ import { MenuToggle } from "../MenuToggle"
 import { Menu } from "../Menu"
 import { Overlay } from "@/ui/Overlay"
 import { useContext } from "react"
-import { ConfigContext } from "src/context/ConfigContext"
+import { MenuContext } from "@/context/MenuContext"
 import { Box } from "@/ui/Box"
 import { Spacer } from "../Spacer"
 import { useToggle } from "react-use"
@@ -18,7 +18,7 @@ export type MobileNavigationProps = {
 export const MobileNavigation: React.FC<MobileNavigationProps> = ({ style }) => {
     const dark = useDarkTheme()
     const [open, toggleOpen] = useToggle(false)
-    const { menu } = useContext(ConfigContext)
+    const menu = useContext(MenuContext)
 
     return (
         <>

src/components/Navigation/index.tsx

@@ -1,8 +1,4 @@
 import { useMobile } from "src/hooks/useMobile"
-import { useContext } from "react"
-import { ConfigContext } from "src/context/ConfigContext"
-import { useToggle } from "react-use"
-import { useDarkTheme } from "@/hooks/useDarkTheme"
 import { DesktopNavigation } from "./DesktopNavigation"
 import { MobileNavigation } from "./MobileNavigation"
 

src/context/ConfigContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from "react"
-import config from "src/config"
-
-export const ConfigContext = createContext(config)

src/context/MenuContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from "react"
+
+export const menu = [
+    {
+        name: "Школа",
+        href: "/",
+    },
+]
+
+export const MenuContext = createContext(menu)

src/store/config.ts

@@ -1,8 +1,20 @@
+import { proxy } from "valtio"
+
 const currentYear = () => (new Date()).getFullYear()
 
-const config = {
+type Contact = {
-    yearStart: 2012,
+    type: string
-    yearEnd: currentYear(),
+    value: string
+    title: string
+}
+
+type State = {
+    years: [number, number]
+    contacts: Contact[]
+}
+
+export const state = proxy<State>({
+    years: [2012, currentYear()],
     contacts: [
         {
             type: "link",
@@ -35,12 +47,4 @@ const config = {
             title: "Инстаграм",
         },
     ],
-    menu: [
+})
-        {
-            name: "Школа",
-            href: "/",
-        },
-    ],
-}
-
-export default config