[v0.1.6] 체크시 소리 , 다른페이지에서도 소켓 이벤트 수신

[v0.1.6] 체크시 소리 , 다른페이지에서도 소켓 이벤트 수신

src/App.js

@@ -2,12 +2,21 @@ import React from 'react';
 import MainLayout from './components/MainLayout/MainLayout';
 import CheckPage from './components/Tickets/CheckPage/CheckPage';
 import { Routes, Route, useLocation } from 'react-router-dom';
+import { SocketProvider } from './contexts/socketProvider';
 function App({ match }) {
   // const location = useLocation();
   return (
     <>
       <Routes>
-        <Route path="*" element={<MainLayout />} />
+        <Route
+          path="*"
+          element={
+            <SocketProvider>
+              <MainLayout />{' '}
+            </SocketProvider>
+          }
+        />
+
         <Route exact path="/tickets/check" element={<CheckPage />} />
       </Routes>
     </>

src/components/Tickets/CheckPage/CheckPage.js

@@ -14,13 +14,16 @@ import { message } from 'antd';
 function CheckPage() {
   const dispatch = useDispatch();
   const location = useLocation();
+  const sucAudio = new Audio(process.env.PUBLIC_URL + '/successSound.mp3');
+  const errAudio = new Audio(process.env.PUBLIC_URL + '/errorSound.mp3');
 
   const { data, pending, count } = useSelector(state => state.checkPage);
 
   useEffect(() => {
     if (!history.location.state) {
       history.push('ticket/checkenter');
     }
+
     // console.log('history.location.state:', history.location.state); //result: '{date: 'OB', cam: 'environment'}'
     // console.log('location:', location); //result: '{pathname: '/tickets/check', search: '', hash: '', state: {…}, key: 'xf82gqmb'}'
   }, [location]);
@@ -30,21 +33,18 @@ function CheckPage() {
       checkPage(
         { uuid: result ? result.text : null },
         { date: history.location.state.date },
-        message
+        message,
+        { sucAudio },
+        { errAudio }
       )
     );
 
     dispatch(checkCount());
     // console.log('count:', count);
   };
 
-  // const handleClick = () => {
-  //   console.log('cam: ', history.location.state.cam);
-  // };
-
   return (
     <>
-      {/* <button onClick={handleClick}>dddd</button> // history.location.state.cam 확인용 버튼 */}
       <QrReader
         delay={500}
         onResult={handleScan}

src/components/Tickets/EnterPage/EnterList.js

@@ -10,6 +10,7 @@ const ContainerHeight = 800;
 
 function EnterList() {
   const { ticketList } = useSelector(state => state.enterPage);
+  const reverse = [...ticketList].reverse();
 
   const onScroll = e => {
     if (
@@ -31,7 +32,7 @@ function EnterList() {
           <Col span={16}>
             <List>
               <VirtualList
-                data={ticketList}
+                data={reverse}
                 height={ContainerHeight}
                 itemHeight={47}
                 itemKey="email"

src/components/Tickets/EnterPage/EnterPage.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import EnterList from './EnterList';
-import SocketConnect from './SocketConnect';
 
 function EnterPage() {
   return (
     <div>
-      <SocketConnect />
       <EnterList />
     </div>
   );

src/components/Tickets/EnterPage/RecentEnter.js

@@ -7,14 +7,6 @@ import { Card, Tag, Space } from 'antd';
 import moment from 'moment';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components';
-
-styled(Card)`
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  position: relative;
-`;
 
 function RecentEnter() {
   const { enterData } = useSelector(state => state.enterPage);

src/contexts/socketContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SocketContext = createContext({});
+
+export default SocketContext;

src/contexts/socketProvider.js

@@ -0,0 +1,62 @@
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { notification } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { io } from 'socket.io-client';
+import { enterPage } from '../state/actions-creators/enterPage';
+import SocketContext from './socketContext';
+
+const SocketProvider = ({ children }) => {
+  const dispatch = useDispatch();
+  const { accessToken } = useSelector(state => state.auth);
+  const placement = 'bottomRight';
+
+  const socket = io('https://api.gosrock.band/socket/admin', {
+    auth: {
+      token: accessToken
+    }
+  });
+
+  useEffect(() => {
+    socket.on('connect', data => {
+      console.log('connection server', data);
+    });
+    socket.on('enter', data => {
+      dispatch(
+        enterPage({
+          data: data,
+          enterTime: new Date()
+        })
+      );
+
+      notification.open({
+        message: `[${moment(new Date())
+          .utc(true)
+          .format('HH:mm')}] 입장 알림 🔔 `,
+        description: `${data.name}, ${data.phoneNumber}`,
+        placement,
+        icon:
+          data.success === true ? (
+            <CheckCircleOutlined style={{ color: '#89cc8a' }} />
+          ) : (
+            <CloseCircleOutlined style={{ color: '#cc8989' }} />
+          )
+      });
+    });
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  socket.on('connect_error', err => {
+    console.log(err instanceof Error); // true
+    console.log(err.message); // not authorized
+    console.log(err.data); // { content: "Please retry later" }
+  });
+
+  return <SocketContext.Provider>{children}</SocketContext.Provider>;
+};
+
+export { SocketProvider };

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
+
 // pages
 import {
   Routes,

src/state/actions-creators/CheckPage.js

@@ -8,7 +8,7 @@ import {
 import { store } from '../storeSetting.js';
 
 export const checkPage =
-  ({ uuid }, { date }, message, callback) =>
+  ({ uuid }, { date }, message, { sucAudio }, { errAudio }, callback) =>
   async dispatch => {
     const { checkPage } = store.getState();
     // console.log();
@@ -25,6 +25,7 @@ export const checkPage =
         console.log('서버 응답?', response);
         console.log('uuid, date: ', uuid, ',,,,', date);
 
+        sucAudio.play();
         message.success('조회에 성공했습니다. 입장이 가능합니다.');
         dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' });
 
@@ -36,6 +37,8 @@ export const checkPage =
         // console.log('ERROR: ', error.response.data.error.message);
         const ERROR = e.response.data.error.message;
         console.log('ERROR:', ERROR);
+
+        errAudio.play();
         message.warn(`${ERROR}`);
         dispatch({ type: CHECKING_ERROR, payload: e });
       }