Skip to content

Commit ae5b57e

Browse files
sasszzsasszz
authored
Merge pull request #1869 from sasszz/lucie/mui-1711-events-js-update
Convert Events.js to MUI Components
2 parents 4764802 + 8b3a693 commit ae5b57e

File tree

2 files changed

+97
-129
lines changed

2 files changed

+97
-129
lines changed

‎client/src/pages/Events.jsx‎

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@ import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import moment from 'moment';
44
import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
5+
import {
6+
Box,
7+
List,
8+
TextField,
9+
ListItem,
10+
ListItemText,
11+
Typography,
12+
} from '@mui/material';
513

614
import '../sass/Events.scss';
715

816
const Events = (props) => {
9-
const [events, setEvents] = useState([]);
17+
const [events, setEvents] = useState(null);
1018
const [eventSearchParam, setEventSearchParam] = useState('');
1119

1220
useEffect(() => {
@@ -18,52 +26,51 @@ const Events = (props) => {
1826
},
1927
});
2028
const resJson = await res.json();
21-
2229
setEvents(resJson);
2330
} catch (error) {
2431
alert(error);
32+
setEvents([]);
2533
}
2634
}
27-
2835
fetchData();
2936
}, []);
3037

38+
const filteredEvents = events?.filter(
39+
(event) =>
40+
typeof event.name === 'string' &&
41+
event.name.toLowerCase().match(eventSearchParam.toLowerCase())
42+
);
43+
3144
return (
32-
<div className="events-list">
33-
<p>Filter:</p>
34-
<input
35-
style={{ marginBottom: '10px' }}
45+
<Box className="events-list">
46+
<TextField
47+
label="Filter:"
48+
variant="outlined"
49+
sx={{ my: 2 }}
3650
value={eventSearchParam}
3751
onChange={(e) => setEventSearchParam(e.target.value)}
52+
placeholder="Search events..."
3853
/>
39-
<ul>
40-
{events
41-
.filter((event) => {
42-
return (
43-
typeof event.name === 'string' &&
44-
event.name.toLowerCase().match(eventSearchParam.toLowerCase())
45-
);
46-
})
47-
.map((event, index) => {
48-
return (
49-
<li key={index}>
50-
<div key={index} className="list-event-container">
51-
<div className="list-event-headers">
52-
<Link to={`/event/${event._id}`}>
53-
<p className="event-name">
54-
{' '}
55-
{event.name}(
56-
{moment(event.date).format('ddd, MMM D @ h:mm a')})
57-
</p>
58-
</Link>
59-
</div>
60-
</div>
61-
</li>
62-
);
63-
})}
64-
</ul>
65-
</div>
66-
);
54+
{events === null ? (
55+
<Typography>Loading data...</Typography>
56+
) : filteredEvents.length === 0 ? (
57+
<Typography>No events found.</Typography>
58+
) : (
59+
<List >
60+
{filteredEvents.map((event, index) => (
61+
<ListItem key={index} className="event-name">
62+
<Link to={`/event/${event._id}`}>
63+
<ListItemText>
64+
{event.name} (
65+
{moment(event.date).format('ddd, MMM D @ h:mm a')})
66+
</ListItemText>
67+
</Link>
68+
</ListItem>
69+
))}
70+
</List>
71+
)}
72+
</Box>
73+
)
6774
};
6875

6976
export default Events;

‎client/src/sass/Events.scss‎

Lines changed: 55 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,65 @@
1-
.list-event-container {
2-
display: -webkit-box;
3-
display: -ms-flexbox;
4-
display: flex;
5-
-webkit-box-orient: vertical;
6-
-webkit-box-direction: normal;
7-
-ms-flex-direction: column;
8-
flex-direction: column;
9-
-webkit-box-pack: justify;
10-
-ms-flex-pack: justify;
11-
justify-content: space-between;
12-
}
13-
14-
.list-event-headers {
15-
display: -webkit-box;
16-
display: -ms-flexbox;
17-
display: flex;
18-
-webkit-box-orient: vertical;
19-
-webkit-box-direction: normal;
20-
-ms-flex-direction: column;
21-
flex-direction: column;
22-
}
23-
241
.event-name {
25-
font-size: 15px;
26-
margin: 2px 0px;
27-
border: 2px black solid;
28-
border-radius: 5px;
29-
padding: 0.3em;
30-
&:hover {
31-
background-color:lightgrey;
2+
font-size: 15px;
3+
margin: 2px 0px;
4+
border: 2px black solid;
5+
border-radius: 5px;
6+
padding: 0.3em;
7+
&:hover {
8+
background-color: lightgrey;
9+
cursor: pointer;
3210
}
3311
}
3412

35-
.event-info {
36-
37-
}
38-
39-
.event-info-container {
40-
41-
}
42-
4313
.event-info-wrapper {
44-
display: -webkit-inline-box;
45-
display: -ms-inline-flexbox;
46-
display: inline-flex;
47-
-webkit-box-align: center;
48-
-ms-flex-align: center;
49-
align-items: center;
50-
margin: 6px 0px;
51-
}
52-
53-
.event-details-container {
54-
55-
}
56-
57-
.event-info-text {
58-
margin: 0px 12px 0px;
14+
display: -webkit-inline-box;
15+
display: -ms-inline-flexbox;
16+
display: inline-flex;
17+
-webkit-box-align: center;
18+
-ms-flex-align: center;
19+
align-items: center;
20+
margin: 6px 0px;
5921
}
6022

61-
.events-list{
62-
height: 100%;
63-
position: relative;
64-
overflow: auto;
65-
66-
.add-event-btn {
67-
position: sticky;
68-
bottom: 0;
69-
display: flex;
70-
justify-content: flex-end;
71-
.add-event-link{
72-
background: white;
73-
border-radius: 10px;
74-
display: flex;
75-
align-items: center;
23+
.events-list {
24+
height: 100%;
25+
position: relative;
26+
overflow: auto;
27+
.add-event-btn {
28+
position: sticky;
29+
bottom: 0;
30+
display: flex;
31+
justify-content: flex-end;
32+
.add-event-link {
33+
background: white;
34+
border-radius: 10px;
35+
display: flex;
36+
align-items: center;
7637

77-
/*animation taken from stackoverflow */
78-
overflow: hidden;
79-
width: 40px;
80-
-webkit-transition: width .3s;
81-
transition: width .3s;
82-
transition-timing-function: ease-in-out;
83-
white-space: nowrap;
84-
svg {
85-
width: 2em;
86-
height: 2em;
87-
}
88-
.add-event-link-text{
89-
display: none;
90-
color: rgb(250, 17, 79);
91-
margin-left: 10px;
92-
}
93-
}
94-
.add-event-link:hover {
95-
width: 126px;
96-
-webkit-transition: width .3s;
97-
transition: width .3s;
98-
transition-timing-function: ease-in-out;
99-
}
100-
.add-event-link:hover .add-event-link-text{
101-
display: inline-block;
102-
}
38+
/*animation taken from stackoverflow */
39+
overflow: hidden;
40+
width: 40px;
41+
-webkit-transition: width 0.3s;
42+
transition: width 0.3s;
43+
transition-timing-function: ease-in-out;
44+
white-space: nowrap;
45+
svg {
46+
width: 2em;
47+
height: 2em;
48+
}
49+
.add-event-link-text {
50+
display: none;
51+
color: rgb(250, 17, 79);
52+
margin-left: 10px;
53+
}
54+
}
55+
.add-event-link:hover {
56+
width: 126px;
57+
-webkit-transition: width 0.3s;
58+
transition: width 0.3s;
59+
transition-timing-function: ease-in-out;
10360
}
61+
.add-event-link:hover .add-event-link-text {
62+
display: inline-block;
63+
}
64+
}
10465
}

0 commit comments

Comments
 (0)