From dbdf698f8143743d459f776b205404ee4d1c97f9 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Fri, 10 Mar 2023 15:17:27 +0700
Subject: [PATCH] [#26] Add initial Survey and SurveyList component with data
 from API

---
 src/adapters/surveyAdapter.ts       | 21 ++++++++++++++
 src/components/Survey/index.tsx     | 17 +++++++++++
 src/components/SurveyList/index.tsx | 20 +++++++++++++
 src/screens/Home/index.tsx          | 44 ++++++++++++++++++++++++++++-
 src/screens/ResetPassword/index.tsx |  4 +--
 src/types/Survey.ts                 |  7 +++++
 src/types/SurveyResponse.ts         | 10 +++++++
 7 files changed, 119 insertions(+), 4 deletions(-)
 create mode 100644 src/adapters/surveyAdapter.ts
 create mode 100644 src/components/Survey/index.tsx
 create mode 100644 src/components/SurveyList/index.tsx
 create mode 100644 src/types/Survey.ts
 create mode 100644 src/types/SurveyResponse.ts

diff --git a/src/adapters/surveyAdapter.ts b/src/adapters/surveyAdapter.ts
new file mode 100644
index 0000000..654ee00
--- /dev/null
+++ b/src/adapters/surveyAdapter.ts
@@ -0,0 +1,21 @@
+import { getItem } from 'helpers/localStorage';
+
+import BaseAdapter from './baseAdapter.';
+
+/* eslint-disable camelcase */
+export const commonParams = {
+  access_token: getItem('UserProfile')?.auth?.access_token,
+};
+/* eslint-enable camelcase */
+
+class SurveyAdapter extends BaseAdapter {
+  static list() {
+    const requestParams = {
+      ...commonParams,
+    };
+
+    return this.prototype.getRequest('surveys', { data: requestParams });
+  }
+}
+
+export default SurveyAdapter;
diff --git a/src/components/Survey/index.tsx b/src/components/Survey/index.tsx
new file mode 100644
index 0000000..2b77c7f
--- /dev/null
+++ b/src/components/Survey/index.tsx
@@ -0,0 +1,17 @@
+type SurveyProps = {
+  title: string;
+  description: string;
+  coverImageUrl: string;
+};
+
+function Survey({ title, description, coverImageUrl }: SurveyProps) {
+  return (
+    <>
+      <img src={coverImageUrl} alt="cover" />
+      <p> {title}</p>
+      <p> {description}</p>
+    </>
+  );
+}
+
+export default Survey;
diff --git a/src/components/SurveyList/index.tsx b/src/components/SurveyList/index.tsx
new file mode 100644
index 0000000..b9131a5
--- /dev/null
+++ b/src/components/SurveyList/index.tsx
@@ -0,0 +1,20 @@
+import SurveyComponent from 'components/Survey';
+import { Survey } from 'types/Survey';
+
+type SurveyListProps = { surveys: Survey[] };
+
+function SurveyList({ surveys }: SurveyListProps) {
+  return (
+    <div>
+      {surveys.map((survey) => {
+        return (
+          <li key={survey.id}>
+            <SurveyComponent {...survey} />
+          </li>
+        );
+      })}
+    </div>
+  );
+}
+
+export default SurveyList;
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index c87cb3e..f73763c 100644
--- a/src/screens/Home/index.tsx
+++ b/src/screens/Home/index.tsx
@@ -1,9 +1,51 @@
+import { useState, useEffect } from 'react';
+
+import SurveyAdapter from 'adapters/surveyAdapter';
+import { Survey } from 'types/Survey';
+import { SurveyResponse } from 'types/SurveyResponse';
+
+import SurveyList from '../../components/SurveyList';
+
 const HomeScreen = (): JSX.Element => {
+  const [loaded, setLoaded] = useState(false);
+  const [surveys, setSurveys] = useState<Survey[]>([]);
+
+  useEffect(() => {
+    const fetchSurveys = async () => {
+      const surveyResponse = await SurveyAdapter.list();
+
+      const surveyData: SurveyResponse = await surveyResponse.data;
+
+      const parsedSurveys: Survey[] = [];
+
+      surveyData.forEach((survey) => {
+        parsedSurveys.push({
+          id: survey.id,
+          title: survey.attributes.title,
+          description: survey.attributes.description,
+          coverImageUrl: survey.attributes.cover_image_url,
+          type: survey.attributes.survey_type,
+        });
+      });
+
+      setSurveys(parsedSurveys);
+
+      setLoaded(true);
+    };
+    fetchSurveys();
+  }, []);
+
+  if (!loaded) {
+    return <h3>Loading Surveys</h3>;
+  }
+
   return (
     <>
       <div className="my-8 text-white opacity-50" data-test-id="app-main-heading">
-        Home Screen
+        Today - Monday, June 15
       </div>
+
+      {surveys.length > 0 && <SurveyList surveys={surveys} />}
     </>
   );
 };
diff --git a/src/screens/ResetPassword/index.tsx b/src/screens/ResetPassword/index.tsx
index f03fcbe..c6deb33 100644
--- a/src/screens/ResetPassword/index.tsx
+++ b/src/screens/ResetPassword/index.tsx
@@ -23,9 +23,7 @@ function ResetPasswordScreen() {
 
   const performPasswordReset = async () => {
     try {
-      const resetPasswordResponse = await AuthAdapter.resetPassword(email);
-
-      console.log(resetPasswordResponse);
+      await AuthAdapter.resetPassword(email);
     } catch (error) {
       let errorMessage = t('login.generic-server-error');
 
diff --git a/src/types/Survey.ts b/src/types/Survey.ts
new file mode 100644
index 0000000..46734e8
--- /dev/null
+++ b/src/types/Survey.ts
@@ -0,0 +1,7 @@
+export type Survey = {
+  id: string;
+  title: string;
+  description: string;
+  type: string;
+  coverImageUrl: string;
+};
diff --git a/src/types/SurveyResponse.ts b/src/types/SurveyResponse.ts
new file mode 100644
index 0000000..ad57c53
--- /dev/null
+++ b/src/types/SurveyResponse.ts
@@ -0,0 +1,10 @@
+export type SurveyResponse = {
+  id: string;
+  type: string;
+  attributes: {
+    title: string;
+    description: string;
+    survey_type: string;
+    cover_image_url: string;
+  };
+}[];