From 59ee1ade8b1bb4ed8364a213c4f53e414ec46ae6 Mon Sep 17 00:00:00 2001 From: sasszz Date: Thu, 6 Mar 2025 19:24:03 -0800 Subject: [PATCH 1/7] Init commit --- client/src/pages/Events.jsx | 45 ++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index e2f83ec07..439dc3531 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; import { Link, Redirect } from 'react-router-dom'; import moment from 'moment'; -import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend} from '../utils/globalSettings'; +import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings'; +import { Box, List } from '@mui/material'; import '../sass/Events.scss'; import useAuth from '../hooks/useAuth'; @@ -20,25 +21,27 @@ const Events = (props) => { }, }); const resJson = await res.json(); - + setEvents(resJson); } catch (error) { alert(error); } } - + fetchData(); }, []); return auth && auth.user ? ( -
-

Filter:

- + setEventSearchParam(e.target.value)} + placeholder="Search events..." /> -
    + + {events .filter((event) => { return ( @@ -48,26 +51,26 @@ const Events = (props) => { }) .map((event, index) => { return ( -
  • -
    -
    + + + -

    + {' '} - {event.name} - ({moment(event.date).format('ddd, MMM D @ h:mm a')}) -

    + {event.name}( + {moment(event.date).format('ddd, MMM D @ h:mm a')}) + -
    -
    -
    • + + + ); })} -
-
+ + ) : ( ); }; -export default Events; \ No newline at end of file +export default Events; From 56454726d8d88c481121a7b24ffe71e5359aeae5 Mon Sep 17 00:00:00 2001 From: sasszz Date: Fri, 14 Mar 2025 09:30:26 -0700 Subject: [PATCH 2/7] Removed unused CSS and added error states --- client/src/pages/Events.jsx | 70 +++++++++-------- client/src/sass/Events.scss | 148 +++++++++++++----------------------- 2 files changed, 92 insertions(+), 126 deletions(-) diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index 439dc3531..50428a99a 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -2,14 +2,21 @@ import React, { useState, useEffect } from 'react'; import { Link, Redirect } from 'react-router-dom'; import moment from 'moment'; import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings'; -import { Box, List } from '@mui/material'; +import { + Box, + List, + TextField, + ListItem, + ListItemText, + Typography, +} from '@mui/material'; import '../sass/Events.scss'; import useAuth from '../hooks/useAuth'; const Events = (props) => { const { auth } = useAuth(); - const [events, setEvents] = useState([]); + const [events, setEvents] = useState(null); const [eventSearchParam, setEventSearchParam] = useState(''); useEffect(() => { @@ -21,52 +28,51 @@ const Events = (props) => { }, }); const resJson = await res.json(); - setEvents(resJson); } catch (error) { alert(error); + setEvents([]); } } - fetchData(); }, []); + if (events === null) { + return Loading data...; + } + + const filteredEvents = events.filter( + (event) => + typeof event.name === 'string' && + event.name.toLowerCase().match(eventSearchParam.toLowerCase()) + ); + return auth && auth.user ? ( setEventSearchParam(e.target.value)} placeholder="Search events..." /> - - - {events - .filter((event) => { - return ( - typeof event.name === 'string' && - event.name.toLowerCase().match(eventSearchParam.toLowerCase()) - ); - }) - .map((event, index) => { - return ( - - - - - - {' '} - {event.name}( - {moment(event.date).format('ddd, MMM D @ h:mm a')}) - - - - - - ); - })} - + {filteredEvents.length === 0 ? ( + No events found. + ) : ( + + {filteredEvents.map((event, index) => ( + + + + {event.name} ( + {moment(event.date).format('ddd, MMM D @ h:mm a')}) + + + + ))} + + )} ) : ( diff --git a/client/src/sass/Events.scss b/client/src/sass/Events.scss index e36c15519..46238209c 100644 --- a/client/src/sass/Events.scss +++ b/client/src/sass/Events.scss @@ -1,104 +1,64 @@ -.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; } } -.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; + } + } } From 9cfa12b4b167e8c4d160755b3c77705ec1f92c5f Mon Sep 17 00:00:00 2001 From: sasszz Date: Fri, 14 Mar 2025 09:39:44 -0700 Subject: [PATCH 3/7] Fix null error --- client/src/pages/Events.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index 50428a99a..9a1e76d44 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -37,11 +37,7 @@ const Events = (props) => { fetchData(); }, []); - if (events === null) { - return Loading data...; - } - - const filteredEvents = events.filter( + const filteredEvents = events?.filter( (event) => typeof event.name === 'string' && event.name.toLowerCase().match(eventSearchParam.toLowerCase()) @@ -57,7 +53,9 @@ const Events = (props) => { onChange={(e) => setEventSearchParam(e.target.value)} placeholder="Search events..." /> - {filteredEvents.length === 0 ? ( + {events === null ? ( + Loading data... + ) : filteredEvents.length === 0 ? ( No events found. ) : ( From 147618cdf6e27c9daf29d5a6e25c7c3a9bd1a5d6 Mon Sep 17 00:00:00 2001 From: sasszz Date: Fri, 14 Mar 2025 10:12:23 -0700 Subject: [PATCH 4/7] Fix Full width CSS --- client/src/pages/Events.jsx | 10 +++++----- client/src/sass/Events.scss | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index 9a1e76d44..4cae80672 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -54,15 +54,15 @@ const Events = (props) => { placeholder="Search events..." /> {events === null ? ( - Loading data... + Loading data... ) : filteredEvents.length === 0 ? ( - No events found. + No events found. ) : ( - + {filteredEvents.map((event, index) => ( - + - + {event.name} ( {moment(event.date).format('ddd, MMM D @ h:mm a')}) diff --git a/client/src/sass/Events.scss b/client/src/sass/Events.scss index 46238209c..2c1fce852 100644 --- a/client/src/sass/Events.scss +++ b/client/src/sass/Events.scss @@ -3,9 +3,9 @@ margin: 2px 0px; border: 2px black solid; border-radius: 5px; - padding: 0.3em; &:hover { background-color: lightgrey; + cursor: pointer; } } From cbcb3fa9ea9ec55da5487d6b8af23fd04f45dae7 Mon Sep 17 00:00:00 2001 From: sasszz Date: Fri, 14 Mar 2025 10:22:19 -0700 Subject: [PATCH 5/7] Remove redirect --- client/src/pages/Events.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index 4cae80672..4eaf922a0 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Link, Redirect } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import moment from 'moment'; import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings'; import { @@ -43,7 +43,7 @@ const Events = (props) => { event.name.toLowerCase().match(eventSearchParam.toLowerCase()) ); - return auth && auth.user ? ( + return ( { )} - ) : ( - - ); + ) }; export default Events; From f981d00b1128a5e875fdcfa7d1b8559f568d1be8 Mon Sep 17 00:00:00 2001 From: sasszz Date: Fri, 14 Mar 2025 10:23:18 -0700 Subject: [PATCH 6/7] Remove useAuth --- client/src/pages/Events.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index 4eaf922a0..a988cb2ec 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -12,10 +12,8 @@ import { } from '@mui/material'; import '../sass/Events.scss'; -import useAuth from '../hooks/useAuth'; const Events = (props) => { - const { auth } = useAuth(); const [events, setEvents] = useState(null); const [eventSearchParam, setEventSearchParam] = useState(''); From f5dd4db6f26ee918ebc283b79bb7d54644948427 Mon Sep 17 00:00:00 2001 From: sasszz Date: Mon, 19 May 2025 18:41:31 -0700 Subject: [PATCH 7/7] Added back padding: 0.3em; --- client/src/sass/Events.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/sass/Events.scss b/client/src/sass/Events.scss index 2c1fce852..96c8a33fb 100644 --- a/client/src/sass/Events.scss +++ b/client/src/sass/Events.scss @@ -3,6 +3,7 @@ margin: 2px 0px; border: 2px black solid; border-radius: 5px; + padding: 0.3em; &:hover { background-color: lightgrey; cursor: pointer;