more init

yiqu · Jun 13, 2023 · a1a4a54 · a1a4a54
1 parent 09e14b9
commit a1a4a54
Show file tree

Hide file tree

Showing 29 changed files with 852 additions and 70 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -18,6 +18,7 @@ module.exports = {
     "no-empty-function": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-empty-interface": "warn",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "semi": [
       1,
       "always"

diff --git a/build/assets/About-68be8f13.js b/build/assets/About-68be8f13.js
@@ -0,0 +1 @@
+import{j as t,B as o}from"./index-8a253a68.js";function s(){return t.jsx(o,{children:"About"})}export{s as default};
diff --git a/build/assets/FilmsAll-d55c93d3.js b/build/assets/FilmsAll-d55c93d3.js
@@ -0,0 +1 @@
+import{j as t,S as i}from"./index-8a253a68.js";function r(){return t.jsx(i,{direction:"column",width:"100%",children:"All"})}export{r as default};
diff --git a/build/assets/FilmsLayout-309f4a3e.js b/build/assets/FilmsLayout-309f4a3e.js
@@ -0,0 +1 @@
+import{j as t,O as s}from"./index-8a253a68.js";const r=()=>t.jsx(s,{});export{r as default};
diff --git a/build/assets/NotFound-322c2a9c.js b/build/assets/NotFound-322c2a9c.js
diff --git a/build/assets/index-362b7c65.css b/build/assets/index-362b7c65.css
diff --git a/build/assets/index-621c1156.css b/build/assets/index-621c1156.css
diff --git a/build/assets/index-84f6f557.js b/build/assets/index-84f6f557.js
diff --git a/build/assets/index-8a253a68.js b/build/assets/index-8a253a68.js
diff --git a/build/index.html b/build/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Movie Rank</title>
-    <script type="module" crossorigin src="/assets/index-84f6f557.js"></script>
-    <link rel="stylesheet" href="/assets/index-621c1156.css">
+    <script type="module" crossorigin src="/assets/index-8a253a68.js"></script>
+    <link rel="stylesheet" href="/assets/index-362b7c65.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-moment": "^1.1.2",
     "react-redux": "^8.0.5",

diff --git a/src/404/ErrorPage.tsx b/src/404/ErrorPage.tsx
@@ -0,0 +1,41 @@
+import { Box, Stack, Typography } from "@mui/material";
+
+export interface ErrorPageProp {
+  reason?: string;
+  debug?: any;
+}
+
+export default function ErrorPage({ reason, debug }: ErrorPageProp) {
+
+  return (
+    <Box marginY={ 5 } width="100%">
+      <Stack direction="column" spacing={ 5 } justifyContent="center" alignItems="center">
+        <Typography variant="h5" sx={ {textTransform:'uppercase'} }>
+          An error has occurred!
+        </Typography>
+
+        <Stack direction="column" spacing={ 1 } justifyContent="center" alignItems="center">
+          <Typography variant="body1" fontWeight={ 700 }>
+            REASON
+          </Typography>
+          <Typography variant="body2">
+            { reason }
+          </Typography>
+        </Stack>
+
+        <Stack direction="column" spacing={ 1 } justifyContent="center" alignItems="center">
+          <Typography variant="body1" fontWeight={ 700 }>
+            DEBUG
+          </Typography>
+          <Typography variant="body2" component="div">
+            <pre>
+              <code style={ {display: 'flex', textAlign: 'center'} }>
+                { JSON.stringify(debug) }
+              </code>
+            </pre>
+          </Typography>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/404/NotFound.module.scss b/src/404/NotFound.module.scss
diff --git a/src/404/NotFound.tsx b/src/404/NotFound.tsx
@@ -0,0 +1,34 @@
+import { Stack, Typography } from "@mui/material";
+import Grid from '@mui/material/Unstable_Grid2';
+import { Link } from "react-router-dom";
+import { flexCenter } from "../../src/shared/utils/css.utils";
+// import logo from 'src/static/img/death-star.png';
+
+
+export default function NotFound404Page() {
+
+  return (
+    <Grid container sx={ {height: '100vh'} }>
+      <Grid xs={ 6 } xsOffset={ 3 } sx={ {display: 'flex', justifyContent: 'center', alignItems: 'center'} } >
+        <Stack direction="column" justifyContent="center" alignItems="center">
+          <Typography variant="h2" sx={ {mb: 5} }>
+            404
+          </Typography>
+          <Typography variant="h5" textAlign="center">
+            This is not the page you are looking for.
+          </Typography>
+        </Stack>
+      </Grid>
+      <Grid xs={ 6 } xsOffset={ 3 } sx={ {display: 'flex', justifyContent: 'center', alignItems: 'center'} }>
+        <Stack direction="row" sx={ {...flexCenter} }>
+          {/* <img src={ logo } alt="logo" style={ {height: "8rem"} }></img> */}
+        </Stack>
+      </Grid>
+      <Grid xs={ 6 } xsOffset={ 3 } sx={ {display: 'flex', justifyContent: 'center', alignItems: 'center'} }>
+        <Stack direction="row" sx={ {...flexCenter} }>
+          <Link to={ "/" }>Go back home</Link>
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,24 +1,26 @@
-import { useState } from 'react';
-import './App.css';
+import React, { useContext, useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import routeList from './routes/Routes';
+import { useLocalStorage } from 'react-use';
+import ThemeContext, { ThemeContextProp } from './theme/ThemeContext';
+import { PaletteMode } from '@mui/material';
+import { LS_APP_THEME } from './shared/utils/constants';
+
 
 function App() {
-  const [count, setCount] = useState(0);
+
+  const [theme, _setTheme, _remove] = useLocalStorage<PaletteMode>(LS_APP_THEME, 'light');
+  const themeContext: ThemeContextProp = useContext(ThemeContext);
+
+  useEffect(() => {
+    themeContext.setTheme(theme!);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme]);
 
   return (
-    <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={ () => setCount((count) => count + 1) }>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <React.Fragment>
+      <RouterProvider router={ routeList } />
+    </React.Fragment>
   );
 }
 

diff --git a/src/Globals.d.ts b/src/Globals.d.ts
@@ -0,0 +1,2 @@
+declare module "*.module.css";
+declare module "*.module.scss";
diff --git a/src/about/About.tsx b/src/about/About.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+
+function About() {
+
+  return (
+    <Box>
+      About
+    </Box>
+  );
+}
+
+export default About;
diff --git a/src/core/FilmsLayout.tsx b/src/core/FilmsLayout.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom";
+
+const FilmsLayout = () => {
+
+  return (
+    <Outlet />
+  );
+};
+
+export default FilmsLayout;
diff --git a/src/core/all/FilmsAll.tsx b/src/core/all/FilmsAll.tsx
@@ -0,0 +1,12 @@
+import { Stack } from "@mui/material";
+
+function FilmsAll() {
+
+  return (
+    <Stack direction="column" width="100%">
+      All
+    </Stack>
+  );
+}
+
+export default FilmsAll;
diff --git a/src/core/store/films.api.ts b/src/core/store/films.api.ts
@@ -1,5 +1,5 @@
 import { createApi, fetchBaseQuery, TagDescription } from '@reduxjs/toolkit/query/react';
-import { BASE_FIREBASE_URL } from 'src/shared/api/endpoints';
+import { BASE_FIREBASE_URL } from '../../../src/shared/api/endpoints';
 import { Film, FireResult } from './films.state';
 
 export const filmsPath = "movies.json";

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,21 +1,39 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
 import './index.css';
+import 'animate.css';
+import App from './App';
+import 'react-tooltip/dist/react-tooltip.css';
+
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-
 import '@fontsource/poppins/300.css';
 import '@fontsource/poppins/400.css';
 import '@fontsource/poppins/500.css';
 import '@fontsource/poppins/600.css';
 import '@fontsource/poppins/700.css';
+import { ThemeContextProvider } from './theme/ThemeContext';
+import { Provider } from 'react-redux';
+import { appStore } from './store/appStore';
+// import { PersistGate } from 'redux-persist/integration/react';
 
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
 );
+
+
+root.render(
+  <React.StrictMode>
+    <Provider store={ appStore }>
+      {/* <PersistGate loading={ null } persistor={ persistor }> */}
+      <ThemeContextProvider>
+        <App />
+      </ThemeContextProvider>
+      {/* </PersistGate> */}
+    </Provider>
+  </React.StrictMode>
+
+);
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
@@ -0,0 +1,63 @@
+import { useContext, useMemo } from 'react';
+import { Outlet } from 'react-router-dom';
+import { createTheme, Theme, ThemeProvider } from '@mui/material/styles';
+import { getMyTheme } from '../../src/theme/AppTheme';
+import ThemeContext from '../../src/theme/ThemeContext';
+import Grid from '@mui/material/Unstable_Grid2';
+import { GREY } from '../../src/theme/palette';
+import { Toaster } from 'react-hot-toast';
+import { Tooltip } from 'react-tooltip';
+import TopNav from '../top-nav/TopNav';
+import { Box } from '@mui/material';
+import LayoutWithGutter from '../shared/components/layouts/LayoutWithGutter';
+
+
+const Layout = () => {
+
+  const themeContext = useContext(ThemeContext);
+  const theme: Theme = useMemo(() => {
+    return createTheme(getMyTheme(themeContext.currentTheme));
+  }, [themeContext.currentTheme]);
+
+
+  return (
+    <ThemeProvider theme={ theme }>
+      <Box sx={ { display: 'flex', height: '100%' } }>
+
+        <Box component="main" sx={ { flexGrow: 1, bgcolor:(theme) => theme.palette.mode === 'light' ? GREY[0] : null } }>
+
+          <Grid container sx={ {bgcolor:(theme) => theme.palette.mode === 'light' ? GREY[0] : null } } xs={ 12 }>
+            <LayoutWithGutter size='skinny'>
+              <>
+                <TopNav />
+
+                <Outlet />
+              </>
+            </LayoutWithGutter>
+
+
+          </Grid>
+        </Box>
+        <Toaster
+          position="top-center"
+          containerClassName="toast-container"
+          containerStyle={ {} }
+          toastOptions={ {
+            className: 'swdb-toast',
+            duration: 5000,
+            success: {
+              duration: 8000,
+            },
+            error: {
+              duration: 10000
+            }
+          } }
+        />
+        <Tooltip id="tooltip" place="bottom" />
+      </Box>
+    </ThemeProvider>
+
+  );
+};
+
+export default Layout;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{j as t,B as o}from"./index-8a253a68.js";function s(){return t.jsx(o,{children:"About"})}export{s as default};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{j as t,S as i}from"./index-8a253a68.js";function r(){return t.jsx(i,{direction:"column",width:"100%",children:"All"})}export{r as default};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{j as t,O as s}from"./index-8a253a68.js";const r=()=>t.jsx(s,{});export{r as default};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		declare module "*.module.css";
		declare module "*.module.scss";