From d174586317c68ab6cde5be0f37f32b95f7569e99 Mon Sep 17 00:00:00 2001
From: Tran Manh <manh@nimblehq.co>
Date: Fri, 21 Jul 2023 15:22:22 +0700
Subject: [PATCH] [#30] Fill the data into the Question page

---
 src/components/Answer/index.test.tsx      | 176 ++++++++++++++++++++++
 src/components/Answer/index.tsx           |  59 ++++++++
 src/components/AppSlider/index.test.tsx   |   2 +-
 src/components/AppSlider/index.tsx        |  27 ++--
 src/components/Dropdown/index.test.tsx    |   4 +-
 src/components/Dropdown/index.tsx         |  11 +-
 src/components/ElevatedButton/index.tsx   |   6 +-
 src/components/MultiChoice/index.test.tsx |   4 +-
 src/components/MultiChoice/index.tsx      |  11 +-
 src/components/MultiInputs/index.test.tsx |  25 +++
 src/components/MultiInputs/index.tsx      |  56 +++++++
 src/components/Nps/index.test.tsx         |  11 +-
 src/components/Nps/index.tsx              |  11 +-
 src/components/Rating/index.test.tsx      |   4 +-
 src/components/Rating/index.tsx           |  15 +-
 src/components/TextArea/index.test.tsx    |  11 +-
 src/components/TextArea/index.tsx         |  34 ++++-
 src/screens/Question/index.tsx            |  71 ++++++---
 src/store/reducers/Survey/action.ts       |   9 +-
 src/store/reducers/Survey/index.ts        |   6 +-
 src/types/question.ts                     |   3 +-
 src/types/request/surveySubmitRequest.ts  |   2 +-
 22 files changed, 495 insertions(+), 63 deletions(-)
 create mode 100644 src/components/Answer/index.test.tsx
 create mode 100644 src/components/Answer/index.tsx
 create mode 100644 src/components/MultiInputs/index.test.tsx
 create mode 100644 src/components/MultiInputs/index.tsx

diff --git a/src/components/Answer/index.test.tsx b/src/components/Answer/index.test.tsx
new file mode 100644
index 0000000..3a76e8e
--- /dev/null
+++ b/src/components/Answer/index.test.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { Question } from 'types/question';
+
+import Answer from '.';
+
+describe('Answer', () => {
+  describe('given the display type is star', () => {
+    it('renders Rating component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'star',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const star = screen.getByTestId(dataTestId);
+
+      expect(star).toBeVisible();
+      expect(star).toHaveAttribute('id', 'rating-id');
+    });
+  });
+
+  describe('given the display type is choice', () => {
+    it('renders MultiChoice component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'choice',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const multiChoice = screen.getByTestId(dataTestId);
+
+      expect(multiChoice).toBeVisible();
+      expect(multiChoice).toHaveAttribute('id', 'multi-choice-id');
+    });
+  });
+
+  describe('given the display type is nps', () => {
+    it('renders Nps component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'nps',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const nps = screen.getByTestId(dataTestId);
+
+      expect(nps).toBeVisible();
+      expect(nps).toHaveAttribute('id', 'nps-id');
+    });
+  });
+
+  describe('given the display type is textarea', () => {
+    it('renders TextArea component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'textarea',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const textArea = screen.getByTestId(dataTestId);
+
+      expect(textArea).toBeVisible();
+      expect(textArea).toHaveAttribute('id', 'text-area-id');
+    });
+  });
+
+  describe('given the display type is textfield', () => {
+    it('renders MultiInputs component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'textfield',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const multiInputs = screen.getByTestId(dataTestId);
+
+      expect(multiInputs).toBeVisible();
+      expect(multiInputs).toHaveAttribute('id', 'multi-inputs-id');
+    });
+  });
+
+  describe('given the display type is dropdown', () => {
+    it('renders Dropdown component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'dropdown',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const dropdown = screen.getByTestId(dataTestId);
+
+      expect(dropdown).toBeVisible();
+      expect(dropdown).toHaveAttribute('id', 'dropdown-id');
+    });
+  });
+
+  describe('given the display type is slider', () => {
+    it('renders Dropdown component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'slider',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const slider = screen.getByTestId(dataTestId);
+
+      expect(slider).toBeVisible();
+      expect(slider).toHaveAttribute('id', 'slider-id');
+    });
+  });
+
+  describe('given the display type is intro', () => {
+    it('renders Dropdown component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'intro',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const intro = screen.getByTestId(dataTestId);
+
+      expect(intro).toBeVisible();
+    });
+  });
+});
diff --git a/src/components/Answer/index.tsx b/src/components/Answer/index.tsx
new file mode 100644
index 0000000..a9ed91c
--- /dev/null
+++ b/src/components/Answer/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import AppSlider from 'components/AppSlider';
+import Dropdown from 'components/Dropdown';
+import MultiChoice from 'components/MultiChoice';
+import MultiInputs from 'components/MultiInputs';
+import Nps from 'components/Nps';
+import Rating from 'components/Rating';
+import TextArea from 'components/TextArea';
+import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';
+
+interface AnswerProps {
+  question: Question;
+  'data-test-id'?: string;
+}
+const Answer = ({ question, ...rest }: AnswerProps): JSX.Element => {
+  const displayTypeEnum = getDisplayTypeEnum(question);
+
+  switch (displayTypeEnum) {
+    case DisplayType.Heart:
+    case DisplayType.Smiley:
+    case DisplayType.Thumbs:
+    case DisplayType.Star:
+      return (
+        <Rating
+          questionId={question.id}
+          items={question.answers}
+          displayType={displayTypeEnum}
+          data-test-id={rest['data-test-id']}
+        />
+      );
+    case DisplayType.Choice:
+      return (
+        <MultiChoice
+          questionId={question.id}
+          items={question.answers}
+          isPickOne={question?.pick === 'one'}
+          data-test-id={rest['data-test-id']}
+        />
+      );
+    case DisplayType.Nps:
+      return <Nps questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Textarea:
+      return <TextArea questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Textfield:
+      return <MultiInputs questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Dropdown:
+      return <Dropdown questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Slider:
+      return <AppSlider questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Unknown:
+    case DisplayType.Intro:
+    case DisplayType.Outro:
+    default:
+      return <div {...rest}></div>;
+  }
+};
+
+export default Answer;
diff --git a/src/components/AppSlider/index.test.tsx b/src/components/AppSlider/index.test.tsx
index b121c35..9786af6 100644
--- a/src/components/AppSlider/index.test.tsx
+++ b/src/components/AppSlider/index.test.tsx
@@ -6,7 +6,7 @@ describe('AppSlider', () => {
   it('renders AppSlider component', () => {
     const dataTestId = 'appSlider';
     // eslint-disable-next-line react/react-in-jsx-scope, @typescript-eslint/no-empty-function
-    render(<AppSlider data-test-id={dataTestId} onValueChanged={jest.fn()} />);
+    render(<AppSlider questionId="question id" items={[]} data-test-id={dataTestId} onValueChanged={jest.fn()} />);
 
     const appSlider = screen.getByTestId(dataTestId);
 
diff --git a/src/components/AppSlider/index.tsx b/src/components/AppSlider/index.tsx
index 39037f4..94b4d6f 100644
--- a/src/components/AppSlider/index.tsx
+++ b/src/components/AppSlider/index.tsx
@@ -1,23 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import Slider from 'rc-slider';
+
 import 'rc-slider/assets/index.css';
+import { Answer } from 'types/answer';
 
 interface SliderProps {
-  min?: number;
-  max?: number;
-  step?: number;
-  onValueChanged: (position: number) => void;
+  questionId: string;
+  items: Answer[];
+  onValueChanged?: (answer: Answer) => void;
   'data-test-id'?: string;
 }
 
-const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged, ...rest }: SliderProps): JSX.Element => {
+const AppSlider = ({ questionId, items, onValueChanged, ...rest }: SliderProps): JSX.Element => {
   const handleOnChange = (value: number) => {
-    onValueChanged(value);
+    onValueChanged?.(items[value - 1]);
   };
 
+  useEffect(() => {
+    onValueChanged?.(items[0]);
+  }, [questionId, items, onValueChanged]);
+
   return (
-    <div className="flex w-full h-[56px] justify-center items-center" {...rest}>
+    <div id={`slider-${questionId}`} className="flex w-full h-[56px] justify-center items-center" {...rest}>
       <Slider
         trackStyle={{
           background: 'rgba(255, 255, 255, 1)',
@@ -40,9 +45,9 @@ const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged, ...rest }: Sl
           boxShadow:
             '0px 3px 1px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.16), 0px 3px 8px 0px rgba(0, 0, 0, 0.15)',
         }}
-        min={min}
-        max={max}
-        step={step}
+        min={1}
+        max={items.length}
+        step={1}
         onChange={(value) => handleOnChange(value as number)}
       />
     </div>
diff --git a/src/components/Dropdown/index.test.tsx b/src/components/Dropdown/index.test.tsx
index 0e6b3b8..270d19d 100644
--- a/src/components/Dropdown/index.test.tsx
+++ b/src/components/Dropdown/index.test.tsx
@@ -20,7 +20,7 @@ describe('Dropdown', () => {
       ],
       'data-test-id': dropdownDataTestId,
     };
-    render(<Dropdown {...dropdownProps} />);
+    render(<Dropdown questionId="question id" {...dropdownProps} />);
 
     const dropdown = screen.getByTestId(dropdownDataTestId);
 
@@ -44,7 +44,7 @@ describe('Dropdown', () => {
         onValueChanged: onValueChanged,
         'data-test-id': dropdownDataTestId,
       };
-      render(<Dropdown {...dropdownProps} />);
+      render(<Dropdown questionId="question id" {...dropdownProps} />);
 
       const dropdown = screen.getByTestId(dropdownDataTestId);
 
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 3e833d1..da34c54 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -1,14 +1,15 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { ReactComponent as ArrowDropdown } from 'assets/images/icons/arrow-dropdown.svg';
 import { Answer } from 'types/answer';
 
 interface DropdownProps {
+  questionId: string;
   items: Answer[];
   onValueChanged?: (value: Answer) => void;
   'data-test-id'?: string;
 }
-const Dropdown = ({ items, onValueChanged, ...rest }: DropdownProps): JSX.Element => {
+const Dropdown = ({ questionId, items, onValueChanged, ...rest }: DropdownProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(items[0].text);
 
@@ -22,8 +23,12 @@ const Dropdown = ({ items, onValueChanged, ...rest }: DropdownProps): JSX.Elemen
     toggleDropdown();
   };
 
+  useEffect(() => {
+    setSelectedValue(items[0].text);
+  }, [questionId, items]);
+
   return (
-    <div className="relative flex flex-col items-center w-full rounded-lg" {...rest}>
+    <div id={`dropdown-${questionId}`} className="relative flex flex-col items-center w-full rounded-lg" {...rest}>
       <button
         onClick={() => toggleDropdown()}
         className="w-full h-14 flex items-center justify-between appearance-none bg-white bg-opacity-[.18] rounded-[12px] hover:outline-none hover:ring-transparent px-3 text-white text-regular tracking-survey-tight hover:bg-opacity-30"
diff --git a/src/components/ElevatedButton/index.tsx b/src/components/ElevatedButton/index.tsx
index 410386d..c7960a1 100644
--- a/src/components/ElevatedButton/index.tsx
+++ b/src/components/ElevatedButton/index.tsx
@@ -12,7 +12,11 @@ const ElevatedButton = ({ children, isFullWidth, ...attributes }: ElevatedButton
     'bg-white text-black-chinese font-bold text-regular tracking-survey-tight rounded-[10px] focus:outline-none focus:shadow-outline h-14';
 
   return (
-    <button type="button" className={classNames(DEFAULT_CLASS_NAMES, { 'w-full': isFullWidth })} {...attributes}>
+    <button
+      type="button"
+      className={classNames(DEFAULT_CLASS_NAMES, { 'w-full': isFullWidth, 'px-8': !isFullWidth })}
+      {...attributes}
+    >
       {children}
     </button>
   );
diff --git a/src/components/MultiChoice/index.test.tsx b/src/components/MultiChoice/index.test.tsx
index b750e07..572742f 100644
--- a/src/components/MultiChoice/index.test.tsx
+++ b/src/components/MultiChoice/index.test.tsx
@@ -15,7 +15,7 @@ describe('MultiChoice', () => {
       { id: '2', resourceType: 'answer', text: 'Test 2' },
       { id: '3', resourceType: 'answer', text: 'Test 3' },
     ];
-    render(<MultiChoice items={answers} isPickOne={false} data-test-id={multiChoiceDataTestId} />);
+    render(<MultiChoice questionId="question id" items={answers} isPickOne={false} data-test-id={multiChoiceDataTestId} />);
 
     const multiChoice = screen.getByTestId(multiChoiceDataTestId);
 
@@ -38,6 +38,7 @@ describe('MultiChoice', () => {
         ];
         render(
           <MultiChoice
+            questionId="question id"
             items={answers}
             isPickOne={false}
             onValuesChanged={(answers) => handleValuesChanged(answers)}
@@ -77,6 +78,7 @@ describe('MultiChoice', () => {
         ];
         render(
           <MultiChoice
+            questionId="question id"
             items={answers}
             isPickOne={true}
             onValuesChanged={(answers) => handleValuesChanged(answers)}
diff --git a/src/components/MultiChoice/index.tsx b/src/components/MultiChoice/index.tsx
index a431ed0..4ca703b 100644
--- a/src/components/MultiChoice/index.tsx
+++ b/src/components/MultiChoice/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -6,13 +6,14 @@ import Checkbox from 'components/Checkbox';
 import { Answer } from 'types/answer';
 
 interface MultiChoiceProps {
+  questionId: string;
   items: Answer[];
   isPickOne: boolean;
   onValuesChanged?: (answers: Answer[]) => void;
   'data-test-id'?: string;
 }
 
-const MultiChoice = ({ items, isPickOne, onValuesChanged, ...rest }: MultiChoiceProps): JSX.Element => {
+const MultiChoice = ({ questionId, items, isPickOne, onValuesChanged, ...rest }: MultiChoiceProps): JSX.Element => {
   const [selectedValues, setSelectedValues] = useState<Answer[]>([]);
 
   const isSelected = (answer: Answer): boolean => {
@@ -40,8 +41,12 @@ const MultiChoice = ({ items, isPickOne, onValuesChanged, ...rest }: MultiChoice
     onValuesChanged?.(newSelectedValues);
   };
 
+  useEffect(() => {
+    setSelectedValues([]);
+  }, [questionId]);
+
   return (
-    <div className="flex flex-col w-full" {...rest}>
+    <div id={`multi-choice-${questionId}`} className="flex flex-col w-full" {...rest}>
       {items.map((item, index) => (
         <div key={item.id} className="flex flex-col">
           <div role="presentation" className="flex justify-between mb-[13px] items-center" onClick={() => toggleCheckbox(item)}>
diff --git a/src/components/MultiInputs/index.test.tsx b/src/components/MultiInputs/index.test.tsx
new file mode 100644
index 0000000..c3389e1
--- /dev/null
+++ b/src/components/MultiInputs/index.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { render, screen, within } from '@testing-library/react';
+
+import MultiInputs from '.';
+
+describe('MultiInputs', () => {
+  const multiInputsDataTestId = 'multiInputs';
+
+  it('renders a multi inputs component', () => {
+    const answers = [
+      { id: '1', resourceType: 'answer', text: 'Test 1' },
+      { id: '2', resourceType: 'answer', text: 'Test 2' },
+      { id: '3', resourceType: 'answer', text: 'Test 3' },
+    ];
+    render(<MultiInputs questionId="question id" items={answers} data-test-id={multiInputsDataTestId} />);
+
+    const multiInputs = screen.getByTestId(multiInputsDataTestId);
+
+    expect(multiInputs).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText('Test 1')).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText('Test 2')).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText('Test 3')).toBeVisible();
+  });
+});
diff --git a/src/components/MultiInputs/index.tsx b/src/components/MultiInputs/index.tsx
new file mode 100644
index 0000000..2f0a5f9
--- /dev/null
+++ b/src/components/MultiInputs/index.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+
+import TextInput from 'components/TextInput';
+import { Answer } from 'types/answer';
+import { AnswerRequest } from 'types/request/surveySubmitRequest';
+
+interface MultiInputProps {
+  questionId: string;
+  items: Answer[];
+  onValuesChanged?: (answers: AnswerRequest[]) => void;
+  'data-test-id'?: string;
+}
+const MultiInputs = ({ questionId, items, onValuesChanged, ...rest }: 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;
+    }
+    setSelectedValues(newSelectedValues);
+    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 id={`multi-inputs-${questionId}`} {...rest}>
+      {items.map((item) => (
+        <div key={item.id}>
+          <TextInput
+            inputAttributes={{
+              id: `answer-text-input__${item.id}`,
+              required: true,
+              type: 'text',
+              placeholder: item.text,
+              onChange: (event) => handleValuesChanged(item, event.target.value),
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MultiInputs;
diff --git a/src/components/Nps/index.test.tsx b/src/components/Nps/index.test.tsx
index bbc8787..5ac7c5b 100644
--- a/src/components/Nps/index.test.tsx
+++ b/src/components/Nps/index.test.tsx
@@ -22,7 +22,7 @@ describe('Nps', () => {
       { id: '9', resourceType: 'answer', text: '9' },
       { id: '10', resourceType: 'answer', text: '10' },
     ];
-    render(<Nps items={answers} data-test-id={npsDataTestId} />);
+    render(<Nps questionId="question id" items={answers} data-test-id={npsDataTestId} />);
 
     const nps = screen.getByTestId(npsDataTestId);
 
@@ -48,7 +48,14 @@ describe('Nps', () => {
         { id: '9', resourceType: 'answer', text: '9' },
         { id: '10', resourceType: 'answer', text: '10' },
       ];
-      render(<Nps items={answers} onValuesChanged={(answers) => handleValuesChanged(answers)} data-test-id={npsDataTestId} />);
+      render(
+        <Nps
+          questionId="question id"
+          items={answers}
+          onValuesChanged={(answers) => handleValuesChanged(answers)}
+          data-test-id={npsDataTestId}
+        />
+      );
 
       const nps = screen.getByTestId(npsDataTestId);
 
diff --git a/src/components/Nps/index.tsx b/src/components/Nps/index.tsx
index 391b732..1a08afe 100644
--- a/src/components/Nps/index.tsx
+++ b/src/components/Nps/index.tsx
@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import classNames from 'classnames';
 
 import { Answer } from 'types/answer';
 
 interface NpsProps {
+  questionId: string;
   items: Answer[];
   onValuesChanged?: (answers: Answer[]) => void;
   'data-test-id'?: string;
 }
-const Nps = ({ items: answers, onValuesChanged, ...rest }: NpsProps): JSX.Element => {
+const Nps = ({ questionId, items: answers, onValuesChanged, ...rest }: NpsProps): JSX.Element => {
   const [currentScore, setCurrentScore] = useState(Math.round(answers.length / 2));
 
   const addBorders = (index: number): string => {
@@ -30,8 +31,12 @@ const Nps = ({ items: answers, onValuesChanged, ...rest }: NpsProps): JSX.Elemen
     onValuesChanged?.(selectedValues);
   };
 
+  useEffect(() => {
+    setCurrentScore(Math.round(answers.length / 2));
+  }, [answers, questionId]);
+
   return (
-    <div className="flex justify-center" {...rest}>
+    <div id={`nps-${questionId}`} className="flex justify-center" {...rest}>
       <div className="flex flex-col w-[335px]">
         <div className="flex flex-row justify-center h-[56px]">
           {answers.map((item, index) => (
diff --git a/src/components/Rating/index.test.tsx b/src/components/Rating/index.test.tsx
index eb0371e..c8f5277 100644
--- a/src/components/Rating/index.test.tsx
+++ b/src/components/Rating/index.test.tsx
@@ -22,7 +22,7 @@ describe('Rating', () => {
       displayType: DisplayType.Star,
       'data-test-id': ratingDataTestId,
     };
-    render(<Rating {...ratingProps} />);
+    render(<Rating questionId="question id" {...ratingProps} />);
 
     const rating = screen.getByTestId(ratingDataTestId);
 
@@ -47,7 +47,7 @@ describe('Rating', () => {
         onValueChanged: onValueChanged,
         'data-test-id': ratingDataTestId,
       };
-      render(<Rating {...ratingProps} />);
+      render(<Rating questionId="question id" {...ratingProps} />);
 
       const rating = screen.getByTestId(ratingDataTestId);
       within(rating)
diff --git a/src/components/Rating/index.tsx b/src/components/Rating/index.tsx
index 1b2d6f7..5ea07a6 100644
--- a/src/components/Rating/index.tsx
+++ b/src/components/Rating/index.tsx
@@ -1,16 +1,17 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Answer } from 'types/answer';
 import { DisplayType } from 'types/question';
 
 interface RatingProps {
+  questionId: string;
   items: Answer[];
   displayType: DisplayType;
   onValueChanged?: (answer: Answer) => void;
   'data-test-id'?: string;
 }
 
-const Rating = ({ items, displayType, onValueChanged, ...rest }: RatingProps): JSX.Element => {
+const Rating = ({ questionId, items, displayType, onValueChanged, ...rest }: RatingProps): JSX.Element => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const handleOnSelectRating = (index: number, answer: Answer) => {
@@ -43,8 +44,16 @@ const Rating = ({ items, displayType, onValueChanged, ...rest }: RatingProps): J
     }
   };
 
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [questionId]);
+
   return (
-    <div className="flex justify-center text-large font-extrabold tracking-survey-tighter gap-4" {...rest}>
+    <div
+      id={`rating-${questionId}`}
+      className="flex justify-center text-large font-extrabold tracking-survey-tighter gap-4"
+      {...rest}
+    >
       {items.map((item, index) => {
         return (
           <button key={item.id} className={buildClassAttribute(index)} onClick={() => handleOnSelectRating(index, item)}>
diff --git a/src/components/TextArea/index.test.tsx b/src/components/TextArea/index.test.tsx
index 43109ea..080022f 100644
--- a/src/components/TextArea/index.test.tsx
+++ b/src/components/TextArea/index.test.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
+import { Answer } from 'types/answer';
+
 import TextArea from '.';
 
 describe('TextArea', () => {
@@ -11,7 +13,14 @@ describe('TextArea', () => {
     const textAreaProps = {
       'data-test-id': textAreaDataTestId,
     };
-    render(<TextArea {...textAreaProps} />);
+    const answers: Answer[] = [
+      {
+        id: 'id',
+        resourceType: 'answer',
+        text: '',
+      },
+    ];
+    render(<TextArea questionId="question-id" items={answers} {...textAreaProps} />);
 
     const textArea = screen.getByTestId(textAreaDataTestId);
 
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
index 4021548..69a5e5c 100644
--- a/src/components/TextArea/index.tsx
+++ b/src/components/TextArea/index.tsx
@@ -1,19 +1,37 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-type TextAreaProps = {
-  onValueChange?: (value: string) => void;
+import { Answer } from 'types/answer';
+import { AnswerRequest } from 'types/request/surveySubmitRequest';
+
+interface TextAreaProps {
+  questionId: string;
+  items: Answer[];
+  onValueChange?: (answerRequest: AnswerRequest) => void;
   'data-test-id'?: string;
-};
+}
 
-const TextArea = ({ onValueChange, ...rest }: TextAreaProps): JSX.Element => {
+const TextArea = ({ questionId, items, onValueChange, ...rest }: TextAreaProps): JSX.Element => {
+  const [selectedValue, setSelectedValue] = useState<AnswerRequest>({
+    id: items[0].id,
+    answer: '',
+  });
   const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     event.preventDefault();
-    console.log(event.target.value);
-
-    onValueChange?.(event.target.value);
+    const answerRequest: AnswerRequest = selectedValue;
+    answerRequest.answer = event.target.value;
+    setSelectedValue(answerRequest);
+    onValueChange?.(answerRequest);
   };
+
+  useEffect(() => {
+    setSelectedValue({
+      id: items[0].id,
+      answer: '',
+    });
+  }, [questionId, items]);
   return (
     <textarea
+      id={`text-area-${questionId}`}
       className="block appearance-none bg-white bg-opacity-[.18] rounded-[12px] w-full h-28 focus:outline-none focus:ring-transparent px-3 mt-2 py-3 text-white text-regular tracking-survey-tight focus:bg-opacity-30"
       onChange={handleOnChange}
       {...rest}
diff --git a/src/screens/Question/index.tsx b/src/screens/Question/index.tsx
index 887ebda..6ffb9ef 100644
--- a/src/screens/Question/index.tsx
+++ b/src/screens/Question/index.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { ReactComponent as ArrowRight } from 'assets/images/icons/arrow-right.svg';
 import { ReactComponent as CloseButton } from 'assets/images/icons/close-btn-white.svg';
-import AppSlider from 'components/AppSlider';
+import Answer from 'components/Answer';
 import BackgroundImage from 'components/BackgroundImage';
+import ElevatedButton from 'components/ElevatedButton';
+import { useAppSelector } from 'hooks';
 
 export const questionScreenTestIds = {
   index: 'question__index',
@@ -13,11 +16,34 @@ export const questionScreenTestIds = {
 };
 
 const QuestionScreen = (): JSX.Element => {
+  const { survey } = useAppSelector((state) => state.survey);
+  const navigate = useNavigate();
+
+  const [currentQuestion, setCurrentQuestion] = useState(survey?.questions?.at(0));
+  const [questionIndex, setQuestionIndex] = useState(0);
+
+  const onNextClick = () => {
+    const nextQuestionIndex = questionIndex + 1;
+    if (nextQuestionIndex >= (survey?.questions?.length ?? 0)) {
+      return;
+    }
+    setCurrentQuestion(survey?.questions?.at(nextQuestionIndex));
+    setQuestionIndex(nextQuestionIndex);
+  };
+
+  const onSubmitClick = () => {
+    // TODO submit survey
+  };
+
+  function goBack() {
+    navigate(-1);
+  }
+
   return (
     <div>
-      <BackgroundImage backgroundUrl="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_">
+      <BackgroundImage 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}>
+          <button className="mt-8 mr-8 p-1 self-end" data-test-id={questionScreenTestIds.closeButton} onClick={goBack}>
             <CloseButton />
           </button>
           <div className="w-1/2 self-center flex-1 flex flex-col justify-center">
@@ -25,27 +51,36 @@ const QuestionScreen = (): JSX.Element => {
               className="text-small font-extrabold tracking-survey-normal opacity-50 text-white"
               data-test-id={questionScreenTestIds.index}
             >
-              1/5
+              {`${questionIndex + 1}/${survey?.questions?.length ?? 0}`}
             </p>
             <p
               className="text-x-large font-extrabold tracking-survey-tighest text-white mt-4 mb-8"
               data-test-id={questionScreenTestIds.title}
             >
-              How fulfilled did you feel during this WFH period?
+              {currentQuestion?.text}
             </p>
-            <AppSlider
-              onValueChanged={() => {
-                console.log();
-              }}
-            />
+            {currentQuestion && (
+              <div className="mt-16">
+                <Answer question={currentQuestion} />
+              </div>
+            )}
           </div>
-          <button
-            type="button"
-            className="w-[56px] h-[56px] mr-8 mb-8 bg-white rounded-full inline-flex items-center justify-center self-end justify-self-end"
-            data-test-id={questionScreenTestIds.nextButton}
-          >
-            <ArrowRight />
-          </button>
+          {questionIndex === (survey?.questions?.length ?? 0) - 1 ? (
+            <div className="mr-8 mb-8 self-end">
+              <ElevatedButton isFullWidth={false} onClick={onSubmitClick}>
+                Submit
+              </ElevatedButton>
+            </div>
+          ) : (
+            <button
+              type="button"
+              className="w-[56px] h-[56px] mr-8 mb-8 bg-white rounded-full inline-flex items-center justify-center self-end justify-self-end"
+              onClick={onNextClick}
+              data-test-id={questionScreenTestIds.nextButton}
+            >
+              <ArrowRight />
+            </button>
+          )}
         </div>
       </BackgroundImage>
     </div>
diff --git a/src/store/reducers/Survey/action.ts b/src/store/reducers/Survey/action.ts
index 3390f58..043d9b9 100644
--- a/src/store/reducers/Survey/action.ts
+++ b/src/store/reducers/Survey/action.ts
@@ -1,8 +1,9 @@
 import { AsyncThunkPayloadCreator } from '@reduxjs/toolkit';
 
-import { getSurvey } from 'adapters/Survey';
+import { getSurvey, submitSurvey } from 'adapters/Survey';
 import { DeserializableResponse, deserialize } from 'helpers/deserializer';
 import { JSONObject } from 'helpers/json';
+import { SurveySubmitRequest } from 'types/request/surveySubmitRequest';
 import { Survey } from 'types/survey';
 
 export const getSurveyThunkCreator: AsyncThunkPayloadCreator<Survey, string, JSONObject> = async (surveyId: string) => {
@@ -12,3 +13,9 @@ export const getSurveyThunkCreator: AsyncThunkPayloadCreator<Survey, string, JSO
     return survey;
   });
 };
+
+export const submitSurveyThunkCreator: AsyncThunkPayloadCreator<void, SurveySubmitRequest, JSONObject> = (
+  surveySubmitRequest
+) => {
+  return submitSurvey(surveySubmitRequest).then();
+};
diff --git a/src/store/reducers/Survey/index.ts b/src/store/reducers/Survey/index.ts
index 1561bfe..a2e4ea7 100644
--- a/src/store/reducers/Survey/index.ts
+++ b/src/store/reducers/Survey/index.ts
@@ -1,13 +1,15 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
+import { SurveySubmitRequest } from 'types/request/surveySubmitRequest';
 import { Survey } from 'types/survey';
 
-import { getSurveyThunkCreator } from './action';
+import { getSurveyThunkCreator, submitSurveyThunkCreator } from './action';
 
 export interface SurveyState {
   survey?: Survey;
   isLoading: boolean;
   isError: boolean;
+  surveySubmitRequest?: SurveySubmitRequest;
 }
 
 export const initialState: SurveyState = {
@@ -17,6 +19,8 @@ export const initialState: SurveyState = {
 
 export const getSurveyAsyncThunk = createAsyncThunk('survey/getSurvey', getSurveyThunkCreator);
 
+export const submitSurveyAsyncThunk = createAsyncThunk('survey/submitSurvey', submitSurveyThunkCreator);
+
 export const surveySlice = createSlice({
   name: 'survey',
   initialState,
diff --git a/src/types/question.ts b/src/types/question.ts
index c1456c9..56668fb 100644
--- a/src/types/question.ts
+++ b/src/types/question.ts
@@ -25,6 +25,7 @@ export enum DisplayType {
   Thumbs = 'thumbs',
   Choice = 'choice',
   Nps = 'nps',
+  Slider = 'slider',
   Textarea = 'textarea',
   Textfield = 'textfield',
   Dropdown = 'dropdown',
@@ -34,7 +35,7 @@ export enum DisplayType {
 
 export const getDisplayTypeEnum = (question: Question): DisplayType => {
   try {
-    return (<never>DisplayType)[question.displayType ?? ''];
+    return <DisplayType>`${question.displayType ?? ''}`;
   } catch (error) {
     return DisplayType.Unknown;
   }
diff --git a/src/types/request/surveySubmitRequest.ts b/src/types/request/surveySubmitRequest.ts
index 8157dfd..e62c003 100644
--- a/src/types/request/surveySubmitRequest.ts
+++ b/src/types/request/surveySubmitRequest.ts
@@ -10,7 +10,7 @@ interface QuestionRequest extends JSONObject {
   answers: AnswerRequest[];
 }
 
-interface AnswerRequest extends JSONObject {
+export interface AnswerRequest extends JSONObject {
   id: string;
   answer?: string;
 }