Add profile tabs to URL parameters

frontend/compositions/profile-nav/index.tsx

@@ -1,10 +1,9 @@
-import * as React from "react"
 import { ProfileMenu, profileMenuItems } from "../../models/profile"
 import styles from "./profile-nav.module.css"
 
 interface ProfileNavProps {
   activePage: ProfileMenu
-  setActivePage: React.Dispatch<React.SetStateAction<ProfileMenu>>
+  setActivePage: (newTab: ProfileMenu) => void
 }
 
 export default function ProfileNav({ activePage, setActivePage }: ProfileNavProps) {

frontend/pages/profile/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next"
 import {
   ProfileInfo,
   ProfileNav,
@@ -12,9 +12,36 @@ import { requireAuth } from "../../helpers"
 import { ProfileMenu } from "../../models/profile"
 import { Layout } from "../../shared-components"
 import styles from "./profile.module.css"
+import { useProfileTab } from "./useProfileTab"
 
-export default requireAuth(function Profile() {
-  const [activePage, setActivePage] = React.useState(ProfileMenu.USER_INFO)
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { query } = context
+  const initialTab: ProfileMenu = Object.values(ProfileMenu).includes(query.tab as ProfileMenu)
+    ? (query.tab as ProfileMenu)
+    : ProfileMenu.USER_INFO
+
+  if (initialTab !== query.tab) {
+    // An invalid tab was requested,
+    // Redirect to ProfileMenu.USER_INFO tab
+    return {
+      redirect: {
+        destination: `/profile?tab=${initialTab}`,
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      initialTab
+    }
+  }
+}
+
+export default requireAuth(function Profile({
+  initialTab
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const [activePage, handleTabChange] = useProfileTab(initialTab)
 
   const ActivePageComp = (function (menuItem: ProfileMenu) {
     switch (menuItem) {
@@ -38,7 +65,7 @@ export default requireAuth(function Profile() {
   return (
     <Layout>
       <div className={styles.profileWrapper}>
-        <ProfileNav activePage={activePage} setActivePage={setActivePage} />
+        <ProfileNav activePage={activePage} setActivePage={handleTabChange} />
         <ActivePageComp />
       </div>
     </Layout>

frontend/pages/profile/useProfileTab.ts

@@ -0,0 +1,34 @@
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import { ProfileMenu } from "../../models/profile"
+
+export function useProfileTab(initialTab: ProfileMenu) {
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState<ProfileMenu>(initialTab)
+
+  useEffect(() => {
+    const initialTab = router.query.tab as ProfileMenu
+    if (Object.values(ProfileMenu).includes(initialTab)) {
+      setActiveTab(initialTab)
+    }
+
+    const handleRouteChange = () => {
+      const newTab = router.query.tab as ProfileMenu
+      if (Object.values(ProfileMenu).includes(newTab)) {
+        setActiveTab(newTab)
+      }
+    }
+
+    router.events.on("routeChangeComplete", handleRouteChange)
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange)
+    }
+  }, [router])
+
+  const handleTabChange = (newTab: ProfileMenu) => {
+    router.push(`?tab=${newTab}`)
+  }
+
+  return [activeTab, handleTabChange] as [ProfileMenu, (newTab: ProfileMenu) => void]
+}

frontend/tests/snapshots/profile.test.tsx

@@ -1,9 +1,10 @@
+import { ProfileMenu } from "../../models/profile"
 import Profile from "../../pages/profile"
 import { render, setAuthForTest } from "../test-utils"
 
 beforeAll(() => setAuthForTest())
 
 it("renders Profile Page correctly", () => {
-  const { container } = render(<Profile />)
+  const { container } = render(<Profile initialTab={ProfileMenu.USER_INFO} />)
   expect(container).toMatchSnapshot()
 })