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/pages/companies/companies-filters.tsx

@@ -1,5 +1,4 @@
-import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { FilterDefinitionByEntity } from '@/ui/data/view-bar/types/FilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/ui/data/filter/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -11,7 +10,7 @@ import {
 import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
 import { Company } from '~/generated/graphql';
 
-export const companiesFilters: FilterDefinitionByEntity<Company>[] = [
+export const companyAvailableFilters: FilterDefinitionByEntity<Company>[] = [
   {
     key: 'name',
     label: 'Name',
@@ -47,8 +46,6 @@ export const companiesFilters: FilterDefinitionByEntity<Company>[] = [
     label: 'Account owner',
     Icon: IconUser,
     type: 'entity',
-    entitySelectComponent: (
-      <FilterDropdownUserSearchSelect context={TableRecoilScopeContext} />
-    ),
+    entitySelectComponent: <FilterDropdownUserSearchSelect />,
   },
 ];

front/src/pages/companies/companies-sorts.tsx

@@ -1,4 +1,4 @@
-import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
+import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,

front/src/pages/opportunities/opportunities-filters.tsx

@@ -1,5 +1,5 @@
 import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
-import { FilterDefinitionByEntity } from '@/ui/data/view-bar/types/FilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/ui/data/filter/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,

front/src/pages/opportunities/opportunities-sorts.tsx

@@ -1,4 +1,4 @@
-import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
+import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
 import { IconCalendarEvent, IconCurrencyDollar } from '@/ui/display/icon/index';
 
 export const opportunitiesSorts: SortDefinition[] = [

front/src/pages/people/people-filters.tsx

@@ -1,5 +1,5 @@
 import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
-import { FilterDefinitionByEntity } from '@/ui/data/view-bar/types/FilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/ui/data/filter/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,

front/src/pages/people/people-sorts.tsx

@@ -1,5 +1,5 @@
-import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
-import { SortDirection } from '@/ui/data/view-bar/types/SortDirection';
+import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
+import { SortDirection } from '@/ui/data/sort/types/SortDirection';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,

front/src/pages/tasks/Tasks.tsx

@@ -3,8 +3,7 @@ import styled from '@emotion/styled';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { PageAddTaskButton } from '@/activities/tasks/components/PageAddTaskButton';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
-import { FilterDropdownButton } from '@/ui/data/view-bar/components/FilterDropdownButton';
-import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
+import { FilterDropdownButton } from '@/ui/data/filter/components/FilterDropdownButton';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/display/icon/index';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { PageBody } from '@/ui/layout/page/PageBody';
@@ -53,34 +52,24 @@ export const Tasks = () => {
           <PageAddTaskButton />
         </PageHeader>
         <PageBody>
-          {/* TODO: we should refactor filters as a standalone module ? */}
-          <ViewBarContext.Provider
-            value={{
-              ViewBarRecoilScopeContext: TasksRecoilScopeContext,
-            }}
-          >
-            <StyledTasksContainer>
-              <TopBar
-                leftComponent={
-                  <StyledTabListContainer>
-                    <TabList
-                      context={TasksRecoilScopeContext}
-                      tabs={TASK_TABS}
-                    />
-                  </StyledTabListContainer>
-                }
-                rightComponent={
-                  <FilterDropdownButton
-                    key="tasks-filter-dropdown-button"
-                    hotkeyScope={{
-                      scope: RelationPickerHotkeyScope.RelationPicker,
-                    }}
-                  />
-                }
-              />
-              <TaskGroups />
-            </StyledTasksContainer>
-          </ViewBarContext.Provider>
+          <StyledTasksContainer>
+            <TopBar
+              leftComponent={
+                <StyledTabListContainer>
+                  <TabList context={TasksRecoilScopeContext} tabs={TASK_TABS} />
+                </StyledTabListContainer>
+              }
+              rightComponent={
+                <FilterDropdownButton
+                  key="tasks-filter-dropdown-button"
+                  hotkeyScope={{
+                    scope: RelationPickerHotkeyScope.RelationPicker,
+                  }}
+                />
+              }
+            />
+            <TaskGroups />
+          </StyledTasksContainer>
         </PageBody>
       </RecoilScope>
     </PageContainer>

front/src/pages/tasks/TasksEffect.tsx

@@ -1,26 +1,15 @@
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
-import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
-import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useFilter } from '@/ui/data/filter/hooks/useFilter';
 import { ViewFilterOperand } from '~/generated/graphql';
 
 import { tasksFilters } from './tasks-filters';
 
 export const TasksEffect = () => {
   const [currentUser] = useRecoilState(currentUserState);
-  const [, setFilters] = useRecoilScopedState(
-    filtersScopedState,
-    TasksRecoilScopeContext,
-  );
-
-  const [, setAvailableFilters] = useRecoilScopedState(
-    availableFiltersScopedState,
-    TasksRecoilScopeContext,
-  );
+  const { setSelectedFilters, setAvailableFilters } = useFilter();
 
   useEffect(() => {
     setAvailableFilters(tasksFilters);
@@ -28,7 +17,7 @@ export const TasksEffect = () => {
 
   useEffect(() => {
     if (currentUser) {
-      setFilters([
+      setSelectedFilters([
         {
           key: 'assigneeId',
           type: 'entity',
@@ -39,6 +28,6 @@ export const TasksEffect = () => {
         },
       ]);
     }
-  }, [currentUser, setFilters]);
+  }, [currentUser, setSelectedFilters]);
   return <></>;
 };

front/src/pages/tasks/tasks-filters.tsx

@@ -1,5 +1,4 @@
-import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
-import { FilterDefinitionByEntity } from '@/ui/data/view-bar/types/FilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/ui/data/filter/types/FilterDefinitionByEntity';
 import { IconUser, IconUserCircle } from '@/ui/display/icon';
 import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
 import { Activity } from '~/generated/graphql';
@@ -10,9 +9,7 @@ export const tasksFilters: FilterDefinitionByEntity<Activity>[] = [
     label: 'Assignee',
     Icon: IconUser,
     type: 'entity',
-    entitySelectComponent: (
-      <FilterDropdownUserSearchSelect context={TasksRecoilScopeContext} />
-    ),
+    entitySelectComponent: <FilterDropdownUserSearchSelect />,
     selectAllLabel: 'All assignees',
     SelectAllIcon: IconUserCircle,
   },