From f008abe473e20c992d6d6856c42c87f4491bc0af Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Thu, 31 Mar 2022 01:45:08 +0100
Subject: [PATCH] bug fix for Schedule Meetings and Call Group

---
 src/components/home/CallFavouritesDialog.tsx  | 125 ++++++-----
 src/components/home/ScheduleMeetingDialog.tsx | 197 ++++++++++--------
 2 files changed, 180 insertions(+), 142 deletions(-)

diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx
index 484035a..e074548 100644
--- a/src/components/home/CallFavouritesDialog.tsx
+++ b/src/components/home/CallFavouritesDialog.tsx
@@ -4,6 +4,7 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
+  DialogContentText,
   DialogTitle,
   FormControlLabel,
   FormGroup,
@@ -33,6 +34,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
   const [group, setGroup] = useState<string>("Favorites");
   const [inputText, setInputText] = useState<string>("");
   const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
+  const [urlDialog, seturlDialog] = useState({ open: false, url: "" });
 
   const handleCheck = (uuid: string, checked: boolean) => {
     if (checked) {
@@ -58,8 +60,11 @@ const CallFavouritesDialog: React.FC<Props> = ({
   const auth = useAuth();
 
   const handleCall = async(e: React.SyntheticEvent) => {
+    const start = new Date().toISOString();
+    let newStart = start.split('.')[0];
+    newStart += start.includes("Z") ? "Z" : "";
     const newMeeting: NewMeeting ={
-      startTime: new Date().toISOString(),
+      startTime: newStart,
       duration: 60,
       topic: "Quick Call to Group",
       registrantIds: checkedUuids
@@ -70,63 +75,77 @@ const CallFavouritesDialog: React.FC<Props> = ({
     );
     const meeting: DetailedMeeting = response?.data;
     console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration);
+    seturlDialog({ open: true, url: meeting.joinUrl });
     handleClose();
   };
 
   return (
-    <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
-      <DialogTitle>Select who to call:</DialogTitle>
-      <DialogContent>
-        <GroupSelect
-          group={group}
-          setGroup={setGroup}
-          onGroupChange={handleGroupChange}
-        />
-      </DialogContent>
-      <DialogContent sx={{ height: "40vh" }} dividers>
-        <TextField
-          label="Search"
-          variant="outlined"
-          placeholder="Person"
-          fullWidth
-          sx={{ pb: 1 }}
-          onChange={(e) => {
-            setInputText(e.target.value);
-          }}
-        />
-        <FormGroup>
-          {groupMembers
-            .filter((member) =>
-              member.name.toLowerCase().includes(inputText.toLowerCase())
-            )
-            .map((member) => (
-              <FormControlLabel
-                key={member.uuid}
-                label={member.name}
-                sx={{ pl: 1 }}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onChange={(e: any) => {
-                  handleCheck(member.uuid, e.target.checked);
-                }}
-                control={
-                  <Checkbox
-                    color="success"
-                    checked={checkedUuids.includes(member.uuid)}
-                  />
-                }
-              />
-            ))}
-        </FormGroup>
-      </DialogContent>
+    <>
+      <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
+        <DialogTitle>Select who to call:</DialogTitle>
+        <DialogContent>
+          <GroupSelect
+            group={group}
+            setGroup={setGroup}
+            onGroupChange={handleGroupChange}
+          />
+        </DialogContent>
+        <DialogContent sx={{ height: "40vh" }} dividers>
+          <TextField
+            label="Search"
+            variant="outlined"
+            placeholder="Person"
+            fullWidth
+            sx={{ pb: 1 }}
+            onChange={(e) => {
+              setInputText(e.target.value);
+            }}
+          />
+          <FormGroup>
+            {groupMembers
+              .filter((member) =>
+                member.name.toLowerCase().includes(inputText.toLowerCase())
+              )
+              .map((member) => (
+                <FormControlLabel
+                  key={member.uuid}
+                  label={member.name}
+                  sx={{ pl: 1 }}
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  onChange={(e: any) => {
+                    handleCheck(member.uuid, e.target.checked);
+                  }}
+                  control={
+                    <Checkbox
+                      color="success"
+                      checked={checkedUuids.includes(member.uuid)}
+                    />
+                  }
+                />
+              ))}
+          </FormGroup>
+        </DialogContent>
 
-      <DialogActions>
-        <Button color="success" onClick={handleCall}>
-          <Typography variant="button" color="black">
-            Call
-          </Typography>
-        </Button>
-      </DialogActions>
-    </Dialog>
+        <DialogActions>
+          <Button color="success" onClick={handleCall}>
+            <Typography variant="button" color="black">
+              Call
+            </Typography>
+          </Button>
+        </DialogActions>
+      </Dialog>
+        <Dialog
+          open={urlDialog.open}
+          onClose={() => {
+            seturlDialog({ open: false, url: "" });
+          }}
+        >
+          <DialogTitle>Join</DialogTitle>
+          <DialogContent>
+            <DialogContentText>{urlDialog.url}</DialogContentText>
+          </DialogContent>
+        </Dialog>
+    </>
   );
 };
 
diff --git a/src/components/home/ScheduleMeetingDialog.tsx b/src/components/home/ScheduleMeetingDialog.tsx
index 3dbec0f..2570aa5 100644
--- a/src/components/home/ScheduleMeetingDialog.tsx
+++ b/src/components/home/ScheduleMeetingDialog.tsx
@@ -4,6 +4,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogContentText,
     DialogTitle,
     FormControlLabel,
     FormGroup,
@@ -28,7 +29,7 @@ import {
     handleClose: () => void;
   }
   
-  const CallFavouritesDialog: React.FC<Props> = ({
+  const CallScheduledMeetingDialog: React.FC<Props> = ({
     open,
     handleClose,
   }: Props) => {
@@ -39,6 +40,7 @@ import {
     const [group, setGroup] = useState<string>("Favorites");
     const [inputText, setInputText] = useState<string>("");
     const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
+    const [urlDialog, seturlDialog] = useState({ open: false, url: "" });
   
     const handleCheck = (uuid: string, checked: boolean) => {
       if (checked) {
@@ -69,8 +71,11 @@ import {
     const auth = useAuth();
   
     const handleCall = async(e: React.SyntheticEvent) => {
+      const start = meetingStartDate ? meetingStartDate.toISOString() : new Date().toISOString();
+      let newStart = start.split('.')[0];
+      newStart += start.includes("Z") ? "Z" : "";
       const newMeeting: NewMeeting ={
-        startTime: meetingStartDate ? meetingStartDate.toISOString() : new Date().toISOString(),
+        startTime: newStart,
         duration: meetingDuration,
         topic: meetingTopic,
         registrantIds: checkedUuids
@@ -81,98 +86,112 @@ import {
       );
       const meeting: DetailedMeeting = response?.data;
       console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration);
+      seturlDialog({ open: true, url: meeting.joinUrl });
       handleClose();
     };
   
     return (
-      <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
-        <DialogTitle>Schedule A Meeting</DialogTitle>
-        <DialogContent  dividers>
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <DateTimePicker
-              label="Meeting Start Date&Time"
-              value={meetingStartDate}
-              onChange={handleDateChange}
-              renderInput={(params) => <TextField {...params} />}
+      <>
+        <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
+          <DialogTitle>Schedule A Meeting</DialogTitle>
+          <DialogContent  dividers>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DateTimePicker
+                label="Meeting Start Date&Time"
+                value={meetingStartDate}
+                onChange={handleDateChange}
+                renderInput={(params) => <TextField {...params} />}
+              />
+            </LocalizationProvider>
+            <TextField
+              className="meetingDuration-input"
+              id="outlined-number"
+              label="Duration"
+              variant="outlined"
+              value={meetingDuration}
+              type="number"
+              onChange={(event) => {
+                setMeetingDuration(parseInt(event.target.value));
+              }}
             />
-          </LocalizationProvider>
-          <TextField
-            className="meetingDuration-input"
-            id="outlined-number"
-            label="Duration"
-            variant="outlined"
-            value={meetingDuration}
-            type="number"
-            onChange={(event) => {
-              setMeetingDuration(parseInt(event.target.value));
-            }}
-          />
-        </DialogContent>
-        <DialogContent  dividers>
-          <TextField
-            fullWidth
-            className="meetingTopic-input"
-            id="outlined-basic"
-            label="Meeting Topic"
-            variant="outlined"
-            value={meetingTopic}
-            onChange={(event) => {
-              setMeetingTopic(event.target.value);
-            }}
-          />
-        </DialogContent>
-        <DialogContent>
-          <GroupSelect
-            group={group}
-            setGroup={setGroup}
-            onGroupChange={handleGroupChange}
-          />
-        </DialogContent>
-        <DialogContent sx={{ height: "40vh" }} dividers>
-          <TextField
-            label="Search"
-            variant="outlined"
-            placeholder="Person"
-            fullWidth
-            sx={{ pb: 1 }}
-            onChange={(e) => {
-              setInputText(e.target.value);
-            }}
-          />
-          <FormGroup>
-            {groupMembers
-              .filter((member) =>
-                member.name.toLowerCase().includes(inputText.toLowerCase())
-              )
-              .map((member) => (
-                <FormControlLabel
-                  key={member.uuid}
-                  label={member.name}
-                  sx={{ pl: 1 }}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  onChange={(e: any) => {
-                    handleCheck(member.uuid, e.target.checked);
-                  }}
-                  control={
-                    <Checkbox
-                      color="success"
-                      checked={checkedUuids.includes(member.uuid)}
-                    />
-                  }
-                />
-              ))}
-          </FormGroup>
-        </DialogContent>
-  
-        <DialogActions>
-          <Button color="success" onClick={handleCall}>
-            <Typography variant="button" color="black">
-              Call
-            </Typography>
-          </Button>
-        </DialogActions>
-      </Dialog>
+          </DialogContent>
+          <DialogContent  dividers>
+            <TextField
+              fullWidth
+              className="meetingTopic-input"
+              id="outlined-basic"
+              label="Meeting Topic"
+              variant="outlined"
+              value={meetingTopic}
+              onChange={(event) => {
+                setMeetingTopic(event.target.value);
+              }}
+            />
+          </DialogContent>
+          <DialogContent>
+            <GroupSelect
+              group={group}
+              setGroup={setGroup}
+              onGroupChange={handleGroupChange}
+            />
+          </DialogContent>
+          <DialogContent sx={{ height: "40vh" }} dividers>
+            <TextField
+              label="Search"
+              variant="outlined"
+              placeholder="Person"
+              fullWidth
+              sx={{ pb: 1 }}
+              onChange={(e) => {
+                setInputText(e.target.value);
+              }}
+            />
+            <FormGroup>
+              {groupMembers
+                .filter((member) =>
+                  member.name.toLowerCase().includes(inputText.toLowerCase())
+                )
+                .map((member) => (
+                  <FormControlLabel
+                    key={member.uuid}
+                    label={member.name}
+                    sx={{ pl: 1 }}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    onChange={(e: any) => {
+                      handleCheck(member.uuid, e.target.checked);
+                    }}
+                    control={
+                      <Checkbox
+                        color="success"
+                        checked={checkedUuids.includes(member.uuid)}
+                      />
+                    }
+                  />
+                ))}
+            </FormGroup>
+          </DialogContent>
+    
+          <DialogActions>
+            <Button color="success" onClick={handleCall}>
+              <Typography variant="button" color="black">
+                Call
+              </Typography>
+            </Button>
+          </DialogActions>
+        </Dialog>
+        <Dialog
+          open={urlDialog.open}
+          onClose={() => {
+            seturlDialog({ open: false, url: "" });
+          }}
+        >
+          <DialogTitle>Join</DialogTitle>
+          <DialogContent>
+            <DialogContentText>{urlDialog.url}</DialogContentText>
+          </DialogContent>
+        </Dialog>
+      </>
     );
   };
   
-  export default CallFavouritesDialog;
\ No newline at end of file
+  export default CallScheduledMeetingDialog;
\ No newline at end of file