[#32] [Integrate] As a user, I can submit the answers for the survey

src/components/Answer/index.test.tsx

@@ -18,7 +18,14 @@ describe('Answer', () => {
     it('renders Rating component', () => {
       const question = questionFabricator();
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const star = screen.getByTestId(ratingDataTestIds.base);
 
@@ -30,7 +37,14 @@ describe('Answer', () => {
     it('renders MultiChoice component', () => {
       const question = questionFabricator({ displayType: 'choice' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const multiChoice = screen.getByTestId(multiChoiceDataTestIds.base);
 
@@ -42,7 +56,14 @@ describe('Answer', () => {
     it('renders Nps component', () => {
       const question = questionFabricator({ displayType: 'nps' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const nps = screen.getByTestId(npsDataTestIds.base);
 
@@ -54,7 +75,14 @@ describe('Answer', () => {
     it('renders TextArea component', () => {
       const question = questionFabricator({ displayType: 'textarea' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const textArea = screen.getByTestId(textAreaDataTestIds.base);
 
@@ -66,7 +94,14 @@ describe('Answer', () => {
     it('renders MultiInputs component', () => {
       const question = questionFabricator({ displayType: 'textfield' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const multiInputs = screen.getByTestId(multiInputsDataTestIds.base);
 
@@ -78,7 +113,14 @@ describe('Answer', () => {
     it('renders Dropdown component', () => {
       const question = questionFabricator({ displayType: 'dropdown' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const dropdown = screen.getByTestId(dropdownDataTestIds.base);
 
@@ -90,7 +132,14 @@ describe('Answer', () => {
     it('renders Dropdown component', () => {
       const question = questionFabricator({ displayType: 'slider' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const slider = screen.getByTestId(appSliderDataTestIds.base);
 
@@ -102,7 +151,14 @@ describe('Answer', () => {
     it('does NOT render any components', () => {
       const question = questionFabricator({ displayType: 'intro' });
 
-      render(<Answer question={question} />);
+      render(
+        <Answer
+          question={question}
+          onAnswerChanged={() => {
+            // Do nothing
+          }}
+        />
+      );
 
       const intro = screen.getByTestId(answerDataTestIds.base);
 

src/components/Answer/index.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import isEmpty from 'lodash/isEmpty';
 
 import AppSlider from 'components/AppSlider';
 import Dropdown from 'components/Dropdown';
@@ -7,30 +9,71 @@ import MultiInputs from 'components/MultiInputs';
 import Nps from 'components/Nps';
 import Rating from 'components/Rating';
 import TextArea from 'components/TextArea';
-import { Answer as AnswerType } from 'types/answer';
+import { Answer as AnswerType, instanceOfAnswer } from 'types/answer';
 import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';
-import { AnswerRequest } from 'types/request/surveySubmitRequest';
+import { AnswerRequest, instanceOfAnswerRequest } from 'types/request/surveySubmitRequest';
 
 export const answerDataTestIds = {
   base: 'answer__base',
 };
 
 interface AnswerProps {
   question: Question;
+  onAnswerChanged: (answers: AnswerRequest[]) => void;
 }
-const Answer = ({ question }: AnswerProps): JSX.Element => {
+
+const Answer = ({ question, onAnswerChanged }: AnswerProps): JSX.Element => {
   const displayTypeEnum = getDisplayTypeEnum(question);
 
   const onValueChanged = (answer: number | AnswerType | AnswerRequest) => {
-    // TODO
-    console.log(answer);
+    if (typeof answer === 'number') {
+      onAnswerChanged([{ id: question.answers[answer - 1].id, answer: '' }]);
+    } else if (instanceOfAnswer(answer)) {
+      onAnswerChanged([{ id: answer.id, answer: '' }]);
+    } else if (instanceOfAnswerRequest(answer)) {
+      onAnswerChanged([answer]);
+    }
   };
 
   const onValuesChanged = (answers: AnswerType[] | AnswerRequest[]) => {
-    // TODO
-    console.log(answers);
+    if (!isEmpty(answers)) {
+      if (instanceOfAnswer(answers[0])) {
+        const answerRequests: AnswerRequest[] = answers.map((answer) => ({
+          id: answer.id,
+          answer: '',
+        }));
+
+        onAnswerChanged(answerRequests);
+      } else if (instanceOfAnswerRequest(answers[0])) {
+        onAnswerChanged(answers as AnswerRequest[]);
+      }
+    }
   };
 
+  useEffect(() => {
+    const setDefaultAnswers = () => {
+      switch (displayTypeEnum) {
+        case DisplayType.Heart:
+        case DisplayType.Smiley:
+        case DisplayType.Thumbs:
+        case DisplayType.Star:
+        case DisplayType.Slider:
+        case DisplayType.Dropdown:
+          onValueChanged({ id: question.answers[0].id, answer: '' });
+          break;
+        case DisplayType.Nps:
+          const answerRequests: AnswerRequest[] = question.answers
+            .slice(0, Math.round(question.answers.length / 2) + 1)
+            .map((answer) => ({ id: answer.id, answer: '' }));
+          onValuesChanged(answerRequests);
+          break;
+      }
+    };
+
+    setDefaultAnswers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [question]);
+
   const answerComponent = (): JSX.Element => {
     switch (displayTypeEnum) {
       case DisplayType.Heart:

src/components/AppSlider/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import Slider from 'rc-slider';
 
@@ -14,10 +14,6 @@ interface SliderProps {
 }
 
 const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged }: SliderProps): JSX.Element => {
-  useEffect(() => {
-    onValueChanged(min);
-  }, [min, onValueChanged]);
-
   return (
     <div className="flex w-full h-[56px] justify-center items-center" data-test-id={appSliderDataTestIds.base}>
       <Slider

src/components/MultiInputs/index.tsx

@@ -17,11 +17,13 @@ const MultiInputs = ({ items, onValuesChanged }: MultiInputProps): JSX.Element =
   const [selectedValues, setSelectedValues] = useState<AnswerRequest[]>([]);
 
   const handleValuesChanged = (answer: Answer, content: string) => {
-    const newSelectedValues = selectedValues;
-    const itemIndex = newSelectedValues.findIndex((value) => value.id === answer.id);
-    if (itemIndex !== -1) {
-      newSelectedValues[itemIndex].answer = content;
-    }
+    const newSelectedValues = [
+      ...selectedValues.filter((value) => value.id !== answer.id),
+      {
+        id: answer.id,
+        answer: content,
+      },
+    ];
     setSelectedValues(newSelectedValues);
     onValuesChanged(newSelectedValues);
   };

src/helpers/toast.ts

@@ -0,0 +1,5 @@
+import { toast } from 'react-toastify';
+
+export const showGeneralErrorToast = () => {
+  toast.error('There is something wrong. Please try again later!', { position: 'top-center' });
+};

src/routes/index.tsx

@@ -3,6 +3,7 @@ import { RouteObject } from 'react-router-dom';
 
 import DashBoardScreen from 'screens/Dashboard';
 import QuestionScreen from 'screens/Question';
+import QuestionCompleteScreen from 'screens/Question/Complete';
 import SignInScreen from 'screens/SignIn';
 import SurveyScreen from 'screens/Survey';
 
@@ -15,6 +16,12 @@ export const paths = {
   signIn: '/sign-in',
   survey: '/surveys/:id',
   question: `/surveys/:id/${questionPath}`,
+  questionComplete: `/surveys/:id/${questionPath}/complete`,
+};
+
+export const questionCompletePath = (): string => {
+  const questionCompletePaths = paths.questionComplete.split('/');
+  return questionCompletePaths[questionCompletePaths.length - 1];
 };
 
 const routes: RouteObject[] = [
@@ -33,6 +40,10 @@ const routes: RouteObject[] = [
         path: paths.question,
         element: <QuestionScreen />,
       },
+      {
+        path: paths.questionComplete,
+        element: <QuestionCompleteScreen />,
+      },
     ],
   },
   {

src/screens/Question/Complete/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const QuestionCompleteScreen = (): JSX.Element => {
+  return <div>Complete</div>;
+};
+
+export default QuestionCompleteScreen;

src/screens/Question/index.test.tsx

@@ -4,6 +4,7 @@ import { act, render, screen } from '@testing-library/react';
 
 import { answerDataTestIds } from 'components/Answer';
 import { useAppDispatch, useAppSelector } from 'hooks';
+import { paths } from 'routes';
 import { SurveyState } from 'store/reducers/Survey';
 import { questionFabricator, surveyFabricator } from 'tests/fabricator';
 import TestWrapper from 'tests/TestWrapper';
@@ -28,13 +29,17 @@ describe('QuestionScreen', () => {
     );
   };
 
-  const surveys = surveyFabricator({ questions: questionFabricator.times(3) });
+  const surveys = surveyFabricator({
+    questions: questionFabricator.times(3, { displayType: 'intro' }),
+  });
 
   const mockState: { survey: SurveyState } = {
     survey: {
       survey: surveys,
       isLoading: true,
       isError: false,
+      questionRequests: [],
+      isSubmitSuccess: false,
     },
   };
 
@@ -83,7 +88,7 @@ describe('QuestionScreen', () => {
   });
 
   describe('given the close button is clicked', () => {
-    it('navigates back to the previous screen', () => {
+    it('navigates back to the Home screen', () => {
       render(<TestComponent />);
 
       const closeButton = screen.getByTestId(questionScreenTestIds.closeButton);
@@ -92,7 +97,32 @@ describe('QuestionScreen', () => {
         closeButton.click();
       });
 
-      expect(mockUseNavigate).toHaveBeenCalledWith(-1);
+      expect(mockDispatch).toHaveBeenCalledWith({ type: 'survey/resetState' });
+      expect(mockUseNavigate).toHaveBeenCalledWith(paths.root, { replace: true });
+    });
+  });
+
+  describe('given the submit button is clicked', () => {
+    it('submits the survey', () => {
+      render(<TestComponent />);
+
+      const nextButton = screen.getByTestId(questionScreenTestIds.nextButton);
+
+      act(() => {
+        nextButton.click();
+      });
+
+      act(() => {
+        nextButton.click();
+      });
+
+      const submitButton = screen.getByTestId(questionScreenTestIds.submitButton);
+
+      act(() => {
+        submitButton.click();
+      });
+
+      expect(mockDispatch).toHaveBeenCalled();
     });
   });
 });