created stores for config pages and page

BlacketPS · Nov 9, 2023 · c8a361e · c8a361e
1 parent 200f392
commit c8a361e
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 44 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,22 +1,29 @@
-import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { Routes, Route, BrowserRouter, Navigate } from "react-router-dom";
+import { ConfigProvider } from "@stores/config";
+import { PageProvider } from "@stores/page";
 import ErrorBoundary from "./ErrorBoundary";
 import Background from "@components/Background";
 import Header from "@components/Header";
-import Body from "@components/Body";
 import Footer from "@components/Footer";
+import Body from "@components/Body";
 import pages from "@pages";
 
 export default function App() {
-    return <BrowserRouter basename="/">
-        <ErrorBoundary fallback="/">
-            <Background />
-            <Header />
-            <Body>
-                <Routes>
-                    <Route path="/" element={<pages.Home />} />
-                </Routes>
-            </Body>
-            <Footer />
-        </ErrorBoundary >
-    </BrowserRouter>
+    return <ConfigProvider>
+        <PageProvider>
+            <BrowserRouter basename="/">
+                <ErrorBoundary fallback="/">
+                    <Background />
+                    <Header />
+                    <Body>
+                        <Routes>
+                            <Route path="*" element={<Navigate to="/" />} />
+                            <Route path="/" element={<pages.Page />} />
+                        </Routes>
+                    </Body>
+                    <Footer />
+                </ErrorBoundary >
+            </BrowserRouter>
+        </PageProvider>
+    </ConfigProvider>
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,33 +1,23 @@
-import { useState } from "react";
+import { useContext } from "react";
+import { PageContext } from "@stores/page";
+import { pages } from "@stores/pages";
 import styles from "@styles";
 
-const pages = 4;
-
 export default function Footer() {
-    const [page, setPage] = useState(1);
-
-    const pageHandler = (direction) => {
-        if (typeof direction !== "string") throw new Error("direction must be typeof string");
+    const { page, setPage } = useContext(PageContext);
 
-        switch (direction) {
-            case "backwards":
-                if (page - 1 < 1) throw new Error("page cannot be less than 1");
-                else setPage(page - 1);
-                break;
-            case "forwards":
-                if (page + 1 > pages) throw new Error(`page cannot be greater than ${pages}`);
-                else setPage(page + 1);
-                break;
-            default:
-                throw new Error("direction must be either \"backwards\" or \"forwards\"");
-        }
-    }
+    const forwards = () => setPage(page + 1);
+    const backwards = () => setPage(page - 1);
 
     return <div className={styles.all.footer}>
-        <div aria-disabled={page === 1} className={styles.all.footerLeft} onClick={pageHandler.bind(null, "backwards")}>Back</div>
+        <div aria-disabled={page < 2} className={styles.all.footerLeft} onClick={() => {
+            if (page > 1) backwards();
+        }}>Back</div>
 
         <div className={styles.all.footerCenter}>{page} / {pages}</div>
 
-        <div aria-disabled={page === pages} className={styles.all.footerRight} onClick={pageHandler.bind(null, "forwards")}>Next</div>
+        <div aria-disabled={page === pages} className={styles.all.footerRight} onClick={() => {
+            if (page < pages) forwards();
+        }}>Next</div>
     </div>
 }
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
diff --git a/src/pages/Page/index.jsx b/src/pages/Page/index.jsx
@@ -0,0 +1,8 @@
+import { useContext } from "react"
+import { PageContext } from "@stores/page"
+
+export default function Page() {
+    const { page } = useContext(PageContext);
+
+    return <h1>Page {page}</h1>
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,7 +1,7 @@
 import Error from "./Error";
-import Home from "./Home";
+import Page from "./Page";
 
 export default {
     Error,
-    Home
+    Page
 }
diff --git a/src/stores/config.jsx b/src/stores/config.jsx
@@ -0,0 +1,13 @@
+import { createContext, useEffect, useState } from "react";
+
+export const ConfigContext = createContext();
+
+export function ConfigProvider({ children }) {
+    const [config, setConfig] = useState(JSON.parse(localStorage.getItem('config')) || {});
+
+    useEffect(() => localStorage.setItem('config', JSON.stringify(config)), [config]);
+
+    return <ConfigContext.Provider value={{ config, setConfig }}>
+        {children}
+    </ConfigContext.Provider>
+}
diff --git a/src/stores/configuration.js b/src/stores/configuration.js
diff --git a/src/stores/page.jsx b/src/stores/page.jsx
@@ -0,0 +1,13 @@
+import { createContext, useState, useEffect } from "react";
+
+export const PageContext = createContext();
+
+export function PageProvider({ children }) {
+    const [page, setPage] = useState(parseInt(localStorage.getItem("page")) || 1);
+
+    useEffect(() => localStorage.setItem("page", page), [page]);
+
+    return <PageContext.Provider value={{ page, setPage }}>
+        {children}
+    </PageContext.Provider>
+}
diff --git a/src/stores/pages.js b/src/stores/pages.js
@@ -0,0 +1,3 @@
+const pages = 6;
+
+export { pages };