update: add inifinite scrolling to the resources and display only pub…

…lished resources
she-code-africa · Jul 1, 2024 · ca28338 · ca28338
1 parent 2c208c0
commit ca28338
Show file tree

Hide file tree

Showing 9 changed files with 331 additions and 86 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "react-slick": "^0.30.2",

diff --git a/src/components/activities/coding-page/index.jsx b/src/components/activities/coding-page/index.jsx
@@ -2,22 +2,22 @@ import React, { useEffect, useState } from "react";
 import {
   HeroComponent,
   InfoCardHeader,
-  InfoCardSlider,
+  InfoCard,
 } from "../../shared-components";
 import { codingHeroImage } from "../../../assets/images";
 // import { coursesSlider } from "../../../utils/appData";
 import UpcomingEvents from "../UpcomingEvents";
-import {
-  infoComponentsettings,
-  infoComponentSettings,
-} from "../../../utils/sliderSettings";
+
 import { useQuery } from "@tanstack/react-query";
 import {
   getActivityCourses,
   getAllActivities,
 } from "../../../services/queries";
 import { ApiLoading, EmptyResponse } from "../../index";
 import { codingHeroSubContent } from "../../../utils/appData";
+// import useInfiniteScroll from "react-easy-infinite-scroll-hook";
+import InfiniteScroll from "react-infinite-scroll-component";
+// import InfoCard from "../../shared-components/activities/info-card/InfoCard";
 
 const CodingPageComponent = () => {
   const {
@@ -49,6 +49,35 @@ const CodingPageComponent = () => {
     enabled: !!activityId && !isLoading,
   });
 
+  // inifinite scrolling
+  const filteredCourses =
+    activityCourses &&
+    activityCourses.length > 0 &&
+    activityCourses.filter((courses) => courses.state === "published");
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const [items, setItems] = useState(
+    filteredCourses ? filteredCourses.slice(0, 12) : []
+  );
+  const [hasMore, setHasMore] = useState(true);
+
+  const fetchMore = () => {
+    const nextIndex = currentIndex + 1;
+    const nextLastIndex = nextIndex * 12;
+    const nextFirstIndex = nextLastIndex - 12;
+
+    if (nextFirstIndex > filteredCourses.length) {
+      setHasMore(false);
+    } else {
+      setTimeout(() => {
+        setItems((prev) => [
+          ...prev,
+          ...filteredCourses.slice(nextFirstIndex, nextLastIndex),
+        ]);
+        setCurrentIndex(nextIndex);
+      }, 500);
+    }
+  };
+
   return (
     <>
       <section className=" text-sealBrown font-mulish w-full">
@@ -61,23 +90,40 @@ const CodingPageComponent = () => {
             heroImage={codingHeroImage}
             subContent={codingHeroSubContent}
           />
+          <div className="mt-[100px] w-full mb-32">
+            <UpcomingEvents activityTitle="coding" />
+          </div>
+
           <div className="my-16 lg:my-20 ">
             <section className="w-full">
               <InfoCardHeader
                 infoCardHeading="Resources"
                 infoCardParagraph=""
               />
+
               {isCoursesLoading ? (
                 <ApiLoading />
-              ) : !!activityCourses && activityCourses.length > 0 ? (
-                <InfoCardSlider
-                  sliderData={activityCourses}
-                  settings={
-                    activityCourses.length < 3
-                      ? infoComponentSettings
-                      : infoComponentsettings
-                  }
-                />
+              ) : filteredCourses && filteredCourses.length > 0 ? (
+                <InfiniteScroll
+                  dataLength={items.length}
+                  next={fetchMore}
+                  loader={<ApiLoading />}
+                  hasMore={hasMore}
+                >
+                  <section className="w-full grid grid-cols-3 gap-5 ">
+                    {filteredCourses.map((item, i) => (
+                      <InfoCard
+                        key={i}
+                        title={item.title}
+                        cardImage={item.image}
+                        paragraph={item.description}
+                        index={item.index}
+                        // imageH={imageH}
+                        link={item.link}
+                      />
+                    ))}
+                  </section>
+                </InfiniteScroll>
               ) : (
                 <>
                   <EmptyResponse text="course" />
@@ -86,9 +132,9 @@ const CodingPageComponent = () => {
             </section>
           </div>
 
-          <div className="mt-[100px] w-full mb-32">
+          {/* <div className="mt-[100px] w-full mb-32">
             <UpcomingEvents activityTitle="coding" />
-          </div>
+          </div> */}
         </div>
       </section>
     </>

diff --git a/src/components/activities/game-development/index.jsx b/src/components/activities/game-development/index.jsx
@@ -2,15 +2,12 @@ import React, { useState, useEffect } from "react";
 import {
   HeroComponent,
   InfoCardHeader,
-  InfoCardSlider,
+  InfoCard,
 } from "../../shared-components";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { gameDevHeroImage } from "../../../assets/images";
 // import { coursesSlider } from "../../../utils/appData";
 import UpcomingEvents from "../UpcomingEvents";
-import {
-  infoComponentsettings,
-  infoComponentSettings,
-} from "../../../utils/sliderSettings";
 import { useQuery } from "@tanstack/react-query";
 import {
   getActivityCourses,
@@ -47,6 +44,34 @@ const GameDevelopmentPage = () => {
     queryFn: () => getActivityCourses(activityId),
     enabled: !!activityId && !isLoading,
   });
+  // inifinite scrolling
+  const filteredCourses =
+    activityCourses &&
+    activityCourses.length > 0 &&
+    activityCourses.filter((courses) => courses.state === "published");
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const [items, setItems] = useState(
+    filteredCourses ? filteredCourses.slice(0, 12) : []
+  );
+  const [hasMore, setHasMore] = useState(true);
+
+  const fetchMore = () => {
+    const nextIndex = currentIndex + 1;
+    const nextLastIndex = nextIndex * 12;
+    const nextFirstIndex = nextLastIndex - 12;
+
+    if (nextFirstIndex > filteredCourses.length) {
+      setHasMore(false);
+    } else {
+      setTimeout(() => {
+        setItems((prev) => [
+          ...prev,
+          ...filteredCourses.slice(nextFirstIndex, nextLastIndex),
+        ]);
+        setCurrentIndex(nextIndex);
+      }, 500);
+    }
+  };
   return (
     <section className=" text-sealBrown font-mulish w-full">
       <div className=" w-[90%] max-w-[1280px] mx-auto">
@@ -56,31 +81,43 @@ const GameDevelopmentPage = () => {
           heroImage={gameDevHeroImage}
           subContent={gameDevelopmentHeroSubContent}
         />
+
+        <div className="mt-[100px] w-full mb-32">
+          <UpcomingEvents activityTitle="game development" />
+        </div>
         <div className="my-16 lg:my-20">
           <section className="w-full">
             <InfoCardHeader infoCardHeading="Resources" infoCardParagraph="" />
             {isCoursesLoading ? (
               <ApiLoading />
-            ) : !!activityCourses && activityCourses.length > 0 ? (
-              <InfoCardSlider
-                sliderData={activityCourses}
-                settings={
-                  activityCourses.length < 3
-                    ? infoComponentSettings
-                    : infoComponentsettings
-                }
-              />
+            ) : filteredCourses && filteredCourses.length > 0 ? (
+              <InfiniteScroll
+                dataLength={items.length}
+                next={fetchMore}
+                loader={<ApiLoading />}
+                hasMore={hasMore}
+              >
+                <section className="w-full grid grid-cols-3 gap-5 ">
+                  {filteredCourses.map((item, i) => (
+                    <InfoCard
+                      key={i}
+                      title={item.title}
+                      cardImage={item.image}
+                      paragraph={item.description}
+                      index={item.index}
+                      // imageH={imageH}
+                      link={item.link}
+                    />
+                  ))}
+                </section>
+              </InfiniteScroll>
             ) : (
               <>
                 <EmptyResponse text="course" />
               </>
             )}
           </section>
         </div>
-
-        <div className="mt-[100px] w-full mb-32">
-          <UpcomingEvents activityTitle="game development" />
-        </div>
       </div>
     </section>
   );