Apply socket io

client/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "socket.io-client": "^4.0.1",
     "web-vitals": "^1.1.1",
     "worker-loader": "^3.0.8",
     "yup": "^0.32.9"

client/src/App/socket.js

@@ -0,0 +1,3 @@
+import socketIOClient from 'socket.io-client';
+
+export default socketIOClient('/');

client/src/components/BookingForm/index.js

@@ -14,6 +14,7 @@ import moment from 'moment';
 import Image from '../common/Image';
 import './style.css';
 import bookingFormImage from '../../assets/images/undraw_Booking_re_gw4j.svg';
+import socket from '../../App/socket';
 
 const { Title } = Typography;
 
@@ -49,6 +50,10 @@ const BookingForm = () => {
         appointmentTime: moment(appointmentTime).format('HH:mm:ss'),
         complaints,
       });
+      socket.emit(
+        'add appointment',
+        moment(appointmentDate).format('YYYY-MM-DD')
+      );
       setSuccess(true);
       setError(false);
       setLoading(false);

client/src/components/PatientSearchDateTable/index.js

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { useLocation } from 'react-router-dom';
 import { bool } from 'prop-types';
 import { message } from 'antd';
+import socketIOClient from 'socket.io-client';
 import CalendarSearch from '../CalendarSearch';
 import PatientSearchTable from '../PatientSearchTable';
 
@@ -40,6 +41,15 @@ const PatientSearchDateTable = ({ showSearchBar }) => {
       content: `Failed! ${errorMessage ? `${errorMessage}` : errorMessage}`,
     });
   };
+
+  useEffect(() => {
+    const socket = socketIOClient('/');
+    socket.on('updateAppointments', () => {
+      setUpdate((x) => !x);
+    });
+    return () => socket.disconnect();
+  }, []);
+
   useEffect(() => {
     const hideLoadingMessage = message.loading('Action in progress..', 0.5);
     let unmounted = false;