2426 timebox refactor board with the new scope architecture

front/src/modules/companies/__stories__/Board.stories.tsx

@@ -5,17 +5,12 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { CompanyBoard } from '../board/components/CompanyBoard';
-import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
 const meta: Meta<typeof CompanyBoard> = {
   title: 'Modules/Companies/Board',
   component: CompanyBoard,
   decorators: [
-    (Story) => (
-      <CompanyBoardRecoilScopeContext.Provider value="opportunities">
-        <Story />
-      </CompanyBoardRecoilScopeContext.Provider>
-    ),
+    (Story) => <Story />,
     ComponentWithRouterDecorator,
     SnackBarDecorator,
   ],

front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -1,21 +1,17 @@
 import styled from '@emotion/styled';
 
-import { BoardContext } from '@/companies/states/contexts/BoardContext';
 import { mapBoardFieldDefinitionsToViewFields } from '@/companies/utils/mapBoardFieldDefinitionsToViewFields';
-import { RecordBoardActionBar } from '@/ui/object/record-board/action-bar/components/RecordBoardActionBar';
-import { BoardOptionsDropdownId } from '@/ui/object/record-board/components/constants/BoardOptionsDropdownId';
 import {
   RecordBoard,
   RecordBoardProps,
 } from '@/ui/object/record-board/components/RecordBoard';
-import { RecordBoardContextMenu } from '@/ui/object/record-board/context-menu/components/RecordBoardContextMenu';
-import { BoardOptionsDropdown } from '@/ui/object/record-board/options/components/BoardOptionsDropdown';
+import { RecordBoardEffect } from '@/ui/object/record-board/components/RecordBoardEffect';
+import { RecordBoardOptionsDropdown } from '@/ui/object/record-board/options/components/RecordBoardOptionsDropdown';
 import { ViewBar } from '@/views/components/ViewBar';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 
 import { HooksCompanyBoardEffect } from '../../components/HooksCompanyBoardEffect';
-import { CompanyBoardRecoilScopeContext } from '../../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -36,34 +32,38 @@ export const CompanyBoard = ({
   onEditColumnTitle,
 }: CompanyBoardProps) => {
   const viewBarId = 'company-board-view';
+  const recordBoardId = 'company-board';
 
   const { persistViewFields } = useViewFields(viewBarId);
 
   return (
     <StyledContainer>
-      <BoardContext.Provider
-        value={{
-          BoardRecoilScopeContext: CompanyBoardRecoilScopeContext,
-          onFieldsChange: (fields) => {
-            persistViewFields(mapBoardFieldDefinitionsToViewFields(fields));
-          },
+      <ViewBar
+        viewBarId={viewBarId}
+        optionsDropdownButton={
+          <RecordBoardOptionsDropdown recordBoardId={recordBoardId} />
+        }
+        optionsDropdownScopeId={recordBoardId}
+      />
+
+      <HooksCompanyBoardEffect
+        viewBarId={viewBarId}
+        recordBoardId={recordBoardId}
+      />
+      <RecordBoardEffect
+        recordBoardId={recordBoardId}
+        onFieldsChange={(fields) => {
+          persistViewFields(mapBoardFieldDefinitionsToViewFields(fields));
         }}
-      >
-        <ViewBar
-          viewBarId={viewBarId}
-          optionsDropdownButton={<BoardOptionsDropdown />}
-          optionsDropdownScopeId={BoardOptionsDropdownId}
-        />
-        <HooksCompanyBoardEffect viewBarId={viewBarId} />
-        <RecordBoard
-          boardOptions={opportunitiesBoardOptions}
-          onColumnAdd={onColumnAdd}
-          onColumnDelete={onColumnDelete}
-          onEditColumnTitle={onEditColumnTitle}
-        />
-        <RecordBoardActionBar />
-        <RecordBoardContextMenu />
-      </BoardContext.Provider>
+      />
+
+      <RecordBoard
+        recordBoardId={recordBoardId}
+        boardOptions={opportunitiesBoardOptions}
+        onColumnAdd={onColumnAdd}
+        onColumnDelete={onColumnDelete}
+        onEditColumnTitle={onEditColumnTitle}
+      />
     </StyledContainer>
   );
 };

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useContext } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { EntityChipVariant } from '@/ui/display/chip/components/EntityChip';
@@ -9,15 +9,12 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
 import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext';
-import { useBoardContext } from '@/ui/object/record-board/hooks/useBoardContext';
-import { useCurrentCardSelected } from '@/ui/object/record-board/hooks/useCurrentCardSelected';
-import { isCardInCompactViewState } from '@/ui/object/record-board/states/isCardInCompactViewState';
-import { isCompactViewEnabledState } from '@/ui/object/record-board/states/isCompactViewEnabledState';
-import { visibleBoardCardFieldsScopedSelector } from '@/ui/object/record-board/states/selectors/visibleBoardCardFieldsScopedSelector';
+import { useCurrentRecordBoardCardSelectedInternal } from '@/ui/object/record-board/hooks/internal/useCurrentRecordBoardCardSelectedInternal';
+import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
+import { isRecordBoardCardInCompactViewFamilyState } from '@/ui/object/record-board/states/isRecordBoardCardInCompactViewFamilyState';
 import { RecordInlineCell } from '@/ui/object/record-inline-cell/components/RecordInlineCell';
 import { InlineCellHotkeyScope } from '@/ui/object/record-inline-cell/types/InlineCellHotkeyScope';
 import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 import { companyProgressesFamilyState } from '../states/companyProgressesFamilyState';
@@ -125,30 +122,28 @@ const StyledCompactIconContainer = styled.div`
 `;
 
 export const CompanyBoardCard = () => {
-  const { BoardRecoilScopeContext } = useBoardContext();
-
   const { isCurrentCardSelected, setCurrentCardSelected } =
-    useCurrentCardSelected();
+    useCurrentRecordBoardCardSelectedInternal();
   const boardCardId = useContext(BoardCardIdContext);
 
   const [companyProgress] = useRecoilState(
     companyProgressesFamilyState(boardCardId ?? ''),
   );
 
+  const { isCompactViewEnabledState, visibleBoardCardFieldsSelector } =
+    useRecordBoardScopedStates();
+
   const [isCompactViewEnabled] = useRecoilState(isCompactViewEnabledState);
 
   const [isCardInCompactView, setIsCardInCompactView] = useRecoilState(
-    isCardInCompactViewState(boardCardId ?? ''),
+    isRecordBoardCardInCompactViewFamilyState(boardCardId ?? ''),
   );
 
   const showCompactView = isCompactViewEnabled && isCardInCompactView;
 
   const { opportunity, company } = companyProgress ?? {};
 
-  const visibleBoardCardFields = useRecoilScopedValue(
-    visibleBoardCardFieldsScopedSelector,
-    BoardRecoilScopeContext,
-  );
+  const visibleBoardCardFields = useRecoilValue(visibleBoardCardFieldsSelector);
 
   const useUpdateOneRecordMutation: () => [(params: any) => any, any] = () => {
     const { updateOneRecord: updateOneOpportunity } = useUpdateOneRecord({