reset quiz state when quiz id changes

spec/hooks/usePrevious/usePrevious.server.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import usePrevious from '../../../src/hooks/usePrevious';
+
+describe(`${usePrevious.name} server`, () => {
+  function Component({ x }: { x: number }) {
+    const prevX = usePrevious(x);
+    return (
+      <>
+        x={x};prevX={prevX}
+      </>
+    );
+  }
+
+  it('starts by having the previous value undefined', () => {
+    const view = renderToString(<Component x={10} />);
+    expect(view).toContain('x=<!-- -->10<!-- -->;prevX=');
+  });
+});

spec/hooks/usePrevious/usePrevious.test.tsx

@@ -0,0 +1,35 @@
+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('does not change the previous value if rendered again with the same value', () => {
+    const { container, rerender } = render(<Component x={10} />);
+    rerender(<Component x={11} />);
+    rerender(<Component x={11} />);
+    expect(container).toHaveTextContent('x=11');
+    expect(container).toHaveTextContent('prevX=10');
+  });
+});

src/hooks/usePrevious.ts

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+
+export default function usePrevious<Type>(value: Type): Type | undefined {
+  const latest = useRef(value);
+  const previous = useRef<Type>();
+
+  if (latest.current !== value) {
+    previous.current = latest.current;
+  }
+
+  latest.current = value;
+
+  return previous.current;
+}

src/hooks/useQuiz.ts

@@ -6,6 +6,9 @@ import usePropsGetters from './usePropsGetters';
 import usePrimaryColorStyles from './usePrimaryColorStyles';
 import useQuizEvents from './useQuizEvents';
 import useQuizState from './useQuizState';
+import usePrevious from './usePrevious';
+import { QuestionTypes, QuizAPIActionTypes } from '../components/CioQuiz/actions';
+import { resetQuizSessionStorageState } from '../utils';
 
 const useQuiz: UseQuiz = (quizOptions) => {
   const { apiKey, cioJsClient, primaryColor, resultsPageOptions } = quizOptions;
@@ -39,6 +42,24 @@ const useQuiz: UseQuiz = (quizOptions) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const { quizId } = quizOptions;
+  const { dispatchApiState, dispatchLocalState } = quizState;
+
+  const prevQuizId = usePrevious(quizId);
+
+  useEffect(() => {
+    if (quizId === prevQuizId) return;
+    if (!prevQuizId) return;
+    dispatchLocalState({
+      type: QuestionTypes.Reset,
+    });
+    dispatchApiState({
+      type: QuizAPIActionTypes.RESET_QUIZ,
+    });
+    resetQuizSessionStorageState(quizSessionStorageState.key);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [quizId, prevQuizId]);
+
   return {
     cioClient,
     state: {