feat: Add Infinite scroll to all tag screens & refactor code for better readability (GSoC)

.github/workflows/pull-request.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Count number of lines
         run: |
           chmod +x ./.github/workflows/countline.py
-          ./.github/workflows/countline.py --lines 600 --exclude_files src/screens/LoginPage/LoginPage.tsx src/GraphQl/Queries/Queries.ts src/screens/OrgList/OrgList.tsx src/GraphQl/Mutations/mutations.ts src/components/EventListCard/EventListCardModals.tsx src/screens/ManageTag/ManageTag.tsx
+          ./.github/workflows/countline.py --lines 600 --exclude_files src/screens/LoginPage/LoginPage.tsx src/GraphQl/Queries/Queries.ts src/screens/OrgList/OrgList.tsx src/GraphQl/Mutations/mutations.ts src/components/EventListCard/EventListCardModals.tsx
 
       - name: Get changed TypeScript files
         id: changed-files

src/GraphQl/Queries/userTagQueries.ts

@@ -15,7 +15,7 @@ export const USER_TAGS_ASSIGNED_MEMBERS = gql`
     $first: PositiveInt
     $last: PositiveInt
   ) {
-    getUserTag(id: $id) {
+    getAssignedUsers: getUserTag(id: $id) {
       name
       usersAssignedTo(
         after: $after
@@ -57,7 +57,7 @@ export const USER_TAG_SUB_TAGS = gql`
     $first: PositiveInt
     $last: PositiveInt
   ) {
-    getUserTag(id: $id) {
+    getChildTags: getUserTag(id: $id) {
       name
       childTags(after: $after, before: $before, first: $first, last: $last) {
         edges {
@@ -99,7 +99,7 @@ export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
     $first: PositiveInt
     $last: PositiveInt
   ) {
-    getUserTag(id: $id) {
+    getUsersToAssignTo: getUserTag(id: $id) {
       name
       usersToAssignTo(
         after: $after

src/components/AddPeopleToTag/AddPeopleToTag.module.css

@@ -28,7 +28,7 @@
 }
 
 .scrollContainer {
-  max-height: 100px; /* Adjust as needed */
+  max-height: 100px;
   overflow-y: auto;
   margin-bottom: 1rem;
 }
@@ -38,40 +38,10 @@
   align-items: center;
   padding: 5px 10px;
   border-radius: 12px;
-  background-color: #f8f9fa; /* Light background */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  max-width: calc(100% - 30px); /* Ensure it fits within the container */
+  box-shadow: 0 1px 3px var(--bs-gray-400);
+  max-width: calc(100% - 2rem);
 }
 
 .removeFilterIcon {
   cursor: pointer;
 }
-
-.scrollContainer {
-  max-height: 350px; /* Set your desired max height */
-  overflow-y: auto; /* Enable vertical scrolling */
-}
-
-/* SimpleLoader.css */
-.simple-loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #3498db;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

src/components/AddPeopleToTag/AddPeopleToTag.tsx

@@ -1,4 +1,3 @@
-import type { ApolloError } from '@apollo/client';
 import { useMutation, useQuery } from '@apollo/client';
 import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
 import { DataGrid } from '@mui/x-data-grid';
@@ -10,8 +9,9 @@ import { Modal, Form, Button } from 'react-bootstrap';
 import { useParams } from 'react-router-dom';
 import type { InterfaceQueryUserTagsMembersToAssignTo } from 'utils/interfaces';
 import styles from './AddPeopleToTag.module.css';
+import type { InterfaceTagUsersToAssignToQuery } from 'utils/organizationTagsUtils';
 import {
-  ADD_PEOPLE_TO_TAGS_QUERY_LIMIT,
+  TAGS_QUERY_DATA_CHUNK_SIZE,
   dataGridStyle,
 } from 'utils/organizationTagsUtils';
 import { Stack } from '@mui/material';
@@ -20,6 +20,7 @@ import { ADD_PEOPLE_TO_TAG } from 'GraphQl/Mutations/TagMutations';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { WarningAmberRounded } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 /**
  * Props for the `AddPeopleToTag` component.
@@ -58,64 +59,48 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
     loading: userTagsMembersToAssignToLoading,
     error: userTagsMembersToAssignToError,
     fetchMore: fetchMoreMembersToAssignTo,
-  }: {
-    data?: {
-      getUserTag: InterfaceQueryUserTagsMembersToAssignTo;
-    };
-    loading: boolean;
-    error?: ApolloError;
-    fetchMore: (options: {
+  }: InterfaceTagUsersToAssignToQuery = useQuery(
+    USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+    {
       variables: {
-        after?: string | null;
-        first?: number | null;
-      };
-      updateQuery?: (
-        previousQueryResult: {
-          getUserTag: InterfaceQueryUserTagsMembersToAssignTo;
-        },
-        options: {
-          fetchMoreResult: {
-            getUserTag: InterfaceQueryUserTagsMembersToAssignTo;
-          };
-        },
-      ) => { getUserTag: InterfaceQueryUserTagsMembersToAssignTo };
-    }) => Promise<unknown>;
-  } = useQuery(USER_TAGS_MEMBERS_TO_ASSIGN_TO, {
-    variables: {
-      id: currentTagId,
-      first: ADD_PEOPLE_TO_TAGS_QUERY_LIMIT,
+        id: currentTagId,
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+      skip: !addPeopleToTagModalIsOpen,
+      fetchPolicy: 'no-cache',
     },
-    skip: !addPeopleToTagModalIsOpen,
-  });
+  );
 
   const loadMoreMembersToAssignTo = (): void => {
     fetchMoreMembersToAssignTo({
       variables: {
-        first: ADD_PEOPLE_TO_TAGS_QUERY_LIMIT,
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
         after:
-          userTagsMembersToAssignToData?.getUserTag.usersToAssignTo.pageInfo
-            .endCursor, // Fetch after the last loaded cursor
+          userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo
+            .pageInfo.endCursor, // Fetch after the last loaded cursor
       },
       updateQuery: (
-        prevResult: { getUserTag: InterfaceQueryUserTagsMembersToAssignTo },
+        prevResult: {
+          getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
+        },
         {
           fetchMoreResult,
         }: {
           fetchMoreResult: {
-            getUserTag: InterfaceQueryUserTagsMembersToAssignTo;
+            getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
           };
         },
       ) => {
         if (!fetchMoreResult) return prevResult;
 
         return {
-          getUserTag: {
-            ...fetchMoreResult.getUserTag,
+          getUsersToAssignTo: {
+            ...fetchMoreResult.getUsersToAssignTo,
             usersToAssignTo: {
-              ...fetchMoreResult.getUserTag.usersToAssignTo,
+              ...fetchMoreResult.getUsersToAssignTo.usersToAssignTo,
               edges: [
-                ...prevResult.getUserTag.usersToAssignTo.edges,
-                ...fetchMoreResult.getUserTag.usersToAssignTo.edges,
+                ...prevResult.getUsersToAssignTo.usersToAssignTo.edges,
+                ...fetchMoreResult.getUsersToAssignTo.usersToAssignTo.edges,
               ],
             },
           },
@@ -125,7 +110,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
   };
 
   const userTagMembersToAssignTo =
-    userTagsMembersToAssignToData?.getUserTag.usersToAssignTo.edges.map(
+    userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map(
       (edge) => edge.node,
     );
 
@@ -168,8 +153,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
         hideAddPeopleToTagModal();
         setAssignToMembers([]);
       }
-    } catch (error: unknown) {
-      /* istanbul ignore next */
+    } catch (error: unknown) /* istanbul ignore next */ {
       const errorMessage =
         error instanceof Error ? error.message : tErrors('unknownError');
       toast.error(errorMessage);
@@ -299,22 +283,19 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                   id="scrollableDiv"
                   data-testid="scrollableDiv"
                   style={{
-                    height: 300,
+                    maxHeight: 300,
                     overflow: 'auto',
                   }}
                 >
                   <InfiniteScroll
                     dataLength={userTagMembersToAssignTo?.length ?? 0} // This is important field to render the next data
                     next={loadMoreMembersToAssignTo}
                     hasMore={
-                      userTagsMembersToAssignToData?.getUserTag.usersToAssignTo
-                        .pageInfo.hasNextPage ?? false
-                    }
-                    loader={
-                      <div className="simpleLoader">
-                        <div className="spinner" />
-                      </div>
+                      userTagsMembersToAssignToData?.getUsersToAssignTo
+                        .usersToAssignTo.pageInfo.hasNextPage ??
+                      /* istanbul ignore next */ false
                     }
+                    loader={<InfiniteScrollLoader />}
                     scrollableTarget="scrollableDiv"
                   >
                     <DataGrid

src/components/AddPeopleToTag/AddPeopleToTagsMocks.ts

@@ -1,18 +1,19 @@
 import { ADD_PEOPLE_TO_TAG } from 'GraphQl/Mutations/TagMutations';
 import { USER_TAGS_MEMBERS_TO_ASSIGN_TO } from 'GraphQl/Queries/userTagQueries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
 
 export const MOCKS = [
   {
     request: {
       query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
       variables: {
         id: '1',
-        first: 7,
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
       },
     },
     result: {
       data: {
-        getUserTag: {
+        getUsersToAssignTo: {
           name: 'tag1',
           usersToAssignTo: {
             edges: [
@@ -72,14 +73,38 @@ export const MOCKS = [
                 },
                 cursor: '7',
               },
+              {
+                node: {
+                  _id: '8',
+                  firstName: 'member',
+                  lastName: '8',
+                },
+                cursor: '8',
+              },
+              {
+                node: {
+                  _id: '9',
+                  firstName: 'member',
+                  lastName: '9',
+                },
+                cursor: '9',
+              },
+              {
+                node: {
+                  _id: '10',
+                  firstName: 'member',
+                  lastName: '10',
+                },
+                cursor: '10',
+              },
             ],
             pageInfo: {
               startCursor: '1',
-              endCursor: '7',
+              endCursor: '10',
               hasNextPage: true,
               hasPreviousPage: false,
             },
-            totalCount: 10,
+            totalCount: 12,
           },
         },
       },
@@ -90,48 +115,40 @@ export const MOCKS = [
       query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
       variables: {
         id: '1',
-        first: 7,
-        after: '7',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: '10',
       },
     },
     result: {
       data: {
-        getUserTag: {
+        getUsersToAssignTo: {
           name: 'tag1',
           usersToAssignTo: {
             edges: [
               {
                 node: {
-                  _id: '8',
-                  firstName: 'member',
-                  lastName: '8',
-                },
-                cursor: '8',
-              },
-              {
-                node: {
-                  _id: '9',
+                  _id: '11',
                   firstName: 'member',
-                  lastName: '9',
+                  lastName: '11',
                 },
-                cursor: '9',
+                cursor: '11',
               },
               {
                 node: {
-                  _id: '10',
+                  _id: '12',
                   firstName: 'member',
-                  lastName: '10',
+                  lastName: '12',
                 },
-                cursor: '10',
+                cursor: '12',
               },
             ],
             pageInfo: {
-              startCursor: '8',
-              endCursor: '10',
+              startCursor: '11',
+              endCursor: '12',
               hasNextPage: false,
               hasPreviousPage: true,
             },
-            totalCount: 10,
+            totalCount: 12,
           },
         },
       },
@@ -161,7 +178,7 @@ export const MOCKS_ERROR = [
       query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
       variables: {
         id: '1',
-        first: 7,
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
       },
     },
     error: new Error('Mock Graphql Error'),