Merge pull request #2247 from bryanjenningz/remove-unnecessary-forgotpassword-full-page-load

Remove unnecessary forgot-password full page load

Author: bryanjenningz

__tests__/pages/__snapshots__/forgotpassword.test.js.snap

@@ -182,13 +182,12 @@ exports[`ForgotPassword Page Should render invalid user/email form on error 1`]
           <p
             class="card-text"
           />
-          <a
+          <button
             class="btn btn-primary btn-lg btn-block mb-3"
-            href="/forgotpassword"
-            role="button"
+            data-testid="back"
           >
             Go Back
-          </a>
+          </button>
         </div>
       </div>
     </div>

__tests__/pages/forgotpassword.test.js

@@ -112,5 +112,11 @@ describe('ForgotPassword Page', () => {
 
     // wait for mutation updates after submitButton is clicked
     await waitFor(() => expect(container).toMatchSnapshot())
+
+    const backButton = getByTestId('back')
+
+    await waitFor(() => fireEvent.click(backButton))
+
+    await waitFor(() => getByRole('heading', { name: /reset your password/i }))
   })
 })

pages/forgotpassword.tsx

@@ -1,5 +1,5 @@
-import { useMutation } from '@apollo/client'
-import React from 'react'
+import { ApolloError, useMutation } from '@apollo/client'
+import React, { useState } from 'react'
 import { Formik, Form, Field } from 'formik'
 import RESET_PASSWORD from '../graphql/queries/resetPassword'
 import { resetPasswordValidation } from '../helpers/formValidation'
@@ -12,7 +12,10 @@ const initialValues = {
 }
 
 export const ResetPassword: React.FC = () => {
-  const [reqPwReset, { data, error }] = useMutation(RESET_PASSWORD)
+  const [error, setError] = useState<null | ApolloError>(null)
+  const [reqPwReset, { data }] = useMutation(RESET_PASSWORD, {
+    onError: setError
+  })
   const handleSubmit = async ({ userOrEmail }: { userOrEmail: string }) => {
     try {
       await reqPwReset({ variables: { userOrEmail } })
@@ -27,17 +30,16 @@ export const ResetPassword: React.FC = () => {
       </Card>
     )
   }
-  // Can't use NavLink since page needs to reload.
   if (error) {
     return (
       <Card title="Username or Email does not exist">
-        <a
-          href="/forgotpassword"
+        <button
           className="btn btn-primary btn-lg btn-block mb-3"
-          role="button"
+          onClick={() => setError(null)}
+          data-testid="back"
         >
           Go Back
-        </a>
+        </button>
       </Card>
     )
   }