fix: made page show properly and removed errors in the console

ungdev · Oct 24, 2023 · 76f1e49 · 76f1e49
1 parent fd0d983
commit 76f1e49
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,9 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.7",
     "axios": "^1.5.1",
+    "bufferutil": "^4.0.8",
     "express": "^4.18.2",
     "history": "^5.3.0",
     "moment": "^2.29.4",
@@ -29,7 +31,8 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "sass": "^1.69.4",
-    "socket.io-client": "^4.7.2"
+    "socket.io-client": "^4.7.2",
+    "utf-8-validate": "^6.0.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.15",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,5 @@
+import StoreProvider from "@/store"
+
 export const metadata = {
   title: 'Next.js',
   description: 'Generated by Next.js',
@@ -10,7 +12,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body><StoreProvider>{children}</StoreProvider></body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,34 +1,47 @@
 'use client'
 import React from 'react';
-import { Provider } from 'react-redux';
 import 'react-toastify/dist/ReactToastify.css';
 import 'moment/locale/fr';
 import './page.scss';
-
-import Index from '../routes';
-import Sell from '../routes/sell';
-
-import store from '../store';
-import Tv from '../routes/tv';
-import Preparation from '../routes/preparation';
-import Items from '../routes/items';
-import LoginRouter from '../components/loginRouter';
-import { Route } from 'react-router';
 import moment from 'moment';
+import { useDispatch } from 'react-redux';
+import Navbar from '@/components/navbar';
+import FontAwesome from 'react-fontawesome';
+import { logout } from '@/reducers/login';
+import { Action } from 'redux';
 
 moment.locale('fr');
 
 const App = () => {
+  const dispatch = useDispatch();
   return (
-    <Provider store={store}>
-      <LoginRouter>
-        <Route exact path="/" Component={Index} />
-        <Route path="/sell" Component={Sell} />
-        <Route path="/preparation" Component={Preparation} />
-        <Route path="/tv" Component={Tv} />
-        <Route path="/items" Component={Items} />
-      </LoginRouter>
-    </Provider>
+    <>
+      <Navbar>
+        <div className="logout" onClick={() => dispatch(logout() as unknown as Action)}>
+          <FontAwesome name="sign-out-alt" /> Déconnexion
+        </div>
+      </Navbar>
+      {/* <div id="index">
+        <div onClick={() => history.push('/sell?except=goodies')}>
+          <FontAwesome name="hamburger" /> Vente de bouffe
+        </div>
+        <div onClick={() => history.push('/sell?only=goodies')}>
+          <FontAwesome name="tshirt" /> Vente de goodies
+        </div>
+        <div onClick={() => history.push('/preparation')}>
+          <FontAwesome name="check" /> Préparation générale
+        </div>
+        <div onClick={() => history.push('/preparation?only=pizzas')}>
+          <FontAwesome name="pizza-slice" /> Préparation des pizzas
+        </div>
+        <div onClick={() => history.push('/tv')}>
+          <FontAwesome name="tv" /> TV
+        </div>
+        <div onClick={() => history.push('/items')}>
+          <FontAwesome name="receipt" /> Gestion des items
+        </div>
+      </div> */}
+    </>
   );
 };
 

diff --git a/src/components/loginRouter.tsx b/src/components/loginRouter.tsx
@@ -1,20 +1,17 @@
 import React, { ReactNode, useEffect } from 'react';
-import { Router } from 'react-router';
 import { useSelector, useDispatch } from 'react-redux';
 import Login from '../routes/login';
-import { createBrowserHistory } from 'history';
 import { autoLogin } from '../reducers/login';
 import { State } from '../types';
 import Loader from './pageLoader';
-
-export const history = createBrowserHistory();
+import { Action } from 'redux';
 
 const LoginRouter = ({ children }: { children: ReactNode }) => {
   const dispatch = useDispatch();
   const state = useSelector((state: State) => state);
 
   useEffect(() => {
-    dispatch(autoLogin());
+    dispatch(autoLogin() as unknown as Action);
   }, []); // eslint-disable-line
 
   if (!state.server.socketConnected) {
@@ -33,7 +30,7 @@ const LoginRouter = ({ children }: { children: ReactNode }) => {
 
   if (!state.login.token) return <Login />;
 
-  return <Router history={history}>{children}</Router>;
+  return {children};
 };
 
 export default LoginRouter;
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -2,21 +2,22 @@ import React, { useEffect, useState } from 'react';
 import FontAwesome from 'react-fontawesome';
 import moment from 'moment';
 
-import { history } from '../components/loginRouter';
 import './navbar.scss';
 import { State } from '../types';
 import { useSelector } from 'react-redux';
+import { useRouter } from 'next/navigation';
 
 interface PropTypes {
   back?: string;
   onBack?: () => void;
   children?: React.ReactNode;
 }
 
-const Navbar = ({ back, onBack, children }: PropTypes) => {
+const Navbar = ({ back = null, onBack = null, children = null }: PropTypes) => {
   const [time, setTime] = useState(moment().format('H[h]mm'));
   const name = useSelector((state: State) => state.login.name);
   const serverOnline = useSelector((state: State) => state.server.internetConnected);
+  const router = useRouter();
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -32,7 +33,7 @@ const Navbar = ({ back, onBack, children }: PropTypes) => {
     }
 
     if (back) {
-      history.push(back);
+      router.push(back);
     }
   };
 
@@ -54,10 +55,4 @@ const Navbar = ({ back, onBack, children }: PropTypes) => {
   );
 };
 
-Navbar.defaultProps = {
-  back: null,
-  onBack: null,
-  children: null,
-};
-
 export default Navbar;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,44 +0,0 @@
-import React from 'react';
-
-import './index.scss';
-import Navbar from '../components/navbar';
-import FontAwesome from 'react-fontawesome';
-import { useDispatch } from 'react-redux';
-import { logout } from '../reducers/login';
-
-import { history } from '../components/loginRouter';
-
-const Index = () => {
-  const dispatch = useDispatch();
-  return (
-    <>
-      <Navbar>
-        <div className="logout" onClick={() => dispatch(logout())}>
-          <FontAwesome name="sign-out-alt" /> Déconnexion
-        </div>
-      </Navbar>
-      <div id="index">
-        <div onClick={() => history.push('/sell?except=goodies')}>
-          <FontAwesome name="hamburger" /> Vente de bouffe
-        </div>
-        <div onClick={() => history.push('/sell?only=goodies')}>
-          <FontAwesome name="tshirt" /> Vente de goodies
-        </div>
-        <div onClick={() => history.push('/preparation')}>
-          <FontAwesome name="check" /> Préparation générale
-        </div>
-        <div onClick={() => history.push('/preparation?only=pizzas')}>
-          <FontAwesome name="pizza-slice" /> Préparation des pizzas
-        </div>
-        <div onClick={() => history.push('/tv')}>
-          <FontAwesome name="tv" /> TV
-        </div>
-        <div onClick={() => history.push('/items')}>
-          <FontAwesome name="receipt" /> Gestion des items
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Index;