diff --git a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx index 61ae4cb32..8b4191c8d 100644 --- a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx +++ b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx @@ -16,7 +16,7 @@ type OwnProps = { export function ActivityAssigneeEditableField({ activity }: OwnProps) { return ( - + + = { decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator], parameters: { msw: graphqlMocks, - recoilScopeContext: TasksRecoilScopeContext, + customRecoilScopeContext: TasksRecoilScopeContext, }, }; diff --git a/front/src/modules/activities/tasks/__stories__/TaskGroupsWithoutTasks.stories.tsx b/front/src/modules/activities/tasks/__stories__/TaskGroupsWithoutTasks.stories.tsx index 7975ebc96..ae5216fce 100644 --- a/front/src/modules/activities/tasks/__stories__/TaskGroupsWithoutTasks.stories.tsx +++ b/front/src/modules/activities/tasks/__stories__/TaskGroupsWithoutTasks.stories.tsx @@ -15,7 +15,7 @@ const meta: Meta = { decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator], parameters: { msw: graphqlMocks, - recoilScopeContext: TasksRecoilScopeContext, + customRecoilScopeContext: TasksRecoilScopeContext, }, }; diff --git a/front/src/modules/activities/tasks/components/EntityTasks.tsx b/front/src/modules/activities/tasks/components/EntityTasks.tsx index d7854a33d..77f3c5446 100644 --- a/front/src/modules/activities/tasks/components/EntityTasks.tsx +++ b/front/src/modules/activities/tasks/components/EntityTasks.tsx @@ -16,7 +16,7 @@ const StyledContainer = styled.div` export function EntityTasks({ entity }: { entity: ActivityTargetableEntity }) { return ( - + diff --git a/front/src/modules/activities/tasks/components/PageAddTaskButton.tsx b/front/src/modules/activities/tasks/components/PageAddTaskButton.tsx index 1243cf713..7a9a31f2b 100644 --- a/front/src/modules/activities/tasks/components/PageAddTaskButton.tsx +++ b/front/src/modules/activities/tasks/components/PageAddTaskButton.tsx @@ -27,7 +27,7 @@ export function PageAddTaskButton() { } return ( - + ); diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx index 7e6896fa4..1f90ea138 100644 --- a/front/src/modules/companies/__stories__/Board.stories.tsx +++ b/front/src/modules/companies/__stories__/Board.stories.tsx @@ -14,7 +14,7 @@ const meta: Meta = { component: CompanyBoard, decorators: [ (Story) => ( - + diff --git a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx index f1f2df86b..2ec44f4fd 100644 --- a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx +++ b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx @@ -15,6 +15,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress'; import { HooksCompanyBoardEffect } from '../components/HooksCompanyBoardEffect'; +import { BoardContext } from '../states/contexts/BoardContext'; import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; const meta: Meta = { @@ -24,7 +25,7 @@ const meta: Meta = { (Story, context) => { const [, setBoardCardFields] = useRecoilScopedState( boardCardFieldsScopedState, - context.parameters.recoilScopeContext, + context.parameters.customRecoilScopeContext, ); useEffect(() => { @@ -32,9 +33,14 @@ const meta: Meta = { }, [setBoardCardFields]); return ( - <> - - + + + @@ -42,18 +48,18 @@ const meta: Meta = { - - + + ); }, ComponentWithRecoilScopeDecorator, ComponentDecorator, ], - args: { scopeContext: CompanyBoardRecoilScopeContext }, - argTypes: { scopeContext: { control: false } }, + args: {}, + argTypes: {}, parameters: { msw: graphqlMocks, - recoilScopeContext: CompanyBoardRecoilScopeContext, + customRecoilScopeContext: CompanyBoardRecoilScopeContext, }, }; diff --git a/front/src/modules/companies/board/components/CompanyBoard.tsx b/front/src/modules/companies/board/components/CompanyBoard.tsx index e43d1e14d..390e7ca99 100644 --- a/front/src/modules/companies/board/components/CompanyBoard.tsx +++ b/front/src/modules/companies/board/components/CompanyBoard.tsx @@ -1,3 +1,4 @@ +import { BoardContext } from '@/companies/states/contexts/BoardContext'; import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions'; import { EntityBoard, @@ -22,35 +23,43 @@ export const CompanyBoard = ({ onColumnDelete, onEditColumnTitle, }: CompanyBoardProps) => { + // TODO: we can store objectId and fieldDefinitions in the ViewBarContext + // And then use the useBoardViews hook wherever we need it in the board const { createView, deleteView, submitCurrentView, updateView } = useBoardViews({ objectId: 'company', - scopeContext: CompanyBoardRecoilScopeContext, + RecoilScopeContext: CompanyBoardRecoilScopeContext, fieldDefinitions: pipelineAvailableFieldDefinitions, }); return ( <> - - - - - - + + + + + + + ); }; diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index f8082015d..c7adce276 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -1,8 +1,9 @@ -import { type Context, type ReactNode, useContext } from 'react'; +import { type ReactNode, useContext } from 'react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { BoardCardIdContext } from '@/ui/board/contexts/BoardCardIdContext'; +import { useBoardContext } from '@/ui/board/hooks/useBoardContext'; import { useCurrentCardSelected } from '@/ui/board/hooks/useCurrentCardSelected'; import { visibleBoardCardFieldsScopedSelector } from '@/ui/board/states/selectors/visibleBoardCardFieldsScopedSelector'; import { EntityChipVariant } from '@/ui/chip/components/EntityChip'; @@ -19,10 +20,6 @@ import { companyProgressesFamilyState } from '../states/companyProgressesFamilyS import { CompanyChip } from './CompanyChip'; -type OwnProps = { - scopeContext: Context; -}; - const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => selected ? theme.accent.quaternary : theme.background.secondary}; @@ -103,7 +100,9 @@ const StyledFieldContainer = styled.div` width: 100%; `; -export function CompanyBoardCard({ scopeContext }: OwnProps) { +export function CompanyBoardCard() { + const { BoardRecoilScopeContext } = useBoardContext(); + const { currentCardSelected, setCurrentCardSelected } = useCurrentCardSelected(); const boardCardId = useContext(BoardCardIdContext); @@ -115,7 +114,7 @@ export function CompanyBoardCard({ scopeContext }: OwnProps) { const visibleBoardCardFields = useRecoilScopedValue( visibleBoardCardFieldsScopedSelector, - scopeContext, + BoardRecoilScopeContext, ); // boardCardId check can be moved to a wrapper to avoid unnecessary logic above diff --git a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx index f6c92ae9f..a465da172 100644 --- a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx +++ b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx @@ -1,26 +1,23 @@ -import { Context } from 'react'; - import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { FilterDropdownEntitySearchSelect } from '@/ui/view-bar/components/FilterDropdownEntitySearchSelect'; +import { useViewBarContext } from '@/ui/view-bar/hooks/useViewBarContext'; import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState'; import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState'; import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery'; -export function FilterDropdownCompanySearchSelect({ - context, -}: { - context: Context; -}) { +export function FilterDropdownCompanySearchSelect() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const filterDropdownSearchInput = useRecoilScopedValue( filterDropdownSearchInputScopedState, - context, + ViewBarRecoilScopeContext, ); const [filterDropdownSelectedEntityId] = useRecoilScopedState( filterDropdownSelectedEntityIdScopedState, - context, + ViewBarRecoilScopeContext, ); const usersForSelect = useFilteredSearchCompanyQuery({ @@ -31,9 +28,6 @@ export function FilterDropdownCompanySearchSelect({ }); return ( - + ); } diff --git a/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx index 35e31c4a9..5c50f4642 100644 --- a/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx @@ -60,7 +60,7 @@ export function CompanyNameEditableField({ company }: OwnProps) { } return ( - + handleChange(event.target.value)} diff --git a/front/src/modules/companies/states/contexts/BoardContext.ts b/front/src/modules/companies/states/contexts/BoardContext.ts new file mode 100644 index 000000000..eea7e46c8 --- /dev/null +++ b/front/src/modules/companies/states/contexts/BoardContext.ts @@ -0,0 +1,9 @@ +import { createContext } from 'react'; + +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; + +export const BoardContext = createContext<{ + BoardRecoilScopeContext: RecoilScopeContext; +}>({ + BoardRecoilScopeContext: createContext(null), +}); diff --git a/front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardViewBarRecoilScopeContext.ts b/front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardViewBarRecoilScopeContext.ts new file mode 100644 index 000000000..d5e5436e0 --- /dev/null +++ b/front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardViewBarRecoilScopeContext.ts @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +export const CompanyBoardViewBarRecoilScopeContext = createContext< + string | null +>(null); diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 1e34f2ae0..cfda4eb76 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -44,10 +44,6 @@ export function CompanyTable() { const { setContextMenuEntries } = useCompanyTableContextMenuEntries(); const { setActionBarEntries } = useCompanyTableActionBarEntries(); - function handleImport() { - openCompanySpreadsheetImport(); - } - return ( <> - + diff --git a/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx b/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx index 857a29e34..4a27f662c 100644 --- a/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx +++ b/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx @@ -1,25 +1,22 @@ -import { Context } from 'react'; - import { useFilteredSearchPeopleQuery } from '@/people/hooks/useFilteredSearchPeopleQuery'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { FilterDropdownEntitySearchSelect } from '@/ui/view-bar/components/FilterDropdownEntitySearchSelect'; +import { useViewBarContext } from '@/ui/view-bar/hooks/useViewBarContext'; import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState'; import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState'; -export function FilterDropdownPeopleSearchSelect({ - context, -}: { - context: Context; -}) { +export function FilterDropdownPeopleSearchSelect() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const filterDropdownSearchInput = useRecoilScopedValue( filterDropdownSearchInputScopedState, - context, + ViewBarRecoilScopeContext, ); const [filterDropdownSelectedEntityId] = useRecoilScopedState( filterDropdownSelectedEntityIdScopedState, - context, + ViewBarRecoilScopeContext, ); const peopleForSelect = useFilteredSearchPeopleQuery({ @@ -30,9 +27,6 @@ export function FilterDropdownPeopleSearchSelect({ }); return ( - + ); } diff --git a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx index 3ba3a3a00..03afe5092 100644 --- a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx +++ b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx @@ -46,7 +46,7 @@ export function PeopleFullNameEditableField({ people }: OwnProps) { } return ( - + ; diff --git a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx index 6b1ba9c12..28ece6a49 100644 --- a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx +++ b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx @@ -24,7 +24,7 @@ const meta: Meta = { component: FilledActionBar, decorators: [ (Story) => ( - + diff --git a/front/src/modules/ui/board/components/BoardHeader.tsx b/front/src/modules/ui/board/components/BoardHeader.tsx index 3141a4edc..d3923187c 100644 --- a/front/src/modules/ui/board/components/BoardHeader.tsx +++ b/front/src/modules/ui/board/components/BoardHeader.tsx @@ -1,12 +1,13 @@ import { useContext } from 'react'; import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil'; +import { BoardContext } from '@/companies/states/contexts/BoardContext'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; -import { ViewBar, type ViewBarProps } from '@/ui/view-bar/components/ViewBar'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; +import { ViewBar } from '@/ui/view-bar/components/ViewBar'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState'; @@ -22,30 +23,33 @@ import { BoardOptionsDropdown } from './BoardOptionsDropdown'; export type BoardHeaderProps = { className?: string; onStageAdd?: (boardColumn: BoardColumnDefinition) => void; -} & Pick; +}; -export function BoardHeader({ - className, - onStageAdd, - scopeContext, -}: BoardHeaderProps) { +export function BoardHeader({ className, onStageAdd }: BoardHeaderProps) { const { onCurrentViewSubmit, ...viewBarContextProps } = useContext(ViewBarContext); - const tableScopeId = useContextScopeId(scopeContext); + + const BoardRecoilScopeContext = + useContext(BoardContext).BoardRecoilScopeContext; + + const ViewBarRecoilScopeContext = + useContext(ViewBarContext).ViewBarRecoilScopeContext; + + const boardRecoilScopeId = useRecoilScopeId(BoardRecoilScopeContext); const currentViewId = useRecoilScopedValue( currentViewIdScopedState, - scopeContext, + ViewBarRecoilScopeContext, ); const canPersistBoardCardFields = useRecoilValue( - canPersistBoardCardFieldsScopedFamilySelector([ - tableScopeId, - currentViewId, - ]), + canPersistBoardCardFieldsScopedFamilySelector({ + recoilScopeId: boardRecoilScopeId, + viewId: currentViewId, + }), ); const [boardCardFields, setBoardCardFields] = useRecoilScopedState( boardCardFieldsScopedState, - scopeContext, + BoardRecoilScopeContext, ); const [savedBoardCardFields, setSavedBoardCardFields] = useRecoilState( savedBoardCardFieldsFamilyState(currentViewId), @@ -59,9 +63,12 @@ export function BoardHeader({ const savedBoardCardFields = await snapshot.getPromise( savedBoardCardFieldsFamilyState(viewId), ); - set(boardCardFieldsScopedState(tableScopeId), savedBoardCardFields); + set( + boardCardFieldsScopedState(boardRecoilScopeId), + savedBoardCardFields, + ); }, - [tableScopeId], + [boardRecoilScopeId], ); const handleCurrentViewSubmit = async () => { @@ -73,7 +80,7 @@ export function BoardHeader({ }; return ( - + } optionsDropdownKey={BoardOptionsDropdownKey} - scopeContext={scopeContext} /> diff --git a/front/src/modules/ui/board/components/BoardOptionsDropdown.tsx b/front/src/modules/ui/board/components/BoardOptionsDropdown.tsx index 016b2523a..d8a84cac0 100644 --- a/front/src/modules/ui/board/components/BoardOptionsDropdown.tsx +++ b/front/src/modules/ui/board/components/BoardOptionsDropdown.tsx @@ -10,13 +10,12 @@ import { type BoardOptionsDropdownProps = Pick< BoardOptionsDropdownContentProps, - 'customHotkeyScope' | 'onStageAdd' | 'scopeContext' + 'customHotkeyScope' | 'onStageAdd' >; export function BoardOptionsDropdown({ customHotkeyScope, onStageAdd, - scopeContext, }: BoardOptionsDropdownProps) { return ( } dropdownHotkeyScope={customHotkeyScope} diff --git a/front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx b/front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx index 231b7a043..d137d9926 100644 --- a/front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx +++ b/front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx @@ -1,10 +1,11 @@ -import { type Context, useRef, useState } from 'react'; +import { useContext, useRef, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; import { v4 } from 'uuid'; +import { BoardContext } from '@/companies/states/contexts/BoardContext'; import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader'; import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput'; import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu'; @@ -23,8 +24,8 @@ import { MenuItemNavigate } from '@/ui/menu-item/components/MenuItemNavigate'; import { ThemeColor } from '@/ui/theme/constants/colors'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection'; import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView'; import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector'; @@ -42,7 +43,6 @@ import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey'; export type BoardOptionsDropdownContentProps = { customHotkeyScope: HotkeyScope; onStageAdd?: (boardColumn: BoardColumnDefinition) => void; - scopeContext: Context; }; const StyledIconSettings = styled(IconSettings)` @@ -61,10 +61,13 @@ type ColumnForCreate = { export function BoardOptionsDropdownContent({ customHotkeyScope, onStageAdd, - scopeContext, }: BoardOptionsDropdownContentProps) { const theme = useTheme(); - const scopeId = useContextScopeId(scopeContext); + + const BoardRecoilScopeContext = + useContext(BoardContext).BoardRecoilScopeContext; + + const boardRecoilScopeId = useRecoilScopeId(BoardRecoilScopeContext); const stageInputRef = useRef(null); const viewEditInputRef = useRef(null); @@ -77,16 +80,19 @@ export function BoardOptionsDropdownContent({ const hiddenBoardCardFields = useRecoilScopedValue( hiddenBoardCardFieldsScopedSelector, - scopeContext, + BoardRecoilScopeContext, ); const hasHiddenFields = hiddenBoardCardFields.length > 0; const visibleBoardCardFields = useRecoilScopedValue( visibleBoardCardFieldsScopedSelector, - scopeContext, + BoardRecoilScopeContext, ); const hasVisibleFields = visibleBoardCardFields.length > 0; - const viewsById = useRecoilScopedValue(viewsByIdScopedSelector, scopeContext); + const viewsById = useRecoilScopedValue( + viewsByIdScopedSelector, + BoardRecoilScopeContext, // TODO: replace with ViewBarRecoilScopeContext + ); const viewEditMode = useRecoilValue(viewEditModeState); const handleStageSubmit = () => { @@ -107,13 +113,13 @@ export function BoardOptionsDropdownContent({ onStageAdd?.(columnToCreate); }; - const { upsertView } = useUpsertView({ scopeContext }); + const { upsertView } = useUpsertView(); const handleViewNameSubmit = useRecoilCallback( ({ set, snapshot }) => async () => { const boardCardFields = await snapshot.getPromise( - boardCardFieldsScopedState(scopeId), + boardCardFieldsScopedState(boardRecoilScopeId), ); const isCreateMode = viewEditMode.mode === 'create'; const name = viewEditInputRef.current?.value; @@ -123,7 +129,7 @@ export function BoardOptionsDropdownContent({ set(savedBoardCardFieldsFamilyState(view.id), boardCardFields); } }, - [scopeId, upsertView, viewEditMode.mode], + [boardRecoilScopeId, upsertView, viewEditMode.mode], ); const resetMenu = () => setCurrentMenu(undefined); @@ -133,7 +139,7 @@ export function BoardOptionsDropdownContent({ setCurrentMenu(menu); }; - const { handleFieldVisibilityChange } = useBoardCardFields({ scopeContext }); + const { handleFieldVisibilityChange } = useBoardCardFields(); const { closeDropdownButton } = useDropdownButton({ dropdownId: BoardOptionsDropdownKey, diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index fb7d08d49..d59d8a453 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -1,4 +1,4 @@ -import { type Context, useCallback, useRef } from 'react'; +import { useCallback, useRef } from 'react'; import { getOperationName } from '@apollo/client/utilities'; import styled from '@emotion/styled'; import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350 @@ -35,7 +35,6 @@ export type EntityBoardProps = { onColumnAdd?: (boardColumn: BoardColumnDefinition) => void; onColumnDelete?: (boardColumnId: string) => void; onEditColumnTitle: (columnId: string, title: string, color: string) => void; - scopeContext: Context; }; const StyledWrapper = styled.div` @@ -54,7 +53,6 @@ export function EntityBoard({ onColumnAdd, onColumnDelete, onEditColumnTitle, - scopeContext, }: EntityBoardProps) { const [boardColumns] = useRecoilState(boardColumnsState); const setCardSelected = useSetCardSelected(); @@ -130,14 +128,14 @@ export function EntityBoard({ return (boardColumns?.length ?? 0) > 0 ? ( - + {sortedBoardColumns.map((column) => ( diff --git a/front/src/modules/ui/board/components/EntityBoardCard.tsx b/front/src/modules/ui/board/components/EntityBoardCard.tsx index 5d8bd732c..2a509070c 100644 --- a/front/src/modules/ui/board/components/EntityBoardCard.tsx +++ b/front/src/modules/ui/board/components/EntityBoardCard.tsx @@ -1,4 +1,3 @@ -import type { Context } from 'react'; import { Draggable } from '@hello-pangea/dnd'; import { useSetRecoilState } from 'recoil'; @@ -12,12 +11,10 @@ export function EntityBoardCard({ boardOptions, cardId, index, - scopeContext, }: { boardOptions: BoardOptions; cardId: string; index: number; - scopeContext: Context; }) { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); @@ -46,7 +43,7 @@ export function EntityBoardCard({ data-select-disable onContextMenu={handleContextMenu} > - {} + {} )} diff --git a/front/src/modules/ui/board/components/EntityBoardColumn.tsx b/front/src/modules/ui/board/components/EntityBoardColumn.tsx index 818e3ff45..433418ab4 100644 --- a/front/src/modules/ui/board/components/EntityBoardColumn.tsx +++ b/front/src/modules/ui/board/components/EntityBoardColumn.tsx @@ -1,4 +1,4 @@ -import { type Context, useContext } from 'react'; +import { useContext } from 'react'; import styled from '@emotion/styled'; import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd'; import { useRecoilValue } from 'recoil'; @@ -52,13 +52,11 @@ export function EntityBoardColumn({ column, onDelete, onTitleEdit, - scopeContext, }: { boardOptions: BoardOptions; column: BoardColumnDefinition; onDelete?: (columnId: string) => void; onTitleEdit: (columnId: string, title: string, color: string) => void; - scopeContext: Context; }) { const boardColumnId = useContext(BoardColumnIdContext) ?? ''; @@ -94,7 +92,6 @@ export function EntityBoardColumn({ index={index} cardId={cardId} boardOptions={boardOptions} - scopeContext={scopeContext} /> ))} diff --git a/front/src/modules/ui/board/hooks/useBoardCardFields.ts b/front/src/modules/ui/board/hooks/useBoardCardFields.ts index bf9c0e8ac..e9648487e 100644 --- a/front/src/modules/ui/board/hooks/useBoardCardFields.ts +++ b/front/src/modules/ui/board/hooks/useBoardCardFields.ts @@ -1,5 +1,3 @@ -import type { Context } from 'react'; - import type { ViewFieldDefinition, ViewFieldMetadata, @@ -10,18 +8,18 @@ import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoi import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState'; import { boardCardFieldsByKeyScopedSelector } from '../states/selectors/boardCardFieldsByKeyScopedSelector'; -export const useBoardCardFields = ({ - scopeContext, -}: { - scopeContext: Context; -}) => { +import { useBoardContext } from './useBoardContext'; + +export const useBoardCardFields = () => { + const { BoardRecoilScopeContext } = useBoardContext(); + const [boardCardFields, setBoardCardFields] = useRecoilScopedState( boardCardFieldsScopedState, - scopeContext, + BoardRecoilScopeContext, ); const boardCardFieldsByKey = useRecoilScopedValue( boardCardFieldsByKeyScopedSelector, - scopeContext, + BoardRecoilScopeContext, ); const handleFieldVisibilityChange = ( diff --git a/front/src/modules/ui/board/hooks/useBoardContext.ts b/front/src/modules/ui/board/hooks/useBoardContext.ts new file mode 100644 index 000000000..4c3b158e1 --- /dev/null +++ b/front/src/modules/ui/board/hooks/useBoardContext.ts @@ -0,0 +1,7 @@ +import { useContext } from 'react'; + +import { BoardContext } from '@/companies/states/contexts/BoardContext'; + +export const useBoardContext = () => { + return useContext(BoardContext); +}; diff --git a/front/src/modules/ui/board/states/selectors/canPersistBoardCardFieldsScopedFamilySelector.ts b/front/src/modules/ui/board/states/selectors/canPersistBoardCardFieldsScopedFamilySelector.ts index 620e0802c..8bfd159f5 100644 --- a/front/src/modules/ui/board/states/selectors/canPersistBoardCardFieldsScopedFamilySelector.ts +++ b/front/src/modules/ui/board/states/selectors/canPersistBoardCardFieldsScopedFamilySelector.ts @@ -8,10 +8,16 @@ import { savedBoardCardFieldsFamilyState } from '../savedBoardCardFieldsFamilySt export const canPersistBoardCardFieldsScopedFamilySelector = selectorFamily({ key: 'canPersistBoardCardFieldsScopedFamilySelector', get: - ([scopeId, viewId]: [string, string | undefined]) => + ({ + recoilScopeId, + viewId, + }: { + recoilScopeId: string; + viewId: string | undefined; + }) => ({ get }) => !isDeeplyEqual( get(savedBoardCardFieldsFamilyState(viewId)), - get(boardCardFieldsScopedState(scopeId)), + get(boardCardFieldsScopedState(recoilScopeId)), ), }); diff --git a/front/src/modules/ui/board/types/BoardOptions.ts b/front/src/modules/ui/board/types/BoardOptions.ts index 849247657..cac2c1956 100644 --- a/front/src/modules/ui/board/types/BoardOptions.ts +++ b/front/src/modules/ui/board/types/BoardOptions.ts @@ -1,4 +1,4 @@ -import type { ComponentType, Context } from 'react'; +import type { ComponentType } from 'react'; import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity'; import { SortDefinition } from '@/ui/view-bar/types/SortDefinition'; @@ -6,7 +6,7 @@ import { PipelineProgress } from '~/generated/graphql'; export type BoardOptions = { newCardComponent: React.ReactNode; - CardComponent: ComponentType<{ scopeContext: Context }>; + CardComponent: ComponentType; filters: FilterDefinitionByEntity[]; sorts: SortDefinition[]; }; diff --git a/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx b/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx index 04029f0c4..b92f684e4 100644 --- a/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx +++ b/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx @@ -30,7 +30,7 @@ const meta: Meta = { component: FilledContextMenu, decorators: [ (Story) => ( - + diff --git a/front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx index 0c19985ad..98104e56a 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx @@ -16,7 +16,7 @@ export function GenericEditableBooleanField() { ) as FieldDefinition; return ( - + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx index 460db14e6..830bd5285 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx @@ -30,7 +30,7 @@ export function GenericEditableDateField() { ); return ( - + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx index 9bac42bf4..c0d12be64 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx @@ -30,7 +30,7 @@ export function GenericEditableNumberField() { ); return ( - + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx b/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx index db348c056..86147decd 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx @@ -30,7 +30,7 @@ export function GenericEditablePhoneField() { ); return ( - + + + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx index 9ecb700f6..0caf23787 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx @@ -30,7 +30,7 @@ export function GenericEditableURLField() { ); return ( - + ; return ( - + } diff --git a/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx b/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx index fbbf94362..6d82b522a 100644 --- a/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx +++ b/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx @@ -29,7 +29,7 @@ export function DateEditableField({ const internalDateValue = value ? parseDate(value).toJSDate() : null; return ( - + ; +}; -export function EntityTable({ onImport, updateEntityMutation }: OwnProps) { +export function EntityTable({ updateEntityMutation }: OwnProps) { const tableBodyRef = useRef(null); const setRowSelectedState = useSetRowSelectedState(); @@ -126,7 +123,7 @@ export function EntityTable({ onImport, updateEntityMutation }: OwnProps) { - +
diff --git a/front/src/modules/ui/table/editable-cell/type/components/__stories__/PhoneCellEdit.stories.tsx b/front/src/modules/ui/table/editable-cell/type/components/__stories__/PhoneCellEdit.stories.tsx index 30e0d33be..a3d74fdc9 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/__stories__/PhoneCellEdit.stories.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/__stories__/PhoneCellEdit.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { autoFocus: true, }, parameters: { - recoilScopeContext: TableRecoilScopeContext, + customRecoilScopeContext: TableRecoilScopeContext, }, }; diff --git a/front/src/modules/ui/table/hooks/useMoveSoftFocus.ts b/front/src/modules/ui/table/hooks/useMoveSoftFocus.ts index 30a1c5db2..de84ff23d 100644 --- a/front/src/modules/ui/table/hooks/useMoveSoftFocus.ts +++ b/front/src/modules/ui/table/hooks/useMoveSoftFocus.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { numberOfTableRowsState } from '../states/numberOfTableRowsState'; import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; @@ -11,7 +11,7 @@ import { useSetSoftFocusPosition } from './useSetSoftFocusPosition'; // TODO: stories export function useMoveSoftFocus() { - const tableScopeId = useContextScopeId(TableRecoilScopeContext); + const tableScopeId = useRecoilScopeId(TableRecoilScopeContext); const setSoftFocusPosition = useSetSoftFocusPosition(); const moveUp = useRecoilCallback( diff --git a/front/src/modules/ui/table/hooks/useSetEntityTableData.ts b/front/src/modules/ui/table/hooks/useSetEntityTableData.ts index 1b6a0140b..55708f13f 100644 --- a/front/src/modules/ui/table/hooks/useSetEntityTableData.ts +++ b/front/src/modules/ui/table/hooks/useSetEntityTableData.ts @@ -4,7 +4,7 @@ import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSele import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState'; import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState'; import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition'; @@ -16,7 +16,7 @@ import { numberOfTableRowsState } from '../states/numberOfTableRowsState'; export function useSetEntityTableData() { const resetTableRowSelection = useResetTableRowSelection(); - const tableContextScopeId = useContextScopeId(TableRecoilScopeContext); + const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext); return useRecoilCallback( ({ set, snapshot }) => diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx index efcbbf23b..3257ffec1 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx @@ -10,12 +10,10 @@ import { TableOptionsDropdownButton } from './TableOptionsDropdownButton'; import { TableOptionsDropdownContent } from './TableOptionsDropdownContent'; type TableOptionsDropdownProps = { - onImport?: () => void; customHotkeyScope: HotkeyScope; }; export function TableOptionsDropdown({ - onImport, customHotkeyScope, }: TableOptionsDropdownProps) { const resetViewEditMode = useResetRecoilState(viewEditModeState); @@ -25,7 +23,7 @@ export function TableOptionsDropdown({ buttonComponents={} dropdownHotkeyScope={customHotkeyScope} dropdownId={TableOptionsDropdownId} - dropdownComponents={} + dropdownComponents={} onClickOutside={resetViewEditMode} /> ); diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx index 0214d164b..1f5814fc8 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useContext, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; @@ -13,9 +13,10 @@ import { MenuItem } from '@/ui/menu-item/components/MenuItem'; import { rgba } from '@/ui/theme/constants/colors'; import { textInputStyle } from '@/ui/theme/constants/effects'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection'; +import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView'; import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/currentViewScopedSelector'; import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector'; @@ -30,10 +31,6 @@ import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibl import { tableColumnsScopedState } from '../../states/tableColumnsScopedState'; import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope'; -type TableOptionsDropdownButtonProps = { - onImport?: () => void; -}; - type TableOptionsMenu = 'fields'; const StyledInputContainer = styled.div` @@ -59,11 +56,10 @@ const StyledViewNameInput = styled.input` } `; -export function TableOptionsDropdownContent({ - onImport, -}: TableOptionsDropdownButtonProps) { - const scopeId = useContextScopeId(TableRecoilScopeContext); +export function TableOptionsDropdownContent() { + const scopeId = useRecoilScopeId(TableRecoilScopeContext); + const { onImport } = useContext(ViewBarContext); const { closeDropdownButton } = useDropdownButton({ dropdownId: TableOptionsDropdownId, }); @@ -95,9 +91,7 @@ export function TableOptionsDropdownContent({ const { handleColumnVisibilityChange } = useTableColumns(); - const { upsertView } = useUpsertView({ - scopeContext: TableRecoilScopeContext, - }); + const { upsertView } = useUpsertView(); const handleViewNameSubmit = useRecoilCallback( ({ set, snapshot }) => diff --git a/front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx b/front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx index c0426ea0f..28fb7af57 100644 --- a/front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx +++ b/front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx @@ -3,6 +3,7 @@ import { userEvent, within } from '@storybook/testing-library'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/TableRecoilScopeContext'; @@ -13,10 +14,16 @@ const meta: Meta = { component: TableOptionsDropdown, decorators: [ (Story) => ( - - - - + + + + + + ), ComponentDecorator, diff --git a/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts b/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts index b2caccba6..77c044278 100644 --- a/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts +++ b/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts @@ -8,10 +8,16 @@ import { tableColumnsScopedState } from '../tableColumnsScopedState'; export const canPersistTableColumnsScopedFamilySelector = selectorFamily({ key: 'canPersistTableColumnsScopedFamilySelector', get: - ([scopeId, viewId]: [string, string | undefined]) => + ({ + recoilScopeId, + viewId, + }: { + recoilScopeId: string; + viewId: string | undefined; + }) => ({ get }) => !isDeeplyEqual( get(savedTableColumnsFamilyState(viewId)), - get(tableColumnsScopedState(scopeId)), + get(tableColumnsScopedState(recoilScopeId)), ), }); diff --git a/front/src/modules/ui/table/table-header/components/TableHeader.tsx b/front/src/modules/ui/table/table-header/components/TableHeader.tsx index 1611bdfe7..28c6c4c2b 100644 --- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx +++ b/front/src/modules/ui/table/table-header/components/TableHeader.tsx @@ -3,9 +3,9 @@ import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { ViewBar } from '@/ui/view-bar/components/ViewBar'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState'; @@ -18,21 +18,20 @@ import { canPersistTableColumnsScopedFamilySelector } from '../../states/selecto import { tableColumnsScopedState } from '../../states/tableColumnsScopedState'; import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope'; -export type TableHeaderProps = { - onImport?: () => void; -}; - -export function TableHeader({ onImport }: TableHeaderProps) { +export function TableHeader() { const { onCurrentViewSubmit, ...viewBarContextProps } = useContext(ViewBarContext); - const tableScopeId = useContextScopeId(TableRecoilScopeContext); + const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext); const currentViewId = useRecoilScopedValue( currentViewIdScopedState, TableRecoilScopeContext, ); const canPersistTableColumns = useRecoilValue( - canPersistTableColumnsScopedFamilySelector([tableScopeId, currentViewId]), + canPersistTableColumnsScopedFamilySelector({ + recoilScopeId: tableRecoilScopeId, + viewId: currentViewId, + }), ); const [tableColumns, setTableColumns] = useRecoilScopedState( tableColumnsScopedState, @@ -50,9 +49,9 @@ export function TableHeader({ onImport }: TableHeaderProps) { const savedTableColumns = await snapshot.getPromise( savedTableColumnsFamilyState(viewId), ); - set(tableColumnsScopedState(tableScopeId), savedTableColumns); + set(tableColumnsScopedState(tableRecoilScopeId), savedTableColumns); }, - [tableScopeId], + [tableRecoilScopeId], ); async function handleCurrentViewSubmit() { @@ -64,7 +63,7 @@ export function TableHeader({ onImport }: TableHeaderProps) { } return ( - + } optionsDropdownKey={TableOptionsDropdownId} - scopeContext={TableRecoilScopeContext} /> diff --git a/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx b/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx index d568b4e69..36cee511c 100644 --- a/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx +++ b/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx @@ -1,23 +1,25 @@ -import { Context, useRef } from 'react'; +import { useRef } from 'react'; import { v4 } from 'uuid'; +import { type RecoilScopeContext as RecoilScopeContextType } from '@/types/RecoilScopeContext'; + import { RecoilScopeContext } from '../states/RecoilScopeContext'; export function RecoilScope({ children, scopeId, - SpecificContext, + CustomRecoilScopeContext, }: { children: React.ReactNode; scopeId?: string; - SpecificContext?: Context; + CustomRecoilScopeContext?: RecoilScopeContextType; }) { const currentScopeId = useRef(scopeId ?? v4()); - return SpecificContext ? ( - + return CustomRecoilScopeContext ? ( + {children} - + ) : ( {children} diff --git a/front/src/modules/ui/utilities/recoil-scope/hooks/useContextScopeId.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useContextScopeId.ts deleted file mode 100644 index 272751f39..000000000 --- a/front/src/modules/ui/utilities/recoil-scope/hooks/useContextScopeId.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Context, useContext } from 'react'; - -export function useContextScopeId(SpecificContext: Context) { - const recoilScopeId = useContext(SpecificContext); - - if (!recoilScopeId) - throw new Error( - `Using useContextScopedId outside of the specified context : ${SpecificContext.displayName}, verify that you are using a RecoilScope with the specific context you want to use.`, - ); - - return recoilScopeId; -} diff --git a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopeId.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopeId.ts new file mode 100644 index 000000000..0a452388d --- /dev/null +++ b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopeId.ts @@ -0,0 +1,14 @@ +import { useContext } from 'react'; + +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; + +export function useRecoilScopeId(RecoilScopeContext: RecoilScopeContext) { + const recoilScopeId = useContext(RecoilScopeContext); + + if (!recoilScopeId) + throw new Error( + `Using useRecoilScopeId outside of the specified context : ${RecoilScopeContext.displayName}, verify that you are using a RecoilScope with the specific context you want to use.`, + ); + + return recoilScopeId; +} diff --git a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts index b7881d3dc..41f64dfc6 100644 --- a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts +++ b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts @@ -6,9 +6,11 @@ import { RecoilScopeContext } from '../states/RecoilScopeContext'; export function useRecoilScopedFamilyState( recoilState: (familyUniqueId: string) => RecoilState, uniqueIdInRecoilScope: string, - SpecificContext?: Context, + CustomRecoilScopeContext?: Context, ) { - const recoilScopeId = useContext(SpecificContext ?? RecoilScopeContext); + const recoilScopeId = useContext( + CustomRecoilScopeContext ?? RecoilScopeContext, + ); if (!recoilScopeId) throw new Error( diff --git a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts index 566a3be2b..c97910bfe 100644 --- a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts +++ b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts @@ -5,9 +5,11 @@ import { RecoilScopeContext } from '../states/RecoilScopeContext'; export function useRecoilScopedState( recoilState: (param: string) => RecoilState, - SpecificContext?: Context, + CustomRecoilScopeContext?: Context, ) { - const recoilScopeId = useContext(SpecificContext ?? RecoilScopeContext); + const recoilScopeId = useContext( + CustomRecoilScopeContext ?? RecoilScopeContext, + ); if (!recoilScopeId) throw new Error( diff --git a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts index a3f65ef8f..b683e9b56 100644 --- a/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts +++ b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts @@ -5,9 +5,11 @@ import { RecoilScopeContext } from '../states/RecoilScopeContext'; export function useRecoilScopedValue( recoilState: (param: string) => RecoilState | RecoilValueReadOnly, - SpecificContext?: Context, + CustomRecoilScopeContext?: Context, ) { - const recoilScopeId = useContext(SpecificContext ?? RecoilScopeContext); + const recoilScopeId = useContext( + CustomRecoilScopeContext ?? RecoilScopeContext, + ); if (!recoilScopeId) throw new Error( diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx index e7bfa6a4d..f41cd7e7b 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx @@ -1,25 +1,24 @@ -import { Context } from 'react'; - import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { availableFiltersScopedState } from '../states/availableFiltersScopedState'; import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton'; import { SingleEntityFilterDropdownButton } from './SingleEntityFilterDropdownButton'; type FilterDropdownButtonProps = { - context: Context; hotkeyScope: HotkeyScope; }; export function FilterDropdownButton({ hotkeyScope, - context, }: FilterDropdownButtonProps) { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [availableFilters] = useRecoilScopedState( availableFiltersScopedState, - context, + ViewBarRecoilScopeContext, ); const hasOnlyOneEntityFilter = @@ -30,14 +29,8 @@ export function FilterDropdownButton({ } return hasOnlyOneEntityFilter ? ( - + ) : ( - + ); } diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownDateSearchInput.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownDateSearchInput.tsx index a023560a1..38d5164d6 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownDateSearchInput.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownDateSearchInput.tsx @@ -1,35 +1,31 @@ -import { Context } from 'react'; - -import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { DatePicker } from '@/ui/input/components/DatePicker'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useUpsertFilter } from '@/ui/view-bar/hooks/useUpsertFilter'; import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState'; import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState'; -export function FilterDropdownDateSearchInput({ - context, -}: { - context: Context; -}) { +export function FilterDropdownDateSearchInput() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setIsFilterDropdownUnfolded] = useRecoilScopedState( isFilterDropdownUnfoldedScopedState, - DropdownRecoilScopeContext, + ViewBarRecoilScopeContext, ); - const upsertFilter = useUpsertFilter(context); + const upsertFilter = useUpsertFilter(); function handleChange(date: Date) { if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return; diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchInput.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchInput.tsx index 51157b62a..bae297dba 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchInput.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchInput.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, Context } from 'react'; +import { ChangeEvent } from 'react'; import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; @@ -6,23 +6,26 @@ import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/ import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState'; import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState'; -export function FilterDropdownEntitySearchInput({ - context, -}: { - context: Context; -}) { +import { useViewBarContext } from '../hooks/useViewBarContext'; + +export function FilterDropdownEntitySearchInput() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [filterDropdownSearchInput, setFilterDropdownSearchInput] = - useRecoilScopedState(filterDropdownSearchInputScopedState, context); + useRecoilScopedState( + filterDropdownSearchInputScopedState, + ViewBarRecoilScopeContext, + ); return ( filterDefinitionUsedInDropdown && diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchSelect.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchSelect.tsx index 06504198d..293811f7a 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchSelect.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchSelect.tsx @@ -11,30 +11,35 @@ import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/ import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState'; import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState'; +import { useViewBarContext } from '../hooks/useViewBarContext'; + export function FilterDropdownEntitySearchSelect({ entitiesForSelect, - context, }: { entitiesForSelect: EntitiesForMultipleEntitySelect; - context: React.Context; }) { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDropdownSelectedEntityId, setFilterDropdownSelectedEntityId] = - useRecoilScopedState(filterDropdownSelectedEntityIdScopedState, context); + useRecoilScopedState( + filterDropdownSelectedEntityIdScopedState, + ViewBarRecoilScopeContext, + ); const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); - const upsertFilter = useUpsertFilter(context); - const removeFilter = useRemoveFilter(context); + const upsertFilter = useUpsertFilter(); + const removeFilter = useRemoveFilter(); - const filterCurrentlyEdited = useFilterCurrentlyEdited(context); + const filterCurrentlyEdited = useFilterCurrentlyEdited(); function handleUserSelected( selectedEntity: EntityForSelect | null | undefined, diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownEntitySelect.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownEntitySelect.tsx index 0095e3d02..212bd408c 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownEntitySelect.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownEntitySelect.tsx @@ -1,19 +1,16 @@ -import { Context } from 'react'; - import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; -export function FilterDropdownEntitySelect({ - context, -}: { - context: Context; -}) { +export function FilterDropdownEntitySelect() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); if (filterDefinitionUsedInDropdown?.type !== 'entity') { diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownFilterSelect.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownFilterSelect.tsx index 5ae588685..25cd8fa10 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownFilterSelect.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownFilterSelect.tsx @@ -1,5 +1,3 @@ -import { Context } from 'react'; - import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; import { MenuItem } from '@/ui/menu-item/components/MenuItem'; @@ -7,35 +5,34 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { availableFiltersScopedState } from '../states/availableFiltersScopedState'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; import { getOperandsForFilterType } from '../utils/getOperandsForFilterType'; -export function FilterDropdownFilterSelect({ - context, -}: { - context: Context; -}) { +export function FilterDropdownFilterSelect() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [, setFilterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setSelectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setFilterDropdownSearchInput] = useRecoilScopedState( filterDropdownSearchInputScopedState, - context, + ViewBarRecoilScopeContext, ); const availableFilters = useRecoilScopedValue( availableFiltersScopedState, - context, + ViewBarRecoilScopeContext, ); const setHotkeyScope = useSetHotkeyScope(); diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownNumberSearchInput.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownNumberSearchInput.tsx index b95451667..54aa89720 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownNumberSearchInput.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownNumberSearchInput.tsx @@ -1,30 +1,29 @@ -import { ChangeEvent, Context } from 'react'; +import { ChangeEvent } from 'react'; import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRemoveFilter } from '../hooks/useRemoveFilter'; import { useUpsertFilter } from '../hooks/useUpsertFilter'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; -export function FilterDropdownNumberSearchInput({ - context, -}: { - context: Context; -}) { +export function FilterDropdownNumberSearchInput() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); - const upsertFilter = useUpsertFilter(context); - const removeFilter = useRemoveFilter(context); + const upsertFilter = useUpsertFilter(); + const removeFilter = useRemoveFilter(); return ( filterDefinitionUsedInDropdown && diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownOperandButton.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownOperandButton.tsx index 0dde7dd27..94e820640 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownOperandButton.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownOperandButton.tsx @@ -1,21 +1,18 @@ -import { Context } from 'react'; - import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader'; import { IconChevronDown } from '@/ui/icon'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; import { getOperandLabel } from '../utils/getOperandLabel'; -export function FilterDropdownOperandButton({ - context, -}: { - context: Context; -}) { +export function FilterDropdownOperandButton() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [ @@ -23,7 +20,7 @@ export function FilterDropdownOperandButton({ setIsFilterDropdownOperandSelectUnfolded, ] = useRecoilScopedState( isFilterDropdownOperandSelectUnfoldedScopedState, - context, + ViewBarRecoilScopeContext, ); if (isFilterDropdownOperandSelectUnfolded) { diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownOperandSelect.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownOperandSelect.tsx index 115e83a90..2b5d02f5b 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownOperandSelect.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownOperandSelect.tsx @@ -1,11 +1,10 @@ -import { Context } from 'react'; - import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; import { MenuItem } from '@/ui/menu-item/components/MenuItem'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited'; import { useUpsertFilter } from '../hooks/useUpsertFilter'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; @@ -13,19 +12,17 @@ import { FilterOperand } from '../types/FilterOperand'; import { getOperandLabel } from '../utils/getOperandLabel'; import { getOperandsForFilterType } from '../utils/getOperandsForFilterType'; -export function FilterDropdownOperandSelect({ - context, -}: { - context: Context; -}) { +export function FilterDropdownOperandSelect() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setSelectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const operandsForFilterType = getOperandsForFilterType( @@ -37,12 +34,12 @@ export function FilterDropdownOperandSelect({ setIsFilterDropdownOperandSelectUnfolded, ] = useRecoilScopedState( isFilterDropdownOperandSelectUnfoldedScopedState, - context, + ViewBarRecoilScopeContext, ); - const filterCurrentlyEdited = useFilterCurrentlyEdited(context); + const filterCurrentlyEdited = useFilterCurrentlyEdited(); - const upsertFilter = useUpsertFilter(context); + const upsertFilter = useUpsertFilter(); function handleOperangeChange(newOperand: FilterOperand) { setSelectedOperandInDropdown(newOperand); diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownTextSearchInput.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownTextSearchInput.tsx index 148f8308b..ea7eb58f4 100644 --- a/front/src/modules/ui/view-bar/components/FilterDropdownTextSearchInput.tsx +++ b/front/src/modules/ui/view-bar/components/FilterDropdownTextSearchInput.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, Context } from 'react'; +import { ChangeEvent } from 'react'; import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; @@ -6,32 +6,34 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited'; import { useRemoveFilter } from '../hooks/useRemoveFilter'; import { useUpsertFilter } from '../hooks/useUpsertFilter'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; -export function FilterDropdownTextSearchInput({ - context, -}: { - context: Context; -}) { +export function FilterDropdownTextSearchInput() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [filterDropdownSearchInput, setFilterDropdownSearchInput] = - useRecoilScopedState(filterDropdownSearchInputScopedState, context); + useRecoilScopedState( + filterDropdownSearchInputScopedState, + ViewBarRecoilScopeContext, + ); - const upsertFilter = useUpsertFilter(context); - const removeFilter = useRemoveFilter(context); + const upsertFilter = useUpsertFilter(); + const removeFilter = useRemoveFilter(); - const filterCurrentlyEdited = useFilterCurrentlyEdited(context); + const filterCurrentlyEdited = useFilterCurrentlyEdited(); return ( filterDefinitionUsedInDropdown && diff --git a/front/src/modules/ui/view-bar/components/MultipleFiltersButton.tsx b/front/src/modules/ui/view-bar/components/MultipleFiltersButton.tsx index 3195da139..51744fc03 100644 --- a/front/src/modules/ui/view-bar/components/MultipleFiltersButton.tsx +++ b/front/src/modules/ui/view-bar/components/MultipleFiltersButton.tsx @@ -1,42 +1,39 @@ -import { Context } from 'react'; - import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton'; import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { FilterDropdownId } from '../constants/FilterDropdownId'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState'; import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; -type OwnProps = { - context: Context; -}; +export function MultipleFiltersButton() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); -export function MultipleFiltersButton({ context }: OwnProps) { const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({ dropdownId: FilterDropdownId, }); const [, setIsFilterDropdownOperandSelectUnfolded] = useRecoilScopedState( isFilterDropdownOperandSelectUnfoldedScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setFilterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setFilterDropdownSearchInput] = useRecoilScopedState( filterDropdownSearchInputScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setSelectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const resetState = () => { diff --git a/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx b/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx index 572bcc2ee..bfd84761f 100644 --- a/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx +++ b/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx @@ -1,5 +1,3 @@ -import { Context } from 'react'; - import { DropdownButton } from '@/ui/dropdown/components/DropdownButton'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; @@ -9,19 +7,17 @@ import { MultipleFiltersButton } from './MultipleFiltersButton'; import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent'; type MultipleFiltersDropdownButtonProps = { - context: Context; hotkeyScope: HotkeyScope; }; export function MultipleFiltersDropdownButton({ - context, hotkeyScope, }: MultipleFiltersDropdownButtonProps) { return ( } - dropdownComponents={} + buttonComponents={} + dropdownComponents={} dropdownHotkeyScope={hotkeyScope} /> ); diff --git a/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownContent.tsx b/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownContent.tsx index a2e9ab7fb..5018fae3b 100644 --- a/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownContent.tsx +++ b/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownContent.tsx @@ -1,9 +1,8 @@ -import { Context } from 'react'; - import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu'; import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState'; import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState'; @@ -17,54 +16,50 @@ import { FilterDropdownOperandButton } from './FilterDropdownOperandButton'; import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect'; import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput'; -export type MultipleFiltersDropdownContentProps = { - context: Context; -}; +export function MultipleFiltersDropdownContent() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); -export function MultipleFiltersDropdownContent({ - context, -}: MultipleFiltersDropdownContentProps) { const [isFilterDropdownOperandSelectUnfolded] = useRecoilScopedState( isFilterDropdownOperandSelectUnfoldedScopedState, - context, + ViewBarRecoilScopeContext, ); const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [selectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); return ( <> {!filterDefinitionUsedInDropdown ? ( - + ) : isFilterDropdownOperandSelectUnfolded ? ( - + ) : ( selectedOperandInDropdown && ( <> - + {filterDefinitionUsedInDropdown.type === 'text' && ( - + )} {filterDefinitionUsedInDropdown.type === 'number' && ( - + )} {filterDefinitionUsedInDropdown.type === 'date' && ( - + )} {filterDefinitionUsedInDropdown.type === 'entity' && ( - + )} {filterDefinitionUsedInDropdown.type === 'entity' && ( - + )} ) diff --git a/front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx b/front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx index 11adfac23..c90334e02 100644 --- a/front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx +++ b/front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx @@ -1,4 +1,3 @@ -import { Context } from 'react'; import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; @@ -14,6 +13,7 @@ import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filte import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState'; import { StyledHeaderDropdownButton } from '../../dropdown/components/StyledHeaderDropdownButton'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { availableFiltersScopedState } from '../states/availableFiltersScopedState'; import { filtersScopedState } from '../states/filtersScopedState'; import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState'; @@ -30,17 +30,17 @@ const StyledDropdownButtonContainer = styled.div` `; export function SingleEntityFilterDropdownButton({ - context, hotkeyScope, }: { - context: Context; hotkeyScope: HotkeyScope; }) { const theme = useTheme(); + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [availableFilters] = useRecoilScopedState( availableFiltersScopedState, - context, + ViewBarRecoilScopeContext, ); const availableFilter = availableFilters[0]; @@ -50,21 +50,24 @@ export function SingleEntityFilterDropdownButton({ DropdownRecoilScopeContext, ); - const [filters] = useRecoilScopedState(filtersScopedState, context); + const [filters] = useRecoilScopedState( + filtersScopedState, + ViewBarRecoilScopeContext, + ); const [, setFilterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setFilterDropdownSearchInput] = useRecoilScopedState( filterDropdownSearchInputScopedState, - context, + ViewBarRecoilScopeContext, ); const [, setSelectedOperandInDropdown] = useRecoilScopedState( selectedOperandInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); React.useEffect(() => { @@ -105,8 +108,8 @@ export function SingleEntityFilterDropdownButton({ {isFilterDropdownUnfolded && ( handleIsUnfoldedChange(false)}> - - + + )} diff --git a/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx b/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx index b3c44fe24..838474c29 100644 --- a/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx +++ b/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx @@ -1,4 +1,4 @@ -import { Context, useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { produce } from 'immer'; import { LightButton } from '@/ui/button/components/LightButton'; @@ -14,21 +14,20 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { SortDropdownId } from '../constants/SortDropdownId'; +import { useViewBarContext } from '../hooks/useViewBarContext'; import { availableSortsScopedState } from '../states/availableSortsScopedState'; import { sortsScopedState } from '../states/sortsScopedState'; import { SortDefinition } from '../types/SortDefinition'; import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection'; export type SortDropdownButtonProps = { - context: Context; hotkeyScope: HotkeyScope; isPrimaryButton?: boolean; }; -export function SortDropdownButton({ - hotkeyScope, - context, -}: SortDropdownButtonProps) { +export function SortDropdownButton({ hotkeyScope }: SortDropdownButtonProps) { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + const [isSortDirectionMenuUnfolded, setIsSortDirectionMenuUnfolded] = useState(false); @@ -42,10 +41,13 @@ export function SortDropdownButton({ const [availableSorts] = useRecoilScopedState( availableSortsScopedState, - context, + ViewBarRecoilScopeContext, ); - const [sorts, setSorts] = useRecoilScopedState(sortsScopedState, context); + const [sorts, setSorts] = useRecoilScopedState( + sortsScopedState, + ViewBarRecoilScopeContext, + ); const isSortSelected = sorts.length > 0; diff --git a/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx b/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx index 4457fe5f8..5daeb5822 100644 --- a/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx +++ b/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx @@ -1,4 +1,4 @@ -import { type Context, useCallback, useContext, useState } from 'react'; +import { useCallback, useContext, useState } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; @@ -10,8 +10,8 @@ import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/Style import { IconChevronDown, IconPlus } from '@/ui/icon'; import { MenuItem } from '@/ui/menu-item/components/MenuItem'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState'; import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState'; import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState'; @@ -32,37 +32,51 @@ const StyledContainer = styled.div` export type UpdateViewButtonGroupProps = { hotkeyScope: string; onViewEditModeChange?: () => void; - scopeContext: Context; }; export const UpdateViewButtonGroup = ({ hotkeyScope, onViewEditModeChange, - scopeContext, }: UpdateViewButtonGroupProps) => { const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const { canPersistViewFields, onCurrentViewSubmit } = - useContext(ViewBarContext); - const recoilScopeId = useContextScopeId(scopeContext); + const { + canPersistViewFields, + onCurrentViewSubmit, + ViewBarRecoilScopeContext, + } = useContext(ViewBarContext); + + const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext); const currentViewId = useRecoilScopedValue( currentViewIdScopedState, - scopeContext, + ViewBarRecoilScopeContext, ); - const filters = useRecoilScopedValue(filtersScopedState, scopeContext); + const filters = useRecoilScopedValue( + filtersScopedState, + ViewBarRecoilScopeContext, + ); const setSavedFilters = useSetRecoilState( savedFiltersFamilyState(currentViewId), ); const canPersistFilters = useRecoilValue( - canPersistFiltersScopedFamilySelector([recoilScopeId, currentViewId]), + canPersistFiltersScopedFamilySelector({ + recoilScopeId, + viewId: currentViewId, + }), ); - const sorts = useRecoilScopedValue(sortsScopedState, scopeContext); + const sorts = useRecoilScopedValue( + sortsScopedState, + ViewBarRecoilScopeContext, + ); const setSavedSorts = useSetRecoilState(savedSortsFamilyState(currentViewId)); const canPersistSorts = useRecoilValue( - canPersistSortsScopedFamilySelector([recoilScopeId, currentViewId]), + canPersistSortsScopedFamilySelector({ + recoilScopeId, + viewId: currentViewId, + }), ); const setViewEditMode = useSetRecoilState(viewEditModeState); diff --git a/front/src/modules/ui/view-bar/components/ViewBar.tsx b/front/src/modules/ui/view-bar/components/ViewBar.tsx index 3f5cef062..edeae0ac8 100644 --- a/front/src/modules/ui/view-bar/components/ViewBar.tsx +++ b/front/src/modules/ui/view-bar/components/ViewBar.tsx @@ -1,4 +1,4 @@ -import type { Context, ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton'; import { TopBar } from '@/ui/top-bar/TopBar'; @@ -9,21 +9,19 @@ import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope'; import { FilterDropdownButton } from './FilterDropdownButton'; import { SortDropdownButton } from './SortDropdownButton'; import { UpdateViewButtonGroup } from './UpdateViewButtonGroup'; -import ViewBarDetails from './ViewBarDetails'; +import { ViewBarDetails } from './ViewBarDetails'; import { ViewsDropdownButton } from './ViewsDropdownButton'; export type ViewBarProps = { className?: string; optionsDropdownButton: ReactNode; optionsDropdownKey: string; - scopeContext: Context; }; export const ViewBar = ({ className, optionsDropdownButton, optionsDropdownKey, - scopeContext, }: ViewBarProps) => { const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({ dropdownId: optionsDropdownKey, @@ -36,7 +34,6 @@ export const ViewBar = ({ } displayBottomBorder={false} @@ -44,10 +41,8 @@ export const ViewBar = ({ <> @@ -56,13 +51,11 @@ export const ViewBar = ({ } bottomComponent={ } /> diff --git a/front/src/modules/ui/view-bar/components/ViewBarDetails.tsx b/front/src/modules/ui/view-bar/components/ViewBarDetails.tsx index f721a1a53..454bf2b7d 100644 --- a/front/src/modules/ui/view-bar/components/ViewBarDetails.tsx +++ b/front/src/modules/ui/view-bar/components/ViewBarDetails.tsx @@ -1,11 +1,11 @@ -import { type Context, type ReactNode, useContext } from 'react'; +import { type ReactNode, useContext } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icon/index'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { ViewBarContext } from '../contexts/ViewBarContext'; import { useRemoveFilter } from '../hooks/useRemoveFilter'; @@ -24,7 +24,6 @@ import { AddFilterFromDropdownButton } from './AddFilterFromDetailsButton'; import SortOrFilterChip from './SortOrFilterChip'; export type ViewBarDetailsProps = { - context: Context; hasFilterButton?: boolean; rightComponent?: ReactNode; }; @@ -97,19 +96,23 @@ const StyledAddFilterContainer = styled.div` z-index: 5; `; -function ViewBarDetails({ - context, +export function ViewBarDetails({ hasFilterButton = false, rightComponent, }: ViewBarDetailsProps) { - const { canPersistViewFields, onViewBarReset } = useContext(ViewBarContext); - const recoilScopeId = useContextScopeId(context); + const { canPersistViewFields, onViewBarReset, ViewBarRecoilScopeContext } = + useContext(ViewBarContext); - const currentViewId = useRecoilScopedValue(currentViewIdScopedState, context); + const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext); + + const currentViewId = useRecoilScopedValue( + currentViewIdScopedState, + ViewBarRecoilScopeContext, + ); const [filters, setFilters] = useRecoilScopedState( filtersScopedState, - context, + ViewBarRecoilScopeContext, ); const savedFilters = useRecoilValue( @@ -120,16 +123,25 @@ function ViewBarDetails({ const [availableFilters] = useRecoilScopedState( availableFiltersScopedState, - context, + ViewBarRecoilScopeContext, ); const canPersistFilters = useRecoilValue( - canPersistFiltersScopedFamilySelector([recoilScopeId, currentViewId]), + canPersistFiltersScopedFamilySelector({ + recoilScopeId, + viewId: currentViewId, + }), ); - const [sorts, setSorts] = useRecoilScopedState(sortsScopedState, context); + const [sorts, setSorts] = useRecoilScopedState( + sortsScopedState, + ViewBarRecoilScopeContext, + ); const canPersistSorts = useRecoilValue( - canPersistSortsScopedFamilySelector([recoilScopeId, currentViewId]), + canPersistSortsScopedFamilySelector({ + recoilScopeId, + viewId: currentViewId, + }), ); const canPersistView = @@ -137,7 +149,7 @@ function ViewBarDetails({ const [isViewBarExpanded] = useRecoilScopedState( isViewBarExpandedScopedState, - context, + ViewBarRecoilScopeContext, ); const filtersWithDefinition = filters.map((filter) => { @@ -151,7 +163,8 @@ function ViewBarDetails({ }; }); - const removeFilter = useRemoveFilter(context); + const removeFilter = useRemoveFilter(); + function handleCancelClick() { onViewBarReset?.(); setFilters(savedFilters); @@ -231,5 +244,3 @@ function ViewBarDetails({ ); } - -export default ViewBarDetails; diff --git a/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx b/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx index 3f8136fab..a0f066f54 100644 --- a/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx +++ b/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx @@ -1,4 +1,4 @@ -import { type Context, type MouseEvent, useContext } from 'react'; +import { type MouseEvent, useContext } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilCallback, useSetRecoilState } from 'recoil'; @@ -19,9 +19,9 @@ import { import { MenuItem } from '@/ui/menu-item/components/MenuItem'; import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState'; import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState'; import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState'; @@ -72,24 +72,27 @@ const StyledViewName = styled.span` export type ViewsDropdownButtonProps = { hotkeyScope: HotkeyScope; onViewEditModeChange?: () => void; - scopeContext: Context; }; export const ViewsDropdownButton = ({ hotkeyScope, onViewEditModeChange, - scopeContext, }: ViewsDropdownButtonProps) => { const theme = useTheme(); - const { defaultViewName, onViewSelect } = useContext(ViewBarContext); - const recoilScopeId = useContextScopeId(scopeContext); + const { defaultViewName, onViewSelect, ViewBarRecoilScopeContext } = + useContext(ViewBarContext); + + const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext); const currentView = useRecoilScopedValue( currentViewScopedSelector, - scopeContext, + ViewBarRecoilScopeContext, + ); + const [views] = useRecoilScopedState( + viewsScopedState, + ViewBarRecoilScopeContext, ); - const [views] = useRecoilScopedState(viewsScopedState, scopeContext); const { isDropdownButtonOpen, closeDropdownButton, toggleDropdownButton } = useDropdownButton({ @@ -134,7 +137,7 @@ export const ViewsDropdownButton = ({ closeDropdownButton(); }; - const { removeView } = useRemoveView({ scopeContext }); + const { removeView } = useRemoveView(); const handleDeleteViewButtonClick = async ( event: MouseEvent, diff --git a/front/src/modules/ui/view-bar/contexts/ViewBarContext.ts b/front/src/modules/ui/view-bar/contexts/ViewBarContext.ts index 66ae8630d..aa42a0d19 100644 --- a/front/src/modules/ui/view-bar/contexts/ViewBarContext.ts +++ b/front/src/modules/ui/view-bar/contexts/ViewBarContext.ts @@ -1,5 +1,7 @@ import { createContext } from 'react'; +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; + import type { View } from '../types/View'; export const ViewBarContext = createContext<{ @@ -11,4 +13,8 @@ export const ViewBarContext = createContext<{ onViewEdit?: (view: View) => void | Promise; onViewRemove?: (viewId: string) => void | Promise; onViewSelect?: (viewId: string) => void | Promise; -}>({}); + onImport?: () => void | Promise; + ViewBarRecoilScopeContext: RecoilScopeContext; +}>({ + ViewBarRecoilScopeContext: createContext(null), +}); diff --git a/front/src/modules/ui/view-bar/hooks/useFilterCurrentlyEdited.ts b/front/src/modules/ui/view-bar/hooks/useFilterCurrentlyEdited.ts index 81be332ce..7fae435b3 100644 --- a/front/src/modules/ui/view-bar/hooks/useFilterCurrentlyEdited.ts +++ b/front/src/modules/ui/view-bar/hooks/useFilterCurrentlyEdited.ts @@ -1,16 +1,23 @@ -import { Context, useMemo } from 'react'; +import { useMemo } from 'react'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; import { filtersScopedState } from '../states/filtersScopedState'; -export function useFilterCurrentlyEdited(context: Context) { - const [filters] = useRecoilScopedState(filtersScopedState, context); +import { useViewBarContext } from './useViewBarContext'; + +export function useFilterCurrentlyEdited() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + + const [filters] = useRecoilScopedState( + filtersScopedState, + ViewBarRecoilScopeContext, + ); const [filterDefinitionUsedInDropdown] = useRecoilScopedState( filterDefinitionUsedInDropdownScopedState, - context, + ViewBarRecoilScopeContext, ); return useMemo(() => { diff --git a/front/src/modules/ui/view-bar/hooks/useRemoveFilter.ts b/front/src/modules/ui/view-bar/hooks/useRemoveFilter.ts index 4f71721f4..9f3bdeb06 100644 --- a/front/src/modules/ui/view-bar/hooks/useRemoveFilter.ts +++ b/front/src/modules/ui/view-bar/hooks/useRemoveFilter.ts @@ -1,11 +1,17 @@ -import { Context } from 'react'; +import { useContext } from 'react'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { ViewBarContext } from '../contexts/ViewBarContext'; import { filtersScopedState } from '../states/filtersScopedState'; -export function useRemoveFilter(context: Context) { - const [, setFilters] = useRecoilScopedState(filtersScopedState, context); +export function useRemoveFilter() { + const { ViewBarRecoilScopeContext } = useContext(ViewBarContext); + + const [, setFilters] = useRecoilScopedState( + filtersScopedState, + ViewBarRecoilScopeContext, + ); return function removeFilter(filterKey: string) { setFilters((filters) => { diff --git a/front/src/modules/ui/view-bar/hooks/useRemoveView.ts b/front/src/modules/ui/view-bar/hooks/useRemoveView.ts index 8f9f66da9..4c558b61b 100644 --- a/front/src/modules/ui/view-bar/hooks/useRemoveView.ts +++ b/front/src/modules/ui/view-bar/hooks/useRemoveView.ts @@ -1,19 +1,17 @@ -import { type Context, useContext } from 'react'; +import { useContext } from 'react'; import { useRecoilCallback } from 'recoil'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { ViewBarContext } from '../contexts/ViewBarContext'; import { currentViewIdScopedState } from '../states/currentViewIdScopedState'; import { viewsScopedState } from '../states/viewsScopedState'; -export const useRemoveView = ({ - scopeContext, -}: { - scopeContext: Context; -}) => { - const { onViewRemove } = useContext(ViewBarContext); - const recoilScopeId = useContextScopeId(scopeContext); +export const useRemoveView = () => { + const { onViewRemove, ViewBarRecoilScopeContext } = + useContext(ViewBarContext); + + const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext); const removeView = useRecoilCallback( ({ set, snapshot }) => diff --git a/front/src/modules/ui/view-bar/hooks/useUpsertFilter.ts b/front/src/modules/ui/view-bar/hooks/useUpsertFilter.ts index 5caf5cfa2..11a468ddf 100644 --- a/front/src/modules/ui/view-bar/hooks/useUpsertFilter.ts +++ b/front/src/modules/ui/view-bar/hooks/useUpsertFilter.ts @@ -1,4 +1,3 @@ -import { Context } from 'react'; import { produce } from 'immer'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; @@ -6,8 +5,15 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi import { filtersScopedState } from '../states/filtersScopedState'; import { Filter } from '../types/Filter'; -export function useUpsertFilter(context: Context) { - const [, setFilters] = useRecoilScopedState(filtersScopedState, context); +import { useViewBarContext } from './useViewBarContext'; + +export function useUpsertFilter() { + const { ViewBarRecoilScopeContext } = useViewBarContext(); + + const [, setFilters] = useRecoilScopedState( + filtersScopedState, + ViewBarRecoilScopeContext, + ); return function upsertFilter(filterToUpsert: Filter) { setFilters((filters) => { diff --git a/front/src/modules/ui/view-bar/hooks/useUpsertView.ts b/front/src/modules/ui/view-bar/hooks/useUpsertView.ts index d7eed35c4..5fe2e6040 100644 --- a/front/src/modules/ui/view-bar/hooks/useUpsertView.ts +++ b/front/src/modules/ui/view-bar/hooks/useUpsertView.ts @@ -1,9 +1,9 @@ -import { type Context, useContext } from 'react'; +import { useContext } from 'react'; import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil'; import { v4 } from 'uuid'; -import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId'; import { ViewBarContext } from '../contexts/ViewBarContext'; import { currentViewIdScopedState } from '../states/currentViewIdScopedState'; @@ -16,16 +16,19 @@ import { sortsScopedState } from '../states/sortsScopedState'; import { viewEditModeState } from '../states/viewEditModeState'; import { viewsScopedState } from '../states/viewsScopedState'; -export const useUpsertView = ({ - scopeContext, -}: { - scopeContext: Context; -}) => { - const { onViewCreate, onViewEdit } = useContext(ViewBarContext); - const recoilScopeId = useContextScopeId(scopeContext); +export const useUpsertView = () => { + const { onViewCreate, onViewEdit, ViewBarRecoilScopeContext } = + useContext(ViewBarContext); + const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext); - const filters = useRecoilScopedValue(filtersScopedState, scopeContext); - const sorts = useRecoilScopedValue(sortsScopedState, scopeContext); + const filters = useRecoilScopedValue( + filtersScopedState, + ViewBarRecoilScopeContext, + ); + const sorts = useRecoilScopedValue( + sortsScopedState, + ViewBarRecoilScopeContext, + ); const viewEditMode = useRecoilValue(viewEditModeState); const resetViewEditMode = useResetRecoilState(viewEditModeState); diff --git a/front/src/modules/ui/view-bar/hooks/useViewBarContext.ts b/front/src/modules/ui/view-bar/hooks/useViewBarContext.ts new file mode 100644 index 000000000..78ef85aff --- /dev/null +++ b/front/src/modules/ui/view-bar/hooks/useViewBarContext.ts @@ -0,0 +1,7 @@ +import { useContext } from 'react'; + +import { ViewBarContext } from '../contexts/ViewBarContext'; + +export const useViewBarContext = () => { + return useContext(ViewBarContext); +}; diff --git a/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts b/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts index 1373925e2..9bba37e10 100644 --- a/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts +++ b/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts @@ -8,10 +8,16 @@ import { savedFiltersFamilyState } from '../savedFiltersFamilyState'; export const canPersistFiltersScopedFamilySelector = selectorFamily({ key: 'canPersistFiltersScopedFamilySelector', get: - ([scopeId, viewId]: [string, string | undefined]) => + ({ + recoilScopeId, + viewId, + }: { + recoilScopeId: string; + viewId: string | undefined; + }) => ({ get }) => !isDeeplyEqual( get(savedFiltersFamilyState(viewId)), - get(filtersScopedState(scopeId)), + get(filtersScopedState(recoilScopeId)), ), }); diff --git a/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts b/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts index b68a6a4b2..5a5673915 100644 --- a/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts +++ b/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts @@ -8,10 +8,16 @@ import { sortsScopedState } from '../sortsScopedState'; export const canPersistSortsScopedFamilySelector = selectorFamily({ key: 'canPersistSortsScopedFamilySelector', get: - ([scopeId, viewId]: [string, string | undefined]) => + ({ + recoilScopeId, + viewId, + }: { + recoilScopeId: string; + viewId: string | undefined; + }) => ({ get }) => !isDeeplyEqual( get(savedSortsFamilyState(viewId)), - get(sortsScopedState(scopeId)), + get(sortsScopedState(recoilScopeId)), ), }); diff --git a/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx b/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx index fae07d046..3a1fc9183 100644 --- a/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx +++ b/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx @@ -46,9 +46,6 @@ export function FilterDropdownUserSearchSelect({ }); return ( - + ); } diff --git a/front/src/modules/views/hooks/useBoardViewFields.ts b/front/src/modules/views/hooks/useBoardViewFields.ts index 019c40ae2..e77f509b9 100644 --- a/front/src/modules/views/hooks/useBoardViewFields.ts +++ b/front/src/modules/views/hooks/useBoardViewFields.ts @@ -1,6 +1,6 @@ -import { type Context } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; import { availableBoardCardFieldsScopedState } from '@/ui/board/states/availableBoardCardFieldsScopedState'; import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState'; import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState'; @@ -35,23 +35,26 @@ const toViewFieldInput = ( export const useBoardViewFields = ({ objectId, fieldDefinitions, - scopeContext, skipFetch, + RecoilScopeContext, }: { objectId: 'company' | 'person'; fieldDefinitions: ViewFieldDefinition[]; - scopeContext: Context; skipFetch?: boolean; + RecoilScopeContext: RecoilScopeContext; }) => { const currentViewId = useRecoilScopedValue( currentViewIdScopedState, - scopeContext, + RecoilScopeContext, ); const [availableBoardCardFields, setAvailableBoardCardFields] = - useRecoilScopedState(availableBoardCardFieldsScopedState, scopeContext); + useRecoilScopedState( + availableBoardCardFieldsScopedState, + RecoilScopeContext, + ); const [boardCardFields, setBoardCardFields] = useRecoilScopedState( boardCardFieldsScopedState, - scopeContext, + RecoilScopeContext, ); const setSavedBoardCardFields = useSetRecoilState( savedBoardCardFieldsFamilyState(currentViewId), diff --git a/front/src/modules/views/hooks/useBoardViews.ts b/front/src/modules/views/hooks/useBoardViews.ts index 28b1ec2dc..dc86082cf 100644 --- a/front/src/modules/views/hooks/useBoardViews.ts +++ b/front/src/modules/views/hooks/useBoardViews.ts @@ -1,5 +1,4 @@ -import type { Context } from 'react'; - +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState'; import type { ViewFieldDefinition, @@ -18,41 +17,41 @@ import { useViewSorts } from './useViewSorts'; export const useBoardViews = ({ fieldDefinitions, objectId, - scopeContext, + RecoilScopeContext, }: { fieldDefinitions: ViewFieldDefinition[]; objectId: 'company'; - scopeContext: Context; + RecoilScopeContext: RecoilScopeContext; }) => { const boardCardFields = useRecoilScopedValue( boardCardFieldsScopedState, - scopeContext, + RecoilScopeContext, ); - const filters = useRecoilScopedValue(filtersScopedState, scopeContext); - const sorts = useRecoilScopedValue(sortsScopedState, scopeContext); + const filters = useRecoilScopedValue(filtersScopedState, RecoilScopeContext); + const sorts = useRecoilScopedValue(sortsScopedState, RecoilScopeContext); const { createView, deleteView, isFetchingViews, updateView } = useViews({ objectId, onViewCreate: handleViewCreate, type: ViewType.Pipeline, - scopeContext, + RecoilScopeContext, }); const { createViewFields, persistCardFields } = useBoardViewFields({ objectId, fieldDefinitions, - scopeContext, skipFetch: isFetchingViews, + RecoilScopeContext, }); const { createViewFilters, persistFilters } = useViewFilters({ - scopeContext, skipFetch: isFetchingViews, + RecoilScopeContext, }); const { createViewSorts, persistSorts } = useViewSorts({ - scopeContext, skipFetch: isFetchingViews, + RecoilScopeContext, }); async function handleViewCreate(viewId: string) { diff --git a/front/src/modules/views/hooks/useTableViews.ts b/front/src/modules/views/hooks/useTableViews.ts index ff878a547..bddc3dfdb 100644 --- a/front/src/modules/views/hooks/useTableViews.ts +++ b/front/src/modules/views/hooks/useTableViews.ts @@ -33,7 +33,7 @@ export const useTableViews = ({ objectId, onViewCreate: handleViewCreate, type: ViewType.Table, - scopeContext: TableRecoilScopeContext, + RecoilScopeContext: TableRecoilScopeContext, }); const { createViewFields, persistColumns } = useTableViewFields({ objectId, @@ -41,11 +41,11 @@ export const useTableViews = ({ skipFetch: isFetchingViews, }); const { createViewFilters, persistFilters } = useViewFilters({ - scopeContext: TableRecoilScopeContext, + RecoilScopeContext: TableRecoilScopeContext, skipFetch: isFetchingViews, }); const { createViewSorts, persistSorts } = useViewSorts({ - scopeContext: TableRecoilScopeContext, + RecoilScopeContext: TableRecoilScopeContext, skipFetch: isFetchingViews, }); diff --git a/front/src/modules/views/hooks/useViewFilters.ts b/front/src/modules/views/hooks/useViewFilters.ts index 8fe856346..feb4e9c5a 100644 --- a/front/src/modules/views/hooks/useViewFilters.ts +++ b/front/src/modules/views/hooks/useViewFilters.ts @@ -1,6 +1,7 @@ -import { Context, useCallback } from 'react'; +import { useCallback } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState'; @@ -18,23 +19,23 @@ import { import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; export const useViewFilters = ({ - scopeContext, + RecoilScopeContext, skipFetch, }: { - scopeContext: Context; + RecoilScopeContext: RecoilScopeContext; skipFetch?: boolean; }) => { const currentViewId = useRecoilScopedValue( currentViewIdScopedState, - scopeContext, + RecoilScopeContext, ); const [filters, setFilters] = useRecoilScopedState( filtersScopedState, - scopeContext, + RecoilScopeContext, ); const [availableFilters] = useRecoilScopedState( availableFiltersScopedState, - scopeContext, + RecoilScopeContext, ); const [, setSavedFilters] = useRecoilState( savedFiltersFamilyState(currentViewId), diff --git a/front/src/modules/views/hooks/useViewSorts.ts b/front/src/modules/views/hooks/useViewSorts.ts index 210979ccd..bc903b6d4 100644 --- a/front/src/modules/views/hooks/useViewSorts.ts +++ b/front/src/modules/views/hooks/useViewSorts.ts @@ -1,6 +1,7 @@ -import { Context, useCallback } from 'react'; +import { useCallback } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState'; @@ -19,23 +20,23 @@ import { import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; export const useViewSorts = ({ - scopeContext, + RecoilScopeContext, skipFetch, }: { - scopeContext: Context; + RecoilScopeContext: RecoilScopeContext; skipFetch?: boolean; }) => { const currentViewId = useRecoilScopedValue( currentViewIdScopedState, - scopeContext, + RecoilScopeContext, ); const [sorts, setSorts] = useRecoilScopedState( sortsScopedState, - scopeContext, + RecoilScopeContext, ); const [availableSorts] = useRecoilScopedState( availableSortsScopedState, - scopeContext, + RecoilScopeContext, ); const [, setSavedSorts] = useRecoilState( savedSortsFamilyState(currentViewId), diff --git a/front/src/modules/views/hooks/useViews.ts b/front/src/modules/views/hooks/useViews.ts index 2d263c156..ef974b6c5 100644 --- a/front/src/modules/views/hooks/useViews.ts +++ b/front/src/modules/views/hooks/useViews.ts @@ -1,7 +1,7 @@ -import type { Context } from 'react'; import { getOperationName } from '@apollo/client/utilities'; import { useRecoilCallback } from 'recoil'; +import { RecoilScopeContext } from '@/types/RecoilScopeContext'; import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState'; import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; @@ -24,21 +24,21 @@ import { GET_VIEWS } from '../graphql/queries/getViews'; export const useViews = ({ objectId, onViewCreate, - scopeContext, + RecoilScopeContext, type, }: { objectId: 'company' | 'person'; onViewCreate?: (viewId: string) => Promise; - scopeContext: Context; + RecoilScopeContext: RecoilScopeContext; type: ViewType; }) => { const [currentViewId, setCurrentViewId] = useRecoilScopedState( currentViewIdScopedState, - scopeContext, + RecoilScopeContext, ); const [views, setViews] = useRecoilScopedState( viewsScopedState, - scopeContext, + RecoilScopeContext, ); const [createViewMutation] = useCreateViewMutation(); diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 2de1ab3a3..119e1f95e 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -58,7 +58,7 @@ export function Companies() { - + @@ -66,7 +66,7 @@ export function Companies() { diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index ff3e7f1e2..bb1b635bc 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -18,7 +18,7 @@ export function CompaniesMockMode() { - + diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx index 1d5fe310f..f7edf90e5 100644 --- a/front/src/pages/companies/CompanyShow.tsx +++ b/front/src/pages/companies/CompanyShow.tsx @@ -63,7 +63,7 @@ export function CompanyShow() { hasBackButton Icon={IconBuildingSkyscraper} > - + - + - + @@ -52,7 +52,7 @@ export function Opportunities() { [] label: 'Company', Icon: IconBuildingSkyscraper, type: 'entity', - entitySelectComponent: ( - - ), + entitySelectComponent: , }, { key: 'pointOfContactId', label: 'Point of contact', Icon: IconUser, type: 'entity', - entitySelectComponent: ( - - ), + entitySelectComponent: , }, ]; diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index d205a5653..19d010d80 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -54,7 +54,7 @@ export function People() { - + @@ -62,7 +62,7 @@ export function People() { diff --git a/front/src/pages/people/PersonShow.tsx b/front/src/pages/people/PersonShow.tsx index 3c8cd126a..bb62aa75c 100644 --- a/front/src/pages/people/PersonShow.tsx +++ b/front/src/pages/people/PersonShow.tsx @@ -78,7 +78,7 @@ export function PersonShow() { - + - + [] = [ label: 'Company', Icon: IconBuildingSkyscraper, type: 'entity', - entitySelectComponent: ( - - ), + // TODO: replace this with a component that selects the dropdown to use based on the entity type + entitySelectComponent: , }, { key: 'phone', diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/tasks/Tasks.tsx index b613bfa99..c6e1c55b5 100644 --- a/front/src/pages/tasks/Tasks.tsx +++ b/front/src/pages/tasks/Tasks.tsx @@ -13,6 +13,7 @@ import { TabList } from '@/ui/tab/components/TabList'; import { TopBar } from '@/ui/top-bar/TopBar'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownButton'; +import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { TasksEffect } from './TasksEffect'; @@ -47,35 +48,41 @@ export function Tasks() { return ( - - + + - - - + + + + + } + rightComponent={ + - - } - rightComponent={ - - } - /> - - + } + /> + + + diff --git a/front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx b/front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx index 926d08f23..86b59fd04 100644 --- a/front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx +++ b/front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx @@ -6,7 +6,9 @@ export const ComponentWithRecoilScopeDecorator: Decorator = ( Story, context, ) => ( - + );