4488 connect calendar tab to backend (#4624)

* create states and hooks * implement fetch more records * add empty state * update types * fix error * add fetchmoreloader and add scroll to container * fix visibility in calendarEventFragment * fix fetchMoreRecords * update TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE * add test * modify empty state subtitle * replace entity by activityTargetableObject * create useCustomResolver hook * refactor * refactoring * use generic component * rename FetchMoreLoader * remove deprecated states and hooks * fix typing * update typing * update error message * renaming * improve typing * fix bug on contact creation from same company
2024-03-26 14:50:32 +01:00
parent 5c5dcf5cb5
commit fefa37b300
20 changed files with 263 additions and 222 deletions
--- a/packages/twenty-front/src/modules/activities/hooks/useCustomResolver.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useCustomResolver.ts
@ -0,0 +1,121 @@
+import { useState } from 'react';
+import {
+  DocumentNode,
+  OperationVariables,
+  TypedDocumentNode,
+  useQuery,
+} from '@apollo/client';
+
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+
+type CustomResolverQueryResult<
+  T extends {
+    [key: string]: any;
+  },
+> = {
+  [queryName: string]: T;
+};
+
+export const useCustomResolver = <
+  T extends {
+    [key: string]: any;
+  },
+>(
+  query:
+    | DocumentNode
+    | TypedDocumentNode<CustomResolverQueryResult<T>, OperationVariables>,
+  queryName: string,
+  objectName: string,
+  activityTargetableObject: ActivityTargetableObject,
+  pageSize: number,
+): {
+  data: CustomResolverQueryResult<T> | undefined;
+  firstQueryLoading: boolean;
+  isFetchingMore: boolean;
+  fetchMoreRecords: () => Promise<void>;
+} => {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const [page, setPage] = useState({
+    pageNumber: 1,
+    hasNextPage: true,
+  });
+
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
+
+  const queryVariables = {
+    ...(activityTargetableObject.targetObjectNameSingular ===
+    CoreObjectNameSingular.Person
+      ? { personId: activityTargetableObject.id }
+      : { companyId: activityTargetableObject.id }),
+    page: 1,
+    pageSize,
+  };
+
+  const {
+    data,
+    loading: firstQueryLoading,
+    fetchMore,
+  } = useQuery<CustomResolverQueryResult<T>>(query, {
+    variables: queryVariables,
+    onError: (error) => {
+      enqueueSnackBar(error.message || `Error loading ${objectName}`, {
+        variant: 'error',
+      });
+    },
+  });
+
+  const fetchMoreRecords = async () => {
+    if (page.hasNextPage && !isFetchingMore && !firstQueryLoading) {
+      setIsFetchingMore(true);
+
+      await fetchMore({
+        variables: {
+          ...queryVariables,
+          page: page.pageNumber + 1,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult?.[queryName]?.[objectName]?.length) {
+            setPage((page) => ({
+              ...page,
+              hasNextPage: false,
+            }));
+
+            return {
+              [queryName]: {
+                ...prev?.[queryName],
+                [objectName]: [...(prev?.[queryName]?.[objectName] ?? [])],
+              },
+            };
+          }
+
+          return {
+            [queryName]: {
+              ...prev?.[queryName],
+              [objectName]: [
+                ...(prev?.[queryName]?.[objectName] ?? []),
+                ...(fetchMoreResult?.[queryName]?.[objectName] ?? []),
+              ],
+            },
+          };
+        },
+      });
+
+      setPage((page) => ({
+        ...page,
+        pageNumber: page.pageNumber + 1,
+      }));
+
+      setIsFetchingMore(false);
+    }
+  };
+
+  return {
+    data,
+    firstQueryLoading,
+    isFetchingMore,
+    fetchMoreRecords,
+  };
+};