reset quiz context on props change

spec/hooks/usePrevious/usePrevious.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import usePrevious from '../../../src/hooks/usePrevious';
+
+describe(`${usePrevious.name}`, () => {
+  function Component({ x }: { x: number }) {
+    const prevX = usePrevious(x);
+    return (
+      <>
+        x={x};prevX={prevX}
+      </>
+    );
+  }
+
+  it('starts by having the previous value undefined', () => {
+    const { container } = render(<Component x={10} />);
+    expect(container).toHaveTextContent('x=10');
+    expect(container).toHaveTextContent('prevX=');
+  });
+
+  it('changes the previous value when rendered again with a different value', () => {
+    const { container, rerender } = render(<Component x={10} />);
+    rerender(<Component x={11} />);
+    expect(container).toHaveTextContent('x=11');
+    expect(container).toHaveTextContent('prevX=10');
+  });
+
+  it('changes the previous value if rendered again with the same value', () => {
+    const { container, rerender } = render(<Component x={10} />);
+    rerender(<Component x={11} />);
+    expect(container).toHaveTextContent('x=11');
+    expect(container).toHaveTextContent('prevX=10');
+    rerender(<Component x={11} />);
+    expect(container).toHaveTextContent('x=11');
+    expect(container).toHaveTextContent('prevX=11');
+  });
+});

spec/hooks/useQuizState/useQuizApiState/useQuizApiState.test.tsx

@@ -3,6 +3,7 @@ import { mockConstructorIOClient } from '../../../__tests__/utils';
 import useQuizApiState from '../../../../src/hooks/useQuizState/useQuizApiState';
 import { getQuizResults } from '../../../../src/services';
 import { QUIZ_VERSION_ID, QUIZ_ID } from '../../../__tests__/constants';
+import * as usePrevious from '../../../../src/hooks/usePrevious';
 
 jest.mock('../../../../src/services', () => ({
   getNextQuestion: jest.fn().mockResolvedValue({

src/components/Results/Results.tsx

@@ -15,13 +15,14 @@ function Results(props: ResultsProps) {
     renderResultCard,
   } = props;
 
-  const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps } = useContext(QuizContext);
-  const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps };
+  const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps } =
+    useContext(QuizContext);
+  const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps };
   return (
     <div className='cio-results'>
       {state?.quiz?.results?.response?.results?.map((result, index) =>
         renderResultCard ? (
-          renderResultCard(result, getters)
+          renderResultCard(result, getters, index)
         ) : (
           <ResultCard
             result={result}

src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export default usePrevious;

src/hooks/useQuizState/useQuizApiState.ts

@@ -19,6 +19,7 @@ import {
 } from '../../services';
 import { IQuizProps } from '../../types';
 import useQueryParams from '../useQueryParams';
+import usePrevious from '../usePrevious';
 
 type UseQuizApiState = (
   quizOptions: IQuizProps,
@@ -103,8 +104,13 @@ const useQuizApiState: UseQuizApiState = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [quizApiState.resultsConfig]);
 
+  const prevQuizId = usePrevious(quizId);
+
   useEffect(() => {
     (async () => {
+      // If quizId is the same as the previous quizId, wait for next render after reset
+      if (!!prevQuizId && quizId !== prevQuizId) return;
+
       dispatchApiState({
         type: QuizAPIActionTypes.SET_IS_LOADING,
       });
@@ -159,6 +165,7 @@ const useQuizApiState: UseQuizApiState = (
   }, [
     cioClient,
     quizId,
+    prevQuizId,
     quizLocalState.answers,
     resultsPageOptions?.numResultsToDisplay,
     isSharedResultsQuery,

src/hooks/useQuizState/useSessionStorageState.ts

@@ -3,6 +3,7 @@
 import { SessionStateOptions } from '../../types';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
 import { quizSessionStateKey } from '../../constants';
+import usePrevious from '../usePrevious';
 
 const useSessionStorageState = (
   quizId: string,

src/types.ts

@@ -49,7 +49,9 @@ export interface ResultCardOptions {
     getters: {
       getAddToCartButtonProps?: GetAddToCartButtonProps;
       getAddToFavoritesButtonProps?: GetAddToFavoritesButtonProps;
-    }
+      getResultLinkProps?: GetQuizResultLinkProps;
+    },
+    index: number
   ) => JSX.Element;
 }