Event Page Query Params + More

src/components/events/EventCarousel/index.tsx

@@ -7,13 +7,19 @@ import type { ReactNode } from 'react';
 import EventCard from '../EventCard';
 import styles from './style.module.scss';
 
+export type FilterEventOptions = {
+  community?: 'all' | 'general' | 'ai' | 'cyber' | 'design' | 'hack';
+  date?: 'all-time' | 'past-year' | 'past-month' | 'past-week' | 'upcoming';
+  attended?: 'all' | 'attended' | 'not-attended';
+};
 interface EventCarouselProps {
   title: string | ReactNode;
   titleClassName?: string;
   events: PublicEvent[];
   attendances: PublicAttendance[];
   placeholder: string;
   className?: string;
+  linkFilters?: FilterEventOptions;
 }
 
 const EventCarousel = ({
@@ -23,6 +29,7 @@ const EventCarousel = ({
   attendances,
   placeholder,
   className = '',
+  linkFilters = {},
 }: EventCarouselProps) => {
   return (
     <div className={`${styles.wrapper} ${className}`}>
@@ -32,7 +39,10 @@ const EventCarousel = ({
             {title}
           </Typography>
         </div>
-        <Link className={styles.viewToggle} href={config.eventsRoute}>
+        <Link
+          className={styles.viewToggle}
+          href={`${config.eventsRoute}?${new URLSearchParams(linkFilters).toString()}`}
+        >
           See all events &gt;
         </Link>
       </div>

src/components/profile/UserProgress/index.tsx

@@ -1,6 +1,8 @@
 import { Typography, type Variant } from '@/components/common';
+import { config } from '@/lib';
 import { type PublicProfile } from '@/lib/types/apiResponses';
 import { getLevel, getUserRank } from '@/lib/utils';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import styles from './style.module.scss';
 
@@ -31,7 +33,7 @@ export const UserProgress = ({
     currentRank === nextLevelRank ? `Level ${getLevel(points + 100)}` : nextLevelRank;
 
   return (
-    <div className={styles.progressSection}>
+    <Link href={config.leaderboardRoute} className={styles.progressSection}>
       <Typography variant="h2/bold" className={styles.sectionHeader}>
         {isSignedInUser ? 'Your' : `${firstName}'s`} Progress
       </Typography>
@@ -56,6 +58,6 @@ export const UserProgress = ({
           {100 - (points % 100)} more points to level up to <strong>{nextLevelText}</strong>
         </Typography>
       </div>
-    </div>
+    </Link>
   );
 };

src/pages/admin/index.tsx

@@ -29,7 +29,11 @@ const AdminPage = ({ user: { accessType }, preview }: AdminProps) => {
           margin: '1rem 0',
         }}
       >
-        <LinkButton href={config.admin.events.homeRoute}>Manage Events</LinkButton>
+        {PermissionService.canManageEvents.includes(accessType) ? (
+          <LinkButton href={config.admin.events.homeRoute}>Manage Events</LinkButton>
+        ) : (
+          'Restricted Access'
+        )}
       </div>
       <br />
       <Typography variant="h2/bold">Store</Typography>

src/pages/events.tsx

@@ -9,11 +9,17 @@ import { CookieType } from '@/lib/types/enums';
 import { formatSearch, getDateRange, getYears } from '@/lib/utils';
 import styles from '@/styles/pages/events.module.scss';
 import type { GetServerSideProps } from 'next';
-import { useMemo, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState } from 'react';
 
 interface EventsPageProps {
   events: PublicEvent[];
   attendances: PublicAttendance[];
+  initialFilters: {
+    community: string;
+    date: string;
+    attended: string;
+  };
 }
 
 interface FilterOptions {
@@ -59,13 +65,24 @@ const filterEvent = (
 };
 
 const ROWS_PER_PAGE = 25;
-const EventsPage = ({ events, attendances }: EventsPageProps) => {
+const EventsPage = ({ events, attendances, initialFilters }: EventsPageProps) => {
   const [page, setPage] = useState(0);
-  const [communityFilter, setCommunityFilter] = useState('all');
-  const [dateFilter, setDateFilter] = useState('upcoming');
-  const [attendedFilter, setAttendedFilter] = useState('all');
+  const [communityFilter, setCommunityFilter] = useState(initialFilters.community);
+  const [dateFilter, setDateFilter] = useState(initialFilters.date);
+  const [attendedFilter, setAttendedFilter] = useState(initialFilters.attended);
   const [query, setQuery] = useState('');
 
+  const router = useRouter();
+
+  useEffect(() => {
+    const validState =
+      initialFilters.community === communityFilter &&
+      initialFilters.date === dateFilter &&
+      initialFilters.attended === attendedFilter;
+    if (!validState) router.reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router, initialFilters]);
+
   const years = useMemo(getYears, []);
 
   const filteredEvents = events.filter(e =>
@@ -171,15 +188,19 @@ const EventsPage = ({ events, attendances }: EventsPageProps) => {
 
 export default EventsPage;
 
-const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
+const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) => {
   const authToken = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
 
   const getEventsPromise = EventAPI.getAllEvents();
   const getAttendancesPromise = UserAPI.getAttendancesForCurrentUser(authToken);
 
   const [events, attendances] = await Promise.all([getEventsPromise, getAttendancesPromise]);
 
-  return { props: { events, attendances } };
+  const { community = 'all', date = 'all-time', attended = 'all' } = query;
+
+  const initialFilters = { community, date, attended };
+
+  return { props: { events, attendances, initialFilters } };
 };
 
 export const getServerSideProps = withAccessType(

src/pages/index.tsx

@@ -150,6 +150,9 @@ const PortalHomePage = ({
 
       <EventCarousel
         title="Upcoming Events"
+        linkFilters={{
+          date: 'upcoming',
+        }}
         titleClassName={styles.subheading}
         events={upcomingEvents}
         attendances={attendance}
@@ -158,6 +161,7 @@ const PortalHomePage = ({
       />
 
       <EventCarousel
+        linkFilters={{ attended: 'attended', date: 'all-time' }}
         title="Recently Attended Events"
         titleClassName={styles.subheading}
         events={attendedEvents}