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/components/ViewBarDetails.tsx

@@ -9,9 +9,11 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton';
 import { EditableSortChip } from '@/views/components/EditableSortChip';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
-import { useViewBar } from '@/views/hooks/useViewBar';
-
-import { useViewScopedStates } from '../hooks/internal/useViewScopedStates';
+import { useViewStates } from '@/views/hooks/internal/useViewStates';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useResetCurrentView } from '@/views/hooks/useResetCurrentView';
+import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
+import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
 
 export type ViewBarDetailsProps = {
   hasFilterButton?: boolean;
@@ -25,9 +27,11 @@ const StyledBar = styled.div`
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
   display: flex;
   flex-direction: row;
-  height: 40px;
+  min-height: 32px;
   justify-content: space-between;
   z-index: 4;
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledChipcontainer = styled.div`
@@ -35,10 +39,9 @@ const StyledChipcontainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
-  height: 40px;
-  justify-content: space-between;
+  min-height: 32px;
   margin-left: ${({ theme }) => theme.spacing(2)};
-  overflow-x: auto;
+  flex-wrap: wrap;
 `;
 
 const StyledCancelButton = styled.button`
@@ -92,37 +95,35 @@ export const ViewBarDetails = ({
   hasFilterButton = false,
   rightComponent,
   filterDropdownId,
-  viewBarId,
 }: ViewBarDetailsProps) => {
   const {
-    currentViewSortsState,
-    currentViewFiltersState,
-    canPersistFiltersSelector,
-    canPersistSortsSelector,
+    canPersistViewSelector,
     isViewBarExpandedState,
-  } = useViewScopedStates();
+    availableFilterDefinitionsState,
+    availableSortDefinitionsState,
+  } = useViewStates();
+
+  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
-  const currentViewSorts = useRecoilValue(currentViewSortsState);
-  const currentViewFilters = useRecoilValue(currentViewFiltersState);
-  const canPersistFilters = useRecoilValue(canPersistFiltersSelector);
-  const canPersistSorts = useRecoilValue(canPersistSortsSelector);
   const isViewBarExpanded = useRecoilValue(isViewBarExpandedState);
+  const canPersistView = useRecoilValue(canPersistViewSelector());
+  const availableFilterDefinitions = useRecoilValue(
+    availableFilterDefinitionsState,
+  );
+  const availableSortDefinitions = useRecoilValue(
+    availableSortDefinitionsState,
+  );
 
-  const { resetViewBar } = useViewBar();
-
-  const canPersistView = canPersistFilters || canPersistSorts;
+  const { resetCurrentView } = useResetCurrentView();
 
   const handleCancelClick = () => {
-    resetViewBar();
+    resetCurrentView();
   };
 
-  const { upsertViewFilter } = useViewBar({
-    viewBarId: viewBarId,
-  });
-
   const shouldExpandViewBar =
     canPersistView ||
-    ((currentViewSorts?.length || currentViewFilters?.length) &&
+    ((currentViewWithCombinedFiltersAndSorts?.viewSorts?.length ||
+      currentViewWithCombinedFiltersAndSorts?.viewFilters?.length) &&
       isViewBarExpanded);
 
   if (!shouldExpandViewBar) {
@@ -133,23 +134,29 @@ export const ViewBarDetails = ({
     <StyledBar>
       <StyledFilterContainer>
         <StyledChipcontainer>
-          {currentViewSorts?.map((sort) => (
-            <EditableSortChip key={sort.id} viewSort={sort} />
+          {mapViewSortsToSorts(
+            currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [],
+            availableSortDefinitions,
+          ).map((sort) => (
+            <EditableSortChip key={sort.fieldMetadataId} viewSort={sort} />
           ))}
-          {!!currentViewSorts?.length && !!currentViewFilters?.length && (
-            <StyledSeperatorContainer>
-              <StyledSeperator />
-            </StyledSeperatorContainer>
-          )}
-          {currentViewFilters?.map((viewFilter) => (
+          {!!currentViewWithCombinedFiltersAndSorts?.viewSorts?.length &&
+            !!currentViewWithCombinedFiltersAndSorts?.viewFilters?.length && (
+              <StyledSeperatorContainer>
+                <StyledSeperator />
+              </StyledSeperatorContainer>
+            )}
+          {mapViewFiltersToFilters(
+            currentViewWithCombinedFiltersAndSorts?.viewFilters ?? [],
+            availableFilterDefinitions,
+          ).map((viewFilter) => (
             <ObjectFilterDropdownScope
-              key={viewFilter.id}
+              key={viewFilter.fieldMetadataId}
               filterScopeId={viewFilter.fieldMetadataId}
             >
               <DropdownScope dropdownScopeId={viewFilter.fieldMetadataId}>
                 <ViewBarFilterEffect
                   filterDropdownId={viewFilter.fieldMetadataId}
-                  onFilterSelect={upsertViewFilter}
                 />
                 <EditableFilterDropdownButton
                   viewFilter={viewFilter}