Skip to content
Snippets Groups Projects
Commit d9ff5900 authored by Minseo Lee's avatar Minseo Lee
Browse files

fix: user socket does not work

parent 0f69563c
No related branches found
No related tags found
No related merge requests found
......@@ -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", {
......
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} />
......
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={
......
......@@ -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]);
......
......@@ -58,7 +58,10 @@ const AdminPage: GFC = ({ connector }) => {
});
});
return () => adminSocket!.disconnect();
return () => {
adminSocket!.disconnect();
adminSocket = null;
};
}, [connector]);
return (
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment