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/ui/data/data-table/options/components/TableOptionsDropdownContent.tsx

@@ -1,15 +1,8 @@
-import { useCallback, useContext, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
-import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-import { ViewFieldsVisibilityDropdownSection } from '@/ui/data/view-bar/components/ViewFieldsVisibilityDropdownSection';
-import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
-import { useUpsertView } from '@/ui/data/view-bar/hooks/useUpsertView';
-import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/currentViewScopedSelector';
-import { viewsByIdScopedSelector } from '@/ui/data/view-bar/states/selectors/viewsByIdScopedSelector';
-import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
-import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon';
+import { IconChevronLeft, IconTag } from '@/ui/display/icon';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -18,22 +11,22 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
+import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
+import { useView } from '@/views/hooks/useView';
+import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
 
 import { useTableColumns } from '../../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
 import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
 import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
-import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
 type TableOptionsMenu = 'fields';
 
 export const TableOptionsDropdownContent = () => {
-  const scopeId = useRecoilScopeId(TableRecoilScopeContext);
+  const { setViewEditMode, handleViewNameSubmit } = useView();
+  const { viewEditMode, currentView } = useViewInternalStates();
 
-  const { onImport } = useContext(ViewBarContext);
   const { closeDropdown } = useDropdown();
 
   const [currentMenu, setCurrentMenu] = useState<TableOptionsMenu | undefined>(
@@ -42,12 +35,6 @@ export const TableOptionsDropdownContent = () => {
 
   const viewEditInputRef = useRef<HTMLInputElement>(null);
 
-  const currentView = useRecoilScopedValue(
-    currentViewScopedSelector,
-    TableRecoilScopeContext,
-  );
-  const viewEditMode = useRecoilValue(viewEditModeState);
-  const resetViewEditMode = useResetRecoilState(viewEditModeState);
   const visibleTableColumns = useRecoilScopedValue(
     visibleTableColumnsScopedSelector,
     TableRecoilScopeContext,
@@ -56,35 +43,13 @@ export const TableOptionsDropdownContent = () => {
     hiddenTableColumnsScopedSelector,
     TableRecoilScopeContext,
   );
-  const viewsById = useRecoilScopedValue(
-    viewsByIdScopedSelector,
-    TableRecoilScopeContext,
-  );
 
   const { handleColumnVisibilityChange, handleColumnReorder } =
     useTableColumns();
 
-  const { upsertView } = useUpsertView();
-
-  const handleViewNameSubmit = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async () => {
-        const tableColumns = await snapshot.getPromise(
-          tableColumnsScopedState(scopeId),
-        );
-        const isCreateMode = viewEditMode.mode === 'create';
-        const name = viewEditInputRef.current?.value;
-        const view = await upsertView(name);
-
-        if (view && isCreateMode) {
-          set(savedTableColumnsFamilyState(view.id), tableColumns);
-        }
-      },
-    [scopeId, upsertView, viewEditMode.mode],
-  );
-
   const handleSelectMenu = (option: TableOptionsMenu) => {
-    handleViewNameSubmit();
+    const name = viewEditInputRef.current?.value;
+    handleViewNameSubmit(name);
     setCurrentMenu(option);
   };
 
@@ -108,7 +73,6 @@ export const TableOptionsDropdownContent = () => {
   useScopedHotkeys(
     Key.Escape,
     () => {
-      resetViewEditMode();
       closeDropdown();
     },
     TableOptionsHotkeyScope.Dropdown,
@@ -117,9 +81,10 @@ export const TableOptionsDropdownContent = () => {
   useScopedHotkeys(
     Key.Enter,
     () => {
-      handleViewNameSubmit();
+      const name = viewEditInputRef.current?.value;
+      handleViewNameSubmit(name);
       resetMenu();
-      resetViewEditMode();
+      setViewEditMode('none');
       closeDropdown();
     },
     TableOptionsHotkeyScope.Dropdown,
@@ -130,16 +95,21 @@ export const TableOptionsDropdownContent = () => {
       {!currentMenu && (
         <>
           <DropdownMenuInput
-            autoFocus={viewEditMode.mode === 'create' || !!viewEditMode.viewId}
+            ref={viewEditInputRef}
+            autoFocus={viewEditMode !== 'none'}
             placeholder={
-              viewEditMode.mode === 'create' ? 'New view' : 'View name'
+              viewEditMode === 'create'
+                ? 'New view'
+                : viewEditMode === 'edit'
+                ? 'View name'
+                : ''
             }
             defaultValue={
-              viewEditMode.mode === 'create'
+              viewEditMode === 'create'
                 ? ''
-                : viewEditMode.viewId
-                ? viewsById[viewEditMode.viewId]?.name
-                : currentView?.name
+                : viewEditMode === 'edit'
+                ? currentView?.name
+                : ''
             }
           />
           <DropdownMenuSeparator />
@@ -149,13 +119,13 @@ export const TableOptionsDropdownContent = () => {
               LeftIcon={IconTag}
               text="Fields"
             />
-            {onImport && (
+            {/*onImport && (
               <MenuItem
                 onClick={onImport}
                 LeftIcon={IconFileImport}
                 text="Import"
               />
-            )}
+            )*/}
           </DropdownMenuItemsContainer>
         </>
       )}