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>
2023-10-27 10:52:26 +02:00
parent 6a72c14af3
commit 5ba68e997d
205 changed files with 3092 additions and 3249 deletions
--- a/front/src/modules/views/hooks/useView.ts
+++ b/front/src/modules/views/hooks/useView.ts
@ -0,0 +1,189 @@
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+import { v4 } from 'uuid';
+
+import { savedTableColumnsFamilyState } from '@/ui/data/data-table/states/savedTableColumnsFamilyState';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+import { ViewScopeInternalContext } from '../scopes/scope-internal-context/ViewScopeInternalContext';
+import { currentViewFieldsScopedFamilyState } from '../states/currentViewFieldsScopedFamilyState';
+import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
+import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
+import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
+import { viewEditModeScopedState } from '../states/viewEditModeScopedState';
+import { viewsScopedState } from '../states/viewsScopedState';
+
+import { useViewFields } from './internal/useViewFields';
+import { useViewFilters } from './internal/useViewFilters';
+import { useViews } from './internal/useViews';
+import { useViewSorts } from './internal/useViewSorts';
+import { useViewStates } from './useViewStates';
+
+type UseViewProps = {
+  viewScopeId?: string;
+};
+
+export const useView = (props?: UseViewProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    ViewScopeInternalContext,
+    props?.viewScopeId,
+  );
+
+  const {
+    setCurrentViewId,
+    currentViewId,
+
+    setViews,
+    setViewEditMode,
+    setViewObjectId,
+    setViewType,
+    setEntityCountInCurrentView,
+    setIsViewBarExpanded,
+
+    setAvailableSorts,
+    setCurrentViewSorts,
+    setSavedViewSorts,
+
+    setAvailableFilters,
+    setCurrentViewFilters,
+    setSavedViewFilters,
+
+    setAvailableFields,
+    setCurrentViewFields,
+    setSavedViewFields,
+  } = useViewStates(scopeId);
+
+  const { persistViewSorts, upsertViewSort } = useViewSorts(scopeId);
+  const { persistViewFilters } = useViewFilters(scopeId);
+  const { persistViewFields } = useViewFields(scopeId);
+  const { createView: internalCreateView, deleteView: internalDeleteView } =
+    useViews(scopeId);
+  const [_, setSearchParams] = useSearchParams();
+
+  const resetViewBar = useRecoilCallback(({ snapshot }) => () => {
+    const savedViewFilters = snapshot
+      .getLoadable(
+        savedViewFiltersScopedFamilyState({
+          scopeId,
+          familyKey: currentViewId || '',
+        }),
+      )
+      .getValue();
+
+    const savedViewSorts = snapshot
+      .getLoadable(
+        savedViewSortsScopedFamilyState({
+          scopeId,
+          familyKey: currentViewId || '',
+        }),
+      )
+      .getValue();
+
+    if (savedViewFilters) {
+      setCurrentViewFilters?.(savedViewFilters);
+    }
+    if (savedViewSorts) {
+      setCurrentViewSorts?.(savedViewSorts);
+    }
+    setViewEditMode?.('none');
+    setIsViewBarExpanded?.(false);
+  });
+
+  const createView = useCallback(
+    async (name: string) => {
+      const newViewId = v4();
+      await internalCreateView({ id: v4(), name });
+
+      // await persistViewFields();
+      await persistViewFilters();
+      await persistViewSorts();
+      //setCurrentViewId(newViewId);
+
+      setSearchParams({ view: newViewId });
+    },
+    [internalCreateView, persistViewFilters, persistViewSorts, setSearchParams],
+  );
+
+  const updateCurrentView = async () => {
+    await persistViewFilters();
+    await persistViewSorts();
+  };
+
+  const removeView = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async (viewId: string) => {
+        const currentViewId = await snapshot.getPromise(
+          currentViewIdScopedState({ scopeId }),
+        );
+
+        if (currentViewId === viewId)
+          set(currentViewIdScopedState({ scopeId }), undefined);
+
+        set(viewsScopedState({ scopeId }), (previousViews) =>
+          previousViews.filter((view) => view.id !== viewId),
+        );
+        internalDeleteView(viewId);
+      },
+    [internalDeleteView, scopeId],
+  );
+
+  const handleViewNameSubmit = useRecoilCallback(
+    ({ snapshot, set }) =>
+      async (name?: string) => {
+        const viewEditMode = snapshot
+          .getLoadable(viewEditModeScopedState({ scopeId }))
+          .getValue();
+
+        const currentViewFields = snapshot
+          .getLoadable(
+            currentViewFieldsScopedFamilyState({
+              scopeId,
+              familyKey: currentViewId || '',
+            }),
+          )
+          .getValue();
+
+        const isCreateMode = viewEditMode === 'create';
+
+        if (isCreateMode && name && currentViewFields) {
+          await createView(name);
+          set(savedTableColumnsFamilyState(currentViewId), currentViewFields);
+        }
+      },
+    [createView, currentViewId, scopeId],
+  );
+
+  return {
+    scopeId,
+    currentViewId,
+    setCurrentViewId,
+    updateCurrentView,
+    createView,
+    removeView,
+    setIsViewBarExpanded,
+    resetViewBar,
+    handleViewNameSubmit,
+
+    setViews,
+    setViewEditMode,
+    setViewObjectId,
+    setViewType,
+    setEntityCountInCurrentView,
+
+    setAvailableSorts,
+    setCurrentViewSorts,
+    setSavedViewSorts,
+    upsertViewSort,
+
+    setAvailableFilters,
+    setCurrentViewFilters,
+    setSavedViewFilters,
+
+    setAvailableFields,
+    setCurrentViewFields,
+    setSavedViewFields,
+
+    persistViewFields,
+  };
+};