Repo cleanup (#110)

* Update _app.tsx

fix

* Update leaderboard.tsx

* Rename permission

* Remove user specific store 404 details

* remove magic var and type children correctly

* Refactor community logos to support future changes

* Update index.tsx

* Fix package

* fix build

* Update style.module.scss

* test pwa

* Upgrade node from 18 to 21

* Update yarn.lock

* Change to LTS

* Change to LTS

Upgrade node from 18 to 21

Update yarn.lock

* Revert "Change to LTS"

This reverts commit 6761d5b.

* Revert

* undo undo undo

* Update yarn.lock

* Update .nvmrc

* Update package.json

* Update yarn.lock

* Update yarn.lock

* Configure PWA

* Disable lint in service worker

* fix navbar border

* Update style.module.scss

* date selection

* center  page

* center grid items better

* fixes

.eslintrc.json

@@ -38,5 +38,10 @@
       }
     ]
   },
-  "ignorePatterns": "src/**/*.d.ts"
+  "ignorePatterns": [
+    "src/**/*.d.ts",
+    "**/public/sw.js",
+    "**/public/workbox-*.js",
+    "**/public/worker-*.js"
+  ]
 }

.gitignore

@@ -36,3 +36,11 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

next.config.js

@@ -1,6 +1,13 @@
 const env = process.env.NODE_ENV;
 const isDevelopment = env !== 'production';
 
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  register: true,
+  skipWaiting: true,
+  disable: isDevelopment,
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: {
@@ -37,4 +44,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withPWA(nextConfig);

package.json

@@ -36,6 +36,7 @@
     "ics": "^3.7.2",
     "luxon": "^3.3.0",
     "next": "^13.2.5-canary.30",
+    "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

public/manifest.json

@@ -1,15 +1,32 @@
 {
-  "short_name": "ACM Membership Portal",
-  "name": "Association for Computing Machinery at UC San Diego Student Membership Portal",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "ACM at UCSD Membership Portal",
+  "short_name": "ACM Portal",
+  "description": "Association for Computing Machinery at UC San Diego Student Membership Portal",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 16x16",
-      "type": "image/x-icon"
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }

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;
   onChange: (value: string) => void;
 }
@@ -30,7 +32,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 {
@@ -78,7 +80,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/events/EventDisplay/style.module.scss

@@ -1,5 +1,7 @@
 .container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
+  column-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  place-items: center;
+  row-gap: 2rem;
 }

src/components/home/Hero/style.module.scss

@@ -132,6 +132,7 @@
   }
 
   .image {
+    margin: 0 auto;
     max-height: 1080px;
     max-width: 1920px;
     object-fit: cover;

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 CalendarIcon from '@/public/assets/icons/calendar-icon.svg';
 import HomeIcon from '@/public/assets/icons/home-icon.svg';
@@ -16,9 +16,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);
 
@@ -47,7 +47,7 @@ const Navbar = ({ user }: NavbarProps) => {
     if (!isMobile) setMenuOpen(false);
   }, [isMobile]);
 
-  if (!user) {
+  if (!accessType) {
     return (
       <header className={styles.header}>
         <div className={styles.content}>
@@ -62,7 +62,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/Navbar/style.module.scss

@@ -164,7 +164,7 @@
     background: vars.$wainbow;
     height: 0.25rem;
     margin: 0 -1rem;
-    width: calc(100% + 2rem);
+    width: 100vw;
   }
 }
 

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 Step3 from '@/public/assets/graphics/store/step3.svg';
 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 { ReactNode } from 'react';
+import 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

@@ -22,7 +22,7 @@ export const canViewAdminPage = [
 /**
  * @returns Array of all possible user access types
  */
-export const allUserTypes = () => Object.values(UserAccessType) as UserAccessType[];
+export const allUserTypes = Object.values(UserAccessType);
 
 /**
  * @param types to exclude from array
@@ -32,3 +32,8 @@ 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 = allUserTypesExcept([UserAccessType.RESTRICTED]);

src/lib/types/enums.ts

@@ -3,6 +3,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/lib/utils.ts

@@ -236,14 +236,17 @@ export const getDateRange = (sort: string | number) => {
     }
     case 'past-week': {
       from = now - DAY_SECONDS * 7;
+      to = now;
       break;
     }
     case 'past-month': {
       from = now - DAY_SECONDS * 28;
+      to = now;
       break;
     }
     case 'past-year': {
       from = now - DAY_SECONDS * 365;
+      to = now;
       break;
     }
     case 'all-time': {

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" />