Merge pull request #35 from CPSC319-Winter-term-2/home

Home

src/components/home/MeetingsPanel.tsx

@@ -1,18 +1,52 @@
 import Meeting from "./Meeting";
 import Typography from "@mui/material/Typography";
+import { useState, useEffect } from "react";
+import { useAppSelector } from "../../redux/hooks";
+import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
+import { selectUsers } from "../../redux/slices/usersSlice";
+import { formatTimeFromDate } from "../../utils";
 
 const MeetingsPanel: React.FC = () => {
+
+  const meetings = useAppSelector(selectMeetings);
+
   return (
     <div className="meetings-panel">
-      <div className="row current-time">
+      {/* <div className="row current-time">
         <Typography className="mylabel" sx={{ ml: 1 }}>10:34 AM</Typography>
       </div>
       <div className="row current-date">
         <Typography className="mylabel" sx={{ ml: 1 }}>Sunday, 03 Feb 2022</Typography>
+      </div> */}
+      <div className="row panel-label">
+        <Typography className="mylabel" sx={{ ml: 1 }}>Meetings in Progress</Typography>
       </div>
 
-      <Meeting meetingName="Meeting Name" meetingTime="8:00am - 12:00pm" meetingMembers="Jincheng L., Matt B." />
+      {meetings.map((meeting) => {
-      <Meeting meetingName="Meeting Name" meetingTime="8:30am - 11:00am" meetingMembers="Matt B., Taehee C." />
+        const meetingMembers = useAppSelector((state) =>
+          selectUsers(state, meeting.liveParticipantIds)
+        );
+        const startDate = new Date(meeting.start);
+        const startDatemil = startDate.getTime();
+        const endDatemil = startDatemil + meeting.duration*60000;
+        const endDate = new Date(endDatemil);
+        const [currentDate, setCurrentDate] = useState<Date>(new Date());
+        useEffect(() => {
+          setInterval(() => setCurrentDate(new Date()), 1000);
+        }, []);
+
+        const currentDatemil = currentDate.getTime();
+
+        if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
+          return (
+            <Meeting 
+              meetingName={meeting.topic} 
+              meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
+              meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} 
+            />
+          );
+        }
+      })}
     </div>
   );
 };

src/style/App.css

@@ -26,17 +26,11 @@ a {
   width: 100%;
 }
 
-.main-home .meetings-panel .current-time {
+.main-home .meetings-panel .panel-label {
   text-align: center;
   background-color: grey;
-  padding-top: 1%;
+  padding-top: 2%;
-  padding-bottom: 1%;
+  padding-bottom: 2%;
-}
-
-.main-home .meetings-panel .current-date {
-  text-align: center;
-  background-color: grey;
-  padding-bottom: 1%;
 }
 
 .main-home .meetings-panel .meeting {

src/style/App.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CAmDO;;AAtDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAqBO;;AAlC/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,YAAY,CAAC;EACT,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AA8BQ,UA9BE,CAIN,eAAe,CA0BX,QAAQ,CAAC;EACL,gBAAgB,EP/BC,OAAO;EOgCxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AAlC7B,AAoCQ,UApCE,CAmCN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AArC/B,AAsCQ,UAtCE,CAmCN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAvC9B,AAwCQ,UAxCE,CAmCN,WAAW,CAKP,QAAQ,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AA5CjC,AA6CQ,UA7CE,CAmCN,WAAW,CAUP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EP/CC,OAAO;EOgDxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAtDhC,AAmDY,UAnDF,CAmCN,WAAW,CAUP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG;;ACtD9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG",
     "sources": [
         "App.sass",
         "_variables.sass",

src/style/modules/_mainHome.sass

@@ -14,15 +14,20 @@
         overflow: hidden
         .row
             width: 100%
-        .current-time
+        .panel-label
             text-align: center
             background-color: grey
-            padding-top: 1%
+            padding-top: 2%
-            padding-bottom: 1%
+            padding-bottom: 2%
-        .current-date
+        // .current-time
-            text-align: center
+        //     text-align: center
-            background-color: grey
+        //     background-color: grey
-            padding-bottom: 1%
+        //     padding-top: 1%
+        //     padding-bottom: 1%
+        // .current-date
+        //     text-align: center
+        //     background-color: grey
+        //     padding-bottom: 1%
         .meeting
             background-color: $main-home-background-color
             text-align: center

src/utils.tsx

@@ -14,4 +14,17 @@ const getStatusColor = (ms: MeetingStatus): string => {
   }
 };
 
-export { MeetingStatus, getStatusColor };
+const formatTimeFromDate = (date: Date): string => {
+  let hour = date.getHours();
+  let ampm = "";
+  let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes();
+  if (hour < 12) {
+    ampm = "am";
+  } else {
+    hour = hour === 12 ? 12 : hour - 12;
+    ampm = "pm";
+  }
+  return hour + ":" + minutes + ampm;
+};
+
+export { MeetingStatus, getStatusColor, formatTimeFromDate };