add infinite scroll

KavetiRohith · Sep 14, 2023 · 9b46c8d · 9b46c8d
1 parent e60c0fa
commit 9b46c8d
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 23 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "gh-pages": "^6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.11.0"
+    "react-icons": "^4.11.0",
+    "react-infinite-scroll-component": "^6.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/src/App.tsx b/src/App.tsx
@@ -14,10 +14,13 @@ export interface GameQuery {
   platform: Platform | null;
   sortOrder: string | null;
   searchQuery: string | null;
+  page: number;
 }
 
 function App() {
-  const [gameQuery, setGameQuery] = useState<GameQuery>({} as GameQuery);
+  const [gameQuery, setGameQuery] = useState<GameQuery>({
+    page: 1,
+  } as GameQuery);
 
   return (
     <Grid
@@ -63,7 +66,12 @@ function App() {
             />
           </HStack>
         </Box>
-        <GameGrid gameQuery={gameQuery} />
+        <GameGrid
+          gameQuery={gameQuery}
+          next={() => {
+            setGameQuery({ ...gameQuery, page: gameQuery.page + 1 });
+          }}
+        />
       </GridItem>
     </Grid>
   );

diff --git a/src/components/GameGrid.tsx b/src/components/GameGrid.tsx
@@ -1,4 +1,5 @@
 import { SimpleGrid, Text } from "@chakra-ui/react";
+import InfiniteScroll from "react-infinite-scroll-component";
 import useGames from "../hooks/useGames";
 import GameCard from "./GameCard";
 import GameCardSkeleton from "./GameCardSkeleton";
@@ -7,31 +8,46 @@ import { GameQuery } from "../App";
 
 interface GameGridProps {
   gameQuery: GameQuery;
+  next: () => void;
 }
 
-const GameGrid = ({ gameQuery }: GameGridProps) => {
-  const { games, error, isLoading } = useGames(gameQuery);
+const GameGrid = ({ gameQuery, next }: GameGridProps) => {
+  const { games, error } = useGames(gameQuery);
 
   if (error) return <Text>{error}</Text>;
 
   return (
-    <SimpleGrid
-      columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}
-      spacing={6}
-      padding="10px"
+    <InfiniteScroll
+      dataLength={games.length} // This is important field to render the next data
+      next={next}
+      hasMore={true}
+      loader={
+        <SimpleGrid
+          columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}
+          spacing={6}
+          padding="10px"
+        >
+          {[0, 1, 2, 3, 4, 5].map((skeleton) => (
+            <GameCardContainer key={skeleton}>
+              <GameCardSkeleton />
+            </GameCardContainer>
+          ))}
+        </SimpleGrid>
+      }
+      endMessage={<Text textAlign="center">Yay! You have seen it all</Text>}
     >
-      {isLoading &&
-        [0, 1, 2, 3, 4, 5].map((skeleton) => (
-          <GameCardContainer key={skeleton}>
-            <GameCardSkeleton />
+      <SimpleGrid
+        columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}
+        spacing={6}
+        padding="10px"
+      >
+        {games.map((game) => (
+          <GameCardContainer key={game.id}>
+            <GameCard game={game}></GameCard>
           </GameCardContainer>
         ))}
-      {games.map((game) => (
-        <GameCardContainer key={game.id}>
-          <GameCard game={game}></GameCard>
-        </GameCardContainer>
-      ))}
-    </SimpleGrid>
+      </SimpleGrid>
+    </InfiniteScroll>
   );
 };
 

diff --git a/src/hooks/useData.ts b/src/hooks/useData.ts
@@ -11,7 +11,8 @@ const useData = <T>(
   endpoint: string,
   requestConfig?: AxiosRequestConfig,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  deps?: any[]
+  deps?: any[],
+  keepPreviousData: boolean = false
 ) => {
   const [data, setData] = useState<T[]>([]);
   const [error, setError] = useState("");
@@ -20,15 +21,17 @@ const useData = <T>(
   useEffect(
     () => {
       const controller = new AbortController();
-      setData([]);
+      if (!keepPreviousData) setData([]);
       setLoading(true);
       apiClient
         .get<FetchResponse<T>>(endpoint, {
           signal: controller.signal,
           ...requestConfig,
         })
         .then((res) => {
-          setData(res.data.results);
+          keepPreviousData
+            ? setData([...data, ...res.data.results])
+            : setData(res.data.results);
           setLoading(false);
         })
         .catch((err) => {

diff --git a/src/hooks/useGames.ts b/src/hooks/useGames.ts
@@ -28,9 +28,11 @@ const useGames = (gameQuery: GameQuery) => {
         platforms: gameQuery.platform?.id,
         ordering: gameQuery.sortOrder,
         search: gameQuery.searchQuery,
+        page: gameQuery.page,
       },
     },
-    [gameQuery]
+    [gameQuery],
+    true
   );
 
   return { games, error, isLoading };