diff --git a/package.json b/package.json index 12b3621..9e39dd8 100644 --- 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 index 1538172..c843be6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,9 +5,15 @@ settings: excludeLinksFromLockfile: false dependencies: + '@reduxjs/toolkit': + specifier: ^1.9.7 + version: 1.9.7(react-redux@8.1.3)(react@18.2.0) axios: specifier: ^1.5.1 version: 1.5.1 + bufferutil: + specifier: ^4.0.8 + version: 4.0.8 express: specifier: ^4.18.2 version: 4.18.2 @@ -58,7 +64,10 @@ dependencies: version: 1.69.4 socket.io-client: specifier: ^4.7.2 - version: 4.7.2 + version: 4.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) + utf-8-validate: + specifier: ^6.0.3 + version: 6.0.3 devDependencies: '@babel/eslint-parser': @@ -1778,6 +1787,25 @@ packages: tslib: 2.6.2 dev: true + /@reduxjs/toolkit@1.9.7(react-redux@8.1.3)(react@18.2.0): + resolution: {integrity: sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==} + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.0.2 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + dependencies: + immer: 9.0.21 + react: 18.2.0 + react-redux: 8.1.3(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1) + redux: 4.2.1 + redux-thunk: 2.4.2(redux@4.2.1) + reselect: 4.1.8 + dev: false + /@remix-run/router@1.10.0: resolution: {integrity: sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==} engines: {node: '>=14.0.0'} @@ -2561,6 +2589,14 @@ packages: node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) + /bufferutil@4.0.8: + resolution: {integrity: sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==} + engines: {node: '>=6.14.2'} + requiresBuild: true + dependencies: + node-gyp-build: 4.6.1 + dev: false + /bundle-name@3.0.0: resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==} engines: {node: '>=12'} @@ -2996,13 +3032,13 @@ packages: dev: true optional: true - /engine.io-client@6.5.2: + /engine.io-client@6.5.2(bufferutil@4.0.8)(utf-8-validate@6.0.3): resolution: {integrity: sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==} dependencies: '@socket.io/component-emitter': 3.1.0 debug: 4.3.4 engine.io-parser: 5.2.1 - ws: 8.11.0 + ws: 8.11.0(bufferutil@4.0.8)(utf-8-validate@6.0.3) xmlhttprequest-ssl: 2.0.0 transitivePeerDependencies: - bufferutil @@ -4117,6 +4153,10 @@ packages: engines: {node: '>= 4'} dev: true + /immer@9.0.21: + resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==} + dev: false + /immutable@4.3.4: resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} dev: false @@ -4876,6 +4916,11 @@ packages: - babel-plugin-macros dev: false + /node-gyp-build@4.6.1: + resolution: {integrity: sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ==} + hasBin: true + dev: false + /node-gyp@8.4.1: resolution: {integrity: sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==} engines: {node: '>= 10.12.0'} @@ -5555,6 +5600,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /reselect@4.1.8: + resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -5779,13 +5828,13 @@ packages: engines: {node: '>= 6.0.0', npm: '>= 3.0.0'} dev: true - /socket.io-client@4.7.2: + /socket.io-client@4.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3): resolution: {integrity: sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==} engines: {node: '>=10.0.0'} dependencies: '@socket.io/component-emitter': 3.1.0 debug: 4.3.4 - engine.io-client: 6.5.2 + engine.io-client: 6.5.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) socket.io-parser: 4.2.4 transitivePeerDependencies: - bufferutil @@ -6297,6 +6346,14 @@ packages: react: 18.2.0 dev: false + /utf-8-validate@6.0.3: + resolution: {integrity: sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==} + engines: {node: '>=6.14.2'} + requiresBuild: true + dependencies: + node-gyp-build: 4.6.1 + dev: false + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true @@ -6407,7 +6464,7 @@ packages: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true - /ws@8.11.0: + /ws@8.11.0(bufferutil@4.0.8)(utf-8-validate@6.0.3): resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==} engines: {node: '>=10.0.0'} peerDependencies: @@ -6418,6 +6475,9 @@ packages: optional: true utf-8-validate: optional: true + dependencies: + bufferutil: 4.0.8 + utf-8-validate: 6.0.3 dev: false /xmlhttprequest-ssl@2.0.0: diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a14e64f..226384d 100644 --- 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 ( - {children} + {children} ) } diff --git a/src/app/page.tsx b/src/app/page.tsx index 5facd40..61cfe96 100644 --- 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 ( - - - - - - - - - + <> + +
dispatch(logout() as unknown as Action)}> + Déconnexion +
+ + {/*
+
history.push('/sell?except=goodies')}> + Vente de bouffe +
+
history.push('/sell?only=goodies')}> + Vente de goodies +
+
history.push('/preparation')}> + Préparation générale +
+
history.push('/preparation?only=pizzas')}> + Préparation des pizzas +
+
history.push('/tv')}> + TV +
+
history.push('/items')}> + Gestion des items +
+
*/} + ); }; diff --git a/src/components/loginRouter.tsx b/src/components/loginRouter.tsx index 3318a6f..e990c85 100644 --- 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 ; - return {children}; + return {children}; }; export default LoginRouter; diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index b78652b..357060a 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -2,10 +2,10 @@ 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; @@ -13,10 +13,11 @@ interface PropTypes { 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 index 8680cb5..e69de29 100644 --- 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 ( - <> - -
dispatch(logout())}> - Déconnexion -
- -
-
history.push('/sell?except=goodies')}> - Vente de bouffe -
-
history.push('/sell?only=goodies')}> - Vente de goodies -
-
history.push('/preparation')}> - Préparation générale -
-
history.push('/preparation?only=pizzas')}> - Préparation des pizzas -
-
history.push('/tv')}> - TV -
-
history.push('/items')}> - Gestion des items -
-
- - ); -}; - -export default Index; diff --git a/src/routes/tv.tsx b/src/routes/tv.tsx index 0662e15..69b3ef3 100644 --- a/src/routes/tv.tsx +++ b/src/routes/tv.tsx @@ -3,9 +3,9 @@ import React, { useEffect, useRef, LegacyRef, useState } from 'react'; import './tv.scss'; import { useSelector } from 'react-redux'; -import { history } from '../components/loginRouter'; import { State, Order as OrderType, Status, OrderItem } from '../types'; import Separator from '../components/UI/separator'; +import { useRouter } from 'next/navigation'; interface GroupedCategory { name: string; @@ -74,6 +74,7 @@ const Tv = () => { const readyOrders = orders.filter((order) => order.status === Status.READY); const refs = useRef([null, null, null]); + const router = useRouter(); const speedDown = 2; const speedUp = -5; @@ -109,7 +110,7 @@ const Tv = () => { }); return ( -
history.push('/')}> +
router.push('/')}>
En attente
(refs.current[0] = el)} /> diff --git a/src/store.ts b/src/store.ts deleted file mode 100644 index a4308aa..0000000 --- a/src/store.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createLogger } from 'redux-logger'; -import { applyMiddleware, createStore } from 'redux'; -import thunk from 'redux-thunk'; -import reducers from './reducers'; - -const logger = createLogger({ collapsed: true }); -const store = createStore(reducers, applyMiddleware(thunk, logger)); - -export default store; diff --git a/src/store.tsx b/src/store.tsx new file mode 100644 index 0000000..5a194c5 --- /dev/null +++ b/src/store.tsx @@ -0,0 +1,15 @@ +'use client'; +import { createLogger } from 'redux-logger'; +import thunk from 'redux-thunk'; +import reducers from './reducers'; +import {configureStore, compose, applyMiddleware} from '@reduxjs/toolkit' +import { Provider } from 'react-redux'; + +const logger = createLogger({ collapsed: true }); +const middleware = [thunk, logger]; +const composedEnhancers = compose(applyMiddleware(...middleware), ...[]); +const store = configureStore({reducer: reducers, middleware, enhancers: [composedEnhancers], devTools: process.env.NODE_ENV === 'development',}); + +export default function StoreProvider({ children }: {children: React.ReactNode}) { + return {children} +} diff --git a/src/utils/socket.ts b/src/utils/socket.ts index 064d72a..61e0211 100644 --- a/src/utils/socket.ts +++ b/src/utils/socket.ts @@ -1,4 +1,4 @@ -import { Socket as ClientSocket, connect } from 'socket.io-client'; +import { Socket as ClientSocket, connect, io } from 'socket.io-client'; import { setOrders } from '../reducers/orders'; import { toast } from 'react-toastify'; import { Order, Category, Dispatch } from '../types'; @@ -10,7 +10,7 @@ let socket: ClientSocket | undefined = undefined; export const Socket = { connect: () => async (dispatch: Dispatch) => { if (!socket) { - socket = connect(process.env.REACT_APP_API_URI); + socket = io(process.env.REACT_APP_API_URI); socket.on('connect', () => dispatch(setSocketConnected()));