From e98f4ca65f1d670147ffadc7c249626001f000e2 Mon Sep 17 00:00:00 2001
From: Tran Manh
Date: Fri, 14 Jul 2023 17:02:46 +0700
Subject: [PATCH] [#21] Create the UI for Question page
---
src/assets/images/icons/close-btn-white.svg | 14 ++++++
src/routes/index.tsx | 11 +++++
src/screens/Question/index.test.tsx | 31 ++++++++++++
src/screens/Question/index.tsx | 53 +++++++++++++++++++++
src/screens/Survey/index.tsx | 11 +++--
5 files changed, 116 insertions(+), 4 deletions(-)
create mode 100644 src/assets/images/icons/close-btn-white.svg
create mode 100644 src/screens/Question/index.test.tsx
create mode 100644 src/screens/Question/index.tsx
diff --git a/src/assets/images/icons/close-btn-white.svg b/src/assets/images/icons/close-btn-white.svg
new file mode 100644
index 0000000..ff633ba
--- /dev/null
+++ b/src/assets/images/icons/close-btn-white.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index fa7b901..ab4b42b 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { RouteObject } from 'react-router-dom';
import DashBoardScreen from 'screens/Dashboard';
+import QuestionScreen from 'screens/Question';
import SignInScreen from 'screens/SignIn';
import SurveyScreen from 'screens/Survey';
@@ -11,6 +12,12 @@ export const paths = {
root: '/',
signIn: '/sign-in',
survey: '/surveys/:id',
+ question: '/surveys/:id/questions',
+};
+
+export const questionPath = (): string => {
+ const questionPaths = paths.question.split('/');
+ return questionPaths[questionPaths.length - 1];
};
const routes: RouteObject[] = [
@@ -25,6 +32,10 @@ const routes: RouteObject[] = [
path: paths.survey,
element: ,
},
+ {
+ path: paths.question,
+ element: ,
+ },
],
},
{
diff --git a/src/screens/Question/index.test.tsx b/src/screens/Question/index.test.tsx
new file mode 100644
index 0000000..d831dcc
--- /dev/null
+++ b/src/screens/Question/index.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import TestWrapper from 'tests/TestWrapper';
+
+import QuestionScreen, { questionScreenTestIds } from '.';
+
+describe('QuestionScreen', () => {
+ const TestComponent = (): JSX.Element => {
+ return (
+
+
+
+ );
+ };
+
+ it('renders Question screen and its components', () => {
+ render();
+
+ const currentIndex = screen.getByTestId(questionScreenTestIds.index);
+ const questionTitle = screen.getByTestId(questionScreenTestIds.title);
+ const closeButton = screen.getByTestId(questionScreenTestIds.closeButton);
+ const nextButton = screen.getByTestId(questionScreenTestIds.nextButton);
+
+ expect(currentIndex).toBeVisible();
+ expect(questionTitle).toBeVisible();
+ expect(closeButton).toBeVisible();
+ expect(nextButton).toBeVisible();
+ });
+});
diff --git a/src/screens/Question/index.tsx b/src/screens/Question/index.tsx
new file mode 100644
index 0000000..489e13f
--- /dev/null
+++ b/src/screens/Question/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+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 MainView from 'components/MainView';
+
+export const questionScreenTestIds = {
+ index: 'question__index',
+ title: 'question__title',
+ closeButton: 'question__close-button',
+ nextButton: 'question__next-button',
+};
+
+const QuestionScreen = (): JSX.Element => {
+ return (
+
+
+
+
+
+ 1/5
+
+
+ How fulfilled did you feel during this WFH period?
+
+
{
+ // TODO
+ }}
+ />
+
+
+
+
+ );
+};
+
+export default QuestionScreen;
diff --git a/src/screens/Survey/index.tsx b/src/screens/Survey/index.tsx
index 3ff36e0..c953727 100644
--- a/src/screens/Survey/index.tsx
+++ b/src/screens/Survey/index.tsx
@@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
import { ToastContainer, toast } from 'react-toastify';
import { ReactComponent as ArrowBack } from 'assets/images/icons/arrow-back.svg';
@@ -7,6 +7,7 @@ import ElevatedButton from 'components/ElevatedButton';
import LoadingDialog from 'components/LoadingDialog';
import MainView from 'components/MainView';
import { useAppDispatch, useAppSelector } from 'hooks';
+import { questionPath } from 'routes';
import { getSurveyAsyncThunk } from 'store/reducers/Survey';
import 'react-toastify/dist/ReactToastify.css';
@@ -75,9 +76,11 @@ const SurveyScreen = (): JSX.Element => {
{survey?.description}
-
- Start Survey
-
+
+
+ Start Survey
+
+