Refactor/scope and context (#1960)

* wip

* Test with Dropdown

* wip

* wip

* Finished removing DropdownRecoilScopeContext

* Fix from PR

front/src/pages/companies/Companies.tsx

@@ -11,7 +11,6 @@ import { DataTableContextMenu } from '@/ui/data-table/context-menu/components/Da
 import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem';
 import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId';
 import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { PageAddButton } from '@/ui/layout/components/PageAddButton';
 import { PageBody } from '@/ui/layout/components/PageBody';
@@ -58,10 +57,8 @@ export const Companies = () => {
     <SpreadsheetImportProvider>
       <PageContainer>
         <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
-          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-            <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
-            <PageAddButton onClick={handleAddButtonClick} />
-          </RecoilScope>
+          <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
+          <PageAddButton onClick={handleAddButtonClick} />
         </PageHeader>
         <PageBody>
           <RecoilScope

front/src/pages/companies/CompanyShow.tsx

@@ -6,7 +6,6 @@ import { CompanyTeam } from '@/companies/components/CompanyTeam';
 import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { AppPath } from '@/types/AppPath';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
@@ -62,19 +61,17 @@ export const CompanyShow = () => {
         hasBackButton
         Icon={IconBuildingSkyscraper}
       >
-        <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-          <PageFavoriteButton
-            isFavorite={isFavorite}
-            onClick={handleFavoriteButtonClick}
-          />
-          <ShowPageAddButton
-            key="add"
-            entity={{
-              id: company.id,
-              type: ActivityTargetableEntityType.Company,
-            }}
-          />
-        </RecoilScope>
+        <PageFavoriteButton
+          isFavorite={isFavorite}
+          onClick={handleFavoriteButtonClick}
+        />
+        <ShowPageAddButton
+          key="add"
+          entity={{
+            id: company.id,
+            type: ActivityTargetableEntityType.Company,
+          }}
+        />
       </PageHeader>
       <PageBody>
         <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>

front/src/pages/opportunities/Opportunities.tsx

@@ -3,7 +3,6 @@ import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-
 import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
 import { usePipelineStages } from '@/pipeline/hooks/usePipelineStages';
 import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconTargetArrow } from '@/ui/icon';
 import { PageBody } from '@/ui/layout/components/PageBody';
 import { PageContainer } from '@/ui/layout/components/PageContainer';
@@ -44,9 +43,7 @@ export const Opportunities = () => {
     <PageContainer>
       <RecoilScope>
         <PageHeader title="Opportunities" Icon={IconTargetArrow}>
-          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-            <PipelineAddButton />
-          </RecoilScope>
+          <PipelineAddButton />
         </PageHeader>
         <PageBody>
           <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>

front/src/pages/people/People.tsx

@@ -9,7 +9,6 @@ import { DataTableContextMenu } from '@/ui/data-table/context-menu/components/Da
 import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem';
 import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId';
 import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconUser } from '@/ui/icon';
 import { PageAddButton } from '@/ui/layout/components/PageAddButton';
 import { PageBody } from '@/ui/layout/components/PageBody';
@@ -54,10 +53,8 @@ export const People = () => {
     <SpreadsheetImportProvider>
       <PageContainer>
         <PageHeader title="People" Icon={IconUser}>
-          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-            <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
-            <PageAddButton onClick={handleAddButtonClick} />
-          </RecoilScope>
+          <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
+          <PageAddButton onClick={handleAddButtonClick} />
         </PageHeader>
         <PageBody>
           <RecoilScope

front/src/pages/people/PersonShow.tsx

@@ -7,7 +7,6 @@ import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import { usePersonQuery } from '@/people/hooks/usePersonQuery';
 import { AppPath } from '@/types/AppPath';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { IconUser } from '@/ui/icon';
 import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
@@ -77,27 +76,25 @@ export const PersonShow = () => {
     <PageContainer>
       <PageTitle title={person.displayName || 'No Name'} />
       <PageHeader title={person.firstName ?? ''} Icon={IconUser} hasBackButton>
-        <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-          <PageFavoriteButton
-            isFavorite={isFavorite}
-            onClick={handleFavoriteButtonClick}
-          />
-          <ShowPageAddButton
-            key="add"
-            entity={{
-              id: person.id,
-              type: ActivityTargetableEntityType.Person,
-              relatedEntities: person.company?.id
-                ? [
-                    {
-                      id: person.company?.id,
-                      type: ActivityTargetableEntityType.Company,
-                    },
-                  ]
-                : undefined,
-            }}
-          />
-        </RecoilScope>
+        <PageFavoriteButton
+          isFavorite={isFavorite}
+          onClick={handleFavoriteButtonClick}
+        />
+        <ShowPageAddButton
+          key="add"
+          entity={{
+            id: person.id,
+            type: ActivityTargetableEntityType.Person,
+            relatedEntities: person.company?.id
+              ? [
+                  {
+                    id: person.company?.id,
+                    type: ActivityTargetableEntityType.Company,
+                  },
+                ]
+              : undefined,
+          }}
+        />
       </PageHeader>
       <PageBody>
         <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>

front/src/pages/tasks/Tasks.tsx

@@ -3,7 +3,6 @@ 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 { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { PageBody } from '@/ui/layout/components/PageBody';
@@ -48,43 +47,41 @@ export const Tasks = () => {
 
   return (
     <PageContainer>
-      <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-        <RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
-          <TasksEffect />
-          <PageHeader title="Tasks" Icon={IconCheckbox}>
-            <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,
-                      }}
+      <RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
+        <TasksEffect />
+        <PageHeader title="Tasks" Icon={IconCheckbox}>
+          <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}
                     />
-                  }
-                />
-                <TaskGroups />
-              </StyledTasksContainer>
-            </ViewBarContext.Provider>
-          </PageBody>
-        </RecoilScope>
+                  </StyledTabListContainer>
+                }
+                rightComponent={
+                  <FilterDropdownButton
+                    key="tasks-filter-dropdown-button"
+                    hotkeyScope={{
+                      scope: RelationPickerHotkeyScope.RelationPicker,
+                    }}
+                  />
+                }
+              />
+              <TaskGroups />
+            </StyledTasksContainer>
+          </ViewBarContext.Provider>
+        </PageBody>
       </RecoilScope>
     </PageContainer>
   );