fix: user socket does not work

.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", {

src/_app/App.tsx

-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} />

src/_app/modules/wrapper/Wrapper.tsx

-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={

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]);
 	
 	

src/pages/admin-page/AdminPage.tsx

@@ -58,7 +58,10 @@ const AdminPage: GFC = ({ connector }) => {
             });
         });
         
-        return () => adminSocket!.disconnect();
+        return () => {
+            adminSocket!.disconnect();
+            adminSocket = null;
+        };
     }, [connector]);
     
     return (