[#26] Add swiper to scroll through surveys

package.json

@@ -13,6 +13,7 @@
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
     "sass": "1.49.11",
+    "swiper": "9.1.0",
     "web-vitals": "2.1.4"
   },
   "scripts": {

src/assets/stylesheets/application.scss

@@ -18,7 +18,6 @@
 }
 
 html {
-  width: 100%;
   height: 100%;
   margin: 0 auto;
 
@@ -34,3 +33,19 @@ html {
 body {
   height: 100%;
 }
+
+.survey-swiper {
+  width: 820px;
+  height: 100%;
+
+  .swiper-pagination-bullet {
+    width: 0.5rem;
+
+    opacity: 0.2;
+    background-color: #fff !important;
+  }
+
+  .swiper-pagination-bullet-active {
+    opacity: 1;
+  }
+}

src/components/Survey/index.tsx

@@ -6,11 +6,11 @@ type SurveyProps = {
 
 function Survey({ title, description, coverImageUrl }: SurveyProps) {
   return (
-    <>
-      <img className="my-4 h-full max-h-80 w-full max-w-full" src={coverImageUrl} alt="cover" />
+    <div>
+      <img className="h-80 w-full" src={coverImageUrl} alt="cover" />
       <p className="text-white"> {title}</p>
       <p className="text-white opacity-60"> {description}</p>
-    </>
+    </div>
   );
 }
 

src/components/SurveyList/index.tsx

@@ -1,21 +1,32 @@
-import { useState } from 'react';
+import { Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Styles
+// import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
 
-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 (
-    <>
-      <SurveyComponent {...surveys[index]} />
-
-      {/* TODO: For testing */}
-      <Button type="button" onButtonClick={() => setIndex(index + 1)} text="Next" />
-    </>
+    <Swiper
+      className="survey-swiper"
+      modules={[Pagination]}
+      speed={800}
+      pagination={{ clickable: true, dynamicBullets: true }}
+      slidesPerView={1}
+    >
+      {surveys.map((survey) => {
+        return (
+          <SwiperSlide key={survey.id}>
+            <SurveyComponent {...survey} />
+          </SwiperSlide>
+        );
+      })}
+    </Swiper>
   );
 }
 

src/screens/Home/index.tsx

@@ -40,18 +40,16 @@ const HomeScreen = (): JSX.Element => {
   }
 
   return (
-    <>
-      {surveys.length > 0 && (
-        <section>
-          <div className="my-8 text-white" data-test-id="app-main-heading">
-            <p>{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</p>
-            <p className="text-3xl font-extrabold">Today</p>
-          </div>
-
-          <SurveyList surveys={surveys} />
-        </section>
-      )}
-    </>
+    <section>
+      <div className="my-8 text-white" data-test-id="app-main-heading">
+        <p>{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</p>
+        <p className="text-3xl font-extrabold">Today</p>
+      </div>
+
+      <section className="h-full">
+        <SurveyList surveys={surveys} />
+      </section>
+    </section>
   );
 };