Redirect on login Closes #1031

__tests__/pages/login.test.js

@@ -8,6 +8,7 @@ import LOGIN_USER from '../../graphql/queries/loginUser'
 import LoginPage from '../../pages/login'
 import { useRouter } from 'next/router'
 import { getLayout } from '../../components/Layout'
+import { cloneDeep } from 'lodash'
 
 describe('Login Page', () => {
   const fakeUsername = 'fake username'
@@ -21,59 +22,62 @@ describe('Login Page', () => {
     await userEvent.type(usernameField, fakeUsername, { delay: 1 })
     await userEvent.type(passwordField, fakePassword, { delay: 1 })
   }
-  const { push } = useRouter()
+  const { push, query } = useRouter()
   beforeEach(() => {
     jest.clearAllMocks()
   })
   test('Should use Layout component getLayout ', async () => {
     expect(LoginPage.getLayout === getLayout).toBe(true)
   })
 
-  test('Should redirect to /curriculum on success', async () => {
-    const mocks = [
-      {
-        request: { query: GET_APP },
-        result: {
-          data: {
-            session: null,
-            lessons: [],
-            alerts: []
-          }
+  const successfulLoginMocks = [
+    {
+      request: { query: GET_APP },
+      result: {
+        data: {
+          session: null,
+          lessons: [],
+          alerts: []
         }
-      },
-      {
-        request: { query: GET_APP },
-        result: {
-          data: {
-            session: null,
-            lessons: [],
-            alerts: []
-          }
+      }
+    },
+    {
+      request: { query: GET_APP },
+      result: {
+        data: {
+          session: null,
+          lessons: [],
+          alerts: []
+        }
+      }
+    },
+    {
+      request: {
+        query: LOGIN_USER,
+        variables: {
+          username: fakeUsername,
+          password: fakePassword
         }
       },
-      {
-        request: {
-          query: LOGIN_USER,
-          variables: {
+      result: {
+        data: {
+          login: {
+            success: true,
             username: fakeUsername,
-            password: fakePassword
-          }
-        },
-        result: {
-          data: {
-            login: {
-              success: true,
-              username: fakeUsername,
-              cliToken: 'fake token',
-              error: null
-            }
+            cliToken: 'fake token',
+            error: null
           }
         }
       }
-    ]
+    }
+  ]
 
+  test('Should redirect to /curriculum on success', async () => {
     const { getByTestId } = render(
-      <MockedProvider mocks={mocks} addTypename={false}>
+      <MockedProvider
+        mocks={cloneDeep(successfulLoginMocks)}
+        addTypename={false}
+      >
         <LoginPage />
       </MockedProvider>
     )
@@ -86,6 +90,26 @@ describe('Login Page', () => {
     await waitFor(() => expect(push).toBeCalledWith('/curriculum'))
   })
 
+  test('Should redirect to the path in `next` on success', async () => {
+    query.next = 'url-to-go-to-post-login'
+
+    const { getByTestId } = render(
+      <MockedProvider
+        mocks={cloneDeep(successfulLoginMocks)}
+        addTypename={false}
+      >
+        <LoginPage />
+      </MockedProvider>
+    )
+
+    const submitButton = getByTestId('submit')
+
+    await fillOutLoginForm(getByTestId)
+    fireEvent.click(submitButton)
+
+    await waitFor(() => expect(push).toBeCalledWith(query.next))
+  })
+
   test('Should set alert visible on invalid credentials', async () => {
     const mocks = [
       {

__tests__/pages/review/[lesson].test.js

@@ -69,7 +69,6 @@ const getSubmissionsMock = {
     }
   }
 }
-
 const getPreviousSubmissionsMock = {
   request: {
     query: GET_PREVIOUS_SUBMISSIONS,
@@ -79,9 +78,10 @@ const getPreviousSubmissionsMock = {
     data: getPreviousSubmissions
   }
 }
+
 const mocks = [getAppMock, getSubmissionsMock, getPreviousSubmissionsMock]
 describe('Lesson Page', () => {
-  const { query, push } = useRouter()
+  const { query, push, asPath } = useRouter()
   query['lesson'] = '2'
   test('Should render new submissions', async () => {
     const { container } = render(
@@ -100,7 +100,7 @@ describe('Lesson Page', () => {
   test('Should return loading spinner when loading', () => {
     expectLoading(<Review />)
   })
-  test('Should redirect to login if no session', async () => {
+  test('Should redirect to login if no user is logged in', async () => {
     const noSessionMock = {
       request: { query: GET_APP },
       result: {
@@ -120,7 +120,12 @@ describe('Lesson Page', () => {
       </MockedProvider>
     )
 
-    await waitFor(() => expect(push).toBeCalledWith('/login'))
+    await waitFor(() =>
+      expect(push).toBeCalledWith({
+        pathname: '/login',
+        query: { next: asPath }
+      })
+    )
   })
   test("Should redirect to curriculum if user hasn't completed lesson yet", async () => {
     const noSessionMock = {

pages/login.tsx

@@ -95,7 +95,8 @@ const LoginPage: React.FC & WithLayout = () => {
     const { success } = _.get(data, 'login', false)
     if (success) {
       window.localStorage.setItem('loggedIn', 'true')
-      router.push('/curriculum')
+      const { next } = router.query
+      router.push(next ? (next as string) : '/curriculum')
     }
     if (error) {
       const graphQLErrors: any = _.get(error, 'graphQLErrors', [])

pages/review/[lesson].tsx

@@ -44,8 +44,11 @@ const Review: React.FC<QueryDataProps<GetAppQuery>> = ({ queryData }) => {
   if (loading) {
     return <LoadingSpinner />
   }
-  if (!session) {
-    router.push('/login')
+  if (!session?.user) {
+    router.push({
+      pathname: '/login',
+      query: { next: router.asPath }
+    })
     return <LoadingSpinner />
   }
   const currentLesson = lessons.find(lesson => lesson.id === currentlessonId)