Merge branch 'dev-clean-up-fal' into uat

InfiniteScroll_example.js

@@ -0,0 +1,67 @@
+import "./App.css";
+
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useEffect, useState } from "react";
+import Comment from "./components/Comment";
+import Loader from "./components/Loader";
+import EndMsg from "./components/EndMsg";
+
+function App() {
+  const [items, setItems] = useState([]);  // done in our code
+
+  const [hasMore, sethasMore] = useState(true); // added in our code
+
+  const [page, setpage] = useState(2); // added in our code
+
+  // get the first round of data AND set the state of items to the data
+  useEffect(() => {
+    const getComments = async () => {
+      const res = await fetch(
+        `https://jsonplaceholder.typicode.com/comments?_page=1&_limit=20`
+      );
+      const data = await res.json();
+      setItems(data);
+    };
+
+    getComments();
+  }, []);
+
+  const fetchComments = async () => {
+    const res = await fetch(
+      `https://jsonplaceholder.typicode.com/comments?_page=${page}&_limit=20`
+    );
+    const data = await res.json();
+    return data;
+  };
+
+
+  const fetchData = async () => {
+    const commentsFormServer = await fetchComments();
+
+    setItems([...items, ...commentsFormServer]);
+    if (commentsFormServer.length === 0 || commentsFormServer.length < 20) {
+      sethasMore(false);
+    }
+    setpage(page + 1);
+  };
+
+  return (
+    <InfiniteScroll
+      dataLength={items.length} //This is important field to render the next data
+      next={fetchData}
+      hasMore={hasMore}
+      loader={<Loader />}
+      endMessage={<EndMsg />}
+    >
+      <div className="container">
+        <div className="row m-2">
+          {items.map((item) => {
+            return <Comment key={item.id} item={item} />;
+          })}
+        </div>
+      </div>
+    </InfiniteScroll>
+  );
+}
+
+export default App;