Convert Events.js to MUI Components

client/src/pages/Events.jsx

@@ -2,11 +2,19 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
+import {
+  Box,
+  List,
+  TextField,
+  ListItem,
+  ListItemText,
+  Typography,
+} from '@mui/material';
 
 import '../sass/Events.scss';
 
 const Events = (props) => {
-  const [events, setEvents] = useState([]);
+  const [events, setEvents] = useState(null);
   const [eventSearchParam, setEventSearchParam] = useState('');
 
   useEffect(() => {
@@ -18,52 +26,51 @@ const Events = (props) => {
           },
         });
         const resJson = await res.json();
-
         setEvents(resJson);
       } catch (error) {
         alert(error);
+        setEvents([]);
       }
     }
-
     fetchData();
   }, []);
 
+  const filteredEvents = events?.filter(
+    (event) =>
+      typeof event.name === 'string' &&
+      event.name.toLowerCase().match(eventSearchParam.toLowerCase())
+  );
+
   return (
-    <div className="events-list">
-      <p>Filter:</p>
-      <input
-        style={{ marginBottom: '10px' }}
+    <Box className="events-list">
+      <TextField
+        label="Filter:"
+        variant="outlined"
+        sx={{ my: 2 }}
         value={eventSearchParam}
         onChange={(e) => setEventSearchParam(e.target.value)}
+        placeholder="Search events..."
       />
-      <ul>
-        {events
-          .filter((event) => {
-            return (
-              typeof event.name === 'string' &&
-              event.name.toLowerCase().match(eventSearchParam.toLowerCase())
-            );
-          })
-          .map((event, index) => {
-            return (
-              <li key={index}>
-                <div key={index} className="list-event-container">
-                  <div className="list-event-headers">
-                    <Link to={`/event/${event._id}`}>
-                      <p className="event-name">
-                        {' '}
-                        {event.name}(
-                        {moment(event.date).format('ddd, MMM D @ h:mm a')})
-                      </p>
-                    </Link>
-                  </div>
-                </div>
-              </li>
-            );
-          })}
-      </ul>
-    </div>
-  );
+      {events === null ? (
+        <Typography>Loading data...</Typography>
+      ) : filteredEvents.length === 0 ? (
+        <Typography>No events found.</Typography>
+      ) : (
+        <List >
+          {filteredEvents.map((event, index) => (
+            <ListItem key={index}  className="event-name">
+              <Link to={`/event/${event._id}`}>
+                <ListItemText>
+                  {event.name} (
+                  {moment(event.date).format('ddd, MMM D @ h:mm a')})
+                </ListItemText>
+              </Link>
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </Box>
+  )
 };
 
 export default Events;

client/src/sass/Events.scss

@@ -1,104 +1,65 @@
-.list-event-container {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-}
-
-.list-event-headers {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-}
-
 .event-name {
-    font-size: 15px;
-    margin: 2px 0px;
-    border: 2px black solid;
-    border-radius: 5px;
-    padding: 0.3em;
-    &:hover {
-      background-color:lightgrey;
+  font-size: 15px;
+  margin: 2px 0px;
+  border: 2px black solid;
+  border-radius: 5px;
+  padding: 0.3em;
+  &:hover {
+    background-color: lightgrey;
+    cursor: pointer;
   }
 }
 
-.event-info {
-
-}
-
-.event-info-container {
-
-}
-
 .event-info-wrapper {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    margin: 6px 0px;
-}
-
-.event-details-container {
-
-}
-
-.event-info-text {
-    margin: 0px 12px 0px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 6px 0px;
 }
 
-.events-list{
-    height: 100%;
-    position: relative;
-    overflow: auto;
-
-    .add-event-btn {
-        position: sticky;
-        bottom: 0;
-        display: flex;
-        justify-content: flex-end;
-        .add-event-link{
-            background: white;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
+.events-list {
+  height: 100%;
+  position: relative;
+  overflow: auto;
+  .add-event-btn {
+    position: sticky;
+    bottom: 0;
+    display: flex;
+    justify-content: flex-end;
+    .add-event-link {
+      background: white;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
 
-            /*animation taken from stackoverflow */
-            overflow: hidden;
-            width: 40px;
-            -webkit-transition: width .3s;
-            transition: width .3s;
-            transition-timing-function: ease-in-out;
-            white-space: nowrap; 
-            svg {
-                width: 2em;
-                height: 2em;
-            }
-            .add-event-link-text{
-                display: none;
-                color: rgb(250, 17, 79);
-                margin-left: 10px;
-            }
-        }
-        .add-event-link:hover {
-            width: 126px;
-            -webkit-transition: width .3s;
-            transition: width .3s;
-            transition-timing-function: ease-in-out;
-        }
-        .add-event-link:hover .add-event-link-text{
-            display: inline-block;
-        }
+      /*animation taken from stackoverflow */
+      overflow: hidden;
+      width: 40px;
+      -webkit-transition: width 0.3s;
+      transition: width 0.3s;
+      transition-timing-function: ease-in-out;
+      white-space: nowrap;
+      svg {
+        width: 2em;
+        height: 2em;
+      }
+      .add-event-link-text {
+        display: none;
+        color: rgb(250, 17, 79);
+        margin-left: 10px;
+      }
+    }
+    .add-event-link:hover {
+      width: 126px;
+      -webkit-transition: width 0.3s;
+      transition: width 0.3s;
+      transition-timing-function: ease-in-out;
     }
+    .add-event-link:hover .add-event-link-text {
+      display: inline-block;
+    }
+  }
 }