Refactor UI folder (#2016)

* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
--- a/front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
@ -0,0 +1,106 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+
+import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
+import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
+import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
+import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
+import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
+import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
+import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
+import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
+import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
+import { SortOrder } from '~/generated/graphql';
+
+import { useSetDataTableData } from '../hooks/useSetDataTableData';
+import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
+
+export const DataTableEffect = ({
+  useGetRequest,
+  getRequestResultKey,
+  getRequestOptimisticEffectDefinition,
+  orderBy = [
+    {
+      createdAt: SortOrder.Desc,
+    },
+  ],
+  whereFilters,
+  filterDefinitionArray,
+  setActionBarEntries,
+  setContextMenuEntries,
+  sortDefinitionArray,
+}: {
+  // TODO: type this
+  useGetRequest: any;
+  getRequestResultKey: string;
+  getRequestOptimisticEffectDefinition: OptimisticEffectDefinition<any>;
+  // TODO: type this and replace with defaultSorts reduce should be applied to defaultSorts in this component not before
+  orderBy?: any;
+  // TODO: type this and replace with defaultFilters reduce should be applied to defaultFilters in this component not before
+  whereFilters?: any;
+  filterDefinitionArray: FilterDefinition[];
+  sortDefinitionArray: SortDefinition[];
+  setActionBarEntries?: () => void;
+  setContextMenuEntries?: () => void;
+}) => {
+  const setDataTableData = useSetDataTableData();
+  const { registerOptimisticEffect } = useOptimisticEffect();
+
+  useGetRequest({
+    variables: { orderBy, where: whereFilters },
+    onCompleted: (data: any) => {
+      const entities = data[getRequestResultKey] ?? [];
+
+      setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
+
+      registerOptimisticEffect({
+        variables: { orderBy, where: whereFilters },
+        definition: getRequestOptimisticEffectDefinition,
+      });
+    },
+  });
+
+  const [searchParams] = useSearchParams();
+  const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);
+  const handleViewSelect = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async (viewId: string) => {
+        const currentView = await snapshot.getPromise(
+          currentViewIdScopedState(tableRecoilScopeId),
+        );
+        if (currentView === viewId) {
+          return;
+        }
+
+        const savedFilters = await snapshot.getPromise(
+          savedFiltersFamilyState(viewId),
+        );
+        const savedSorts = await snapshot.getPromise(
+          savedSortsFamilyState(viewId),
+        );
+
+        set(filtersScopedState(tableRecoilScopeId), savedFilters);
+        set(sortsScopedState(tableRecoilScopeId), savedSorts);
+        set(currentViewIdScopedState(tableRecoilScopeId), viewId);
+      },
+    [tableRecoilScopeId],
+  );
+
+  useEffect(() => {
+    const viewId = searchParams.get('view');
+    if (viewId) {
+      handleViewSelect(viewId);
+    }
+    setActionBarEntries?.();
+    setContextMenuEntries?.();
+  }, [
+    handleViewSelect,
+    searchParams,
+    setActionBarEntries,
+    setContextMenuEntries,
+  ]);
+
+  return <></>;
+};