New view picker (#4610)

* Implement new view picker * Complete feature * Fixes according to review
2024-03-22 15:04:17 +01:00
parent d876b40056
commit 4a493b6ecf
61 changed files with 1216 additions and 422 deletions
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
@ -0,0 +1,125 @@
+import { useRecoilCallback } from 'recoil';
+import { v4 } from 'uuid';
+
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useHandleViews } from '@/views/hooks/useHandleViews';
+import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
+import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
+
+export const useViewPickerPersistView = () => {
+  const {
+    viewPickerInputNameState,
+    viewPickerSelectedIconState,
+    viewPickerIsPersistingState,
+    viewPickerReferenceViewIdState,
+    viewPickerKanbanFieldMetadataIdState,
+    viewPickerTypeState,
+  } = useViewPickerStates();
+
+  const { createView, selectView, removeView, updateView } = useHandleViews();
+
+  const { viewsOnCurrentObject } = useGetCurrentView();
+
+  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();
+
+  const handleCreate = useRecoilCallback(
+    ({ snapshot, set }) =>
+      async () => {
+        const name = getSnapshotValue(snapshot, viewPickerInputNameState);
+        const iconKey = getSnapshotValue(snapshot, viewPickerSelectedIconState);
+        const type = getSnapshotValue(snapshot, viewPickerTypeState);
+        const kanbanFieldMetadataId = getSnapshotValue(
+          snapshot,
+          viewPickerKanbanFieldMetadataIdState,
+        );
+        const id = v4();
+        set(viewPickerIsPersistingState, true);
+        await createView({
+          id,
+          name,
+          icon: iconKey,
+          type,
+          kanbanFieldMetadataId,
+        });
+        closeAndResetViewPicker();
+        selectView(id);
+      },
+    [
+      closeAndResetViewPicker,
+      createView,
+      selectView,
+      viewPickerInputNameState,
+      viewPickerIsPersistingState,
+      viewPickerKanbanFieldMetadataIdState,
+      viewPickerSelectedIconState,
+      viewPickerTypeState,
+    ],
+  );
+
+  const handleDelete = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async () => {
+        set(viewPickerIsPersistingState, true);
+        const viewPickerReferenceViewId = getSnapshotValue(
+          snapshot,
+          viewPickerReferenceViewIdState,
+        );
+
+        selectView(
+          viewsOnCurrentObject.filter(
+            (view) => view.id !== viewPickerReferenceViewId,
+          )[0].id,
+        );
+        await removeView(viewPickerReferenceViewId);
+        closeAndResetViewPicker();
+      },
+    [
+      closeAndResetViewPicker,
+      removeView,
+      selectView,
+      viewPickerIsPersistingState,
+      viewPickerReferenceViewIdState,
+      viewsOnCurrentObject,
+    ],
+  );
+
+  const handleUpdate = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async () => {
+        set(viewPickerIsPersistingState, true);
+
+        const viewPickerReferenceViewId = getSnapshotValue(
+          snapshot,
+          viewPickerReferenceViewIdState,
+        );
+        const viewPickerInputName = getSnapshotValue(
+          snapshot,
+          viewPickerInputNameState,
+        );
+        const viewPickerSelectedIcon = getSnapshotValue(
+          snapshot,
+          viewPickerSelectedIconState,
+        );
+
+        await updateView({
+          id: viewPickerReferenceViewId,
+          name: viewPickerInputName,
+          icon: viewPickerSelectedIcon,
+        });
+        selectView(viewPickerReferenceViewId);
+        closeAndResetViewPicker();
+      },
+    [
+      viewPickerIsPersistingState,
+      viewPickerReferenceViewIdState,
+      viewPickerInputNameState,
+      viewPickerSelectedIconState,
+      updateView,
+      selectView,
+      closeAndResetViewPicker,
+    ],
+  );
+
+  return { handleCreate, handleDelete, handleUpdate };
+};