changed meetings style

src/components/home/Meeting.tsx

@@ -1,4 +1,6 @@
-import Typography from "@mui/material/Typography";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+
 interface Props {
   meetingName: string;
   meetingTime: string;
@@ -7,19 +9,10 @@ interface Props {
 
 function Meeting(props: Props) {
   return (
-    <div className="row meeting">
+    <ListItemButton component="a" href="#" className="row meeting">
-      <div className="col-12">
+      <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
-        <div className="row">
+      <ListItemText primary={props.meetingTime} />
-          <Typography className="mylabel" sx={{ ml: 1 }}>{props.meetingName}</Typography>
+    </ListItemButton>
-        </div>
-        <div className="row">
-          <Typography className="mylabel" sx={{ ml: 1 }}>{props.meetingTime}</Typography>
-        </div>
-        <div className="row">
-          <Typography className="mylabel" sx={{ ml: 1 }}>{props.meetingMembers}</Typography>
-        </div>
-      </div>
-    </div>
   );
 }
 

src/components/home/MeetingsPanel.tsx

@@ -1,5 +1,6 @@
 import Meeting from "./Meeting";
 import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
 import { useState, useEffect } from "react";
 import { useAppSelector } from "../../redux/hooks";
 import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
@@ -22,59 +23,43 @@ const MeetingsPanel: React.FC = () => {
   const participants = useAppSelector((state) => 
     selectUsers(state,uuids)
   );
-  
-  // const participants: (UserLite | undefined)[] = [];
-  // uuids.forEach((uuid) => {
-  //   const userLite = useAppSelector((state) => 
-  //     selectUser(state,uuid)
-  //   );
-  //   participants.push(userLite);
-  // });
-
 
   return (
     <div className="meetings-panel">
-      {/* <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>
 
-      {meetings.map((meeting) => {
+      <List style={{maxHeight: '100%', overflow: 'auto'}} >
-        // const meetingMembers = useAppSelector((state) =>
+        {meetings.map((meeting) => {
-        //   selectUsers(state, meeting.liveParticipantIds)
+          const meetingMembers: UserLite[] = [];
-        // );
+          participants.forEach((userLite) => {
-        const meetingMembers: UserLite[] = [];
+            if (userLite != undefined && meeting.liveParticipantIds.includes(userLite.uuid)) {
-        participants.forEach((userLite) => {
+              meetingMembers.push(userLite);
-          if (userLite != undefined && meeting.liveParticipantIds.includes(userLite.uuid)) {
+            }
-            meetingMembers.push(userLite);
+          });
+          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()} 
+              />
+            );
           }
-        });
+        })}
-        const startDate = new Date(meeting.start);
+      </List>
-        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

@@ -33,6 +33,10 @@ a {
   padding-bottom: 2%;
 }
 
+.main-home .meetings-panel .meetingEntries::-webkit-scrollbar {
+  display: none;
+}
+
 .main-home .meetings-panel .meeting {
   background-color: #D3D3D3;
   text-align: center;

src/style/App.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "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",
+    "mappings": "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",
     "sources": [
         "App.sass",
         "_variables.sass",