Repo cleanup

src/components/common/Carousel/index.tsx

@@ -1,11 +1,7 @@
-import type { ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
 import styles from './style.module.scss';
 
-interface CarouselProps {
-  children: ReactNode[];
-}
-
-const Carousel = ({ children }: CarouselProps) => {
+const Carousel = ({ children }: PropsWithChildren) => {
   return <div className={styles.slider}>{children}</div>;
 };
 

src/components/common/CommunityLogo/index.tsx

@@ -1,29 +1,22 @@
+import { communityLogos } from '@/lib/constants/communityLogos';
+import { Community } from '@/lib/types/enums';
+import { capitalize } from '@/lib/utils';
 import Image from 'next/image';
 
-import AILogo from '@/public/assets/acm-logos/communities/ai.png';
-import CyberLogo from '@/public/assets/acm-logos/communities/cyber.png';
-import DesignLogo from '@/public/assets/acm-logos/communities/design.png';
-import HackLogo from '@/public/assets/acm-logos/communities/hack.png';
-import ACMLogo from '@/public/assets/acm-logos/general/light-mode.png';
-
 interface CommunityLogoProps {
   community: string;
   size: number;
 }
 
 const CommunityLogo = ({ community, size }: CommunityLogoProps) => {
-  switch (community.toLowerCase()) {
-    case 'hack':
-      return <Image src={HackLogo} width={size} alt="ACM Hack Logo" />;
-    case 'ai':
-      return <Image src={AILogo} width={size} alt="ACM AI Logo" />;
-    case 'cyber':
-      return <Image src={CyberLogo} width={size} alt="ACM Cyber Logo" />;
-    case 'design':
-      return <Image src={DesignLogo} width={size} alt="ACM Design Logo" />;
-    default:
-      return <Image src={ACMLogo} width={size} alt="ACM General Logo" />;
-  }
+  const formattedName = capitalize(community) as Community;
+
+  if (!Object.values(Community).includes(formattedName))
+    return <Image src={communityLogos.General} width={size} alt="ACM General Logo" />;
+
+  return (
+    <Image src={communityLogos[formattedName]} width={size} alt={`ACM ${formattedName} Logo`} />
+  );
 };
 
 export default CommunityLogo;

src/components/common/Dropdown/index.tsx

@@ -7,10 +7,12 @@ interface Option {
   label: string;
 }
 
+export const DIVIDER = '----';
+
 interface DropdownProps {
   name: string;
   ariaLabel: string;
-  options: (Option | '---')[];
+  options: (Option | typeof DIVIDER)[];
   value: string;
   // Justification for disabling rules: This seems to be a false positive.
   // https://stackoverflow.com/q/63767199/
@@ -33,7 +35,7 @@ const Dropdown = ({ name, ariaLabel, options, value, onChange }: DropdownProps)
   const optionButtons: ReactNode[] = [];
   let dividers = 0;
   options.forEach(option => {
-    if (option === '---') {
+    if (option === DIVIDER) {
       optionButtons.push(<hr key={dividers} />);
       dividers += 1;
     } else {
@@ -81,7 +83,7 @@ const Dropdown = ({ name, ariaLabel, options, value, onChange }: DropdownProps)
         aria-label={ariaLabel}
       >
         {options.map(option =>
-          option !== '---' ? (
+          option !== DIVIDER ? (
             <option value={option.value} key={option.value}>
               {option.label}
             </option>

src/components/layout/Navbar/index.tsx

@@ -2,7 +2,7 @@ import ThemeToggle from '@/components/common/ThemeToggle';
 import { config } from '@/lib';
 import { useWindowSize } from '@/lib/hooks/useWindowSize';
 import { PermissionService } from '@/lib/services';
-import type { PrivateProfile } from '@/lib/types/apiResponses';
+import { UserAccessType } from '@/lib/types/enums';
 import LightModeLogo from '@/public/assets/acm-logos/general/light-mode.png';
 import ACMIcon from '@/public/assets/icons/acm-icon.svg';
 import CalendarIcon from '@/public/assets/icons/calendar-icon.svg';
@@ -17,9 +17,9 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import styles from './style.module.scss';
 
 interface NavbarProps {
-  user?: PrivateProfile;
+  accessType?: UserAccessType;
 }
-const Navbar = ({ user }: NavbarProps) => {
+const Navbar = ({ accessType }: NavbarProps) => {
   const size = useWindowSize();
   const headerRef = useRef<HTMLHeadElement>(null);
 
@@ -48,7 +48,7 @@ const Navbar = ({ user }: NavbarProps) => {
     if (!isMobile) setMenuOpen(false);
   }, [isMobile]);
 
-  if (!user) {
+  if (!accessType) {
     return (
       <header className={styles.header}>
         <div className={styles.content}>
@@ -63,7 +63,7 @@ const Navbar = ({ user }: NavbarProps) => {
     );
   }
 
-  const isAdmin = PermissionService.canViewAdminPage().includes(user.accessType);
+  const isAdmin = PermissionService.canViewAdminPage().includes(accessType);
 
   return (
     <header className={styles.header} ref={headerRef}>

src/components/layout/PageLayout/index.tsx

@@ -1,15 +1,15 @@
 import Navbar from '@/components/layout/Navbar';
-import type { PrivateProfile } from '@/lib/types/apiResponses';
+import { UserAccessType } from '@/lib/types/enums';
 import { PropsWithChildren } from 'react';
 import styles from './style.module.scss';
 
 interface LayoutProps {
-  user?: PrivateProfile;
+  accessType?: UserAccessType;
 }
 
-const PageLayout = ({ user, children }: PropsWithChildren<LayoutProps>) => (
+const PageLayout = ({ accessType, children }: PropsWithChildren<LayoutProps>) => (
   <>
-    <Navbar user={user} />
+    <Navbar accessType={accessType} />
     <main className={styles.content}>{children}</main>
   </>
 );

src/components/store/HelpModal/index.tsx

@@ -5,14 +5,14 @@ import Step4 from '@/public/assets/graphics/store/step4.svg';
 import ArrowLeftIcon from '@/public/assets/icons/arrow-left.svg';
 import ArrowRightIcon from '@/public/assets/icons/arrow-right.svg';
 import CloseIcon from '@/public/assets/icons/close-icon.svg';
-import { ReactNode, useEffect, useRef } from 'react';
+import { useEffect, useRef, type PropsWithChildren } from 'react';
 import styles from './style.module.scss';
 
 interface StepProps {
   step: number;
-  children?: ReactNode;
 }
-const Step = ({ step, children }: StepProps) => {
+
+const Step = ({ step, children }: PropsWithChildren<StepProps>) => {
   const Left = step > 1 ? 'a' : 'span';
   const Right = step < 4 ? 'a' : 'span';
   return (

src/lib/constants/communityLogos.ts

@@ -0,0 +1,16 @@
+/* eslint-disable import/prefer-default-export */
+import { Community } from '@/lib/types/enums';
+import AILogo from '@/public/assets/acm-logos/communities/ai.png';
+import CyberLogo from '@/public/assets/acm-logos/communities/cyber.png';
+import DesignLogo from '@/public/assets/acm-logos/communities/design.png';
+import HackLogo from '@/public/assets/acm-logos/communities/hack.png';
+import ACMLogo from '@/public/assets/acm-logos/general/light-mode.png';
+import type { StaticImageData } from 'next/image';
+
+export const communityLogos: Record<Community, StaticImageData> = {
+  AI: AILogo,
+  Cyber: CyberLogo,
+  Design: DesignLogo,
+  Hack: HackLogo,
+  General: ACMLogo,
+};

src/lib/services/CookieService.ts

@@ -1,3 +1,4 @@
+import { CookieType } from '@/lib/types/enums';
 import { deleteCookie, getCookie, setCookie } from 'cookies-next';
 import type { OptionsType } from 'cookies-next/lib/types';
 
@@ -33,3 +34,11 @@ export const deleteClientCookie = (key: string): void => {
 export const deleteServerCookie = (key: string, options: OptionsType): void => {
   deleteCookie(key, options);
 };
+
+export const clearClientCookies = (): void => {
+  Object.keys(CookieType).forEach(key => deleteClientCookie(key));
+};
+
+export const clearServerCookies = (options: OptionsType): void => {
+  Object.keys(CookieType).forEach(key => deleteServerCookie(key, options));
+};

src/lib/services/PermissionService.ts

@@ -20,14 +20,6 @@ export const canViewAdminPage = (): UserAccessType[] => {
   ];
 };
 
-/**
- * @returns Array of all possible user access types
- */
-export const allUserTypes = (): UserAccessType[] => {
-  const values = Object.values(UserAccessType) as UserAccessType[];
-  return values;
-};
-
 /**
  * @param types to exclude from array
  * @returns Array with all user access types except exclusions
@@ -36,3 +28,10 @@ export const allUserTypesExcept = (types: UserAccessType[]): UserAccessType[] =>
   const values = Object.keys(UserAccessType) as UserAccessType[];
   return values.filter(value => !types.includes(value));
 };
+
+/**
+ * @returns Valid logged in user types
+ */
+export const loggedInUser = (): UserAccessType[] => {
+  return allUserTypesExcept([UserAccessType.RESTRICTED]);
+};

src/lib/types/enums.ts

@@ -4,6 +4,14 @@ export enum CookieType {
   ACCESS_TOKEN = 'ACCESS_TOKEN',
 }
 
+export enum Community {
+  HACK = 'Hack',
+  AI = 'AI',
+  CYBER = 'Cyber',
+  DESIGN = 'Design',
+  GENERAL = 'General',
+}
+
 export enum UserAccessType {
   RESTRICTED = 'RESTRICTED',
   STANDARD = 'STANDARD',

src/pages/404.tsx

@@ -1,24 +1,12 @@
 import { SignInButton } from '@/components/auth';
 import { VerticalForm } from '@/components/common';
-import { Navbar } from '@/components/store';
-import { config } from '@/lib';
-import { PrivateProfile } from '@/lib/types/apiResponses';
 import Cat404 from '@/public/assets/graphics/cat404.png';
 import styles from '@/styles/pages/404.module.scss';
 import Image from 'next/image';
-import { useRouter } from 'next/router';
 
-interface PageNotFoundProps {
-  user?: PrivateProfile;
-}
-
-const PageNotFound = ({ user }: PageNotFoundProps) => {
-  const router = useRouter();
+const PageNotFound = () => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 8.25rem)' }}>
-      {user && router.asPath.startsWith(config.storeRoute) && (
-        <Navbar balance={user.credits} showBack />
-      )}
       <VerticalForm style={{ alignItems: 'center', flex: 'auto', height: 'unset' }}>
         <h1 className={styles.header}>Whoops, we ended up on the wrong page!</h1>
         <Image src={Cat404} width={256} height={256} alt="Sad Cat" />

src/pages/_app.tsx

@@ -6,37 +6,14 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import { SEO } from '@/components/common';
 import { PageLayout } from '@/components/layout';
-import { CookieService } from '@/lib/services';
-import type { PrivateProfile } from '@/lib/types/apiResponses';
-import { CookieType } from '@/lib/types/enums';
-import { NextPageContext } from 'next';
 import { ThemeProvider } from 'next-themes';
 import type { AppProps } from 'next/app';
 import { DM_Sans as DMSans } from 'next/font/google';
-import { useEffect, useState } from 'react';
 import { ToastContainer } from 'react-toastify';
 
-interface InitialPropInterface {
-  user?: PrivateProfile;
-}
 const dmSans = DMSans({ subsets: ['latin'], weight: ['400', '500', '700'] });
 
-export default function MyApp({ Component, pageProps }: AppProps<InitialPropInterface>) {
-  const [user, setUser] = useState(pageProps?.user);
-
-  // For 404 page: Try getting user from cookie on client side (because 404
-  // pages in Next.js must be a static page)
-  useEffect(() => {
-    if (pageProps?.user) {
-      setUser(pageProps?.user);
-      return;
-    }
-    const userCookie = CookieService.getClientCookie(CookieType.USER);
-    if (userCookie) {
-      setUser(JSON.parse(userCookie));
-    }
-  }, [pageProps?.user]);
-
+export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <style jsx global>{`
@@ -47,26 +24,10 @@ export default function MyApp({ Component, pageProps }: AppProps<InitialPropInte
       <SEO />
       <ThemeProvider>
         <ToastContainer />
-        <PageLayout user={user}>
-          <Component user={user} {...pageProps} />
+        <PageLayout accessType={pageProps?.user?.accessType}>
+          <Component {...pageProps} />
         </PageLayout>
       </ThemeProvider>
     </>
   );
 }
-
-MyApp.getInitialProps = ({ req, res }: NextPageContext) => {
-  const userCookie = CookieService.getServerCookie(CookieType.USER, { req, res });
-
-  if (!userCookie) {
-    return {
-      user: null,
-    };
-  }
-
-  const user: PrivateProfile = JSON.parse(userCookie);
-
-  return {
-    user,
-  };
-};

src/pages/about.tsx

@@ -71,5 +71,5 @@ const getServerSidePropsFunc: GetServerSideProps = async () => ({
 
 export const getServerSideProps = withAccessType(
   getServerSidePropsFunc,
-  PermissionService.allUserTypes()
+  PermissionService.loggedInUser()
 );

src/pages/discord.tsx

@@ -14,5 +14,5 @@ const getServerSidePropsFunc: GetServerSideProps = async () => ({
 
 export const getServerSideProps = withAccessType(
   getServerSidePropsFunc,
-  PermissionService.allUserTypes()
+  PermissionService.loggedInUser()
 );

src/pages/events.tsx

@@ -1,4 +1,5 @@
 import { Dropdown, PaginationControls, Typography } from '@/components/common';
+import { DIVIDER } from '@/components/common/Dropdown';
 import { EventDisplay } from '@/components/events';
 import { EventAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
@@ -127,7 +128,7 @@ const EventsPage = ({ events, attendances }: EventsPageProps) => {
               { value: 'past-month', label: 'Past month' },
               { value: 'past-year', label: 'Past year' },
               { value: 'all-time', label: 'All time' },
-              '---',
+              DIVIDER,
               ...years,
             ]}
             value={dateFilter}
@@ -172,13 +173,15 @@ export default EventsPage;
 
 const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
   const authToken = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
-  const events = await EventAPI.getAllEvents();
-  const attendances = await EventAPI.getAttendancesForUser(authToken);
+  const getEvents = EventAPI.getAllEvents();
+  const getAttendances = EventAPI.getAttendancesForUser(authToken);
+
+  const [events, attendances] = await Promise.all([getEvents, getAttendances]);
 
   return { props: { events, attendances } };
 };
 
 export const getServerSideProps = withAccessType(
   getServerSidePropsFunc,
-  PermissionService.allUserTypes()
+  PermissionService.loggedInUser()
 );