feat: 🎸 added infinite scroll question

 added infinite scroll question

Author: Pratham82

2024 Prep/machine_coding/react/package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

2024 Prep/machine_coding/react/package.json

@@ -1,7 +1,6 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
@@ -40,3 +39,7 @@
 .read-the-docs {
   color: #888;
 }
+
+.container {
+  height: 100vh;
+}

2024 Prep/machine_coding/react/src/App.css

@@ -0,0 +1,85 @@
+import React, { useState, useEffect, useRef } from 'react'
+import Loader from './Loader'
+import axios from 'axios'
+
+Loader
+const URL = 'https://jsonplaceholder.typicode.com/posts'
+
+export default function App() {
+  const [data, setData] = useState([])
+  const [currentPage, setCurrentPage] = useState(1)
+  const observerTarget = useRef(null)
+
+  // * Fetch data and update the
+  const getData = async (pageNumber: number) => {
+    try {
+      const res = await axios.get(URL, {
+        params: {
+          _page: String(pageNumber),
+          _limit: '10',
+        },
+      })
+      const result = res.data
+      setData(prevData => [...new Set([...prevData, ...result])])
+      setCurrentPage(prevPage => prevPage + 1)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  const handleObserver = (entries: IntersectionObserverEntry[]) => {
+    if (entries[0].isIntersecting) {
+      getData(currentPage)
+    }
+  }
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 1.0,
+    }
+
+    const observer = new IntersectionObserver(handleObserver, options)
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current)
+    }
+
+    return () => {
+      if (observerTarget.current) {
+        observer.unobserve(observerTarget.current)
+      }
+    }
+  }, [currentPage])
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {data.map(({ id, title, body }) => (
+        <div
+          style={{
+            padding: '30px 20px',
+            border: '1px solid red',
+            maxWidth: '50%',
+          }}
+          key={id}
+        >
+          <b>
+            {id} - {title}
+          </b>
+          <p>{body}</p>
+        </div>
+      ))}
+      <div ref={observerTarget}>
+        <Loader />
+      </div>
+    </div>
+  )
+}