feat: Add Infinite scroll to all tag screens & refactor code for bett…

…er readability (GSoC) (#2387) * add people to tag functaionality * minor change * more translations * minor change * add a variable for page size * add tag actions * add tests * translations * change to infinite scroll * add subtags infinite scroll * extract common variables to utils * minor correction * more design adjustments * add tests * add scrollbar for infinite scroll * extract infinite scroll loader * minor adjustment * refactoring * exclude ManageTag from countline check * fix linting * fix linting * fix linting * make coderabbit suggested changes * more changes * more changes * minor correction * add error component for tagNode subtags query * fix translation * fix translation * remove unused css classes * refactor ManageTag file to reduce its size * update pull-request check * minor adjustments * minor correction * minor change * correction * minor changes * minor change * coderabbitai changes * more changes * fix dataGrid classes
PalisadoesFoundation · Nov 1, 2024 · e9775ce · e9775ce
1 parent ed2a945
commit e9775ce
Show file tree

Hide file tree

Showing 33 changed files with 1,541 additions and 1,891 deletions.
diff --git a/.github/workflows/pull-request.yml b/.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

diff --git a/src/App.tsx b/src/App.tsx
@@ -148,10 +148,10 @@ function app(): JSX.Element {
             <Route path="/orgpeople/:orgId" element={<OrganizationPeople />} />
             <Route path="/orgtags/:orgId" element={<OrganizationTags />} />
             <Route
-              path="orgtags/:orgId/managetag/:tagId"
+              path="orgtags/:orgId/manageTag/:tagId"
               element={<ManageTag />}
             />
-            <Route path="orgtags/:orgId/subtags/:tagId" element={<SubTags />} />
+            <Route path="orgtags/:orgId/subTags/:tagId" element={<SubTags />} />
             <Route path="/member/:orgId" element={<MemberDetail />} />
             <Route path="/orgevents/:orgId" element={<OrganizationEvents />} />
             <Route

diff --git a/src/GraphQl/Queries/userTagQueries.ts b/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

diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/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);
-  }
-}
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.test.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.test.tsx
@@ -22,6 +22,7 @@ import type { InterfaceAddPeopleToTagProps } from './AddPeopleToTag';
 import AddPeopleToTag from './AddPeopleToTag';
 import i18n from 'utils/i18nForTest';
 import { MOCKS, MOCKS_ERROR } from './AddPeopleToTagsMocks';
+import type { TFunction } from 'i18next';
 
 const link = new StaticMockLink(MOCKS, true);
 const link2 = new StaticMockLink(MOCKS_ERROR, true);
@@ -52,8 +53,14 @@ const props: InterfaceAddPeopleToTagProps = {
   addPeopleToTagModalIsOpen: true,
   hideAddPeopleToTagModal: () => {},
   refetchAssignedMembersData: () => {},
-  t: (key: string) => translations[key],
-  tCommon: (key: string) => translations[key],
+  t: ((key: string) => translations[key]) as TFunction<
+    'translation',
+    'manageTag'
+  >,
+  tCommon: ((key: string) => translations[key]) as TFunction<
+    'common',
+    undefined
+  >,
 };
 
 const renderAddPeopleToTagModal = (
@@ -67,7 +74,7 @@ const renderAddPeopleToTagModal = (
           <I18nextProvider i18n={i18n}>
             <Routes>
               <Route
-                path="/orgtags/:orgId/managetag/:tagId"
+                path="/orgtags/:orgId/manageTag/:tagId"
                 element={<AddPeopleToTag {...props} />}
               />
             </Routes>

diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/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,8 @@ 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';
+import type { TFunction } from 'i18next';
 
 /**
  * Props for the `AddPeopleToTag` component.
@@ -28,8 +30,8 @@ export interface InterfaceAddPeopleToTagProps {
   addPeopleToTagModalIsOpen: boolean;
   hideAddPeopleToTagModal: () => void;
   refetchAssignedMembersData: () => void;
-  t: (key: string) => string;
-  tCommon: (key: string) => string;
+  t: TFunction<'translation', 'manageTag'>;
+  tCommon: TFunction<'common', undefined>;
 }
 
 interface InterfaceMemberData {
@@ -58,64 +60,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,9 +111,9 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
   };
 
   const userTagMembersToAssignTo =
-    userTagsMembersToAssignToData?.getUserTag.usersToAssignTo.edges.map(
+    userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map(
       (edge) => edge.node,
-    );
+    ) ?? /* istanbul ignore next */ [];
 
   const handleAddOrRemoveMember = (member: InterfaceMemberData): void => {
     setAssignToMembers((prevMembers) => {
@@ -168,8 +154,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,29 +284,26 @@ 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
                       disableColumnMenu
                       columnBufferPx={7}
                       hideFooter={true}
-                      getRowId={(row) => row._id}
+                      getRowId={(row) => row.id}
                       slots={{
                         noRowsOverlay: /* istanbul ignore next */ () => (
                           <Stack
@@ -333,7 +315,15 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                           </Stack>
                         ),
                       }}
-                      sx={dataGridStyle}
+                      sx={{
+                        ...dataGridStyle,
+                        '& .MuiDataGrid-topContainer': {
+                          position: 'static',
+                        },
+                        '& .MuiDataGrid-virtualScrollerContent': {
+                          marginTop: '0',
+                        },
+                      }}
                       getRowClassName={() => `${styles.rowBackground}`}
                       autoHeight
                       rowHeight={65}