add infinite scroll

Author: DadonStyle

package.json

@@ -24,6 +24,7 @@
     "react-animated-cursor": "^2.8.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-query": "^3.39.3",
     "react-toastify": "^9.1.3",
     "socket.io-client": "^4.6.1",

src/hooks/useFetchImgs.tsx

@@ -2,6 +2,7 @@ import { useQuery } from 'react-query';
 import axios from 'axios';
 import { IPhoto } from '../services/interface';
 import { gapi } from 'gapi-script';
+import { useState } from 'react';
 
 // init for google api
 const initAPI = async () => {
@@ -40,10 +41,20 @@ const fetchFromDrive = async (driveId: string) => {
   return imgUrls;
 };
 
+interface paginationState {
+  count: number;
+  numPage: number;
+}
+
 const useFetchImgs = (
   setImgArr: (arr: Array<IPhoto>) => void,
   driveId: string
 ) => {
+  const PAGE_COUNT = 20;
+  const [pagination, setPagination] = useState<paginationState>({
+    count: PAGE_COUNT,
+    numPage: 1,
+  });
   const query = useQuery({
     queryKey: ['imgArr'],
     queryFn: async () => {
@@ -54,8 +65,13 @@ const useFetchImgs = (
       }
 
       const res = await axios.get(
-        'https://api.slingacademy.com/v1/sample-data/photos?offset=5&limit=2000'
+        `https://api.slingacademy.com/v1/sample-data/photos?offset=5&limit=${pagination.count}`
       );
+
+      setPagination((prev) => ({
+        count: prev.count + PAGE_COUNT,
+        numPage: prev.count + 1,
+      }));
       if (res?.data) setImgArr(res?.data?.photos);
     },
     retry: 1,

src/modules/Gallery/Gallery.tsx

@@ -7,16 +7,26 @@ import Header from '../Header/Header';
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { formatUrl } from './helper';
-import BouncingDotsLoader from '../../components/Loader/Loader';
+// import BouncingDotsLoader from '../../components/Loader/Loader';
+// import InfiniteScroll from 'react-infinite-scroll-component';
 
 const Gallery = () => {
-  var notyf = new Notyf();
+  // consts
+  const LIMIT_TOTAL_IMG = 120;
+
+  // state
   const [imgArr, setImgArr] = useState<Array<IPhoto>>([]);
   const [driveId, setDriveId] = useState<string>('');
+
+  // hooks
   const query = useFetchImgs(setImgArr, driveId);
   const topRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
 
+  // varbs
+  var notyf = new Notyf();
+
+  // functions
   const scrollTop = () =>
     topRef.current?.scrollIntoView({ behavior: 'smooth' });
 
@@ -49,7 +59,7 @@ const Gallery = () => {
     notyf.success('Img removed successfully');
   };
 
-  if (query.isFetching) return <BouncingDotsLoader />;
+  // if (query.isFetching) return <BouncingDotsLoader />;
 
   return (
     <>
@@ -62,7 +72,12 @@ const Gallery = () => {
         driveId={driveId}
         refetch={query.refetch}
       />
-      <S.GridLayout>
+      <S.InfiniteScrollGrid
+        dataLength={imgArr.length}
+        next={query.refetch}
+        hasMore={imgArr.length < LIMIT_TOTAL_IMG}
+        loader={<h4>Loading...</h4>}
+      >
         {imgArr.map((item: IPhoto, index: number) => (
           <ImgComponent
             url={item.url} // make sure the component can add google drive files too in the url
@@ -74,8 +89,8 @@ const Gallery = () => {
             removeFromArr={removeFromArr}
           />
         ))}
-        <S.BottomAnchor ref={bottomRef} />
-      </S.GridLayout>
+      </S.InfiniteScrollGrid>
+      <S.BottomAnchor ref={bottomRef} />
     </>
   );
 };

src/modules/Gallery/styled.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import InfiniteScroll from 'react-infinite-scroll-component';
 
 const GridLayout = styled.div`
   display: grid;
@@ -15,6 +16,21 @@ const GridLayout = styled.div`
   }
 `;
 
+const InfiniteScrollGrid = styled(InfiniteScroll)`
+  display: grid;
+  padding: 0.1rem 0; // this will make space for the header and the footer to not overide photos
+  height: 100vh;
+  width: 100vw;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: max-content;
+  grid-auto-rows: max-content;
+  gap: 0.1rem;
+  box-sizing: border-box;
+  @media (max-width: 750px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+`;
+
 const TopAnchor = styled.div`
   display: flex;
   height: 0;
@@ -27,6 +43,7 @@ const BottomAnchor = styled.div`
 
 const S = {
   GridLayout,
+  InfiniteScrollGrid,
   TopAnchor,
   BottomAnchor,
 };

yarn.lock

@@ -1304,6 +1304,13 @@ react-hook-form@^7.45.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.4.tgz#73d228b704026ae95d7e5f7b207a681b173ec62a"
   integrity sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==
 
+react-infinite-scroll-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
+  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
+  dependencies:
+    throttle-debounce "^2.1.0"
+
 react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -1441,6 +1448,11 @@ svg-parser@^2.0.4:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"