From 70c2b9b0a9d554d66a4f9bab68f0a869b2f8f2f6 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Fri, 10 Mar 2023 15:55:56 +0700
Subject: [PATCH] [#26] SurveyList to only display a single Survey depending on
 position

---
 src/components/Survey/index.tsx     |  4 ++--
 src/components/SurveyList/index.tsx | 20 +++++++++++---------
 src/screens/Home/index.tsx          |  6 +++++-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/Survey/index.tsx b/src/components/Survey/index.tsx
index 2b77c7f..ed3d65d 100644
--- a/src/components/Survey/index.tsx
+++ b/src/components/Survey/index.tsx
@@ -8,8 +8,8 @@ function Survey({ title, description, coverImageUrl }: SurveyProps) {
   return (
     <>
       <img src={coverImageUrl} alt="cover" />
-      <p> {title}</p>
-      <p> {description}</p>
+      <p className="text-white"> {title}</p>
+      <p className="text-white"> {description}</p>
     </>
   );
 }
diff --git a/src/components/SurveyList/index.tsx b/src/components/SurveyList/index.tsx
index b9131a5..d005467 100644
--- a/src/components/SurveyList/index.tsx
+++ b/src/components/SurveyList/index.tsx
@@ -1,19 +1,21 @@
+import { useState } from 'react';
+
+import Button from 'components/Button';
 import SurveyComponent from 'components/Survey';
 import { Survey } from 'types/Survey';
 
 type SurveyListProps = { surveys: Survey[] };
 
 function SurveyList({ surveys }: SurveyListProps) {
+  const [index, setIndex] = useState(0);
+
   return (
-    <div>
-      {surveys.map((survey) => {
-        return (
-          <li key={survey.id}>
-            <SurveyComponent {...survey} />
-          </li>
-        );
-      })}
-    </div>
+    <>
+      <SurveyComponent {...surveys[index]} />
+
+      {/* TODO: For testing */}
+      <Button type="button" onButtonClick={() => setIndex(index + 1)} text="Next" />
+    </>
   );
 }
 
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index f73763c..dba5949 100644
--- a/src/screens/Home/index.tsx
+++ b/src/screens/Home/index.tsx
@@ -45,7 +45,11 @@ const HomeScreen = (): JSX.Element => {
         Today - Monday, June 15
       </div>
 
-      {surveys.length > 0 && <SurveyList surveys={surveys} />}
+      {surveys.length > 0 && (
+        <section>
+          <SurveyList surveys={surveys} />
+        </section>
+      )}
     </>
   );
 };