#28 Added UI for patient to see upcoming apppointments

src/components/dashboard/PatientView/PatientAppointments.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState, useContext } from 'react';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import CalendarPicker from '@mui/lab/CalendarPicker';
+import { Typography, Box, Paper, Button, useTheme, useMediaQuery, Modal } from '@mui/material';
+import { doc, DocumentData, onSnapshot } from 'firebase/firestore';
+import { UserContext } from '../../../context/UserContext';
+import { firestore } from '../../../config/firebase_config';
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '1px solid #ff003d',
+  boxShadow: 24,
+  pt: 2,
+  px: 4,
+  pb: 3,
+  p: 4,
+  borderRadius: 4,
+};
+
+export default function SubComponentsPickers() {
+  const theme = useTheme();
+  const midSize = useMediaQuery(theme.breakpoints.down(1190));
+  const [date, setDate] = React.useState<Date | null>(new Date());
+  const { state, update } = React.useContext(UserContext);
+  const [user, setUser] = useState<DocumentData>();
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    const unsubscribe = onSnapshot(doc(firestore, 'users', `${state.id}`), (docu) => {
+      const data = docu.data();
+      if (data) {
+        setUser(data);
+        const appointmentTime = data?.appointments[data.appointments.length - 1].selectedDate;
+        setDate(appointmentTime.toDate());
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div style={{ overflowY: 'auto', minWidth: '365px' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Typography variant="h5" mt={3} ml={3}>
+          See Your Upcoming Appointment
+        </Typography>
+        <Typography variant="subtitle1" mt={1} ml={3}>
+          Our appointments are being done by telephone!
+        </Typography>
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: midSize ? 'column-reverse' : 'row',
+          marginTop: midSize ? '1rem' : '0' }}
+        >
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <CalendarPicker date={date} onChange={() => date} />
+          </LocalizationProvider>
+          <Box>
+            <Paper sx={{ backgroundColor: '#434ce6',
+              minWidth: '160px',
+              minHeight: '170px',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+            >
+              <Typography variant="h3" mt={2} ml={2} sx={{ color: '#ffff' }}>
+                {date !== null && date.getDate() < 10 && ('0')}
+                {date?.getDate()}
+              </Typography>
+              <Typography variant="subtitle1" ml={2} sx={{ color: '#ffff' }}>
+                {date?.toLocaleString('default', { month: 'long' })}
+                {' '}
+                {date?.getFullYear()}
+              </Typography>
+              <Typography variant="h5" mt={1} ml={2} sx={{ color: '#ffff' }}>
+                {date?.getHours()}
+                :
+                {date !== null && date.getMinutes() < 10 && ('0')}
+                {date?.getMinutes()}
+                {' '}
+                AM
+              </Typography>
+            </Paper>
+            {!midSize && (
+              <Box mt={2}>
+                <Button onClick={handleOpen} type="submit" variant="contained" color="secondary">
+                  Cancel Appointment
+                </Button>
+              </Box>
+            )}
+          </Box>
+        </Box>
+        {midSize && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button onClick={handleOpen} type="submit" variant="contained" color="secondary">
+              Cancel Appointment
+            </Button>
+          </Box>
+        )}
+      </Box>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-modal-description"
+      >
+        <Box sx={{ ...style, width: 300 }}>
+          <Typography variant="h6">Are you sure you want to cancel your appointment?</Typography>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Box mt={2}>
+              <Button
+                onClick={handleOpen}
+                type="submit"
+                variant="contained"
+                color="secondary"
+                style={{ width: '200px' }}
+              >
+                Keep Appointment
+              </Button>
+            </Box>
+            <Box mt={2}>
+              <Button onClick={handleOpen} type="submit" variant="contained" color="warning" style={{ width: '200px' }}>
+                Cancel Appointment
+              </Button>
+            </Box>
+          </div>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

src/components/dashboard/PatientView/PatientView.tsx

@@ -28,6 +28,7 @@ import { firestore } from '../../../config/firebase_config';
 import PatientDashboard from './PatientDashboard';
 import PatientMedicalConnect from './PatientMedicalConnect';
 import BookingSystem from '../../../pages/booking/bookingSystem';
+import PatientAppointments from './PatientAppointments';
 
 const style = {
   position: 'absolute' as const,
@@ -40,17 +41,34 @@ const style = {
   p: 4,
 };
 
+const modalStyle = {
+  borderRadius: '8px',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  display: 'flex',
+  flexDirection: 'column',
+
+  bgcolor: 'background.paper',
+  border: 'none',
+  boxShadow: 24,
+  p: 4,
+};
+
 function PatientView() {
   const [contentId, setContentId] = useState<number>(0);
   const navigate = useNavigate();
   const [testOpen, setTestOpen] = useState(false);
   const [testROpen, setTestROpen] = useState(false);
   const [bookingOpen, setBookingOpen] = useState(false);
+  const [appointmentsViewOpen, setAppointmentsViewOpen] = useState(false);
   const handleTestOpen = () => setTestOpen(true);
   const handleTestClose = () => setTestOpen(false);
   const handleTestROpen = () => setTestROpen(true);
   const handleTestRClose = () => setTestROpen(false);
   const handleBookingClose = () => setBookingOpen(false);
+  const handleAppointmentsViewClose = () => setAppointmentsViewOpen(false);
   const { state } = useContext(UserContext);
   const [user, setUser] = useState<DocumentData>();
 
@@ -112,6 +130,17 @@ function PatientView() {
               />
             </ListItem>
           )}
+          {user?.assignedDoctor && (
+          <ListItem button key="Appointments">
+            <ListItemIcon>
+              <EventIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Upcoming Appointment"
+              onClick={() => setAppointmentsViewOpen(true)}
+            />
+          </ListItem>
+          )}
         </List>
         <Divider />
       </SideBar>
@@ -145,6 +174,14 @@ function PatientView() {
           <BookingSystem handleBookingClose={handleBookingClose} />
         </Box>
       </Modal>
+      <Modal
+        open={appointmentsViewOpen}
+        onClose={handleAppointmentsViewClose}
+      >
+        <Box sx={modalStyle}>
+          <PatientAppointments />
+        </Box>
+      </Modal>
     </Box>
   );
 }