Merge pull request #15 from CPSC319-Winter-term-2/mbalsdon-callfavs

Call favourites dialogbox

src/components/home/CallFavouritesDialog.tsx

@@ -0,0 +1,44 @@
+import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, Typography } from "@mui/material";
+import { SidebarUserObj } from "../sidebar/SidebarUser";
+
+interface Props {
+    open: boolean;
+    selectedValue: SidebarUserObj;
+    onClose: (value: SidebarUserObj) => void;
+    users: SidebarUserObj[];
+}
+
+const CallFavouritesDialog: React.FC<Props> = ({ open, selectedValue, onClose, users }: Props) => {
+  const handleClose = () => {
+    onClose(selectedValue);
+  };
+  
+  return (
+    <Dialog 
+      onClose={handleClose} 
+      open={open}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>Select who to call:</DialogTitle>
+      <DialogContent>
+        <FormControlLabel control={<Checkbox color="success" />} label="Select everyone" />
+      </DialogContent>
+      <DialogContent sx={{ height: "40vh" }} dividers>
+        <FormGroup>
+          {users.map((user) => (
+            <FormControlLabel key={user.id} control={<Checkbox color="success" />} label={user.name} />
+          ))}
+        </FormGroup>
+      </DialogContent>
+      
+      <DialogActions>
+        <Button color="success" onClick={handleClose}>
+          <Typography variant="button" color="black">Call</Typography>
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CallFavouritesDialog;

src/components/home/Home.tsx

@@ -2,8 +2,22 @@ import MeetingsPanel from "./MeetingsPanel";
 import ShortCuts from "./ShortCuts";
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
+import { MeetingStatus, SidebarUserObj } from "../sidebar/SidebarUser";
+import { useState } from "react";
 
 const Home: React.FC = () => {
+
+  /* Temporary data - this is the same as what's in ProtectedRoute.tsx so it should not
+  be duplicated like this in the future (Route components were being weird when I tried
+  to pass it down from App.tsx) */
+  const [mockUsers] = useState<SidebarUserObj[]>([
+    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY }
+  ]);
+
+
   return (
     <Container className="main-home">
       <Grid container>
@@ -11,7 +25,7 @@ const Home: React.FC = () => {
           <MeetingsPanel />
         </Grid>
         <Grid item sm={4}>
-          <ShortCuts />
+          <ShortCuts users={mockUsers}/>
         </Grid>
       </Grid>
     </Container>

src/components/home/ShortCuts.tsx

@@ -4,8 +4,27 @@ import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
 import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
+import { SidebarUserObj } from "../sidebar/SidebarUser";
+import CallFavouritesDialog from "./CallFavouritesDialog";
+import { useState } from "react";
+
+interface Props {
+  users: SidebarUserObj[];
+}
+
+const ShortCuts: React.FC<Props> = ({ users }: Props) => {
+  const [open, setOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(users[0]);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (value: SidebarUserObj) => {
+    setOpen(false);
+    setSelectedValue(value);
+  };
 
-const ShortCuts: React.FC = () => {
   return (
     <div className="short-cuts" >
       <Grid className="row-1" container spacing={1}>
@@ -24,10 +43,16 @@ const ShortCuts: React.FC = () => {
       </Grid>
       <Grid className="row-2" container spacing={1}>
         <Grid item sm={6}>
-          <Button className="tile">
+          <Button className="tile" onClick={handleClickOpen}>
             <PhoneEnabledIcon className="icon" />
           </Button>
+          <CallFavouritesDialog 
+            selectedValue={selectedValue}
+            open={open}
+            onClose={handleClose}
+            users={users}/>
           <label>Call Favourites</label>
+          <label>test: {selectedValue.name}</label>
         </Grid>
         <Grid item sm={6}>
           <Button className="tile">