Merge pull request #2553 from gordon-cs/improve-events

Remove defunct attended events and improve events page

Author: EjPlatzer

package-lock.json

@@ -44,6 +44,7 @@
     "@types/react-big-calendar": "^1.8.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-router-hash-link": "^2.4.9",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.29.1",

package.json

@@ -5,12 +5,12 @@ type Props = CircularProgressProps & {
   inline?: boolean;
 };
 
-const GordonLoader = ({ size = 100, color = 'primary', inline = false }: Props) => {
+const GordonLoader = ({ size = 100, color = 'primary', inline = false, ...otherProps }: Props) => {
   if (inline) return <CircularProgress size={size} color={color} />;
   return (
     <Grid className={styles.gordon_loader} container justifyContent="center" alignItems="center">
       <Grid item>
-        <CircularProgress size={size} color={color} />
+        <CircularProgress size={size} color={color} {...otherProps} />
       </Grid>
     </Grid>
   );

src/components/EventList/components/EventItem/EventItem.module.scss

@@ -5,7 +5,6 @@ import BannerSubmission from './views/BannerSubmission';
 import CoCurricularTranscript from './views/CoCurricularTranscript';
 import EnrollmentCheckIn from './views/EnrollmentCheckIn';
 import Events from './views/Events';
-import EventsAttended from './views/EventsAttended';
 import Feedback from './views/Feedback';
 import Help from './views/Help';
 import Home from './views/Home';
@@ -23,8 +22,6 @@ import PublicProfile from './views/PublicProfile';
 import Timesheets from './views/Timesheets';
 import RecIM from './views/RecIM';
 import RoomRanges from 'views/ResLife/components/RDView/components/RoomRanges';
-import { element } from 'prop-types';
-import { Room } from '@mui/icons-material';
 import CampusSafety from './views/CampusSafety';
 
 // Route order must be from most specific to least specific (i.e. `/user/:username` before `/user`)
@@ -69,11 +66,6 @@ const routes = [
     path: '/events',
     element: <Events />,
   },
-  {
-    name: 'Attended',
-    path: '/attended',
-    element: <EventsAttended />,
-  },
   {
     name: 'Feedback',
     path: '/feedback',

src/components/EventList/components/EventItem/index.tsx

@@ -1,51 +1,56 @@
+import { addMonths, addWeeks } from 'date-fns';
 import http from './http';
-import session from './session';
-import { compareByProperty, filter } from './utils';
+import { compareByProperty } from './utils';
 
-type BaseEvent = {
+type UnformattedEvent = {
   Event_Name: string;
   Event_Title: string;
   Description: string;
   StartDate: string;
   EndDate: string;
   Location: string;
   Organization: string;
-};
-
-type UnformattedEvent = BaseEvent & {
   Event_ID: string;
   Event_Type_Name: string;
   HasCLAWCredit: boolean;
   IsPublic: boolean;
 };
 
-type UnformattedAttendedEvent = BaseEvent & {
-  LiveID: string;
-  CHDate?: Date;
-  CHTermCD: string;
-  Required?: number;
-};
-
-type EventDisplayProperties = {
+export type Event = UnformattedEvent & {
   timeRange: string;
   date: string;
   title: string;
   location: string;
 };
 
-type Event = UnformattedEvent & EventDisplayProperties;
-type AttendedEvent = UnformattedAttendedEvent & EventDisplayProperties;
-
 const shortTimeFormatter = new Intl.DateTimeFormat('en-US', { timeStyle: 'short' });
 const shortDateFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' });
 
-function formatEvent<T extends BaseEvent>(event: T): T & EventDisplayProperties {
+function formatEvent(event: UnformattedEvent): Event {
   const startDate = new Date(event.StartDate);
   const endDate = new Date(event.EndDate);
+
+  let timeRange = 'No time listed';
+  let date = 'No date listed';
+
+  try {
+    timeRange = shortTimeFormatter.formatRange(startDate, endDate);
+  } catch {
+    // `Intl.DateTimeFormat#format` throws for invalid dates. We will just catch potential errors and
+    // Catch any potential error and fallback to the default specified above
+  }
+
+  try {
+    date = shortDateFormatter.format(startDate);
+  } catch {
+    // `Intl.DateTimeFormat#formatRange` throws if it finds an invalid date
+    // Catch any potential error and fallback to the default specified above
+  }
+
   return {
     ...event,
-    timeRange: shortTimeFormatter.formatRange(startDate, endDate),
-    date: shortDateFormatter.format(startDate),
+    timeRange,
+    date,
     title: event.Event_Title || event.Event_Name,
     location: event.Location || 'No Location Listed',
     Description:
@@ -54,29 +59,15 @@ function formatEvent<T extends BaseEvent>(event: T): T & EventDisplayProperties
   };
 }
 
-const formatAndSort = <T extends BaseEvent>(events: T[]): (T & EventDisplayProperties)[] =>
+const formatAndSort = (events: UnformattedEvent[]): Event[] =>
   events.map(formatEvent).sort(compareByProperty('StartDate'));
 
 const getAllEvents = (): Promise<Event[]> =>
   http.get<UnformattedEvent[]>('events').then(formatAndSort);
 
-// TODO: Unused. Consider removing
-const getCLWEvents = (): Promise<Event[]> => {
-  const now = Date.now();
-  return http
-    .get<UnformattedEvent[]>('events/claw')
-    .then(filter((e) => new Date(e.StartDate).getTime() > now))
-    .then(formatAndSort);
-};
-
 const getAllGuestEvents = (): Promise<Event[]> =>
   http.get<UnformattedEvent[]>('events/public').then(formatAndSort);
 
-const getAttendedChapelEvents = (): Promise<AttendedEvent[]> =>
-  http
-    .get<UnformattedAttendedEvent[]>(`events/attended/${session.getTermCode()}`)
-    .then(formatAndSort);
-
 const getFutureEvents = (allEvents: Event[]): Event[] => {
   const now = Date.now();
   return allEvents
@@ -124,25 +115,29 @@ const getFilteredEvents = (
   }
 };
 
+export const TIME_FILTERS = Object.freeze(['1 Week', '2 Weeks', '1 Month', '4 Months']);
+
 /**
  * Make a closure over a time filter.
  *
- * The returned closure determines whether a given `event` falls before the time range
+ * The returned closure determines whether a given `event` falls within the time range
  *
  * @param timeFilter The time filter to use
  * @returns A function that matches a given event against `timeFilter`
  */
 const makeMatchesTimeFilter =
   (timeFilter: string) =>
   (event: Event): boolean => {
-    if (timeFilter == '1 Week') {
-      return new Date(event.StartDate) <= new Date(new Date().setDate(new Date().getDate() + 7));
-    } else if (timeFilter == '2 Weeks') {
-      return new Date(event.StartDate) <= new Date(new Date().setDate(new Date().getDate() + 14));
-    } else if (timeFilter == '1 Month') {
-      return new Date(event.StartDate) <= new Date(new Date().setMonth(new Date().getMonth() + 1));
-    } else if (timeFilter == '4 Months') {
-      return new Date(event.StartDate) <= new Date(new Date().setMonth(new Date().getMonth() + 4));
+    const eventStart = new Date(event.StartDate);
+    const now = new Date();
+    if (timeFilter === '1 Week') {
+      return eventStart <= addWeeks(now, 1) && eventStart >= addWeeks(now, -1);
+    } else if (timeFilter === '2 Weeks') {
+      return eventStart <= addWeeks(now, 2) && eventStart >= addWeeks(now, -2);
+    } else if (timeFilter === '1 Month') {
+      return eventStart <= addMonths(now, 1) && eventStart >= addMonths(now, -1);
+    } else if (timeFilter === '4 Months') {
+      return eventStart <= addMonths(now, 4) && eventStart >= addMonths(now, -4);
     } else {
       return false;
     }
@@ -234,10 +229,8 @@ const makeMatchesFilters =
 const eventService = {
   getAllEvents,
   getFutureEvents,
-  getCLWEvents,
   getFilteredEvents,
   getAllGuestEvents,
-  getAttendedChapelEvents,
 };
 
 export default eventService;

src/components/EventList/index.tsx

@@ -18,6 +18,7 @@ declare module '@mui/material/styles' {
 declare module '@mui/material' {
   interface ButtonPropsColorOverrides {
     neutral: any;
+    link: any;
   }
 }
 

src/components/Loader/index.tsx

@@ -6,11 +6,4 @@
     color: var(--mui-palette-neutral-700);
     font-size: 20;
   }
-  &_filter_button {
-    font-weight: bold;
-  }
-}
-
-.card_style {
-  padding: 0 3vw;
 }

src/routes.jsx

@@ -0,0 +1,210 @@
+import {
+  Autocomplete,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Checkbox,
+  Chip,
+  FormControlLabel,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  CardActions,
+  Grid,
+} from '@mui/material';
+import { HashLink } from 'react-router-hash-link';
+import React, { useEffect, useMemo, useState } from 'react';
+import gordonEvent, { Event, EVENT_FILTERS, TIME_FILTERS } from 'services/event';
+import { useSearchParams } from 'react-router-dom';
+import styles from './EventFilters.module.css';
+import { Search } from '@mui/icons-material';
+
+const FiltersKey = 'filters';
+const IncludePastKey = 'includePast';
+const DefaultTimeFilter = '2 Weeks';
+
+type Props = {
+  unfilteredEvents: Event[];
+  onFilterEvents: (filteredEvents: Event[]) => void;
+  setLoading: (isLoading: boolean) => void;
+};
+
+const EventFilters = ({ unfilteredEvents, onFilterEvents, setLoading }: Props) => {
+  const [search, setSearch] = useState('');
+  const futureEvents = useMemo(
+    () => gordonEvent.getFutureEvents(unfilteredEvents),
+    [unfilteredEvents],
+  );
+  const [timeFilter, setTimeFilter] = useState(DefaultTimeFilter);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const includePast = useMemo(() => searchParams.get(IncludePastKey) === 'true', [searchParams]);
+  const filters = useMemo(() => searchParams.getAll('filters'), [searchParams]);
+
+  useEffect(() => {
+    const events = includePast ? unfilteredEvents : futureEvents;
+    const filteredEvents = gordonEvent.getFilteredEvents(events, filters, search, timeFilter);
+    onFilterEvents(filteredEvents);
+    setLoading(false);
+  }, [
+    includePast,
+    unfilteredEvents,
+    futureEvents,
+    filters,
+    search,
+    timeFilter,
+    onFilterEvents,
+    setLoading,
+  ]);
+
+  const clearAll = () => {
+    setLoading(true);
+    setSearchParams(new URLSearchParams());
+    setSearch('');
+    setTimeFilter(DefaultTimeFilter);
+  };
+
+  const handleChangeSearch = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setLoading(true);
+    setSearch(event.target.value);
+  };
+
+  const handleChangeFilters = (_event: unknown, filters: string[]) => {
+    setLoading(true);
+    setSearchParams((prev) => {
+      prev.delete(FiltersKey);
+      filters.forEach((filter) => prev.append(FiltersKey, filter));
+      return prev;
+    });
+  };
+
+  const handleChangeIncludePast = () => {
+    setLoading(true);
+    setSearchParams((prev) => {
+      const didInclude = prev.get(IncludePastKey) === 'true';
+      const willInclude = !didInclude;
+
+      if (willInclude) {
+        prev.set(IncludePastKey, willInclude.toString());
+      } else {
+        prev.delete(IncludePastKey);
+      }
+
+      return prev;
+    });
+  };
+
+  const handleChangeTimeWindow = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setLoading(true);
+    setTimeFilter(event.target.value);
+  };
+
+  return (
+    <Card>
+      <CardHeader
+        sx={{ textAlign: 'center' }}
+        title={
+          <>
+            Search
+            <b className={styles.events_gordon_text}> Gordon </b>
+            Events
+          </>
+        }
+        className="gc360_header"
+        id="top"
+      />
+      <CardContent>
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={6} md={3}>
+            <TextField
+              id="search"
+              label="Search"
+              type="search"
+              variant="filled"
+              value={search}
+              onChange={handleChangeSearch}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search className={styles.events_icon} />
+                  </InputAdornment>
+                ),
+              }}
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={3}>
+            <Autocomplete
+              id="event-filters"
+              multiple
+              options={EVENT_FILTERS}
+              value={filters}
+              onChange={handleChangeFilters}
+              filterSelectedOptions
+              renderTags={(value, getTagProps) =>
+                value.map((option, index) => (
+                  <Chip label={option} {...getTagProps({ index })} color="secondary" />
+                ))
+              }
+              renderInput={(param) => <TextField {...param} variant="filled" label="Event Type" />}
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={3}>
+            <TextField
+              value={timeFilter}
+              onChange={handleChangeTimeWindow}
+              select
+              label="Time Window"
+              variant="filled"
+              fullWidth
+            >
+              <MenuItem value="" key="All">
+                <em>All</em>
+              </MenuItem>
+              {TIME_FILTERS.map((timeFilter) => (
+                <MenuItem value={timeFilter} key={timeFilter}>
+                  {timeFilter}
+                </MenuItem>
+              ))}
+            </TextField>
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={3}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={includePast}
+                  onChange={handleChangeIncludePast}
+                  color="secondary"
+                />
+              }
+              label="Show Past Events"
+            />
+          </Grid>
+        </Grid>
+      </CardContent>
+      <CardActions>
+        <Button color="neutral" variant="contained" onClick={clearAll}>
+          CLEAR ALL
+        </Button>
+
+        <Button
+          variant="contained"
+          color="secondary"
+          component={HashLink}
+          to="#bottom"
+          smooth
+          id="top"
+        >
+          Jump to Bottom
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+export default EventFilters;

src/services/event.ts

@@ -4,6 +4,5 @@
 }
 
 .header_text {
-  padding-block: 0.3rem;
-  padding-inline: 10px;
-}
+  color: var(--mui-palette-primary-contrastText);
+}

src/theme.ts

@@ -0,0 +1,16 @@
+.event_item {
+  padding: 10px;
+
+  transition: background-color 200ms ease;
+  cursor: pointer;
+
+  background-color: var(--mui-palette-neutral-light);
+  &:nth-of-type(even) {
+    background-color: var(--mui-palette-neutral-200);
+  }
+
+  &:hover {
+    background-color: var(--mui-palette-secondary-main);
+    color: var(--mui-palette-primary-contrastText);
+  }
+}

src/views/Events/Events.module.scss src/views/Events/components/EventFilters/EventFilters.module.scss

@@ -0,0 +1,80 @@
+import { Collapse, Grid, Typography } from '@mui/material';
+import { useState } from 'react';
+import styles from './EventItem.module.css';
+import 'add-to-calendar-button';
+import { format } from 'date-fns';
+import { STORAGE_COLOR_PREFERENCE_KEY } from 'theme';
+import { Event } from 'services/event';
+
+const checkLightMode = (mode: string | null) => {
+  if (mode === 'dark') {
+    return 'dark';
+  } else if (mode === 'light') {
+    return 'light';
+  } else if (mode === 'bodyScheme') {
+    return 'bodyScheme';
+  } else {
+    return 'system';
+  }
+};
+
+type Props = {
+  event: Event;
+};
+
+const EventItem = ({ event }: Props) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <Grid
+      component="section"
+      container
+      direction="row"
+      onClick={() => setExpanded((e) => !e)}
+      className={styles.event_item}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && e.currentTarget === e.target) {
+          setExpanded((e) => !e);
+        }
+      }}
+    >
+      <Grid item xs={12} sm={4}>
+        <Typography variant="h6">{event.title}</Typography>
+      </Grid>
+      <Grid item xs={4} sm={2}>
+        <Typography>{event.date}</Typography>
+      </Grid>
+      <Grid item xs={8} sm={2}>
+        <Typography>{event.timeRange}</Typography>
+      </Grid>
+      <Grid item xs={12} sm={4}>
+        <Typography>{event.location}</Typography>
+      </Grid>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <Typography className={styles.descriptionText} tabIndex={0}>
+          {event.Description || 'No description available'}
+        </Typography>
+        {event.StartDate !== '' && event.EndDate !== '' && (
+          <add-to-calendar-button
+            name={event.title}
+            options="'Google','Microsoft365|Gordon Outlook','Apple','Outlook.com|Outlook','MicrosoftTeams'"
+            location={event.location}
+            startDate={format(new Date(event.StartDate), 'yyyy-MM-dd')}
+            endDate={format(new Date(event.EndDate), 'yyyy-MM-dd')}
+            startTime={format(new Date(event.StartDate), 'HH:mm')}
+            endTime={format(new Date(event.EndDate), 'HH:mm')}
+            //default timeZone setting is "currentBrowser", and saved setting "America/New_York" if needed in case
+            timeZone="currentBrowser"
+            label="Add to Calendar"
+            description={event.Description}
+            //Get user theme mode preference
+            lightMode={checkLightMode(localStorage.getItem(STORAGE_COLOR_PREFERENCE_KEY))}
+          ></add-to-calendar-button>
+        )}
+      </Collapse>
+    </Grid>
+  );
+};
+
+export default EventItem;

src/views/Events/components/EventFilters/index.tsx

@@ -0,0 +1,73 @@
+import { windowBreakWidths } from 'theme';
+import EventItem from './components/EventItem';
+
+import useWindowSize from 'hooks/useWindowSize';
+
+import { Card, CardHeader, Grid, List, Typography } from '@mui/material';
+import { Event } from 'services/event';
+import styles from './EventList.module.css';
+import GordonLoader from 'components/Loader';
+
+type Props = {
+  events: Event[];
+  loading: boolean;
+};
+
+const tableHeader = (
+  <Grid container direction="row">
+    <Grid item xs={4} key="Name">
+      <Typography variant="h5" className={styles.header_text}>
+        Name
+      </Typography>
+    </Grid>
+    <Grid item xs={2} key="Date">
+      <Typography variant="h5" className={styles.header_text}>
+        Date
+      </Typography>
+    </Grid>
+    <Grid item xs={2} key="Time">
+      <Typography variant="h5" className={styles.header_text}>
+        Time
+      </Typography>
+    </Grid>
+    <Grid item xs={4} key="Location">
+      <Typography variant="h5" className={styles.header_text}>
+        Location
+      </Typography>
+    </Grid>
+  </Grid>
+);
+
+const noEvents = (
+  <Grid item alignItems="center">
+    <br />
+    <Typography variant="h4" align="center">
+      No Events To Show
+    </Typography>
+    <br />
+  </Grid>
+);
+
+const EventList = ({ events, loading }: Props) => {
+  const [width] = useWindowSize();
+
+  return (
+    <Card>
+      <CardHeader
+        title="Events"
+        subheader={width > windowBreakWidths.breakSM ? tableHeader : undefined}
+        className={styles.header}
+      />
+      {loading ? (
+        <GordonLoader disableShrink />
+      ) : (
+        <List className="gc360_event_list" disablePadding>
+          {events?.length < 1
+            ? noEvents
+            : events.map((event) => <EventItem event={event} key={event.Event_ID} />)}
+        </List>
+      )}
+    </Card>
+  );
+};
+export default EventList;

src/components/EventList/EventList.module.scss src/views/Events/components/EventList/EventList.module.scss

@@ -0,0 +1,69 @@
+import { useIsAuthenticated } from '@azure/msal-react';
+import { Button, CardHeader, Grid } from '@mui/material';
+import EventList from './components/EventList';
+import { useEffect, useState } from 'react';
+import gordonEvent, { Event } from 'services/event';
+import EventFilters from './components/EventFilters';
+import { HashLink } from 'react-router-hash-link';
+
+const Events = () => {
+  const [unfilteredEvents, setUnfilteredEvents] = useState<Event[]>([]);
+  const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
+  const [loading, setLoading] = useState(true);
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    const loadEvents = async () => {
+      setLoading(true);
+
+      const allEvents = isAuthenticated
+        ? await gordonEvent.getAllEvents()
+        : await gordonEvent.getAllGuestEvents();
+      setUnfilteredEvents(allEvents);
+
+      setLoading(false);
+    };
+
+    loadEvents();
+  }, [isAuthenticated]);
+
+  const content = <EventList loading={loading} events={filteredEvents} />;
+
+  return (
+    <Grid container justifyContent="center" spacing={6}>
+      <Grid item xs={12} lg={10} xl={8}>
+        <EventFilters
+          unfilteredEvents={unfilteredEvents}
+          onFilterEvents={setFilteredEvents}
+          setLoading={setLoading}
+        />
+        <br />
+
+        <Grid item xs={12}>
+          {content}
+        </Grid>
+        <CardHeader
+          xs={12}
+          className="gc360_header"
+          title={
+            <div style={{ textAlign: 'center' }}>
+              <p>To find other events, adjust your filters above.</p>
+              <Button
+                variant="contained"
+                color="secondary"
+                component={HashLink}
+                to="#top"
+                smooth
+                id="bottom"
+              >
+                Jump to Top
+              </Button>
+            </div>
+          }
+          id="bottom"
+        />
+      </Grid>
+    </Grid>
+  );
+};
+export default Events;