feat: create view from selected filters and sorts + switch to newly created view on view creation (#1301)

* feat: create view from selected filters and sorts

Closes #1292

* refactor: use selector to obtain table filters where query option

* refactor: activate exhaustive deps eslint rule for useRecoilCallback

* feat: switch to newly created view on view creation

Closes #1297

* refactor: code review

- use `useCallback` instead of `useRecoilCallback`
- rename `useTableViews` to `useViews`
- move filter-n-sort selectors to /states/selector subfolder

front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx

@@ -73,6 +73,10 @@ export const TableViewsDropdownButton = ({
     key: 'options',
   });
 
+  const [, setCurrentViewId] = useRecoilScopedState(
+    currentTableViewIdState,
+    TableRecoilScopeContext,
+  );
   const currentView = useRecoilScopedValue(
     currentTableViewState,
     TableRecoilScopeContext,
@@ -81,10 +85,6 @@ export const TableViewsDropdownButton = ({
     tableViewsState,
     TableRecoilScopeContext,
   );
-  const [, setCurrentViewId] = useRecoilScopedState(
-    currentTableViewIdState,
-    TableRecoilScopeContext,
-  );
   const setViewEditMode = useSetRecoilState(tableViewEditModeState);
 
   const {
@@ -104,10 +104,10 @@ export const TableViewsDropdownButton = ({
 
         set(filtersScopedState(tableScopeId), savedFilters);
         set(sortsScopedState(tableScopeId), savedSorts);
-        setCurrentViewId(viewId);
+        set(currentTableViewIdState(tableScopeId), viewId);
         setIsUnfolded(false);
       },
-    [setCurrentViewId],
+    [tableScopeId],
   );
 
   const handleAddViewButtonClick = useCallback(() => {
@@ -126,12 +126,15 @@ export const TableViewsDropdownButton = ({
   );
 
   const handleDeleteViewButtonClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
+    async (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
       event.stopPropagation();
 
       if (currentView?.id === viewId) setCurrentViewId(undefined);
 
-      (onViewsChange ?? setViews)(views.filter((view) => view.id !== viewId));
+      const nextViews = views.filter((view) => view.id !== viewId);
+
+      setViews(nextViews);
+      await Promise.resolve(onViewsChange?.(nextViews));
       setIsUnfolded(false);
     },
     [currentView?.id, onViewsChange, setCurrentViewId, setViews, views],