refactor: move view recoil states to ui/view-bar folder (#1482)

* refactor: move view recoil states to ui/view-bar folder Closes #1481 * refactor: rename some view related Recoil states and selectors
2023-09-08 11:26:15 +02:00
parent 47151525ce
commit ccb57c91a3
30 changed files with 268 additions and 279 deletions
--- a/front/src/modules/views/hooks/useTableViewFields.ts
+++ b/front/src/modules/views/hooks/useTableViewFields.ts
@ -4,13 +4,13 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { availableTableColumnsScopedState } from '@/ui/table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
-import { savedTableColumnsByKeyScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector';
+import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
+import { savedTableColumnsByKeyFamilySelector } from '@/ui/table/states/selectors/savedTableColumnsByKeyFamilySelector';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
-import { currentTableViewIdState } from '@/ui/table/states/tableViewsState';
 import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import {
  SortOrder,
  useCreateViewFieldsMutation,
@ -41,8 +41,8 @@ export const useTableViewFields = ({
  columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
  skipFetch?: boolean;
 }) => {
-  const currentTableViewId = useRecoilScopedValue(
-    currentTableViewIdState,
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
    TableRecoilScopeContext,
  );
  const [availableTableColumns, setAvailableTableColumns] =
@ -55,10 +55,10 @@ export const useTableViewFields = ({
    TableRecoilScopeContext,
  );
  const setSavedTableColumns = useSetRecoilState(
-    savedTableColumnsScopedState(currentTableViewId),
+    savedTableColumnsFamilyState(currentViewId),
  );
  const savedTableColumnsByKey = useRecoilValue(
-    savedTableColumnsByKeyScopedSelector(currentTableViewId),
+    savedTableColumnsByKeyFamilySelector(currentViewId),
  );

  const [createViewFieldsMutation] = useCreateViewFieldsMutation();
@ -67,7 +67,7 @@ export const useTableViewFields = ({
  const createViewFields = useCallback(
    (
      columns: ColumnDefinition<ViewFieldMetadata>[],
-      viewId = currentTableViewId,
+      viewId = currentViewId,
    ) => {
      if (!viewId || !columns.length) return;

@ -80,12 +80,12 @@ export const useTableViewFields = ({
        },
      });
    },
-    [createViewFieldsMutation, currentTableViewId, objectId],
+    [createViewFieldsMutation, currentViewId, objectId],
  );

  const updateViewFields = useCallback(
    (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
-      if (!currentTableViewId || !columns.length) return;
+      if (!currentViewId || !columns.length) return;

      return Promise.all(
        columns.map((column) =>
@ -96,22 +96,22 @@ export const useTableViewFields = ({
                size: column.size,
              },
              where: {
-                viewId_key: { key: column.key, viewId: currentTableViewId },
+                viewId_key: { key: column.key, viewId: currentViewId },
              },
            },
          }),
        ),
      );
    },
-    [currentTableViewId, updateViewFieldMutation],
+    [currentViewId, updateViewFieldMutation],
  );

  const { refetch } = useGetViewFieldsQuery({
-    skip: !currentTableViewId || skipFetch,
+    skip: !currentViewId || skipFetch,
    variables: {
      orderBy: { index: SortOrder.Asc },
      where: {
-        viewId: { equals: currentTableViewId },
+        viewId: { equals: currentViewId },
      },
    },
    onCompleted: async (data) => {
@ -152,7 +152,7 @@ export const useTableViewFields = ({
  });

  const persistColumns = useCallback(async () => {
-    if (!currentTableViewId) return;
+    if (!currentViewId) return;

    const viewFieldsToCreate = tableColumns.filter(
      (column) => !savedTableColumnsByKey[column.key],
@ -170,7 +170,7 @@ export const useTableViewFields = ({
    return refetch();
  }, [
    createViewFields,
-    currentTableViewId,
+    currentViewId,
    refetch,
    savedTableColumnsByKey,
    tableColumns,
--- a/front/src/modules/views/hooks/useTableViews.ts
+++ b/front/src/modules/views/hooks/useTableViews.ts
@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
-import { currentTableViewIdState } from '@/ui/table/states/tableViewsState';
 import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
@ -28,10 +27,6 @@ export const useTableViews = <Entity, SortField>({
  objectId: 'company' | 'person';
  columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
 }) => {
-  const currentTableViewId = useRecoilScopedValue(
-    currentTableViewIdState,
-    TableRecoilScopeContext,
-  );
  const tableColumns = useRecoilScopedValue(
    tableColumnsScopedState,
    TableRecoilScopeContext,
@ -54,13 +49,11 @@ export const useTableViews = <Entity, SortField>({
  });
  const { createViewFilters, persistFilters } = useViewFilters({
    availableFilters,
-    currentViewId: currentTableViewId,
    scopeContext: TableRecoilScopeContext,
    skipFetch: isFetchingViews,
  });
  const { createViewSorts, persistSorts } = useViewSorts({
    availableSorts,
-    currentViewId: currentTableViewId,
    scopeContext: TableRecoilScopeContext,
    skipFetch: isFetchingViews,
  });
--- a/front/src/modules/views/hooks/useViewFilters.ts
+++ b/front/src/modules/views/hooks/useViewFilters.ts
@ -2,9 +2,11 @@ import { Context, useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';

 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedFiltersByKeyScopedSelector } from '@/ui/view-bar/states/selectors/savedFiltersByKeyScopedSelector';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedFiltersByKeyFamilySelector } from '@/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector';
 import type { Filter } from '@/ui/view-bar/types/Filter';
 import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import {
@ -17,24 +19,26 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

 export const useViewFilters = <Entity>({
  availableFilters,
-  currentViewId,
  scopeContext,
  skipFetch,
 }: {
  availableFilters: FilterDefinitionByEntity<Entity>[];
-  currentViewId: string | undefined;
  scopeContext: Context<string | null>;
  skipFetch?: boolean;
 }) => {
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
+    scopeContext,
+  );
  const [filters, setFilters] = useRecoilScopedState(
    filtersScopedState,
    scopeContext,
  );
  const [, setSavedFilters] = useRecoilState(
-    savedFiltersScopedState(currentViewId),
+    savedFiltersFamilyState(currentViewId),
  );
  const savedFiltersByKey = useRecoilValue(
-    savedFiltersByKeyScopedSelector(currentViewId),
+    savedFiltersByKeyFamilySelector(currentViewId),
  );

  const { refetch } = useGetViewFiltersQuery({
--- a/front/src/modules/views/hooks/useViewSorts.ts
+++ b/front/src/modules/views/hooks/useViewSorts.ts
@ -2,8 +2,10 @@ import { Context, useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';

 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
-import { savedSortsByKeyScopedSelector } from '@/ui/view-bar/states/selectors/savedSortsByKeyScopedSelector';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { savedSortsByKeyFamilySelector } from '@/ui/view-bar/states/selectors/savedSortsByKeyFamilySelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
 import type { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
 import {
@ -17,24 +19,26 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

 export const useViewSorts = <SortField>({
  availableSorts,
-  currentViewId,
  scopeContext,
  skipFetch,
 }: {
  availableSorts: SortType<SortField>[];
-  currentViewId: string | undefined;
  scopeContext: Context<string | null>;
  skipFetch?: boolean;
 }) => {
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
+    scopeContext,
+  );
  const [sorts, setSorts] = useRecoilScopedState(
    sortsScopedState,
    scopeContext,
  );
  const [, setSavedSorts] = useRecoilState(
-    savedSortsScopedState(currentViewId),
+    savedSortsFamilyState(currentViewId),
  );
  const savedSortsByKey = useRecoilValue(
-    savedSortsByKeyScopedSelector(currentViewId),
+    savedSortsByKeyFamilySelector(currentViewId),
  );

  const { refetch } = useGetViewSortsQuery({
--- a/front/src/modules/views/hooks/useViews.ts
+++ b/front/src/modules/views/hooks/useViews.ts
@ -1,17 +1,15 @@
 import { useRecoilCallback } from 'recoil';

 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
-import {
-  currentTableViewIdState,
-  type TableView,
-  tableViewsByIdState,
-  tableViewsState,
-} from '@/ui/table/states/tableViewsState';
+import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
+import { viewsScopedState } from '@/ui/view-bar/states/viewsScopedState';
+import { View } from '@/ui/view-bar/types/View';
 import {
  useCreateViewMutation,
  useDeleteViewMutation,
@ -30,16 +28,16 @@ export const useViews = ({
  onViewCreate: (viewId: string) => Promise<void>;
  type: ViewType;
 }) => {
-  const [currentTableViewId, setCurrentTableViewId] = useRecoilScopedState(
-    currentTableViewIdState,
+  const [currentViewId, setCurrentViewId] = useRecoilScopedState(
+    currentViewIdScopedState,
    TableRecoilScopeContext,
  );
-  const [tableViews, setTableViews] = useRecoilScopedState(
-    tableViewsState,
+  const [views, setViews] = useRecoilScopedState(
+    viewsScopedState,
    TableRecoilScopeContext,
  );
-  const tableViewsById = useRecoilScopedValue(
-    tableViewsByIdState,
+  const viewsById = useRecoilScopedValue(
+    viewsByIdScopedSelector,
    TableRecoilScopeContext,
  );

@ -47,7 +45,7 @@ export const useViews = ({
  const [updateViewMutation] = useUpdateViewMutation();
  const [deleteViewMutation] = useDeleteViewMutation();

-  const createView = async (view: TableView) => {
+  const createView = async (view: View) => {
    const { data } = await createViewMutation({
      variables: {
        data: {
@ -61,7 +59,7 @@ export const useViews = ({
    if (data?.view) await onViewCreate(data.view.id);
  };

-  const updateView = (view: TableView) =>
+  const updateView = (view: View) =>
    updateViewMutation({
      variables: {
        data: { name: view.name },
@ -75,13 +73,13 @@ export const useViews = ({
  const handleResetSavedViews = useRecoilCallback(
    ({ reset }) =>
      () => {
-        tableViews.forEach((view) => {
-          reset(savedTableColumnsScopedState(view.id));
-          reset(savedFiltersScopedState(view.id));
-          reset(savedSortsScopedState(view.id));
+        views.forEach((view) => {
+          reset(savedTableColumnsFamilyState(view.id));
+          reset(savedFiltersFamilyState(view.id));
+          reset(savedSortsFamilyState(view.id));
        });
      },
-    [tableViews],
+    [views],
  );

  const { loading, refetch } = useGetViewsQuery({
@ -97,25 +95,22 @@ export const useViews = ({
        name: view.name,
      }));

-      if (!isDeeplyEqual(tableViews, nextViews)) setTableViews(nextViews);
+      if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);

      // 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))
+        (!currentViewId || !nextViews.some((view) => view.id === currentViewId))
      ) {
-        setCurrentTableViewId(nextViews[0].id);
+        setCurrentViewId(nextViews[0].id);
        handleResetSavedViews();
      }
    },
  });

-  const handleViewsChange = async (nextViews: TableView[]) => {
-    const viewToCreate = nextViews.find(
-      (nextView) => !tableViewsById[nextView.id],
-    );
+  const handleViewsChange = async (nextViews: View[]) => {
+    const viewToCreate = nextViews.find((nextView) => !viewsById[nextView.id]);
    if (viewToCreate) {
      await createView(viewToCreate);
      return refetch();
@ -123,8 +118,7 @@ export const useViews = ({

    const viewToUpdate = nextViews.find(
      (nextView) =>
-        tableViewsById[nextView.id] &&
-        tableViewsById[nextView.id].name !== nextView.name,
+        viewsById[nextView.id] && viewsById[nextView.id].name !== nextView.name,
    );
    if (viewToUpdate) {
      await updateView(viewToUpdate);
@ -132,7 +126,7 @@ export const useViews = ({
    }

    const nextViewIds = nextViews.map((nextView) => nextView.id);
-    const viewIdToDelete = Object.keys(tableViewsById).find(
+    const viewIdToDelete = Object.keys(viewsById).find(
      (previousViewId) => !nextViewIds.includes(previousViewId),
    );
    if (viewIdToDelete) await deleteView(viewIdToDelete);