refactor: add username selection to question page & integrate new URLs (

#16)

* refactor: add username selection to question page & integreate new URLs

* test: ensure they know to look for username when testing navbar

src/App.tsx

@@ -20,7 +20,7 @@ const router = createBrowserRouter([
         element: <FrontCover />,
       },
       {
-        path: 'questions/:questionId',
+        path: 'questions/:questionId/:username',
         element: <QuestionPage />,
       },
       {

src/api/routes.ts

@@ -4,7 +4,7 @@ const routes = {
   studentAnswers: (studentID: string) => `/${studentID}/answers`,
   studentMarks: (studentID: string) => `/${studentID}/marks`,
   question: (number: number) => `/questions/${number}`,
-  questionAnswers: (number: number) => `/questions/${number}/answer`,
+  questionAnswers: (number: number, username: string) => `/answers/${username}/question/${number}`,
 }
 
 export default routes

src/components/NavBar/index.tsx

@@ -2,6 +2,8 @@ import { Container, Section, TabNav } from '@radix-ui/themes'
 import React, { FC } from 'react'
 import { useLocation } from 'react-router-dom'
 
+import { DEFAULT_TEST_USERNAME } from '../../utils/globalConstants'
+
 interface NavBarProps {
   questionCount: number
 }
@@ -24,9 +26,9 @@ const NavBar: FC<NavBarProps> = ({ questionCount }) => {
           </TabNav.Link>
           {[...Array(questionCount).keys()].map((i) => (
             <TabNav.Link
-              href={`/questions/${i + 1}`}
+              href={`/questions/${i + 1}/${DEFAULT_TEST_USERNAME}`}
               key={i}
-              active={pathname === `/questions/${i + 1}`}
+              active={pathname.startsWith(`/questions/${i + 1}`)}
             >
               {`Question ${i + 1}`}
             </TabNav.Link>

src/hooks/exam.ts

@@ -1,10 +1,12 @@
 import { plainToInstance } from 'class-transformer'
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useParams } from 'react-router-dom'
 
 import axiosInstance from '../api/axiosInstance'
 import routes from '../api/routes'
 import { Answer, AnswerMap, Question, Summary } from '../types/exam'
 import { buildResourceLookupTable } from '../utils/answers'
+import { DEFAULT_TEST_USERNAME } from '../utils/globalConstants'
 
 export const useQuestion = (number: number | undefined) => {
   const [question, setQuestion] = useState<Question>()
@@ -22,10 +24,13 @@ export const useQuestion = (number: number | undefined) => {
 export const useQuestionAnswers = (number: number | undefined) => {
   const [answers, setAnswers] = useState<Answer[]>([])
   const [answersAreLoaded, setAnswersAreLoaded] = useState(false)
+
+  const { username = DEFAULT_TEST_USERNAME } = useParams()
+
   useEffect(() => {
     if (number === undefined) return
     axiosInstance
-      .get(routes.questionAnswers(number))
+      .get(routes.questionAnswers(number, username))
       .then(({ data }) => setAnswers(data.map((d) => plainToInstance(Answer, d))))
       .finally(() => setAnswersAreLoaded(true))
   }, [number])
@@ -54,7 +59,7 @@ export const useQuestionAnswers = (number: number | undefined) => {
 
   const saveAnswers = useCallback(() => {
     if (number === undefined) return
-    axiosInstance.post(routes.questionAnswers(number), answers).then(() => {})
+    axiosInstance.post(routes.questionAnswers(number, username), answers).then(() => {})
   }, [answers, number])
 
   return { lookupAnswer, answersAreLoaded, setAnswer, saveAnswers }

src/pages/QuestionPage.tsx

@@ -15,7 +15,9 @@ import { parseAnswer } from '../utils/answers'
 
 const QuestionPage: FC = () => {
   const { pathname } = useLocation()
-  const pathMatch = matchPath({ path: '/questions/:number' }, pathname)
+  const pathMatch = matchPath({ path: '/questions/:number/:username' }, pathname)
+
+  console.log(pathMatch)
 
   const { question, questionIsLoaded } = useQuestion(Number(pathMatch?.params?.number))
   const { lookupAnswer, setAnswer, saveAnswers } = useQuestionAnswers(

src/tests/components/NavBar.test.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
 
 import NavBar from '../../components/NavBar'
+import { DEFAULT_TEST_USERNAME } from '../../utils/globalConstants'
 
 describe('NavBar', () => {
   const renderWithRouter = (ui, { route = '/' } = {}) => {
@@ -29,12 +30,12 @@ describe('NavBar', () => {
     for (let i = 1; i <= questionCount; i++) {
       const questionLink = screen.getByRole('link', { name: new RegExp(`question ${i}`, 'i') })
       expect(questionLink).toBeInTheDocument()
-      expect(questionLink).toHaveAttribute('href', `/questions/${i}`)
+      expect(questionLink).toHaveAttribute('href', `/questions/${i}/${DEFAULT_TEST_USERNAME}`)
     }
   })
 
   it('highlights the correct active link based on the current path', () => {
-    const activeRoute = '/questions/3'
+    const activeRoute = `/questions/3/${DEFAULT_TEST_USERNAME}`
     renderWithRouter(<NavBar questionCount={5} />, { route: activeRoute })
 
     // Check for active class on the correct link

src/utils/globalConstants.ts

@@ -0,0 +1,2 @@
+// TODO: Remove this for production
+export const DEFAULT_TEST_USERNAME = 'hpotter'