[#30] Remove useEffect in components

src/components/Answer/index.tsx

@@ -67,7 +67,6 @@ const Answer = ({ question }: AnswerProps): JSX.Element => {
       case DisplayType.Dropdown:
         return (
           <Dropdown
-            questionId={question.id}
             items={question.answers}
             onValueChanged={() => {
               // TODO

src/components/Dropdown/index.test.tsx

@@ -12,7 +12,6 @@ describe('Dropdown', () => {
 
   it('renders a dropdown component', () => {
     const dropdownProps = {
-      questionId: 'question-id',
       items: answers,
       onValueChanged: () => {
         // Do nothing
@@ -33,7 +32,6 @@ describe('Dropdown', () => {
         selectedValue = answer.text ?? '';
       };
       const dropdownProps = {
-        questionId: 'question-id',
         items: answers,
         onValueChanged: onValueChanged,
       };

src/components/Dropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { ReactComponent as ArrowDropdown } from 'assets/images/icons/arrow-dropdown.svg';
 import { Answer } from 'types/answer';
@@ -8,12 +8,11 @@ export const dropdownDataTestIds = {
 };
 
 interface DropdownProps {
-  questionId: string;
   items: Answer[];
   onValueChanged: (value: Answer) => void;
 }
 
-const Dropdown = ({ questionId, items, onValueChanged }: DropdownProps): JSX.Element => {
+const Dropdown = ({ items, onValueChanged }: DropdownProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(items[0].text);
 
@@ -27,10 +26,6 @@ const Dropdown = ({ questionId, items, onValueChanged }: DropdownProps): JSX.Ele
     toggleDropdown();
   };
 
-  useEffect(() => {
-    setSelectedValue(items[0].text);
-  }, [questionId, items]);
-
   return (
     <div className="relative flex flex-col items-center w-full rounded-lg" data-test-id={dropdownDataTestIds.base}>
       <button
@@ -41,7 +36,7 @@ const Dropdown = ({ questionId, items, onValueChanged }: DropdownProps): JSX.Ele
         <ArrowDropdown className={isOpen ? 'rotate-180' : ''} />
       </button>
       {isOpen && (
-        <div className="bg-white bg-opacity-[.18] absolute top-20 flex flex-col items-start rounded-[12px] p-2 w-full overflow-y-auto max-h-[400px]">
+        <div className="bg-white bg-opacity-[.18] absolute top-20 flex flex-col items-start rounded-[12px] p-2 w-full overflow-y-auto max-h-[250px]">
           {items.map((item) => (
             <button
               className="flex w-full justify-between hover:bg-white hover:bg-opacity-30 cursor-pointer py-2 rounded-r-[12px] border-l-transparent hover:border-l-white border-l-4 text-white text-regular tracking-survey-tight"

src/components/MultiChoice/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -45,10 +45,6 @@ const MultiChoice = ({ items, isPickOne, onValuesChanged }: MultiChoiceProps): J
     onValuesChanged(newSelectedValues);
   };
 
-  useEffect(() => {
-    setSelectedValues([]);
-  }, []);
-
   return (
     <div className="flex flex-col w-full" data-test-id={multiChoiceDataTestIds.base}>
       {items.map((item, index) => (

src/components/MultiInputs/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import TextInput from 'components/TextInput';
 import { Answer } from 'types/answer';
@@ -13,7 +13,7 @@ interface MultiInputProps {
   items: Answer[];
   onValuesChanged?: (answers: AnswerRequest[]) => void;
 }
-const MultiInputs = ({ questionId, items, onValuesChanged }: MultiInputProps): JSX.Element => {
+const MultiInputs = ({ items, onValuesChanged }: MultiInputProps): JSX.Element => {
   const [selectedValues, setSelectedValues] = useState<AnswerRequest[]>([]);
 
   const handleValuesChanged = (answer: Answer, content: string) => {
@@ -26,17 +26,6 @@ const MultiInputs = ({ questionId, items, onValuesChanged }: MultiInputProps): J
     onValuesChanged?.(newSelectedValues);
   };
 
-  useEffect(() => {
-    const newSelectedValues: AnswerRequest[] = [];
-    for (let i = 0; i < items.length; i++) {
-      newSelectedValues.push({
-        id: items[i].id,
-        answer: '',
-      });
-    }
-    setSelectedValues(newSelectedValues);
-  }, [questionId, items]);
-
   return (
     <div data-test-id={multiInputsDataTestIds.base}>
       {items.map((item) => (

src/components/Nps/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -34,10 +34,6 @@ const Nps = ({ items, onValuesChanged }: NpsProps): JSX.Element => {
     onValuesChanged(selectedValues);
   };
 
-  useEffect(() => {
-    setCurrentScore(Math.round(items.length / 2));
-  }, [items]);
-
   return (
     <div className="flex justify-center" data-test-id={npsDataTestIds.base}>
       <div className="flex flex-col w-[335px]">

src/components/Rating/index.test.tsx

@@ -22,8 +22,6 @@ describe('Rating', () => {
       // Do nothing
     };
 
-    console.log(answers);
-
     render(<Rating onValueChanged={onValueChanged} {...ratingProps} />);
 
     const rating = screen.getByTestId(ratingDataTestIds.base);
@@ -43,7 +41,6 @@ describe('Rating', () => {
         displayType: DisplayType.Star,
         onValueChanged: onValueChanged,
       };
-      console.log(answers);
 
       render(<Rating {...ratingProps} />);
 

src/components/Rating/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { Answer } from 'types/answer';
 import { DisplayType } from 'types/question';
@@ -46,10 +46,6 @@ const Rating = ({ items, displayType, onValueChanged }: RatingProps): JSX.Elemen
     }
   };
 
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, []);
-
   return (
     <div
       className="flex justify-center text-large font-extrabold tracking-survey-tighter gap-4"

src/screens/Question/index.test.tsx

@@ -5,6 +5,7 @@ import { act, render, screen } from '@testing-library/react';
 import { answerDataTestIds } from 'components/Answer';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { SurveyState } from 'store/reducers/Survey';
+import { questionFabricator, surveyFabricator } from 'tests/fabricator';
 import TestWrapper from 'tests/TestWrapper';
 
 import QuestionScreen, { questionScreenTestIds } from '.';
@@ -27,49 +28,11 @@ describe('QuestionScreen', () => {
     );
   };
 
+  const surveys = surveyFabricator({ questions: questionFabricator.times(3) });
+
   const mockState: { survey: SurveyState } = {
     survey: {
-      survey: {
-        id: 'd5de6a8f8f5f1cfe51bc',
-        resourceType: 'survey',
-        title: 'Scarlett Bangkok',
-        description: "We'd love ot hear from you!",
-        coverImageUrl: 'https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_',
-        questions: [
-          {
-            id: 'question 1',
-            resourceType: 'question',
-            text: 'Question 1',
-            displayType: 'intro',
-            answers: [],
-          },
-          {
-            id: 'question 2',
-            resourceType: 'question',
-            text: 'Question 2',
-            displayType: 'slider',
-            answers: [
-              {
-                id: 'answer 1',
-                resourceType: 'answer',
-                text: 'Answer 1',
-              },
-              {
-                id: 'answer 2',
-                resourceType: 'answer',
-                text: 'Answer 2',
-              },
-            ],
-          },
-          {
-            id: 'question 3',
-            resourceType: 'question',
-            text: 'Question 3',
-            displayType: 'outro',
-            answers: [],
-          },
-        ],
-      },
+      survey: surveys,
       isLoading: true,
       isError: false,
     },
@@ -96,7 +59,6 @@ describe('QuestionScreen', () => {
     expect(currentIndex).toBeVisible();
     expect(currentIndex).toHaveTextContent('1/3');
     expect(questionTitle).toBeVisible();
-    expect(questionTitle).toHaveTextContent('Question 1');
     expect(answerComponent).toBeVisible();
     expect(closeButton).toBeVisible();
     expect(nextButton).toBeVisible();
@@ -117,7 +79,6 @@ describe('QuestionScreen', () => {
       expect(currentIndex).toBeVisible();
       expect(currentIndex).toHaveTextContent('2/3');
       expect(questionTitle).toBeVisible();
-      expect(questionTitle).toHaveTextContent('Question 2');
     });
   });
 

src/screens/Question/index.tsx

@@ -42,7 +42,7 @@ const QuestionScreen = (): JSX.Element => {
   return (
     <MainView backgroundUrl={currentQuestion?.coverImageUrl}>
       <div className="flex flex-col h-full">
-        <button className="mt-8 mr-8 p-1 self-end" data-test-id={questionScreenTestIds.closeButton} onClick={goBack}>
+        <button className="mt-8 mr-8 p-1 self-end text-white" data-test-id={questionScreenTestIds.closeButton} onClick={goBack}>
           <CloseButton />
         </button>
         <div className="w-1/2 self-center flex-1 flex flex-col justify-center">
@@ -60,7 +60,6 @@ const QuestionScreen = (): JSX.Element => {
           </p>
           {currentQuestion && (
             <div className="mt-16">
-              <p>{currentQuestion.displayType}</p>
               <Answer question={currentQuestion} />
             </div>
           )}

src/tests/fabricator.ts

@@ -1,6 +1,8 @@
 import { faker } from '@faker-js/faker';
 import { Fabricator, sequence } from '@travelperksl/fabricator';
 
+import { Survey } from 'types/survey';
+
 export const testTypeName = faker.person.fullName();
 export const testTypeAge = faker.number.int();
 export const testTypeFabricator = Fabricator({
@@ -86,7 +88,7 @@ export const questionResponseFabricator = Fabricator({
 });
 
 // Models
-export const surveyFabricator = Fabricator({
+export const surveyFabricator = Fabricator<Survey>({
   id: faker.string.uuid(),
   resourceType: 'survey',
   title: faker.string.sample(),