Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests

packages/twenty-front/src/modules/views/hooks/internal/useViewFromQueryParams.ts

@@ -0,0 +1,174 @@
+import { useMemo } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { useApolloClient } from '@apollo/client';
+import { isNonEmptyString } from '@sniptt/guards';
+import qs from 'qs';
+import { useRecoilCallback } from 'recoil';
+import z from 'zod';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
+import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
+import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
+import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
+import { useGenerateFindManyRecordsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsQuery';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { ViewFilter } from '@/views/types/ViewFilter';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { isDefined } from '~/utils/isDefined';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+
+const filterQueryParamsSchema = z.object({
+  view: z.string().optional(),
+  filter: z
+    .record(
+      z.record(
+        z.nativeEnum(ViewFilterOperand),
+        z.string().or(z.array(z.string())),
+      ),
+    )
+    .optional(),
+});
+
+export type FilterQueryParams = z.infer<typeof filterQueryParamsSchema>;
+
+export const useViewFromQueryParams = () => {
+  const apolloClient = useApolloClient();
+  const [searchParams] = useSearchParams();
+  const { objectNamePlural = '' } = useParams();
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural,
+  });
+  const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular });
+  const generateFindManyRecordsQuery = useGenerateFindManyRecordsQuery();
+
+  const queryParamsValidation = filterQueryParamsSchema.safeParse(
+    qs.parse(searchParams.toString()),
+  );
+
+  const filterQueryParams = useMemo(
+    () =>
+      queryParamsValidation.success ? queryParamsValidation.data.filter : {},
+    [queryParamsValidation],
+  );
+  const viewIdQueryParam = useMemo(
+    () => queryParamsValidation.success && queryParamsValidation.data.view,
+    [queryParamsValidation],
+  );
+
+  const hasFiltersQueryParams = filterQueryParams;
+
+  const getFiltersFromQueryParams = useRecoilCallback(
+    ({ snapshot }) =>
+      async () => {
+        if (!hasFiltersQueryParams) return [];
+
+        return (
+          await Promise.all(
+            Object.entries(filterQueryParams).map<Promise<ViewFilter | null>>(
+              async ([fieldName, filterFromURL]) => {
+                const [filterOperandFromURL, filterValueFromURL] =
+                  Object.entries(filterFromURL)[0];
+                const fieldMetadataItem = objectMetadataItem.fields.find(
+                  (field) => field.name === fieldName,
+                );
+
+                if (!fieldMetadataItem) return null;
+
+                const filterDefinition =
+                  formatFieldMetadataItemAsFilterDefinition({
+                    field: fieldMetadataItem,
+                  });
+
+                if (isUndefinedOrNull(filterDefinition)) return null;
+
+                const relationObjectMetadataNameSingular =
+                  fieldMetadataItem.toRelationMetadata?.fromObjectMetadata
+                    .nameSingular;
+
+                const relationObjectMetadataNamePlural =
+                  fieldMetadataItem.toRelationMetadata?.fromObjectMetadata
+                    .namePlural;
+
+                const relationObjectMetadataItem =
+                  relationObjectMetadataNameSingular
+                    ? snapshot
+                        .getLoadable(
+                          objectMetadataItemFamilySelector({
+                            objectName: relationObjectMetadataNameSingular,
+                            objectNameType: 'singular',
+                          }),
+                        )
+                        .getValue()
+                    : null;
+
+                const relationRecordNames = [];
+
+                if (
+                  isNonEmptyString(relationObjectMetadataNamePlural) &&
+                  isDefined(relationObjectMetadataItem) &&
+                  Array.isArray(filterValueFromURL)
+                ) {
+                  const queryResult = await apolloClient.query<
+                    Record<string, { edges: { node: ObjectRecord }[] }>
+                  >({
+                    query: generateFindManyRecordsQuery({
+                      objectMetadataItem: relationObjectMetadataItem,
+                    }),
+                    variables: {
+                      filter: { id: { in: filterValueFromURL } },
+                    },
+                  });
+
+                  const relationRecordNamesFromQuery = queryResult.data?.[
+                    relationObjectMetadataNamePlural
+                  ]?.edges.map(
+                    ({ node: record }) =>
+                      getObjectRecordIdentifier({
+                        objectMetadataItem: relationObjectMetadataItem,
+                        record,
+                      }).name,
+                  );
+
+                  relationRecordNames.push(...relationRecordNamesFromQuery);
+                }
+
+                const filterValueAsString = Array.isArray(filterValueFromURL)
+                  ? JSON.stringify(filterValueFromURL)
+                  : filterValueFromURL;
+
+                return {
+                  __typename: 'ViewFilter',
+                  id: `tmp-${[
+                    fieldName,
+                    filterOperandFromURL,
+                    filterValueFromURL,
+                  ].join('-')}`,
+                  fieldMetadataId: fieldMetadataItem.id,
+                  operand: filterOperandFromURL as ViewFilterOperand,
+                  value: filterValueAsString,
+                  displayValue:
+                    relationRecordNames?.join(', ') ?? filterValueAsString,
+                  definition: filterDefinition,
+                  persistAction: 'NONE',
+                };
+              },
+            ),
+          )
+        ).filter(isDefined);
+      },
+    [
+      apolloClient,
+      filterQueryParams,
+      generateFindManyRecordsQuery,
+      hasFiltersQueryParams,
+      objectMetadataItem.fields,
+    ],
+  );
+
+  return {
+    viewIdQueryParam,
+    hasFiltersQueryParams,
+    getFiltersFromQueryParams,
+  };
+};