Improve viewbar api (#2233)

* create scopes

* fix import bug

* add useView hook

* wip

* wip

* currentViewId is now retrieved via useView

* working on sorts with useView

* refactor in progress

* refactor in progress

* refactor in progress

* refactor in progress

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* fix code

* fix code

* wip

* push

* Fix issue dependencies

* Fix resize

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

front/src/modules/views/states/selectors/canPersistViewFiltersScopedFamilySelector.ts

@@ -0,0 +1,31 @@
+import { selectorFamily } from 'recoil';
+
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+import { currentViewFiltersScopedFamilyState } from '../currentViewFiltersScopedFamilyState';
+import { savedViewFiltersScopedFamilyState } from '../savedViewFiltersScopedFamilyState';
+
+export const canPersistViewFiltersScopedFamilySelector = selectorFamily({
+  key: 'canPersistFiltersScopedFamilySelector',
+  get:
+    ({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
+    ({ get }) => {
+      if (!viewId) {
+        return;
+      }
+      return !isDeeplyEqual(
+        get(
+          savedViewFiltersScopedFamilyState({
+            scopeId: viewScopeId,
+            familyKey: viewId,
+          }),
+        ),
+        get(
+          currentViewFiltersScopedFamilyState({
+            scopeId: viewScopeId,
+            familyKey: viewId,
+          }),
+        ),
+      );
+    },
+});

front/src/modules/views/states/selectors/canPersistViewSortsScopedFamilySelector.ts

@@ -0,0 +1,31 @@
+import { selectorFamily } from 'recoil';
+
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+import { currentViewSortsScopedFamilyState } from '../currentViewSortsScopedFamilyState';
+import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
+
+export const canPersistViewSortsScopedFamilySelector = selectorFamily({
+  key: 'canPersistSortsScopedFamilySelector',
+  get:
+    ({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
+    ({ get }) => {
+      if (!viewId) {
+        return;
+      }
+      return !isDeeplyEqual(
+        get(
+          savedViewSortsScopedFamilyState({
+            scopeId: viewScopeId,
+            familyKey: viewId,
+          }),
+        ),
+        get(
+          currentViewSortsScopedFamilyState({
+            scopeId: viewScopeId,
+            familyKey: viewId,
+          }),
+        ),
+      );
+    },
+});

front/src/modules/views/states/selectors/currentViewScopedSelector.ts

@@ -0,0 +1,22 @@
+import { selectorFamily } from 'recoil';
+
+import { View } from '@/views/types/View';
+
+import { currentViewIdScopedState } from '../currentViewIdScopedState';
+
+import { viewsByIdScopedSelector } from './viewsByIdScopedSelector';
+
+export const currentViewScopedSelector = selectorFamily<
+  View | undefined,
+  string
+>({
+  key: 'currentViewScopedSelector',
+  get:
+    (scopeId) =>
+    ({ get }) => {
+      const currentViewId = get(currentViewIdScopedState({ scopeId: scopeId }));
+      return currentViewId
+        ? get(viewsByIdScopedSelector(scopeId))[currentViewId]
+        : undefined;
+    },
+});

front/src/modules/views/states/selectors/currentViewSortsOrderByScopedFamilySelector.ts

@@ -0,0 +1,26 @@
+import { selectorFamily } from 'recoil';
+
+import { reduceSortsToOrderBy } from '@/ui/data/sort/utils/helpers';
+import { SortOrder } from '~/generated/graphql';
+
+import { currentViewSortsScopedFamilyState } from '../currentViewSortsScopedFamilyState';
+
+export const currentViewSortsOrderByScopedFamilySelector = selectorFamily({
+  key: 'currentViewSortsOrderByScopedFamilySelector',
+  get:
+    ({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
+    ({ get }) => {
+      if (!viewId) {
+        return;
+      }
+      const orderBy = reduceSortsToOrderBy(
+        get(
+          currentViewSortsScopedFamilyState({
+            scopeId: viewScopeId,
+            familyKey: viewId,
+          }),
+        ),
+      );
+      return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
+    },
+});

front/src/modules/views/states/selectors/savedViewFieldByKeyScopedFamilySelector.ts

@@ -0,0 +1,32 @@
+import { selectorFamily } from 'recoil';
+
+import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+
+import { savedViewFieldsScopedFamilyState } from '../savedViewFieldsScopedFamilyState';
+
+export const savedViewFieldByKeyScopedFamilySelector = selectorFamily({
+  key: 'savedViewFieldByKeyScopedFamilySelector',
+  get:
+    ({
+      viewScopeId,
+      viewId,
+    }: {
+      viewScopeId: string;
+      viewId: string | undefined;
+    }) =>
+    ({ get }) => {
+      if (viewId === undefined) {
+        return undefined;
+      }
+      return get(
+        savedViewFieldsScopedFamilyState({
+          scopeId: viewScopeId,
+          familyKey: viewId,
+        }),
+      ).reduce<Record<string, ColumnDefinition<FieldMetadata>>>(
+        (result, column) => ({ ...result, [column.key]: column }),
+        {},
+      );
+    },
+});

front/src/modules/views/states/selectors/savedViewFiltersByKeyScopedFamilySelector.ts

@@ -0,0 +1,25 @@
+import { selectorFamily } from 'recoil';
+
+import { Filter } from '@/ui/data/filter/types/Filter';
+
+import { savedViewFiltersScopedFamilyState } from '../savedViewFiltersScopedFamilyState';
+
+export const savedViewFiltersByKeyScopedFamilySelector = selectorFamily({
+  key: 'savedViewFiltersByKeyScopedFamilySelector',
+  get:
+    ({ scopeId, viewId }: { scopeId: string; viewId: string | undefined }) =>
+    ({ get }) => {
+      if (viewId === undefined) {
+        return undefined;
+      }
+      return get(
+        savedViewFiltersScopedFamilyState({
+          scopeId: scopeId,
+          familyKey: viewId,
+        }),
+      ).reduce<Record<string, Filter>>(
+        (result, filter) => ({ ...result, [filter.key]: filter }),
+        {},
+      );
+    },
+});

front/src/modules/views/states/selectors/savedViewSortsByKeyScopedFamilySelector.ts

@@ -0,0 +1,25 @@
+import { selectorFamily } from 'recoil';
+
+import { Sort } from '@/ui/data/sort/types/Sort';
+
+import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
+
+export const savedViewSortsByKeyScopedFamilySelector = selectorFamily({
+  key: 'savedViewSortsByKeyScopedFamilySelector',
+  get:
+    ({ scopeId, viewId }: { scopeId: string; viewId: string | undefined }) =>
+    ({ get }) => {
+      if (viewId === undefined) {
+        return undefined;
+      }
+      return get(
+        savedViewSortsScopedFamilyState({
+          scopeId: scopeId,
+          familyKey: viewId,
+        }),
+      ).reduce<Record<string, Sort>>(
+        (result, sort) => ({ ...result, [sort.key]: sort }),
+        {},
+      );
+    },
+});

front/src/modules/views/states/selectors/savedViewSortsFamilySelector.ts

@@ -0,0 +1,16 @@
+import { selectorFamily } from 'recoil';
+
+import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
+
+export const savedViewSortsFamilySelector = selectorFamily({
+  key: 'savedViewSortsFamilySelector',
+  get:
+    ({ scopeId, viewId }: { scopeId: string; viewId: string }) =>
+    ({ get }) =>
+      get(
+        savedViewSortsScopedFamilyState({
+          scopeId: scopeId,
+          familyKey: viewId,
+        }),
+      ),
+});

front/src/modules/views/states/selectors/viewsByIdScopedSelector.ts

@@ -0,0 +1,19 @@
+import { selectorFamily } from 'recoil';
+
+import { View } from '@/views/types/View';
+
+import { viewsScopedState } from '../viewsScopedState';
+
+export const viewsByIdScopedSelector = selectorFamily<
+  Record<string, View>,
+  string
+>({
+  key: 'viewsByIdScopedSelector',
+  get:
+    (scopeId) =>
+    ({ get }) =>
+      get(viewsScopedState({ scopeId: scopeId })).reduce<Record<string, View>>(
+        (result, view) => ({ ...result, [view.id]: view }),
+        {},
+      ),
+});