fix: use correct table view when switching workspaces (#1447)

Closes #1441

front/src/modules/views/hooks/useTableViewFields.ts

@@ -43,9 +43,11 @@ const toViewFieldInput = (
 export const useTableViewFields = ({
   objectId,
   columnDefinitions,
+  skipFetch,
 }: {
   objectId: 'company' | 'person';
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
+  skipFetch?: boolean;
 }) => {
   const currentTableViewId = useRecoilScopedValue(
     currentTableViewIdState,
@@ -113,7 +115,7 @@ export const useTableViewFields = ({
   );
 
   const { refetch } = useGetViewFieldsQuery({
-    skip: !currentTableViewId,
+    skip: !currentTableViewId || skipFetch,
     variables: {
       orderBy: { index: SortOrder.Asc },
       where: {

front/src/modules/views/hooks/useTableViews.ts

@@ -41,36 +41,33 @@ export const useTableViews = <Entity, SortField>({
   );
   const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext);
 
+  const { handleViewsChange, isFetchingViews } = useViews({
+    objectId,
+    onViewCreate: handleViewCreate,
+  });
   const { createViewFields, persistColumns } = useTableViewFields({
     objectId,
     columnDefinitions,
+    skipFetch: isFetchingViews,
   });
   const { createViewFilters, persistFilters } = useViewFilters({
     availableFilters,
     currentViewId: currentTableViewId,
     scopeContext: TableRecoilScopeContext,
+    skipFetch: isFetchingViews,
   });
   const { createViewSorts, persistSorts } = useViewSorts({
     availableSorts,
     currentViewId: currentTableViewId,
     scopeContext: TableRecoilScopeContext,
+    skipFetch: isFetchingViews,
   });
 
-  const handleViewCreate = useCallback(
-    async (viewId: string) => {
-      await createViewFields(tableColumns, viewId);
-      await createViewFilters(filters, viewId);
-      await createViewSorts(sorts, viewId);
-    },
-    [
-      createViewFields,
-      createViewFilters,
-      createViewSorts,
-      filters,
-      sorts,
-      tableColumns,
-    ],
-  );
+  async function handleViewCreate(viewId: string) {
+    await createViewFields(tableColumns, viewId);
+    await createViewFilters(filters, viewId);
+    await createViewSorts(sorts, viewId);
+  }
 
   const handleViewSubmit = useCallback(async () => {
     await persistColumns();
@@ -78,10 +75,5 @@ export const useTableViews = <Entity, SortField>({
     await persistSorts();
   }, [persistColumns, persistFilters, persistSorts]);
 
-  const { handleViewsChange } = useViews({
-    objectId,
-    onViewCreate: handleViewCreate,
-  });
-
   return { handleViewsChange, handleViewSubmit };
 };

front/src/modules/views/hooks/useViewFilters.ts

@@ -19,10 +19,12 @@ export const useViewFilters = <Entity>({
   availableFilters,
   currentViewId,
   scopeContext,
+  skipFetch,
 }: {
   availableFilters: FilterDefinitionByEntity<Entity>[];
   currentViewId: string | undefined;
   scopeContext: Context<string | null>;
+  skipFetch?: boolean;
 }) => {
   const [filters, setFilters] = useRecoilScopedState(
     filtersScopedState,
@@ -36,7 +38,7 @@ export const useViewFilters = <Entity>({
   );
 
   const { refetch } = useGetViewFiltersQuery({
-    skip: !currentViewId,
+    skip: !currentViewId || skipFetch,
     variables: {
       where: {
         viewId: { equals: currentViewId },

front/src/modules/views/hooks/useViewSorts.ts

@@ -22,10 +22,12 @@ export const useViewSorts = <SortField>({
   availableSorts,
   currentViewId,
   scopeContext,
+  skipFetch,
 }: {
   availableSorts: SortType<SortField>[];
   currentViewId: string | undefined;
   scopeContext: Context<string | null>;
+  skipFetch?: boolean;
 }) => {
   const [sorts, setSorts] = useRecoilScopedState(
     sortsScopedState,
@@ -39,7 +41,7 @@ export const useViewSorts = <SortField>({
   );
 
   const { refetch } = useGetViewSortsQuery({
-    skip: !currentViewId,
+    skip: !currentViewId || skipFetch,
     variables: {
       where: {
         viewId: { equals: currentViewId },

front/src/modules/views/hooks/useViews.ts

@@ -1,6 +1,9 @@
-import { useCallback } from 'react';
+import { useRecoilCallback } from 'recoil';
 
+import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
+import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
 import {
   currentTableViewIdState,
   type TableView,
@@ -42,41 +45,44 @@ export const useViews = ({
   const [updateViewMutation] = useUpdateViewMutation();
   const [deleteViewMutation] = useDeleteViewMutation();
 
-  const createView = useCallback(
-    async (view: TableView) => {
-      const { data } = await createViewMutation({
-        variables: {
-          data: {
-            ...view,
-            objectId,
-            type: ViewType.Table,
-          },
+  const createView = async (view: TableView) => {
+    const { data } = await createViewMutation({
+      variables: {
+        data: {
+          ...view,
+          objectId,
+          type: ViewType.Table,
         },
-      });
+      },
+    });
 
-      if (data?.view) await onViewCreate(data.view.id);
-    },
-    [createViewMutation, objectId, onViewCreate],
+    if (data?.view) await onViewCreate(data.view.id);
+  };
+
+  const updateView = (view: TableView) =>
+    updateViewMutation({
+      variables: {
+        data: { name: view.name },
+        where: { id: view.id },
+      },
+    });
+
+  const deleteView = (viewId: string) =>
+    deleteViewMutation({ variables: { where: { id: viewId } } });
+
+  const handleResetSavedViews = useRecoilCallback(
+    ({ reset }) =>
+      () => {
+        tableViews.forEach((view) => {
+          reset(savedTableColumnsScopedState(view.id));
+          reset(savedFiltersScopedState(view.id));
+          reset(savedSortsScopedState(view.id));
+        });
+      },
+    [tableViews],
   );
 
-  const updateView = useCallback(
-    (view: TableView) =>
-      updateViewMutation({
-        variables: {
-          data: { name: view.name },
-          where: { id: view.id },
-        },
-      }),
-    [updateViewMutation],
-  );
-
-  const deleteView = useCallback(
-    (viewId: string) =>
-      deleteViewMutation({ variables: { where: { id: viewId } } }),
-    [deleteViewMutation],
-  );
-
-  const { refetch } = useGetViewsQuery({
+  const { loading, refetch } = useGetViewsQuery({
     variables: {
       where: {
         objectId: { equals: objectId },
@@ -90,41 +96,46 @@ export const useViews = ({
 
       if (!isDeeplyEqual(tableViews, nextViews)) setTableViews(nextViews);
 
-      if (nextViews.length && !currentTableViewId)
+      // If there is no current view selected,
+      // or if the current view cannot be found in the views list (user switched workspaces)
+      if (
+        nextViews.length &&
+        (!currentTableViewId ||
+          !nextViews.some((view) => view.id === currentTableViewId))
+      ) {
         setCurrentTableViewId(nextViews[0].id);
+        handleResetSavedViews();
+      }
     },
   });
 
-  const handleViewsChange = useCallback(
-    async (nextViews: TableView[]) => {
-      const viewToCreate = nextViews.find(
-        (nextView) => !tableViewsById[nextView.id],
-      );
-      if (viewToCreate) {
-        await createView(viewToCreate);
-        return refetch();
-      }
-
-      const viewToUpdate = nextViews.find(
-        (nextView) =>
-          tableViewsById[nextView.id] &&
-          tableViewsById[nextView.id].name !== nextView.name,
-      );
-      if (viewToUpdate) {
-        await updateView(viewToUpdate);
-        return refetch();
-      }
-
-      const nextViewIds = nextViews.map((nextView) => nextView.id);
-      const viewIdToDelete = Object.keys(tableViewsById).find(
-        (previousViewId) => !nextViewIds.includes(previousViewId),
-      );
-      if (viewIdToDelete) await deleteView(viewIdToDelete);
-
+  const handleViewsChange = async (nextViews: TableView[]) => {
+    const viewToCreate = nextViews.find(
+      (nextView) => !tableViewsById[nextView.id],
+    );
+    if (viewToCreate) {
+      await createView(viewToCreate);
       return refetch();
-    },
-    [createView, deleteView, refetch, tableViewsById, updateView],
-  );
+    }
 
-  return { handleViewsChange };
+    const viewToUpdate = nextViews.find(
+      (nextView) =>
+        tableViewsById[nextView.id] &&
+        tableViewsById[nextView.id].name !== nextView.name,
+    );
+    if (viewToUpdate) {
+      await updateView(viewToUpdate);
+      return refetch();
+    }
+
+    const nextViewIds = nextViews.map((nextView) => nextView.id);
+    const viewIdToDelete = Object.keys(tableViewsById).find(
+      (previousViewId) => !nextViewIds.includes(previousViewId),
+    );
+    if (viewIdToDelete) await deleteView(viewIdToDelete);
+
+    return refetch();
+  };
+
+  return { handleViewsChange, isFetchingViews: loading };
 };