diff --git a/.eslintrc.js b/.eslintrc.js index 403e49619126927e57d3d28090d4c1b4a36e872f..e840a4e78508b8915a402d7acca43568807827d9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -61,6 +61,7 @@ module.exports = { ], "@typescript-eslint/ban-types": "off", "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-explicit-any": "off", // plugins "import/order": ["error", { diff --git a/src/_app/App.tsx b/src/_app/App.tsx index bdb3332ebf26d0ac4007937e1cd1338a9b37c043..95151441d82f010990e20d410d86982d159239e3 100644 --- a/src/_app/App.tsx +++ b/src/_app/App.tsx @@ -1,16 +1,15 @@ -import { useContext, useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import '../common/css/common.css'; import '../common/css/reset.css'; import { Routes, Route, useNavigate } from "react-router-dom"; import Connector from "../common/instances/Connector"; -import Socket from "../common/instances/Socket"; import BottomSheet from "../components/bottom-sheet/BottomSheet"; import Header from "../components/header/Header"; import Toast from "../components/toast/Toast"; import { BSProvider } from "../contexts/bottom-sheet"; import { CartProvider } from "../contexts/cart"; -import { ToastContext, ToastProvider } from "../contexts/toast"; +import { ToastProvider } from "../contexts/toast"; import AdminPage from "../pages/admin-page/AdminPage"; import CartPage from "../pages/cart-page/CartPage"; import HistoryPage from "../pages/history-page/HistoryPage"; @@ -26,20 +25,15 @@ import S from './App.module.css'; import APP_ROUTE from "./config/route"; import Wrapper from "./modules/wrapper/Wrapper"; -import type { CartItemPostModel } from "../pages/cart-page/config/type"; import type { MutableRefObject } from 'react'; function App() { - const { setToastItem } = useContext(ToastContext); - const [headerName, setHeaderName] = useState(''); const [login, setLogin] = useState(true); const connector: MutableRefObject<Connector|null> = useRef(null); - const socket: MutableRefObject<Socket|null> = useRef(null); - const navigator = useNavigate(); @@ -52,27 +46,16 @@ function App() { navigator(APP_ROUTE.LOGIN); return; } - - socket.current = new Socket(); - - socket.current?.onOrder((d: CartItemPostModel) => { - setToastItem({ - id: '', title: d.shopId, description: d.waitingCount.toString(), goto: '' - }); - }); - - return () => socket.current?.disconnect(); }, [login]); - return ( <BSProvider> <ToastProvider> <CartProvider> <Toast /> <div className={"App"}> - <Wrapper> + <Wrapper connector={connector}> {login && <> <Header headerName={headerName} connector={connector} /> diff --git a/src/_app/modules/wrapper/Wrapper.tsx b/src/_app/modules/wrapper/Wrapper.tsx index e43103f8ea105271a3b748d0771ad25e1450f3ea..89c1ebd6069e0ce2e80b1a55b8d6e8fb88c7712e 100644 --- a/src/_app/modules/wrapper/Wrapper.tsx +++ b/src/_app/modules/wrapper/Wrapper.tsx @@ -1,16 +1,40 @@ -import { useContext } from "react"; +import { useContext, useEffect, useRef } from "react"; +import Socket from "../../../common/instances/Socket"; import { BSContext } from "../../../contexts/bottom-sheet"; +import { ToastContext } from "../../../contexts/toast"; import S from './Wrapper.module.css'; -import type { FC, ReactNode } from "react"; +import type { GFCWithProp } from "../../../common/types/fc"; +import type { CartItemPostModel } from "../../../pages/cart-page/config/type"; +import type { ReactNode , MutableRefObject } from "react"; + interface Props { children: ReactNode; } // NEEDED TO USE CONTEXTS -const Wrapper: FC<Props> = ({ children }) => { +const Wrapper: GFCWithProp<Props> = ({ connector, children }) => { const { bSElement } = useContext(BSContext); + const { setToastItem } = useContext(ToastContext); + const socket: MutableRefObject<Socket|null> = useRef(null); + + useEffect(() => { + if (connector.current?.getIsAdmin()) return; + + if (!socket.current) socket.current = new Socket(); + + socket.current!.onOrder((d: CartItemPostModel) => { + setToastItem({ + id: '', title: d.shopId, description: d.waitingCount.toString(), goto: '' + }); + }); + + return () => { + socket.current?.disconnect(); + socket.current = null; + }; + }, [connector]); return ( <div className={ diff --git a/src/contexts/toast/index.tsx b/src/contexts/toast/index.tsx index 7f63ed4c01847da6f792a3115af10302a43e719c..0a91a83462af9019356097a3f276352976cb2bce 100644 --- a/src/contexts/toast/index.tsx +++ b/src/contexts/toast/index.tsx @@ -13,13 +13,13 @@ const ToastContext = createContext<ToastContextType>({ setToastItem: (d) => { return d; }, }); -interface pProps { children: ReactNode; } -const ToastProvider: FC<pProps> = ({ children }) => { +interface Props { children: ReactNode; } +const ToastProvider: FC<Props> = ({ children }) => { const [item, setItem] = useState<ToastContextType['toastItem']>(null); useEffect(() => { - // console.log('GLOBAL ToastProvider: ', item); + console.log('GLOBAL ToastProvider: ', item); }, [item]); diff --git a/src/pages/admin-page/AdminPage.tsx b/src/pages/admin-page/AdminPage.tsx index d9c6ff43a8d6518ac59035d9421c644b0035ec2e..a495a3e3c3c3814e0c75346b2d555f911c4d09a6 100644 --- a/src/pages/admin-page/AdminPage.tsx +++ b/src/pages/admin-page/AdminPage.tsx @@ -58,7 +58,10 @@ const AdminPage: GFC = ({ connector }) => { }); }); - return () => adminSocket!.disconnect(); + return () => { + adminSocket!.disconnect(); + adminSocket = null; + }; }, [connector]); return (