infinite scroll bugfix

PalisadoesFoundation · Nov 22, 2024 · 62c409e · 62c409e
1 parent 084ac7e
commit 62c409e
Showing 1 changed file with 55 additions and 57 deletions.
diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx
@@ -227,7 +227,9 @@ const Users = (): JSX.Element => {
   };
 
   const handleSorting = (option: string): void => {
-    setDisplayedUsers([]);
+    if (sortingOption !== option) {
+      setDisplayedUsers([]);
+    }
     setHasMore(true);
     setSortingOption(option);
   };
@@ -256,7 +258,9 @@ const Users = (): JSX.Element => {
   };
 
   const handleFiltering = (option: string): void => {
-    setDisplayedUsers([]);
+    if (filteringOption !== option) {
+      setDisplayedUsers([]);
+    }
     setFilteringOption(option);
   };
 
@@ -414,63 +418,57 @@ const Users = (): JSX.Element => {
         </div>
       ) : (
         <div className={styles.listBox}>
-          {isLoading ? (
-            <TableLoader headerTitles={headerTitles} noOfRows={perPageResult} />
-          ) : (
-            <InfiniteScroll
-              dataLength={
-                /* istanbul ignore next */
-                displayedUsers.length ?? 0
-              }
-              next={loadMoreUsers}
-              loader={
-                <TableLoader
-                  noOfCols={headerTitles.length}
-                  noOfRows={perPageResult}
-                />
-              }
-              hasMore={hasMore}
-              className={styles.listBox}
-              data-testid="users-list"
-              endMessage={
-                <div className={'w-100 text-center my-4'}>
-                  <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
-                </div>
-              }
-            >
-              <Table className="mb-0" responsive>
-                <thead>
-                  <tr>
-                    {headerTitles.map((title: string, index: number) => {
+          <InfiniteScroll
+            dataLength={
+              /* istanbul ignore next */
+              displayedUsers.length ?? 0
+            }
+            next={loadMoreUsers}
+            loader={
+              <TableLoader
+                noOfCols={headerTitles.length}
+                noOfRows={perPageResult}
+              />
+            }
+            hasMore={hasMore}
+            className={styles.listBox}
+            data-testid="users-list"
+            endMessage={
+              <div className={'w-100 text-center my-4'}>
+                <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
+              </div>
+            }
+          >
+            <Table className="mb-0" responsive>
+              <thead>
+                <tr>
+                  {headerTitles.map((title: string, index: number) => {
+                    return (
+                      <th key={index} scope="col">
+                        {title}
+                      </th>
+                    );
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {usersData &&
+                  displayedUsers.map(
+                    (user: InterfaceQueryUserListItem, index: number) => {
                       return (
-                        <th key={index} scope="col">
-                          {title}
-                        </th>
+                        <UsersTableItem
+                          key={user.user._id}
+                          index={index}
+                          resetAndRefetch={resetAndRefetch}
+                          user={user}
+                          loggedInUserId={loggedInUserId ? loggedInUserId : ''}
+                        />
                       );
-                    })}
-                  </tr>
-                </thead>
-                <tbody>
-                  {usersData &&
-                    displayedUsers.map(
-                      (user: InterfaceQueryUserListItem, index: number) => {
-                        return (
-                          <UsersTableItem
-                            key={user.user._id}
-                            index={index}
-                            resetAndRefetch={resetAndRefetch}
-                            user={user}
-                            loggedInUserId={
-                              loggedInUserId ? loggedInUserId : ''
-                            }
-                          />
-                        );
-                      },
-                    )}
-                </tbody>
-              </Table>
-            </InfiniteScroll>
-          )}
+                    },
+                  )}
+              </tbody>
+            </Table>
+          </InfiniteScroll>
         </div>
       )}
     </>