feat(client): Styled Dialog Component (#852)

* feat(client): added dialog for when user wants to log out

* feat(client): creating component for dialogs

* style(client): removing unused imports

client/src/components/StyledDialog.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { styled } from '@mui/system';
+
+const ContentContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  padding-top: 10px;
+`;
+
+const StyledDialogTitleFont = styled('div')`
+  font-size: 18px;
+  font-weight: 500;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+  padding-bottom: 20px;
+`;
+
+const StyledDialogButtons = styled(DialogActions)`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 12px;
+  padding-bottom: 20px;
+  padding-right: 24px;
+`;
+
+export const StyledDialogTitle = styled(DialogTitle)`
+  display: flex;
+  flex-direction: row;
+  padding: 8px 12px 8px 24px;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const CustomCloseIconButton = styled(IconButton)`
+  width: 40px; 
+  height: 40px; 
+  border-radius: 8px;
+`;
+
+// Props definition
+interface StyledDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  content: string;
+  confirmButtonText: string;
+  cancelButtonText?: string;
+  disableConfirm?: boolean;
+  confirmButtonId?: string;
+}
+
+const StyledDialog: React.FC<StyledDialogProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  content,
+  confirmButtonText,
+  cancelButtonText = 'Cancel',
+  disableConfirm = false,
+  confirmButtonId,
+}) => (
+  <Dialog maxWidth="xs" onClose={onClose} open={open}>
+    <ContentContainer>
+      <StyledDialogTitle>
+        <StyledDialogTitleFont>{title}</StyledDialogTitleFont>
+        <CustomCloseIconButton onClick={onClose}>
+          <CloseIcon />
+        </CustomCloseIconButton>
+      </StyledDialogTitle>
+      <StyledDialogContent>{content}</StyledDialogContent>
+    </ContentContainer>
+    <StyledDialogButtons>
+      <Button onClick={onClose} variant="outlined">
+        {cancelButtonText}
+      </Button>
+      <Button id={confirmButtonId} onClick={onConfirm} variant="contained" disabled={disableConfirm}>
+        {confirmButtonText}
+      </Button>
+    </StyledDialogButtons>
+  </Dialog>
+);
+
+export default StyledDialog;

client/src/components/controls/History.tsx

@@ -21,6 +21,7 @@ import {
   extractHistoryInfo,
   TimetableActions,
 } from '../../utils/timetableHelpers';
+import StyledDialog from '../StyledDialog';
 
 // Two actions are created when the page first loads
 // One, when selectedClasses is initialised, and two, when createdEvents is initialised
@@ -290,40 +291,20 @@ const History: React.FC = () => {
   return (
     <>
       {/* Clear timetable(s) Dialog  */}
-      <Dialog maxWidth="xs" onClose={() => setClearOpen(false)} open={clearOpen}>
-        <StyledTitleContainer>
-          <StyledDialogTitle>
-            <StyledDialogTitleFont>Confirm Clear</StyledDialogTitleFont>
-            <StyledCloseIcon
-              onClick={() => {
-                setClearOpen(false);
-              }}
-            />
-          </StyledDialogTitle>
-          <StyledDialogContent>Are you sure you want to clear all timetables?</StyledDialogContent>
-        </StyledTitleContainer>
-        <StyledDialogButtons>
-          <Button
-            onClick={() => {
-              setClearOpen(false);
-            }}
-            variant="outlined"
-          >
-            CANCEL
-          </Button>
-          <Button
-            disabled={disableReset.all}
-            id="confirm-delete-button"
-            onClick={() => {
-              clearAll();
-              setClearOpen(false);
-            }}
-            variant="contained"
-          >
-            CLEAR
-          </Button>
-        </StyledDialogButtons>
-      </Dialog>
+      <StyledDialog
+        open={clearOpen}
+        onClose={() => setClearOpen(false)}
+        onConfirm={() => {
+          clearAll();
+          setClearOpen(false);
+        }}
+        title="Confirm Clear"
+        content="Are you sure you want to clear all timetables?"
+        confirmButtonText="Clear"
+        cancelButtonText="Cancel"
+        disableConfirm={disableReset.all}
+        confirmButtonId="confirm-delete-button"
+      />
       <Tooltip title={clearTooltip}>
         <IconButton disabled={disableReset.all} color="inherit" onClick={() => setClearOpen(true)} size="large">
           <Delete />

client/src/components/sidebar/UserAccount.tsx

@@ -1,9 +1,9 @@
+import React, { useEffect, useState } from 'react';
 import { AccountCircle, LoginRounded, LogoutRounded } from '@mui/icons-material';
 import { Button, IconButton, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
-import React, { useEffect, useState } from 'react';
-
 import { API_URL } from '../../api/config';
+import StyledDialog from '../StyledDialog';
 
 interface UserAccountProps {
   collapsed: boolean;
@@ -42,13 +42,15 @@ const StyledAccountIcon = styled(AccountCircle)`
   height: 28px;
 `;
 
-interface User { 
+interface User {
   zid: string;
-};
+}
 const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
   const [login, setLogin] = useState(false);
-  const [windowLocation, setWindowLocation] = useState("");
-  const [user, setUser] = useState<User>({zid: ""});
+  const [windowLocation, setWindowLocation] = useState('');
+  const [user, setUser] = useState<User>({ zid: '' });
+  const [logoutDialog, setLogoutDialog] = useState(false);
+
   useEffect(() => {
     async function runAsync() {
       try {
@@ -59,9 +61,9 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
         // const userResponse = await response.text();
         if (userResponse !== '') {
           setLogin(true);
-          setUser({zid: JSON.parse(userResponse)});
+          setUser({ zid: JSON.parse(userResponse) });
         } else {
-          setUser({zid: ""});
+          setUser({ zid: '' });
           setLogin(false);
         }
       } catch (error) {
@@ -81,7 +83,6 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
       console.log(error);
     }
     // window.location.replace(`${API_URL.server}/auth/login`);
-
   };
   const logoutCall = async () => {
     try {
@@ -92,13 +93,13 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
       console.log(error);
     }
     window.location.replace(windowLocation);
-    setUser({zid: ""});
+    setUser({ zid: '' });
   };
   // https://stackoverflow.com/a/32108184/1098564
   // const isEmpty = (obj: Object) => {
   //   return Object.keys(obj).length === 0 && obj.constructor === Object;
   // };
-  
+
   if (!login) {
     return collapsed ? (
       <Tooltip title="Log in" placement="right">
@@ -112,29 +113,42 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
   }
 
   return (
-    <UserAuth>
-      {collapsed ? (
-        <Tooltip title="Log out" placement="right">
-          <StyledIconButton onClick={logoutCall}>
-            <LogoutRounded />
-          </StyledIconButton>
-        </Tooltip>
-      ) : (
-        <>
-          <UserInfo>
-            <StyledAccountIcon />
-            {/* TODO: handle user's name */}
-            <p>{user.zid}</p>
-          </UserInfo>
+    <>
+      <StyledDialog
+        open={logoutDialog}
+        onClose={() => setLogoutDialog(false)}
+        onConfirm={() => {
+          logoutCall();
+          setLogoutDialog(false);
+        }}
+        title='Confirm Log out'
+        content='Are you sure you want to log out?'
+        confirmButtonText='Log out'
+      />
+      <UserAuth>
+        {collapsed ? (
           <Tooltip title="Log out" placement="right">
-            {/* TODO: error handling for when logging out */}
-            <StyledIconButton color="inherit" onClick={logoutCall}>
+            <StyledIconButton onClick={() => setLogoutDialog(true)}>
               <LogoutRounded />
             </StyledIconButton>
           </Tooltip>
-        </>
-      )}
-    </UserAuth>
+        ) : (
+          <>
+            <UserInfo>
+              <StyledAccountIcon />
+              {/* TODO: handle user's name */}
+              <p>{user.zid}</p>
+            </UserInfo>
+            <Tooltip title="Log out" placement="right">
+              {/* TODO: error handling for when logging out */}
+              <StyledIconButton color="inherit" onClick={logoutCall}>
+                <LogoutRounded />
+              </StyledIconButton>
+            </Tooltip>
+          </>
+        )}
+      </UserAuth>
+    </>
   );
 };
 

client/src/components/timetableTabs/TimetableTabContextMenu.tsx

@@ -19,18 +19,16 @@ import { CourseContext } from '../../context/CourseContext';
 import { CourseData, CreatedEvents, SelectedClasses, TimetableData } from '../../interfaces/Periods';
 import { TimetableTabContextMenuProps } from '../../interfaces/PropTypes';
 import {
-  StyledCloseIcon,
-  StyledDialogButtons,
   StyledDialogContent,
   StyledDialogTitle,
-  StyledDialogTitleFont,
   StyledTitleContainer,
   StyledTopIcons,
 } from '../../styles/ControlStyles';
 import { ExecuteButton, RedDeleteIcon, RedListItemText, StyledMenu } from '../../styles/CustomEventStyles';
 import { StyledSnackbar } from '../../styles/TimetableTabStyles';
 import storage from '../../utils/storage';
 import { duplicateClasses, duplicateEvents } from '../../utils/timetableHelpers';
+import StyledDialog from '../StyledDialog';
 
 const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ anchorElement, setAnchorElement }) => {
   const TIMETABLE_LIMIT = 13;
@@ -405,30 +403,17 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
       </Dialog>
 
       {/* Delete timetable Dialog  */}
-      <Dialog maxWidth="xs" open={deleteOpen} onClose={handleMenuClose}>
-        <StyledTitleContainer>
-          <StyledDialogTitle>
-            <StyledDialogTitleFont>Confirm Deletion</StyledDialogTitleFont>
-            <StyledCloseIcon onClick={handleMenuClose} />
-          </StyledDialogTitle>
-          <StyledDialogContent>Are you sure you want to delete this current timetable?</StyledDialogContent>
-        </StyledTitleContainer>
-        <StyledDialogButtons>
-          <Button onClick={handleMenuClose} variant="outlined">
-            Cancel
-          </Button>
-          <Button
-            id="confirm-delete-button"
-            onClick={() => {
-              handleDeleteTimetable(selectedTimetable);
-              handleMenuClose();
-            }}
-            variant="contained"
-          >
-            Delete
-          </Button>
-        </StyledDialogButtons>
-      </Dialog>
+      <StyledDialog
+        open={deleteOpen}
+        onClose={handleMenuClose}
+        onConfirm={() => {
+          handleDeleteTimetable(selectedTimetable);
+          handleMenuClose();
+        }}
+        title="Confirm Deletion"
+        content="Are you sure you want to delete this current timetable?"
+        confirmButtonText="Delete"
+      />
       {/* Restore deleted timetable Alert */}
       <StyledSnackbar
         open={openRestoreAlert}