fix: convert duplicate useEffects to custom hook

src/account-settings/name-change/NameChange.jsx

@@ -69,7 +69,7 @@ function NameChangeModal({
   useEffect(() => {
     if (saveState === 'complete') {
       handleClose();
-      push('/id-verification?next=account%2Fsettings');
+      push(`/id-verification?next=${encodeURIComponent('account/settings')}`);
     }
   }, [saveState]);
 

src/hooks.js

@@ -21,3 +21,27 @@ export function useAsyncCall(asyncFunc) {
 
   return [isLoading, data];
 }
+
+// Redirect the user to their original location based on session storage
+export function useRedirect() {
+  const [redirect, setRedirect] = useState({
+    location: 'dashboard',
+    text: 'id.verification.return.dashboard',
+  });
+
+  useEffect(() => {
+    if (sessionStorage.getItem('courseId')) {
+      setRedirect({
+        location: `courses/${sessionStorage.getItem('courseId')}`,
+        text: 'id.verification.return.course',
+      });
+    } else if (sessionStorage.getItem('next')) {
+      setRedirect({
+        location: sessionStorage.getItem('next'),
+        text: 'id.verification.return.generic',
+      });
+    }
+  }, []);
+
+  return redirect;
+}

src/id-verification/panels/RequestCameraAccessPanel.jsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import Bowser from 'bowser';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 
+import { useRedirect } from '../../hooks';
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 import IdVerificationContext, { MEDIA_ACCESS } from '../IdVerificationContext';
@@ -14,8 +15,7 @@ import { UnsupportedCameraDirectionsPanel } from './UnsupportedCameraDirectionsP
 import messages from '../IdVerification.messages';
 
 function RequestCameraAccessPanel(props) {
-  const [returnUrl, setReturnUrl] = useState('dashboard');
-  const [returnText, setReturnText] = useState('id.verification.return.dashboard');
+  const { location: returnUrl, text: returnText } = useRedirect();
   const panelSlug = 'request-camera-access';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
   const {
@@ -38,18 +38,6 @@ function RequestCameraAccessPanel(props) {
     }
   }, [mediaAccess, userId]);
 
-  // Link back to the correct location if the user accessed IDV somewhere other
-  // than the dashboard
-  useEffect(() => {
-    if (sessionStorage.getItem('courseId')) {
-      setReturnUrl(`courses/${sessionStorage.getItem('courseId')}`);
-      setReturnText('id.verification.return.course');
-    } else if (sessionStorage.getItem('next')) {
-      setReturnUrl(sessionStorage.getItem('next'));
-      setReturnText('id.verification.return.generic');
-    }
-  }, []);
-
   const getTitle = () => {
     if (mediaAccess === MEDIA_ACCESS.GRANTED) {
       return props.intl.formatMessage(messages['id.verification.camera.access.title.success']);

src/id-verification/panels/SubmittedPanel.jsx

@@ -1,17 +1,18 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import BasePanel from './BasePanel';
+import { useRedirect } from '../../hooks';
 
 import IdVerificationContext from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
 
+import BasePanel from './BasePanel';
+
 function SubmittedPanel(props) {
   const { userId } = useContext(IdVerificationContext);
-  const [returnUrl, setReturnUrl] = useState('dashboard');
-  const [returnText, setReturnText] = useState('id.verification.return.dashboard');
+  const { location: returnUrl, text: returnText } = useRedirect();
   const panelSlug = 'submitted';
 
   useEffect(() => {
@@ -21,18 +22,6 @@ function SubmittedPanel(props) {
     });
   }, [userId]);
 
-  // Link back to the correct location if the user accessed IDV somewhere other
-  // than the dashboard
-  useEffect(() => {
-    if (sessionStorage.getItem('courseId')) {
-      setReturnUrl(`courses/${sessionStorage.getItem('courseId')}`);
-      setReturnText('id.verification.return.course');
-    } else if (sessionStorage.getItem('next')) {
-      setReturnUrl(sessionStorage.getItem('next'));
-      setReturnText('id.verification.return.generic');
-    }
-  }, []);
-
   return (
     <BasePanel
       name={panelSlug}

src/id-verification/tests/IdVerificationPage.test.jsx

@@ -42,7 +42,7 @@ describe('IdVerificationPage', () => {
   };
 
   it('decodes and stores course_id', async () => {
-    history.push('/?course_id=course-v1%3AedX%2BDemoX%2BDemo_Course');
+    history.push(`/?course_id=${encodeURIComponent('course-v1:edX+DemoX+Demo_Course')}`);
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">