Fix views (#2701)

* wip

* Fix viewsé

front/src/modules/views/components/ViewBarEffect.tsx

@@ -6,19 +6,21 @@ import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjec
 import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjectTypeResults';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { GraphQLView } from '@/views/types/GraphQLView';
-import { assertNotNull } from '~/utils/assert';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 import { useViewScopedStates } from '../hooks/internal/useViewScopedStates';
 import { useView } from '../hooks/useView';
-import { ViewField } from '../types/ViewField';
-import { ViewFilter } from '../types/ViewFilter';
-import { ViewSort } from '../types/ViewSort';
 import { getViewScopedStatesFromSnapshot } from '../utils/getViewScopedStatesFromSnapshot';
-import { getViewScopedStateValuesFromSnapshot } from '../utils/getViewScopedStateValuesFromSnapshot';
 
 export const ViewBarEffect = () => {
-  const { scopeId: viewScopeId, loadView, changeViewInUrl } = useView();
+  const {
+    scopeId: viewScopeId,
+    loadView,
+    changeViewInUrl,
+    loadViewFields,
+    loadViewFilters,
+    loadViewSorts,
+  } = useView();
 
   const [searchParams] = useSearchParams();
   const currentViewIdFromUrl = searchParams.get('view');
@@ -38,11 +40,7 @@ export const ViewBarEffect = () => {
     onCompleted: useRecoilCallback(
       ({ snapshot, set }) =>
         async (data: PaginatedObjectTypeResults<GraphQLView>) => {
-          const nextViews = data.edges.map((view) => ({
-            id: view.node.id,
-            name: view.node.name,
-            objectMetadataId: view.node.objectMetadataId,
-          }));
+          const nextViews = data.edges.map(({ node }) => node);
 
           const { viewsState, currentViewIdState } =
             getViewScopedStatesFromSnapshot({
@@ -52,7 +50,9 @@ export const ViewBarEffect = () => {
 
           const views = getSnapshotValue(snapshot, viewsState);
 
-          if (!isDeeplyEqual(views, nextViews)) set(viewsState, nextViews);
+          if (!isDeeplyEqual(views, nextViews)) {
+            set(viewsState, nextViews);
+          }
 
           const currentView =
             data.edges
@@ -66,9 +66,9 @@ export const ViewBarEffect = () => {
           set(currentViewIdState, currentView.id);
 
           if (currentView?.viewFields) {
-            updateViewFields(currentView.viewFields, currentView.id);
-            updateViewFilters(currentView.viewFilters, currentView.id);
-            updateViewSorts(currentView.viewSorts, currentView.id);
+            loadViewFields(currentView.viewFields, currentView.id);
+            loadViewFilters(currentView.viewFilters, currentView.id);
+            loadViewSorts(currentView.viewSorts, currentView.id);
           }
 
           if (!nextViews.length) return;
@@ -77,154 +77,6 @@ export const ViewBarEffect = () => {
     ),
   });
 
-  const updateViewFields = useRecoilCallback(
-    ({ snapshot, set }) =>
-      async (
-        data: PaginatedObjectTypeResults<ViewField>,
-        currentViewId: string,
-      ) => {
-        const {
-          availableFieldDefinitions,
-          onViewFieldsChange,
-          savedViewFields,
-          isPersistingView,
-        } = getViewScopedStateValuesFromSnapshot({
-          snapshot,
-          viewScopeId,
-          viewId: currentViewId,
-        });
-
-        const { savedViewFieldsState, currentViewFieldsState } =
-          getViewScopedStatesFromSnapshot({
-            snapshot,
-            viewScopeId,
-            viewId: currentViewId,
-          });
-
-        if (!availableFieldDefinitions) {
-          return;
-        }
-
-        const queriedViewFields = data.edges
-          .map((viewField) => viewField.node)
-          .filter(assertNotNull);
-
-        if (isPersistingView) {
-          return;
-        }
-
-        if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
-          set(currentViewFieldsState, queriedViewFields);
-          set(savedViewFieldsState, queriedViewFields);
-          onViewFieldsChange?.(queriedViewFields);
-        }
-      },
-    [viewScopeId],
-  );
-
-  const updateViewFilters = useRecoilCallback(
-    ({ snapshot, set }) =>
-      async (
-        data: PaginatedObjectTypeResults<Required<ViewFilter>>,
-        currentViewId: string,
-      ) => {
-        const {
-          availableFilterDefinitions,
-          savedViewFilters,
-          onViewFiltersChange,
-        } = getViewScopedStateValuesFromSnapshot({
-          snapshot,
-          viewScopeId,
-          viewId: currentViewId,
-        });
-
-        const { savedViewFiltersState, currentViewFiltersState } =
-          getViewScopedStatesFromSnapshot({
-            snapshot,
-            viewScopeId,
-            viewId: currentViewId,
-          });
-
-        if (!availableFilterDefinitions) {
-          return;
-        }
-
-        const queriedViewFilters = data.edges
-          .map(({ node }) => {
-            const availableFilterDefinition = availableFilterDefinitions.find(
-              (filterDefinition) =>
-                filterDefinition.fieldMetadataId === node.fieldMetadataId,
-            );
-
-            if (!availableFilterDefinition) return null;
-
-            return {
-              ...node,
-              displayValue: node.displayValue ?? node.value,
-              definition: availableFilterDefinition,
-            };
-          })
-          .filter(assertNotNull);
-
-        if (!isDeeplyEqual(savedViewFilters, queriedViewFilters)) {
-          set(savedViewFiltersState, queriedViewFilters);
-          set(currentViewFiltersState, queriedViewFilters);
-          onViewFiltersChange?.(queriedViewFilters);
-        }
-      },
-    [viewScopeId],
-  );
-
-  const updateViewSorts = useRecoilCallback(
-    ({ snapshot, set }) =>
-      async (
-        data: PaginatedObjectTypeResults<Required<ViewSort>>,
-        currentViewId: string,
-      ) => {
-        const { availableSortDefinitions, savedViewSorts, onViewSortsChange } =
-          getViewScopedStateValuesFromSnapshot({
-            snapshot,
-            viewScopeId,
-            viewId: currentViewId,
-          });
-
-        const { savedViewSortsState, currentViewSortsState } =
-          getViewScopedStatesFromSnapshot({
-            snapshot,
-            viewScopeId,
-            viewId: currentViewId,
-          });
-
-        if (!availableSortDefinitions || !currentViewId) {
-          return;
-        }
-
-        const queriedViewSorts = data.edges
-          .map(({ node }) => {
-            const availableSortDefinition = availableSortDefinitions.find(
-              (sort) => sort.fieldMetadataId === node.fieldMetadataId,
-            );
-
-            if (!availableSortDefinition) return null;
-
-            return {
-              id: node.id,
-              fieldMetadataId: node.fieldMetadataId,
-              direction: node.direction,
-              definition: availableSortDefinition,
-            };
-          })
-          .filter(assertNotNull);
-
-        if (!isDeeplyEqual(savedViewSorts, queriedViewSorts)) {
-          set(savedViewSortsState, queriedViewSorts);
-          set(currentViewSortsState, queriedViewSorts);
-          onViewSortsChange?.(queriedViewSorts);
-        }
-      },
-    [viewScopeId],
-  );
-
   useEffect(() => {
     if (!currentViewIdFromUrl) return;
 

front/src/modules/views/components/ViewsDropdownButton.tsx

@@ -79,7 +79,7 @@ export const ViewsDropdownButton = ({
     entityCountInCurrentViewState,
   );
 
-  const { setViewEditMode } = useView();
+  const { setViewEditMode, setCurrentViewId, loadView } = useView();
 
   const {
     isDropdownOpen: isViewsDropdownOpen,
@@ -95,10 +95,10 @@ export const ViewsDropdownButton = ({
   const handleViewSelect = useRecoilCallback(
     () => async (viewId: string) => {
       changeViewInUrl(viewId);
-
+      loadView(viewId);
       closeViewsDropdown();
     },
-    [changeViewInUrl, closeViewsDropdown],
+    [changeViewInUrl, closeViewsDropdown, loadView],
   );
 
   const handleAddViewButtonClick = () => {
@@ -114,6 +114,7 @@ export const ViewsDropdownButton = ({
   ) => {
     event.stopPropagation();
     changeViewInUrl(viewId);
+    setCurrentViewId(viewId);
     setViewEditMode('edit');
     onViewEditModeChange?.();
     closeViewsDropdown();