Update _app.tsx

fix

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/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,7 @@ export const deleteClientCookie = (key: string): void => {
 export const deleteServerCookie = (key: string, options: OptionsType): void => {
   deleteCookie(key, options);
 };
+
+export const clearServerCookies = (options: OptionsType): void => {
+  Object.keys(CookieType).forEach(key => deleteServerCookie(key, options));
+};

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/events.tsx

@@ -172,8 +172,10 @@ 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 } };
 };

src/pages/index.tsx

@@ -51,8 +51,10 @@ export default PortalHomePage;
 
 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]);
 
   const now = new Date();
   const pastEvents: PublicEvent[] = [];

src/pages/leaderboard.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, PaginationControls } from '@/components/common';
 import { LeaderboardRow, TopThreeCard } from '@/components/leaderboard';
 import { config } from '@/lib';
-import { LeaderboardAPI } from '@/lib/api';
+import { LeaderboardAPI, UserAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
 import { SlidingLeaderboardQueryParams } from '@/lib/types/apiRequests';
@@ -173,10 +173,14 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) =
   const AUTH_TOKEN = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
 
   const sort = typeof query.sort === 'string' ? query.sort : getEndYear() - 1;
-  const leaderboard = await LeaderboardAPI.getLeaderboard(AUTH_TOKEN, getLeaderboardRange(sort));
+
+  const getLeaderboard = LeaderboardAPI.getLeaderboard(AUTH_TOKEN, getLeaderboardRange(sort));
+  const getUser = UserAPI.getCurrentUser(AUTH_TOKEN);
+
+  const [leaderboard, user] = await Promise.all([getLeaderboard, getUser]);
 
   return {
-    props: { sort, leaderboard },
+    props: { sort, leaderboard, user },
   };
 };
 

src/pages/logout.tsx

@@ -1,20 +1,16 @@
 import { config } from '@/lib';
 import { CookieService } from '@/lib/services';
-import { CookieType } from '@/lib/types/enums';
 import type { GetServerSideProps } from 'next';
 
 /**
  * `/logout` route to handle logout by ensuring user cookie is cleared and redirecting to login screen without rendering a page
  */
-const LogoutPage = () => {
-  return null;
-};
+const LogoutPage = () => null;
 
 export default LogoutPage;
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
-  CookieService.deleteServerCookie(CookieType.USER, { req, res });
-  CookieService.deleteServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+  CookieService.clearServerCookies({ req, res });
 
   return {
     redirect: {