feat(routing): Details page added

[Komal914]

Checklist:

• [X] I have read freeCodeCamp's contribution guidelines.
• [X] My pull request has a descriptive title (not a vague title like Update index.md)

Closes #425
Closes #426

This PR is rebased with pr #422. It is related to the jest tests, they were failing on the CI but passing locally. This was fixed inside #422 so I rebased to this branch. Snapshot is also updated to match new UI for details page, as it now has a header.

[ngillux]

Hi @utsab just wanted to follow up on some of the comments left in this review.

The query params contain special characters such as the square brackets ('[]') and ('@') symbol, which results in the odd URL being built which is captured in snapshot test that was updated.

@Komal914 I believe before the query params are passed in, they need to be encoded so before you pass it into something like:studentName: studentName You should do something like encode(studentName) then do studentName: studentName, and then in the file you received them, you should decode the query params before using them, i.e., decode(data.studentName). See this post for more info / and example.

I think it's worth trying, but I think feedback from Utsab could also provide more context.

[ngillux]

Quick update, the problem we were trying to solve was: How do we handle reserved characters in query params when using Next.js useRouter

the following post highlights the same issue we're running into and suggest using 'asPath.' See here.

[Komal914]

@ngillux and I peer programmed and discussed this PR. Due to the upcoming changes to the dashboard_v2 file, where the data will be re-designed, this PR will not be updated until the data redesign is merged. I will be closing this PR for now, and picking it back up pending the merge.