feat: infinite scroll to load more threads

apps/forum/package.json

@@ -68,6 +68,7 @@
     "react-ga": "3.3.0",
     "react-helmet": "6.1.0",
     "react-i18next": "11.15.6",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-responsive": "9.0.0-beta.10",
     "react-router-dom": "^6.11.2",
     "recoil": "^0.7.7",

apps/forum/src/components/App.tsx

@@ -17,25 +17,29 @@ const App = () => {
   return (
     <div className="flex flex-col h-screen">
       <BrowserRouter>
-        <div className="flex-shrink-0 h-16">
-          <div className="basis-[67px]">
-            <HeaderWithModal
-              modal={SearchTags}
-              title={t("navigation.forum")}
-              onInputChange={() => {}}
-              placeholder={t("search placeholder")}
-              inputText=""
-              isBlur={false}
-              theme={theme}
-              setTheme={setTheme}
-              changeLang={(lng: string | undefined) => i18n.changeLanguage(lng)}
-            />
-          </div>
+        <div className="flex h-[67px] shrink-0 grow-0">
+          <HeaderWithModal
+            modal={SearchTags}
+            title={t("navigation.forum")}
+            onInputChange={() => {}}
+            placeholder={t("search placeholder")}
+            inputText=""
+            isBlur={false}
+            theme={theme}
+            setTheme={setTheme}
+            changeLang={(lng: string | undefined) => i18n.changeLanguage(lng)}
+          />
         </div>
-        <div className="basis-[calc(100vh-67px)] flex flex-col mt-[23px]">
-          <div className="flex-grow flex flex-row">
-            <div className="flex flex-col sm:ml-5 lg:ml-10 w-1/5 ">
-              {/* FilterMenu and BoardMenu stacked vertically */}
+        <div className="flex flex-col h-[calc(100vh-67px)]">
+          {/* <div className="basis-[60px] lg:basis-[20%] bg-zinc-100 dark:bg-zinc-700 dark:text-dark-text1">
+            <BoardMenu />
+          </div> */}
+          <div className="justify-between">
+            <BoardMenu />
+          </div>
+          {/* <div className="basis-[calc(100vh-187px)] lg:basis-[80%] dark:text-dark-text1"> */}
+          <div className="flex justify-between pl-2 gap-4 h-[calc(100vh-143px)]">
+            <div className="flex flex-row w-full">
               <FilterMenu />
               <BoardMenu />
             </div>

apps/forum/src/components/Board.tsx

@@ -9,6 +9,10 @@ import { currentGroupsState, currentTagsState } from "@app/recoil/atoms";
 import { filterThreadsByTags, filterThreadsByGroups } from "@app/utils/filter";
 import { API } from "@aws-amplify/api";
 import Thread from "@app/types/thread";
+import { getUserAttr } from "wasedatime-ui";
+import InfiniteScroll from "react-infinite-scroll-component";
+
+const threadCountPerPage = 3; // 10
 
 const Board = () => {
   const { boardSlug } = useParams();
@@ -20,63 +24,102 @@ const Board = () => {
     boards.find((board) => board.slug === boardSlug)?.slug || "academic"
   );
 
-  const [boardThreads, setBoardThreads] = useState([]);
+  const [boardThreads, setBoardThreads] = useState<Thread[]>([]);
   const [filteredThreads, setFilteredThreads] = useState<Thread[]>([]);
+  const [userToken, setUserToken] = useState("");
+  const [page, setPage] = useState(1);
 
   const boardStorage = localForage.createInstance({
     name: "BoardData",
   });
 
-  const uid = "uid";
-
   // fetching the board data
   useEffect(() => {
     var currentBoardId =
       boards.find((board) => board.slug === boardSlug)?.slug || "academic";
     setBoardId(currentBoardId);
+    getThreads(currentBoardId);
+  }, [boardSlug]);
+
+  const getThreads = async (boardId: string) => {
+    let userId = userToken;
+    if (userId.length == 0) {
+      const userAttr = await getUserAttr();
+      if (userAttr) {
+        userId = userAttr.id;
+        setUserToken(userId);
+      }
+    }
+
+    API.get("wasedatime-dev", `/forum/${boardId}?uid=${userId}`, {
 
-    API.get("wasedatime-dev", `/forum/${currentBoardId}?uid=${uid}`, {
       headers: {
         "Content-Type": "application/json",
       },
       response: true,
     })
       .then((res) => {
-        console.log(res.data.data);
         var threads = res.data.data.filter(
-          (thread: Thread) => thread.board_id === currentBoardId
+          (thread: Thread) => thread.board_id === boardId
         );
-
-        threads = filterThreadsByTags(threads, currentTags);
-        threads = filterThreadsByGroups(threads, currentGroups);
-        setFilteredThreads(threads);
         setBoardThreads(threads);
 
-        boardStorage.setItem(currentBoardId, threads);
+        var filteredThreads = filterThreadsByTags(threads, currentTags);
+        filteredThreads = filterThreadsByGroups(filteredThreads, currentGroups);
+        if (filteredThreads.length > threadCountPerPage * page) filteredThreads = filteredThreads.slice(0, threadCountPerPage * page);
+        setFilteredThreads(filteredThreads);
+
+        boardStorage.setItem(boardId, threads);
       })
       .catch((e) => {
         console.error(e);
       });
-  }, [boardSlug]);
+  };
 
-  // when currentTags change, filter the threads
+  // when currentTags or currentGroups change, filter the threads
   useEffect(() => {
-    var threads = filterThreadsByTags(boardThreads, currentTags);
-    setFilteredThreads(threads);
-  }, [currentTags, boardThreads]);
+    var filteredThreads = filterThreadsByTags(boardThreads, currentTags);
+    filteredThreads = filterThreadsByGroups(filteredThreads, currentGroups);
+    if (filteredThreads.length > threadCountPerPage * page) filteredThreads = filteredThreads.slice(0, threadCountPerPage * page);
+    if (filteredThreads.length > threadCountPerPage * page) filteredThreads = filteredThreads.slice(0, threadCountPerPage * page);
+    setFilteredThreads(filteredThreads);
+  }, [currentTags, currentGroups]);
 
-  // when currentGroups change, filter the threads
-  useEffect(() => {
-    var threads = filterThreadsByGroups(boardThreads, currentGroups);
-    setFilteredThreads(threads);
-  }, [currentGroups, boardThreads]);
+  const displayMoreThread = () => {
+    setTimeout(() => {
+      if (boardThreads.length < threadCountPerPage * page) return;
+      const nextPage = page + 1;
+      setPage(nextPage);
+      var threads = filterThreadsByTags(boardThreads, currentTags);
+      threads = filterThreadsByGroups(threads, currentGroups);
+      threads = threads.slice(0, threadCountPerPage * nextPage);
+      setFilteredThreads(threads);
+    }, 1000);
+
+  }
 
   return (
     <div className="max-w-2/5 w-5/6 mx-auto h-full">
       <CreateThread />
-      {filteredThreads.map((thread, i) => (
-        <ThreadBlock key={i} isPreview={true} thread={thread} />
-      ))}
+      <div className="overflow-auto h-[calc(100%-44px)]" id="scrollableDiv">
+        <InfiniteScroll
+            dataLength={filteredThreads.length}
+            next={displayMoreThread}
+            hasMore={true}
+            scrollableTarget="scrollableDiv"
+            loader={<h4>Loading...</h4>}
+            style={{ overflowY: "hidden" }}
+          >
+            {/* {this.state.items.map((i, index) => (
+              <div style={style} key={index}>
+                div - #{index}
+              </div>
+            ))} */}
+            {filteredThreads.map((thread, i) => (
+              <ThreadBlock key={i} isPreview={true} thread={thread} />
+            ))}
+          </InfiniteScroll>
+      </div>
     </div>
   );
 };

apps/forum/src/components/Thread.tsx

@@ -20,7 +20,6 @@ const Thread = () => {
         console.log("could not find user Id");
       } else {
         let userId = userAttr.id;
-        console.log(userId);
         setUserToken(userId);
         fetchData(userId);
       }