Clean up code

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

@@ -124,8 +124,8 @@
         }
 
         svg {
-          height: 1.5rem;
-          width: 1.5rem;
+          height: 24px;
+          width: 24px;
         }
       }
     }

src/components/profile/HandleNotFoundPage/index.tsx → src/components/profile/HandleNotFound/index.tsx

@@ -3,11 +3,11 @@ import { Typography, VerticalForm } from '@/components/common';
 import Cat404 from '@/public/assets/graphics/cat404.png';
 import Image from 'next/image';
 
-export interface HandleNotFoundPageProps {
+export interface HandleNotFoundProps {
   handle: string;
 }
 
-export const HandleNotFoundPage = ({ handle }: HandleNotFoundPageProps) => (
+export const HandleNotFound = ({ handle }: HandleNotFoundProps) => (
   <VerticalForm style={{ alignItems: 'center', margin: 'auto' }}>
     <Typography variant="h1/medium" style={{ textAlign: 'center' }}>
       No user with handle &lsquo;{handle}&rsquo; was found.

src/components/profile/UserProfilePage/index.tsx

@@ -2,7 +2,7 @@ import { Carousel, Typography } from '@/components/common';
 import EventCard from '@/components/events/EventCard';
 import { config } from '@/lib';
 import { PublicAttendance, type PublicProfile } from '@/lib/types/apiResponses';
-import { getProfilePicture, getUserRank } from '@/lib/utils';
+import { getLevel, getProfilePicture, getUserRank } from '@/lib/utils';
 import DevpostIcon from '@/public/assets/icons/devpost-icon.svg';
 import EditIcon from '@/public/assets/icons/edit.svg';
 import FacebookIcon from '@/public/assets/icons/facebook-icon.svg';
@@ -12,12 +12,12 @@ import LeaderboardIcon from '@/public/assets/icons/leaderboard-icon.svg';
 import LinkedinIcon from '@/public/assets/icons/linkedin-icon.svg';
 import MajorIcon from '@/public/assets/icons/major-icon.svg';
 import ProfileIcon from '@/public/assets/icons/profile-icon.svg';
-import styles from '@/styles/pages/u/index.module.scss';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { AiOutlineLink } from 'react-icons/ai';
 import { IoMail } from 'react-icons/io5';
+import styles from './index.module.scss';
 
 export interface UserProfilePageProps {
   user: PublicProfile;
@@ -65,7 +65,7 @@ export const UserProfilePage = ({
             <Typography variant="h5/medium">@{user.handle}</Typography>
           </div>
           <div className={styles.cardRank}>
-            <div className={styles.rank}>{getUserRank(user.points)[1]}</div>
+            <div className={styles.rank}>{getUserRank(user.points)}</div>
             <div className={styles.points}>
               <LeaderboardIcon /> &nbsp;
               {user.points.toLocaleString()} Leaderboard Points
@@ -87,7 +87,7 @@ export const UserProfilePage = ({
           {isSignedInUser ? 'My' : `${user.firstName}'s`} Progress
         </Typography>
         <div className={styles.progressInfo}>
-          <Typography variant="h4/regular">Level {getUserRank(user.points)[0]}</Typography>
+          <Typography variant="h4/regular">Level {getLevel(user.points)}</Typography>
           <Typography variant="h4/regular">{user.points % 100}/100</Typography>
           <div className={styles.progressBar}>
             <div className={styles.inner} style={{ width: `${progress}%` }} />
@@ -97,7 +97,7 @@ export const UserProfilePage = ({
           {isSignedInUser ? 'You need' : `${user.firstName} needs`} {100 - (user.points % 100)} more
           points to level up to
           <Typography variant="h5/bold" component="span">
-            &nbsp;{getUserRank(user.points + 100)[1]}
+            &nbsp;{getUserRank(user.points + 100)}
           </Typography>
         </Typography>
       </div>

src/components/profile/index.ts

@@ -1,7 +1,6 @@
 export { EditBlock, EditField, SingleField } from './EditField';
-export * from './HandleNotFoundPage';
+export * from './HandleNotFound';
 export { default as Preview } from './Preview';
 export { default as SocialMediaIcon } from './SocialMediaIcon';
 export { default as Switch } from './Switch';
 export * from './UserProfilePage';
-

src/lib/utils.ts

@@ -72,7 +72,6 @@ export const formatSearch = (text: string): string => {
 
 /**
  * Helper function to map each user to a numeric value deterministically
- * TODO: Use the user's UUID to hash to a number since it will never change
  * @param user
  * @returns A 32-bit integer
  * @see https://stackoverflow.com/questions/6122571/simple-non-secure-hash-function-for-javascript
@@ -106,11 +105,11 @@ export const getLevel = (points: number): number => {
 };
 
 /**
- * Get a user's level and rank based on how many points they have
+ * Get a user's rank based on how many points they have
  * @param points
- * @returns [numeric level, rank name]
+ * @returns rank name
  */
-export const getUserRank = (points: number): [number, string] => {
+export const getUserRank = (points: number): string => {
   const ranks = [
     'Factorial Flatbread',
     'Exponential Eclair',
@@ -128,9 +127,8 @@ export const getUserRank = (points: number): [number, string] => {
     'Sometime(TM)',
     'We Ran Out Of Ranks',
   ] as const;
-  const level = Math.floor(points / 100) + 1;
-  const index = Math.min(ranks.length - 1, level - 1);
-  return [level, ranks[index] as string];
+  const index = Math.min(ranks.length, getLevel(points)) - 1;
+  return ranks[index] as string;
 };
 
 /**

src/pages/leaderboard.tsx

@@ -123,7 +123,7 @@ const LeaderboardPage = ({ sort, leaderboard, user: { uuid } }: LeaderboardProps
             <TopThreeCard
               key={user.uuid}
               position={user.position}
-              rank={getUserRank(user.points)[1]}
+              rank={getUserRank(user.points)}
               name={`${user.firstName} ${user.lastName}`}
               url={`${config.userProfileRoute}${user.handle}`}
               points={user.points}
@@ -139,7 +139,7 @@ const LeaderboardPage = ({ sort, leaderboard, user: { uuid } }: LeaderboardProps
               <LeaderboardRow
                 key={user.uuid}
                 position={user.position}
-                rank={getUserRank(user.points)[1]}
+                rank={getUserRank(user.points)}
                 name={`${user.firstName} ${user.lastName}`}
                 url={`${config.userProfileRoute}${user.handle}`}
                 points={user.points}

src/pages/u/[handle].tsx

@@ -1,6 +1,6 @@
 import {
-  HandleNotFoundPage,
-  HandleNotFoundPageProps,
+  HandleNotFound,
+  HandleNotFoundProps,
   UserProfilePage,
   UserProfilePageProps,
 } from '@/components/profile';
@@ -11,15 +11,15 @@ import { CookieService, PermissionService } from '@/lib/services';
 import { CookieType } from '@/lib/types/enums';
 import type { GetServerSideProps } from 'next/types';
 
-type UserHandlePageProps = HandleNotFoundPageProps | UserProfilePageProps;
+type UserHandlePageProps = HandleNotFoundProps | UserProfilePageProps;
 
-const isHandleNotFound = (props: UserHandlePageProps): props is HandleNotFoundPageProps =>
+const isHandleNotFound = (props: UserHandlePageProps): props is HandleNotFoundProps =>
   'handle' in props;
 
 const UserHandlePage = (props: UserHandlePageProps) => {
   if (isHandleNotFound(props)) {
     const { handle } = props;
-    return <HandleNotFoundPage handle={handle} />;
+    return <HandleNotFound handle={handle} />;
   }
 
   return <UserProfilePage {...props} />;
@@ -38,7 +38,7 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res })
       UserAPI.getAttendancesForCurrentUser(token),
     ]);
 
-    // render HandleNotFoundPage
+    // render HandleNotFoundPage when user with handle is not retrieved
     if (user === null) return { props: { handle } };
 
     const isSignedInUser = user.uuid === signedInUser.uuid;

src/styles/pages/about.module.scss

@@ -47,8 +47,8 @@
 
       .icon {
         fill: currentColor;
-        height: 1.5rem;
-        width: 1.5rem;
+        height: 24px;
+        width: 24px;
       }
     }
   }