From c6b56ed30b8ca9ed47d73ab1838b1ce0152c5c1c Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Mon, 3 Oct 2022 22:11:32 +0400
Subject: [PATCH 1/3] feat: Add back button to addExercise page

The back button will push `/curriculum/[lessonSlug]/mentor` to history
---
 .../[lessonSlug]/mentor/addExercise/index.tsx      | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx b/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx
index 5113a20dd..4a0eb17be 100644
--- a/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx
+++ b/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx
@@ -17,6 +17,7 @@ import styles from '../../../../../scss/mentorPage.module.scss'
 import { get } from 'lodash'
 import QueryInfo from '../../../../../components/QueryInfo'
 import { errorCheckAllFields } from '../../../../../helpers/admin/adminHelpers'
+import { ArrowLeftIcon } from '@primer/octicons-react'
 import * as Sentry from '@sentry/nextjs'
 
 type DetachedModule = Omit<Module, 'lesson' | 'author'>
@@ -43,10 +44,19 @@ const Header = <
   setModule,
   setErrorMsg
 }: HeaderProps<T>) => {
+  const { query, push } = useRouter()
+  const { lessonSlug } = query
+
   const modules = get(lesson, 'modules') ?? []
 
   return (
     <header className={styles.header}>
+      <button
+        className="btn ps-0 d-flex align-items-center mb-3"
+        onClick={() => push(`/curriculum/${lessonSlug}/mentor`)}
+      >
+        <ArrowLeftIcon size="medium" aria-label="Exit" />
+      </button>
       <div>
         <h1>{get(lesson, 'title')}</h1>
       </div>
@@ -133,8 +143,8 @@ const initValues = [
 ]
 
 const AddExercisePage = ({ data }: GetAppProps) => {
-  const router = useRouter()
-  const { lessonSlug } = router.query
+  const { query } = useRouter()
+  const { lessonSlug } = query
 
   // Omitting author and lesson because data.lessons[i].modules[i] mismatching type
   const [module, setModule] = useState<null | DetachedModule>(null)

From 38ee8aa95fd82632fef995ba08294c70bbf5be90 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Mon, 3 Oct 2022 22:14:21 +0400
Subject: [PATCH 2/3] test: Add a new test to addExercise page

---
 .../[lessonSlug]/mentor/addExercise/index.test.js  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js b/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js
index e8291aeb6..c37ea6876 100644
--- a/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js
+++ b/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js
@@ -157,6 +157,20 @@ describe('AddExercise page', () => {
     expect(screen.queryAllByText('Select a module')[0]).toBeInTheDocument()
   })
 
+  it('should go back to mentor page', async () => {
+    render(
+      <MockedProvider mocks={mocks}>
+        <AddExercisePage />
+      </MockedProvider>
+    )
+
+    // Helps the data to resolve
+    await act(() => new Promise(res => setTimeout(res, 0)))
+
+    await userEvent.click(screen.getByLabelText('Exit'))
+
+    expect(useRouterObj.push).toBeCalledWith('/curriculum/js1/mentor')
+  })
   it('should fill out the inputs', async () => {
     render(
       <MockedProvider mocks={mocks}>

From acbba84cf355e2b1295fd6766d0189aed93e4272 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Tue, 4 Oct 2022 02:58:53 +0400
Subject: [PATCH 3/3] refactor: Use <Link> component for hyperlinks

---
 .../[lessonSlug]/mentor/addExercise/index.test.js  | 14 --------------
 .../[lessonSlug]/mentor/addExercise/index.tsx      | 14 +++++++-------
 2 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js b/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js
index c37ea6876..e8291aeb6 100644
--- a/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js
+++ b/__tests__/pages/curriculum/[lessonSlug]/mentor/addExercise/index.test.js
@@ -157,20 +157,6 @@ describe('AddExercise page', () => {
     expect(screen.queryAllByText('Select a module')[0]).toBeInTheDocument()
   })
 
-  it('should go back to mentor page', async () => {
-    render(
-      <MockedProvider mocks={mocks}>
-        <AddExercisePage />
-      </MockedProvider>
-    )
-
-    // Helps the data to resolve
-    await act(() => new Promise(res => setTimeout(res, 0)))
-
-    await userEvent.click(screen.getByLabelText('Exit'))
-
-    expect(useRouterObj.push).toBeCalledWith('/curriculum/js1/mentor')
-  })
   it('should fill out the inputs', async () => {
     render(
       <MockedProvider mocks={mocks}>
diff --git a/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx b/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx
index 4a0eb17be..42d60a10d 100644
--- a/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx
+++ b/pages/curriculum/[lessonSlug]/mentor/addExercise/index.tsx
@@ -18,6 +18,7 @@ import { get } from 'lodash'
 import QueryInfo from '../../../../../components/QueryInfo'
 import { errorCheckAllFields } from '../../../../../helpers/admin/adminHelpers'
 import { ArrowLeftIcon } from '@primer/octicons-react'
+import Link from 'next/link'
 import * as Sentry from '@sentry/nextjs'
 
 type DetachedModule = Omit<Module, 'lesson' | 'author'>
@@ -44,19 +45,18 @@ const Header = <
   setModule,
   setErrorMsg
 }: HeaderProps<T>) => {
-  const { query, push } = useRouter()
+  const { query } = useRouter()
   const { lessonSlug } = query
 
   const modules = get(lesson, 'modules') ?? []
 
   return (
     <header className={styles.header}>
-      <button
-        className="btn ps-0 d-flex align-items-center mb-3"
-        onClick={() => push(`/curriculum/${lessonSlug}/mentor`)}
-      >
-        <ArrowLeftIcon size="medium" aria-label="Exit" />
-      </button>
+      <Link href={`/curriculum/${lessonSlug}/mentor`}>
+        <a className="btn ps-0 d-flex align-items-center mb-3">
+          <ArrowLeftIcon size="medium" aria-label="Exit" />
+        </a>
+      </Link>
       <div>
         <h1>{get(lesson, 'title')}</h1>
       </div>