From e31655a96edd50cdb51512430b0bda23579a2ab3 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:56:03 -0300
Subject: [PATCH] feat: infinite scroll block list

---
 .../user-friend-modal-list.tsx                |  3 +-
 .../user-block-list.tsx                       | 85 ++++++++++++++-----
 2 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
index b649c45f..b760351c 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
@@ -34,7 +34,6 @@ export const UserFriendModalList = ({
   const loadNextPage = () => {
     if (page > maxPage) return;
     setIsLoading(true);
-    console.log("loading next page");
     window.electron
       .getUserFriends(userId, pageSize, page * pageSize)
       .then((newPage) => {
@@ -106,7 +105,7 @@ export const UserFriendModalList = ({
           overflowY: "scroll",
         }}
       >
-        {friends.length === 0 && <p>{t("no_friends_added")}</p>}
+        {!isLoading && friends.length === 0 && <p>{t("no_friends_added")}</p>}
         {friends.map((friend) => {
           return (
             <UserFriendItem
diff --git a/src/renderer/src/pages/user/user-profile-settings-modal/user-block-list.tsx b/src/renderer/src/pages/user/user-profile-settings-modal/user-block-list.tsx
index 0029fc9e..c062eabb 100644
--- a/src/renderer/src/pages/user/user-profile-settings-modal/user-block-list.tsx
+++ b/src/renderer/src/pages/user/user-profile-settings-modal/user-block-list.tsx
@@ -1,9 +1,10 @@
-import { SPACING_UNIT } from "@renderer/theme.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { UserFriend } from "@types";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import { UserFriendItem } from "@renderer/pages/shared-modals/user-friend-modal/user-friend-item";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 
 const pageSize = 12;
 
@@ -12,13 +13,16 @@ export const UserEditProfileBlockList = () => {
   const { showErrorToast } = useToast();
 
   const [page, setPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
   const [maxPage, setMaxPage] = useState(0);
   const [blocks, setBlocks] = useState<UserFriend[]>([]);
+  const listContainer = useRef<HTMLDivElement>(null);
 
   const { unblockUser } = useUserDetails();
 
   const loadNextPage = () => {
     if (page > maxPage) return;
+    setIsLoading(true);
     window.electron
       .getUserBlocks(pageSize, page * pageSize)
       .then((newPage) => {
@@ -29,9 +33,29 @@ export const UserEditProfileBlockList = () => {
         setBlocks([...blocks, ...newPage.blocks]);
         setPage(page + 1);
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
   };
 
+  const handleScroll = () => {
+    const scrollTop = listContainer.current?.scrollTop || 0;
+    const scrollHeight = listContainer.current?.scrollHeight || 0;
+    const clientHeight = listContainer.current?.clientHeight || 0;
+    const maxScrollTop = scrollHeight - clientHeight;
+
+    if (scrollTop < maxScrollTop * 0.9 || isLoading) {
+      return;
+    }
+
+    loadNextPage();
+  };
+
+  useEffect(() => {
+    listContainer.current?.addEventListener("scroll", handleScroll);
+    return () =>
+      listContainer.current?.removeEventListener("scroll", handleScroll);
+  }, [isLoading]);
+
   const reloadList = () => {
     setPage(0);
     setMaxPage(0);
@@ -54,26 +78,41 @@ export const UserEditProfileBlockList = () => {
   };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: `${SPACING_UNIT * 2}px`,
-      }}
-    >
-      {blocks.length === 0 && <p>{t("no_blocked_users")}</p>}
-      {blocks.map((friend) => {
-        return (
-          <UserFriendItem
-            userId={friend.id}
-            displayName={friend.displayName}
-            profileImageUrl={friend.profileImageUrl}
-            onClickUnblock={handleUnblock}
-            type={"BLOCKED"}
-            key={friend.id}
+    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+      <div
+        ref={listContainer}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: `${SPACING_UNIT * 2}px`,
+          maxHeight: "400px",
+          overflowY: "scroll",
+        }}
+      >
+        {!isLoading && blocks.length === 0 && <p>{t("no_blocked_users")}</p>}
+        {blocks.map((friend) => {
+          return (
+            <UserFriendItem
+              userId={friend.id}
+              displayName={friend.displayName}
+              profileImageUrl={friend.profileImageUrl}
+              onClickUnblock={handleUnblock}
+              type={"BLOCKED"}
+              key={friend.id}
+            />
+          );
+        })}
+        {isLoading && (
+          <Skeleton
+            style={{
+              width: "100%",
+              height: "54px",
+              overflow: "hidden",
+              borderRadius: "4px",
+            }}
           />
-        );
-      })}
-    </div>
+        )}
+      </div>
+    </SkeletonTheme>
   );
 };