From f2e872ce3f8f8868b4c485544a9a0219748f3a22 Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Thu, 10 Aug 2023 17:02:47 +0200 Subject: [PATCH 1/8] - context menu vertical --- .../ui/action-bar/components/ActionBar.tsx | 45 ++++++++++++++++--- .../components/EntityTableActionBarButton.tsx | 5 ++- 2 files changed, 42 insertions(+), 8 deletions(-) diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index ff36ab093..72f7d8361 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -15,21 +15,46 @@ type StyledContainerProps = { position: PositionType; }; -const StyledContainer = styled.div` +const StyledContainerContextMenu = styled.div` align-items: center; background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.md}; bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; box-shadow: ${({ theme }) => theme.boxShadow.strong}; + + left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; + padding-bottom: ${({ theme }) => theme.spacing(1)}; + padding-left: ${({ theme }) => theme.spacing(1)}; + padding-right: ${({ theme }) => theme.spacing(1)}; + padding-top: ${({ theme }) => theme.spacing(1)}; + position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; + top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; + + transform: translateX(-50%); + width: 160px; + z-index: 1; + + div { + justify-content: left; + } +`; + +const StyledContainerActionBar = styled.div` + align-items: center; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.medium}; + border-radius: ${({ theme }) => theme.border.radius.md}; + bottom: 38px; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; display: flex; height: 48px; - left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; + left: 50%; padding-left: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)}; - position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; - top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; + position: absolute; + top: auto; transform: translateX(-50%); z-index: 1; @@ -57,10 +82,16 @@ export function ActionBar({ children, selectedIds }: OwnProps) { if (selectedIds.length === 0) { return null; } - + if (position.x && position.y) { + return ( + + {children} + + ); + } return ( - + {children} - + ); } diff --git a/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx b/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx index 911995198..523efe511 100644 --- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx @@ -27,7 +27,10 @@ const StyledButton = styled.div` user-select: none; &:hover { - background: ${({ theme }) => theme.background.tertiary}; + background: ${({ theme, type }) => + type === 'warning' + ? theme.tag.background.red + : theme.background.tertiary}; } `; From b76f01d930dfc8241457556f436e943eeb3c17ef Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Thu, 10 Aug 2023 21:30:25 +0200 Subject: [PATCH 2/8] - refactor context menu and action bar into seperate components - fix styling context menu --- ...leActionBarButtonCreateActivityCompany.tsx | 13 ++-- ...bleActionBarButtonDeleteCompanies copy.tsx | 54 ++++++++++++++++ ...extMenuEntryCreateActivityCompany copy.tsx | 29 +++++++++ ...bleActionBarButtonCreateActivityPeople.tsx | 13 ++-- ...ableActionContextMenuEntryDeletePeople.tsx | 53 +++++++++++++++ ...leContextMenuEntryCreateActivityPeople.tsx | 29 +++++++++ .../ui/action-bar/components/ActionBar.tsx | 40 +----------- .../context-menu/components/ContextMenu.tsx | 64 +++++++++++++++++++ .../types/PositionType.ts | 0 .../TableActionBarButtonOpenComments.tsx | 17 ----- .../TableActionBarButtonOpenTasks.tsx | 17 ----- .../components/EntityTableContextMenu.tsx | 16 +++++ .../EntityTableContextMenuEntry.tsx | 58 +++++++++++++++++ .../table/states/contextMenuPositionState.ts | 2 +- front/src/pages/companies/Companies.tsx | 7 ++ front/src/pages/people/People.tsx | 7 ++ 16 files changed, 337 insertions(+), 82 deletions(-) create mode 100644 front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx create mode 100644 front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx create mode 100644 front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx create mode 100644 front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx create mode 100644 front/src/modules/ui/context-menu/components/ContextMenu.tsx rename front/src/modules/ui/{action-bar => context-menu}/types/PositionType.ts (100%) delete mode 100644 front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenComments.tsx delete mode 100644 front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenTasks.tsx create mode 100644 front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx create mode 100644 front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx diff --git a/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx b/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx index cfb5eefda..769690cf0 100644 --- a/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx +++ b/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx @@ -1,6 +1,7 @@ +import { IconCheckbox, IconNotes } from '@tabler/icons-react'; + import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments'; -import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks'; +import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; import { ActivityType, CommentableType } from '~/generated/graphql'; export function TableActionBarButtonCreateActivityCompany() { @@ -13,10 +14,14 @@ export function TableActionBarButtonCreateActivityCompany() { return ( <> - } onClick={() => handleButtonClick(ActivityType.Note)} /> - } onClick={() => handleButtonClick(ActivityType.Task)} /> diff --git a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx b/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx new file mode 100644 index 000000000..04469aa2e --- /dev/null +++ b/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx @@ -0,0 +1,54 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useRecoilState, useRecoilValue } from 'recoil'; + +import { GET_PIPELINES } from '@/pipeline/queries'; +import { IconTrash } from '@/ui/icon/index'; +import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; +import { useDeleteManyCompaniesMutation } from '~/generated/graphql'; + +export function TableContextMenuEntryDeleteCompanies() { + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteCompanies] = useDeleteManyCompaniesMutation({ + refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], + }); + + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteCompanies({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyCompany: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return ( + } + type="warning" + onClick={handleDeleteClick} + /> + ); +} diff --git a/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx b/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx new file mode 100644 index 000000000..76d1fd4f9 --- /dev/null +++ b/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx @@ -0,0 +1,29 @@ +import { IconCheckbox, IconNotes } from '@tabler/icons-react'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; +import { ActivityType, CommentableType } from '~/generated/graphql'; + +export function TableContextMenuEntryCreateActivityCompany() { + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleButtonClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Company); + } + + return ( + <> + } + onClick={() => handleButtonClick(ActivityType.Note)} + /> + } + onClick={() => handleButtonClick(ActivityType.Task)} + /> + + ); +} diff --git a/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx b/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx index 9d8e271ca..2a9f065ce 100644 --- a/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx +++ b/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx @@ -1,6 +1,7 @@ +import { IconCheckbox, IconNotes } from '@tabler/icons-react'; + import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments'; -import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks'; +import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; import { ActivityType, CommentableType } from '~/generated/graphql'; export function TableActionBarButtonCreateActivityPeople() { @@ -13,10 +14,14 @@ export function TableActionBarButtonCreateActivityPeople() { return ( <> - } onClick={() => handleButtonClick(ActivityType.Note)} /> - } onClick={() => handleButtonClick(ActivityType.Task)} /> diff --git a/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx b/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx new file mode 100644 index 000000000..b03edf0b6 --- /dev/null +++ b/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx @@ -0,0 +1,53 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useRecoilState, useRecoilValue } from 'recoil'; + +import { GET_PEOPLE } from '@/people/queries'; +import { IconTrash } from '@/ui/icon/index'; +import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; +import { useDeleteManyPersonMutation } from '~/generated/graphql'; + +export function TableContextMenuEntryDeletePeople() { + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteManyPerson] = useDeleteManyPersonMutation({ + refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], + }); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteManyPerson({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyPerson: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return ( + } + type="warning" + onClick={handleDeleteClick} + /> + ); +} diff --git a/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx b/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx new file mode 100644 index 000000000..8aa70de10 --- /dev/null +++ b/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx @@ -0,0 +1,29 @@ +import { IconCheckbox, IconNotes } from '@tabler/icons-react'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; +import { ActivityType, CommentableType } from '~/generated/graphql'; + +export function TableContextMenuEntryCreateActivityPeople() { + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleButtonClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Person); + } + + return ( + <> + } + onClick={() => handleButtonClick(ActivityType.Note)} + /> + } + onClick={() => handleButtonClick(ActivityType.Task)} + /> + + ); +} diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index 72f7d8361..8de0c70de 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -4,42 +4,11 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'; import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; -import { PositionType } from '../types/PositionType'; - type OwnProps = { children: React.ReactNode | React.ReactNode[]; selectedIds: string[]; }; -type StyledContainerProps = { - position: PositionType; -}; - -const StyledContainerContextMenu = styled.div` - align-items: center; - background: ${({ theme }) => theme.background.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.md}; - bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; - box-shadow: ${({ theme }) => theme.boxShadow.strong}; - - left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; - padding-bottom: ${({ theme }) => theme.spacing(1)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-right: ${({ theme }) => theme.spacing(1)}; - padding-top: ${({ theme }) => theme.spacing(1)}; - position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; - top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; - - transform: translateX(-50%); - width: 160px; - z-index: 1; - - div { - justify-content: left; - } -`; - const StyledContainerActionBar = styled.div` align-items: center; background: ${({ theme }) => theme.background.secondary}; @@ -79,16 +48,9 @@ export function ActionBar({ children, selectedIds }: OwnProps) { }; }, [setContextMenuPosition]); - if (selectedIds.length === 0) { + if (selectedIds.length === 0 || position.x || position.y) { return null; } - if (position.x && position.y) { - return ( - - {children} - - ); - } return ( {children} diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx new file mode 100644 index 000000000..b9867e5b1 --- /dev/null +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -0,0 +1,64 @@ +import React, { useEffect } from 'react'; +import styled from '@emotion/styled'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; + +import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; + +import { PositionType } from '../types/PositionType'; + +type OwnProps = { + children: React.ReactNode | React.ReactNode[]; + selectedIds: string[]; +}; + +type StyledContainerProps = { + position: PositionType; +}; + +const StyledContainerContextMenu = styled.div` + align-items: flex-start; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.light}; + border-radius: ${({ theme }) => theme.border.radius.md}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; + display: flex; + flex-direction: column; + gap: 1px; + + left: ${(props) => `${props.position.x}px`}; + position: fixed; + top: ${(props) => `${props.position.y}px`}; + + transform: translateX(-50%); + width: 160px; + z-index: 1; +`; + +export function ContextMenu({ children, selectedIds }: OwnProps) { + const position = useRecoilValue(contextMenuPositionState); + const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + + useEffect(() => { + function handleClickOutside(event: MouseEvent) { + if (!(event.target as HTMLElement).closest('.action-bar')) { + setContextMenuPosition({ x: null, y: null }); + } + } + + document.addEventListener('mousedown', handleClickOutside); + + // Cleanup the event listener when the component unmounts + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [setContextMenuPosition]); + + if (selectedIds.length === 0 || (!position.x && !position.y)) { + return null; + } + return ( + + {children} + + ); +} diff --git a/front/src/modules/ui/action-bar/types/PositionType.ts b/front/src/modules/ui/context-menu/types/PositionType.ts similarity index 100% rename from front/src/modules/ui/action-bar/types/PositionType.ts rename to front/src/modules/ui/context-menu/types/PositionType.ts diff --git a/front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenComments.tsx b/front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenComments.tsx deleted file mode 100644 index 8da8db328..000000000 --- a/front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenComments.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { IconNotes } from '@/ui/icon/index'; - -import { EntityTableActionBarButton } from './EntityTableActionBarButton'; - -type OwnProps = { - onClick: () => void; -}; - -export function TableActionBarButtonToggleComments({ onClick }: OwnProps) { - return ( - } - onClick={onClick} - /> - ); -} diff --git a/front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenTasks.tsx b/front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenTasks.tsx deleted file mode 100644 index b407ec239..000000000 --- a/front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenTasks.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { IconCheckbox } from '@/ui/icon/index'; - -import { EntityTableActionBarButton } from './EntityTableActionBarButton'; - -type OwnProps = { - onClick: () => void; -}; - -export function TableActionBarButtonToggleTasks({ onClick }: OwnProps) { - return ( - } - onClick={onClick} - /> - ); -} diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx new file mode 100644 index 000000000..846e88560 --- /dev/null +++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { useRecoilValue } from 'recoil'; + +import { ContextMenu } from '@/ui/context-menu/components/ContextMenu'; + +import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; + +type OwnProps = { + children: React.ReactNode | React.ReactNode[]; +}; + +export function EntityTableContextMenu({ children }: OwnProps) { + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + + return {children}; +} diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx new file mode 100644 index 000000000..3adfb049e --- /dev/null +++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx @@ -0,0 +1,58 @@ +import { ReactNode } from 'react'; +import styled from '@emotion/styled'; + +type OwnProps = { + icon: ReactNode; + label: string; + type?: 'standard' | 'warning'; + onClick: () => void; +}; + +type StyledButtonProps = { + type: 'standard' | 'warning'; +}; + +const StyledButton = styled.div` + align-items: center; + align-self: stretch; + border-radius: ${({ theme }) => theme.border.radius.sm}; + color: ${(props) => + props.type === 'warning' + ? props.theme.color.red + : props.theme.font.color.secondary}; + cursor: pointer; + display: flex; + gap: ${({ theme }) => theme.spacing(2)}; + + height: 32px; + padding-left: ${({ theme }) => theme.spacing(1)}; + padding-right: ${({ theme }) => theme.spacing(1)}; + transition: background 0.1s ease; + user-select: none; + + &:hover { + background: ${({ theme, type }) => + type === 'warning' + ? theme.tag.background.red + : theme.background.tertiary}; + } +`; + +const StyledButtonLabel = styled.div` + font-weight: ${({ theme }) => theme.font.weight.medium}; + margin-left: ${({ theme }) => theme.spacing(2)}; +`; + +export function EntityTableContextMenuEntry({ + label, + icon, + type = 'standard', + onClick, +}: OwnProps) { + return ( + + {icon} + {label} + + ); +} diff --git a/front/src/modules/ui/table/states/contextMenuPositionState.ts b/front/src/modules/ui/table/states/contextMenuPositionState.ts index 1832437b5..7cd20a1c6 100644 --- a/front/src/modules/ui/table/states/contextMenuPositionState.ts +++ b/front/src/modules/ui/table/states/contextMenuPositionState.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -import { PositionType } from '@/ui/action-bar/types/PositionType'; +import { PositionType } from '@/ui/context-menu/types/PositionType'; export const contextMenuPositionState = atom({ key: 'contextMenuPositionState', diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 79d04fd69..95741730c 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -7,10 +7,13 @@ import { v4 } from 'uuid'; import { CompanyTable } from '@/companies/table/components/CompanyTable'; import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany'; import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; +import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy'; +import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy'; import { SEARCH_COMPANY_QUERY } from '@/search/queries/search'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; +import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; import { TableContext } from '@/ui/table/states/TableContext'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -72,6 +75,10 @@ export function Companies() { + + + + diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 4ed08ad2c..127b6f736 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -6,9 +6,12 @@ import { v4 } from 'uuid'; import { PeopleTable } from '@/people/table/components/PeopleTable'; import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople'; import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople'; +import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople'; +import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople'; import { IconUser } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; +import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; import { TableContext } from '@/ui/table/states/TableContext'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -67,6 +70,10 @@ export function People() { + + + + ); From accfaafcfaa0c0de600e5feeec5a6e8d364e7928 Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Fri, 11 Aug 2023 10:27:31 +0200 Subject: [PATCH 3/8] - refactored to use multiple states --- .../companies/components/CompanyBoardCard.tsx | 5 +- .../TableContextMenuEntryDeleteCompanies.tsx} | 6 +- .../companies/hooks/useOpenActionBar.tsx | 81 +++++++++++++++++++ .../companies/hooks/useOpenContextMenu.tsx | 81 +++++++++++++++++++ ...leActionBarButtonCreateActivityCompany.tsx | 29 ------- .../TableActionBarButtonDeleteCompanies.tsx | 54 ------------- ...extMenuEntryCreateActivityCompany copy.tsx | 29 ------- .../modules/people/hooks/useOpenActionBar.tsx | 81 +++++++++++++++++++ .../people/hooks/useOpenContextMenu.tsx | 81 +++++++++++++++++++ ...bleActionBarButtonCreateActivityPeople.tsx | 29 ------- .../TableActionBarButtonDeletePeople.tsx | 53 ------------ ...ableActionContextMenuEntryDeletePeople.tsx | 53 ------------ ...leContextMenuEntryCreateActivityPeople.tsx | 29 ------- .../ui/action-bar/components/ActionBar.tsx | 38 +++------ .../components/ActionBarEntry.tsx} | 12 ++- .../__stories__/ActionBar.stories.tsx | 2 +- .../BoardActionBarButtonDeleteBoardCard.tsx | 6 +- .../ui/board/components/EntityBoard.tsx | 5 +- .../board/components/EntityBoardActionBar.tsx | 8 +- .../modules/ui/board/hooks/useActionBar.tsx | 30 +++++++ .../context-menu/components/ContextMenu.tsx | 42 +++++----- .../components/ContextMenuEntry.tsx} | 12 ++- .../components/EntityTableActionBar.tsx | 8 +- .../ui/table/components/CheckboxCell.tsx | 9 +-- .../ui/table/components/EntityTableCell.tsx | 5 +- .../components/EntityTableContextMenu.tsx | 9 +-- .../ui/table/states/ActionBarEntriesState.ts | 7 ++ .../ui/table/states/ActionBarIsOpenState.ts | 6 ++ .../table/states/ContextMenuEntriesState.ts | 7 ++ .../ui/table/states/ContextMenuIsOpenState.ts | 6 ++ front/src/pages/companies/Companies.tsx | 25 +++--- .../src/pages/companies/CompaniesMockMode.tsx | 7 +- .../src/pages/opportunities/Opportunities.tsx | 25 ++---- front/src/pages/people/People.tsx | 25 +++--- 34 files changed, 486 insertions(+), 419 deletions(-) rename front/src/modules/companies/{table/components/TableActionBarButtonDeleteCompanies copy.tsx => hooks/TableContextMenuEntryDeleteCompanies.tsx} (90%) create mode 100644 front/src/modules/companies/hooks/useOpenActionBar.tsx create mode 100644 front/src/modules/companies/hooks/useOpenContextMenu.tsx delete mode 100644 front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx delete mode 100644 front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx delete mode 100644 front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx create mode 100644 front/src/modules/people/hooks/useOpenActionBar.tsx create mode 100644 front/src/modules/people/hooks/useOpenContextMenu.tsx delete mode 100644 front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx delete mode 100644 front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx delete mode 100644 front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx delete mode 100644 front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx rename front/src/modules/ui/{table/action-bar/components/EntityTableActionBarButton.tsx => action-bar/components/ActionBarEntry.tsx} (80%) create mode 100644 front/src/modules/ui/board/hooks/useActionBar.tsx rename front/src/modules/ui/{table/context-menu/components/EntityTableContextMenuEntry.tsx => context-menu/components/ContextMenuEntry.tsx} (82%) create mode 100644 front/src/modules/ui/table/states/ActionBarEntriesState.ts create mode 100644 front/src/modules/ui/table/states/ActionBarIsOpenState.ts create mode 100644 front/src/modules/ui/table/states/ContextMenuEntriesState.ts create mode 100644 front/src/modules/ui/table/states/ContextMenuIsOpenState.ts diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index e92ecd150..a03070240 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -1,6 +1,6 @@ import { ReactNode, useContext } from 'react'; import styled from '@emotion/styled'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext'; import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState'; @@ -12,6 +12,7 @@ import { Checkbox, CheckboxVariant, } from '@/ui/input/checkbox/components/Checkbox'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext'; import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql'; import { getLogoUrlFromDomainName } from '~/utils'; @@ -114,10 +115,12 @@ export function CompanyBoardCard() { const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState); const selected = selectedBoardCards.includes(boardCardId ?? ''); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); function setSelected(isSelected: boolean) { if (isSelected) { setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']); + setActionBarOpenState(true); } else { setSelectedBoardCards( selectedBoardCards.filter((id) => id !== boardCardId), diff --git a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx b/front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx similarity index 90% rename from front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx rename to front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx index 04469aa2e..62745ffbe 100644 --- a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx +++ b/front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx @@ -2,8 +2,8 @@ import { getOperationName } from '@apollo/client/utilities'; import { useRecoilState, useRecoilValue } from 'recoil'; import { GET_PIPELINES } from '@/pipeline/queries'; +import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; import { IconTrash } from '@/ui/icon/index'; -import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; @@ -44,10 +44,10 @@ export function TableContextMenuEntryDeleteCompanies() { } return ( - } - type="warning" + type="danger" onClick={handleDeleteClick} /> ); diff --git a/front/src/modules/companies/hooks/useOpenActionBar.tsx b/front/src/modules/companies/hooks/useOpenActionBar.tsx new file mode 100644 index 000000000..290a980bc --- /dev/null +++ b/front/src/modules/companies/hooks/useOpenActionBar.tsx @@ -0,0 +1,81 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { GET_PIPELINES } from '@/pipeline/queries'; +import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; +import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; +import { + ActivityType, + CommentableType, + useDeleteManyCompaniesMutation, +} from '~/generated/graphql'; + +export function useOpenActionBar() { + const setActionBarEntries = useSetRecoilState(actionBarEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleActivityClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Company); + } + + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteCompanies] = useDeleteManyCompaniesMutation({ + refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], + }); + + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteCompanies({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyCompany: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return () => { + setActionBarEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/companies/hooks/useOpenContextMenu.tsx b/front/src/modules/companies/hooks/useOpenContextMenu.tsx new file mode 100644 index 000000000..ed8765a48 --- /dev/null +++ b/front/src/modules/companies/hooks/useOpenContextMenu.tsx @@ -0,0 +1,81 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { GET_PIPELINES } from '@/pipeline/queries'; +import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; +import { + ActivityType, + CommentableType, + useDeleteManyCompaniesMutation, +} from '~/generated/graphql'; + +export function useOpenContextMenu() { + const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleButtonClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Company); + } + + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteCompanies] = useDeleteManyCompaniesMutation({ + refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], + }); + + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteCompanies({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyCompany: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return () => { + setContextMenuEntries([ + } + onClick={() => handleButtonClick(ActivityType.Note)} + />, + } + onClick={() => handleButtonClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx b/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx deleted file mode 100644 index 769690cf0..000000000 --- a/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { IconCheckbox, IconNotes } from '@tabler/icons-react'; - -import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; -import { ActivityType, CommentableType } from '~/generated/graphql'; - -export function TableActionBarButtonCreateActivityCompany() { - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, CommentableType.Company); - } - - return ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx b/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx deleted file mode 100644 index 63d51d09f..000000000 --- a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilState, useRecoilValue } from 'recoil'; - -import { GET_PIPELINES } from '@/pipeline/queries'; -import { IconTrash } from '@/ui/icon/index'; -import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; -import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; -import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { useDeleteManyCompaniesMutation } from '~/generated/graphql'; - -export function TableActionBarButtonDeleteCompanies() { - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteCompanies] = useDeleteManyCompaniesMutation({ - refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], - }); - - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteCompanies({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyCompany: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return ( - } - type="warning" - onClick={handleDeleteClick} - /> - ); -} diff --git a/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx b/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx deleted file mode 100644 index 76d1fd4f9..000000000 --- a/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { IconCheckbox, IconNotes } from '@tabler/icons-react'; - -import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; -import { ActivityType, CommentableType } from '~/generated/graphql'; - -export function TableContextMenuEntryCreateActivityCompany() { - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, CommentableType.Company); - } - - return ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/people/hooks/useOpenActionBar.tsx b/front/src/modules/people/hooks/useOpenActionBar.tsx new file mode 100644 index 000000000..8f425ad8d --- /dev/null +++ b/front/src/modules/people/hooks/useOpenActionBar.tsx @@ -0,0 +1,81 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; +import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; +import { + ActivityType, + CommentableType, + useDeleteManyPersonMutation, +} from '~/generated/graphql'; + +import { GET_PEOPLE } from '../queries'; + +export function useOpenActionBar() { + const setActionBarEntries = useSetRecoilState(actionBarEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleActivityClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Person); + } + + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteManyPerson] = useDeleteManyPersonMutation({ + refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], + }); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteManyPerson({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyPerson: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return () => { + setActionBarEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/people/hooks/useOpenContextMenu.tsx b/front/src/modules/people/hooks/useOpenContextMenu.tsx new file mode 100644 index 000000000..3792bdfac --- /dev/null +++ b/front/src/modules/people/hooks/useOpenContextMenu.tsx @@ -0,0 +1,81 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; +import { + ActivityType, + CommentableType, + useDeleteManyPersonMutation, +} from '~/generated/graphql'; + +import { GET_PEOPLE } from '../queries'; + +export function useOpenContextMenu() { + const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleActivityClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Person); + } + + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteManyPerson] = useDeleteManyPersonMutation({ + refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], + }); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteManyPerson({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyPerson: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return () => { + setContextMenuEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx b/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx deleted file mode 100644 index 2a9f065ce..000000000 --- a/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { IconCheckbox, IconNotes } from '@tabler/icons-react'; - -import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; -import { ActivityType, CommentableType } from '~/generated/graphql'; - -export function TableActionBarButtonCreateActivityPeople() { - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, CommentableType.Person); - } - - return ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx b/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx deleted file mode 100644 index f3bb51f6a..000000000 --- a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilState, useRecoilValue } from 'recoil'; - -import { GET_PEOPLE } from '@/people/queries'; -import { IconTrash } from '@/ui/icon/index'; -import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; -import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; -import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { useDeleteManyPersonMutation } from '~/generated/graphql'; - -export function TableActionBarButtonDeletePeople() { - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteManyPerson] = useDeleteManyPersonMutation({ - refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], - }); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteManyPerson({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyPerson: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return ( - } - type="warning" - onClick={handleDeleteClick} - /> - ); -} diff --git a/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx b/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx deleted file mode 100644 index b03edf0b6..000000000 --- a/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilState, useRecoilValue } from 'recoil'; - -import { GET_PEOPLE } from '@/people/queries'; -import { IconTrash } from '@/ui/icon/index'; -import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; -import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; -import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { useDeleteManyPersonMutation } from '~/generated/graphql'; - -export function TableContextMenuEntryDeletePeople() { - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteManyPerson] = useDeleteManyPersonMutation({ - refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], - }); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteManyPerson({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyPerson: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return ( - } - type="warning" - onClick={handleDeleteClick} - /> - ); -} diff --git a/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx b/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx deleted file mode 100644 index 8aa70de10..000000000 --- a/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { IconCheckbox, IconNotes } from '@tabler/icons-react'; - -import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry'; -import { ActivityType, CommentableType } from '~/generated/graphql'; - -export function TableContextMenuEntryCreateActivityPeople() { - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, CommentableType.Person); - } - - return ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index 8de0c70de..bc33aed4f 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -1,11 +1,12 @@ -import React, { useEffect } from 'react'; +import React, { useRef } from 'react'; import styled from '@emotion/styled'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; -import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; +import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; +import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState'; type OwnProps = { - children: React.ReactNode | React.ReactNode[]; selectedIds: string[]; }; @@ -29,31 +30,18 @@ const StyledContainerActionBar = styled.div` z-index: 1; `; -export function ActionBar({ children, selectedIds }: OwnProps) { - const position = useRecoilValue(contextMenuPositionState); - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); +export function ActionBar({ selectedIds }: OwnProps) { + const actionBarOpen = useRecoilValue(actionBarOpenState); + const contextMenuOpen = useRecoilValue(contextMenuOpenState); + const actionBarEntries = useRecoilValue(actionBarEntriesState); + const wrapperRef = useRef(null); - useEffect(() => { - function handleClickOutside(event: MouseEvent) { - if (!(event.target as HTMLElement).closest('.action-bar')) { - setContextMenuPosition({ x: null, y: null }); - } - } - - document.addEventListener('mousedown', handleClickOutside); - - // Cleanup the event listener when the component unmounts - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [setContextMenuPosition]); - - if (selectedIds.length === 0 || position.x || position.y) { + if (selectedIds.length === 0 || !actionBarOpen || contextMenuOpen) { return null; } return ( - - {children} + + {actionBarEntries} ); } diff --git a/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx b/front/src/modules/ui/action-bar/components/ActionBarEntry.tsx similarity index 80% rename from front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx rename to front/src/modules/ui/action-bar/components/ActionBarEntry.tsx index 523efe511..f9650f7b5 100644 --- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBarEntry.tsx @@ -4,18 +4,18 @@ import styled from '@emotion/styled'; type OwnProps = { icon: ReactNode; label: string; - type?: 'standard' | 'warning'; + type?: 'standard' | 'danger'; onClick: () => void; }; type StyledButtonProps = { - type: 'standard' | 'warning'; + type: 'standard' | 'danger'; }; const StyledButton = styled.div` border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => - props.type === 'warning' + props.type === 'danger' ? props.theme.color.red : props.theme.font.color.secondary}; cursor: pointer; @@ -28,9 +28,7 @@ const StyledButton = styled.div` &:hover { background: ${({ theme, type }) => - type === 'warning' - ? theme.tag.background.red - : theme.background.tertiary}; + type === 'danger' ? theme.tag.background.red : theme.background.tertiary}; } `; @@ -39,7 +37,7 @@ const StyledButtonLabel = styled.div` margin-left: ${({ theme }) => theme.spacing(2)}; `; -export function EntityTableActionBarButton({ +export function ActionBarEntry({ label, icon, type = 'standard', 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 fdb64a245..a828d35d1 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 @@ -8,7 +8,7 @@ const meta: Meta = { title: 'UI/ActionBar/ActionBar', component: ActionBar, decorators: [ComponentDecorator], - args: { children: 'Lorem ipsum', selectedIds: [] }, + args: { selectedIds: [] }, }; export default meta; diff --git a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx index ed68fe778..3048b03f4 100644 --- a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx +++ b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx @@ -1,10 +1,10 @@ import { useRecoilCallback } from 'recoil'; +import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState'; import { boardColumnsState } from '@/ui/board/states/boardColumnsState'; import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState'; import { IconTrash } from '@/ui/icon/index'; -import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; export function BoardActionBarButtonDeleteBoardCard({ onDelete, @@ -51,10 +51,10 @@ export function BoardActionBarButtonDeleteBoardCard({ } return ( - } - type="warning" + type="danger" onClick={handleDeleteClick} /> ); diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index 6f3090887..7cf398deb 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -4,7 +4,7 @@ import { useTheme } from '@emotion/react'; 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 import { IconList } from '@tabler/icons-react'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; import { BoardHeader } from '@/ui/board/components/BoardHeader'; @@ -12,6 +12,7 @@ import { StyledBoard } from '@/ui/board/components/StyledBoard'; import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds'; import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext'; import { SelectedSortType } from '@/ui/filter-n-sort/types/interface'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { @@ -107,10 +108,12 @@ export function EntityBoard({ const [selectedBoardCards, setSelectedBoardCards] = useRecoilState( selectedBoardCardIdsState, ); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); function setRowSelectedState(boardCardId: string, selected: boolean) { if (selected && !selectedBoardCards.includes(boardCardId)) { setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']); + setActionBarOpenState(true); } else if (!selected && selectedBoardCards.includes(boardCardId)) { setSelectedBoardCards( selectedBoardCards.filter((id) => id !== boardCardId), diff --git a/front/src/modules/ui/board/components/EntityBoardActionBar.tsx b/front/src/modules/ui/board/components/EntityBoardActionBar.tsx index 749fc9547..bccd1ff0b 100644 --- a/front/src/modules/ui/board/components/EntityBoardActionBar.tsx +++ b/front/src/modules/ui/board/components/EntityBoardActionBar.tsx @@ -5,11 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar'; import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState'; -type OwnProps = { - children: React.ReactNode | React.ReactNode[]; -}; - -export function EntityBoardActionBar({ children }: OwnProps) { +export function EntityBoardActionBar() { const selectedBoardCards = useRecoilValue(selectedBoardCardIdsState); - return {children}; + return ; } diff --git a/front/src/modules/ui/board/hooks/useActionBar.tsx b/front/src/modules/ui/board/hooks/useActionBar.tsx new file mode 100644 index 000000000..2b8aea3bf --- /dev/null +++ b/front/src/modules/ui/board/hooks/useActionBar.tsx @@ -0,0 +1,30 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useSetRecoilState } from 'recoil'; + +import { GET_PIPELINES } from '@/pipeline/queries'; +import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { useDeleteManyPipelineProgressMutation } from '~/generated/graphql'; + +import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard'; + +export function useOpenActionBar() { + const setActionBarEntries = useSetRecoilState(actionBarEntriesState); + + const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({ + refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], + }); + + async function handleDelete(cardIdsToDelete: string[]) { + await deletePipelineProgress({ + variables: { + ids: cardIdsToDelete, + }, + }); + } + + return () => { + setActionBarEntries([ + , + ]); + }; +} diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx index b9867e5b1..06d587d0b 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -1,13 +1,16 @@ -import React, { useEffect } from 'react'; +import React, { useRef } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; +import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; +import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState'; import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; +import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { PositionType } from '../types/PositionType'; type OwnProps = { - children: React.ReactNode | React.ReactNode[]; selectedIds: string[]; }; @@ -34,31 +37,28 @@ const StyledContainerContextMenu = styled.div` z-index: 1; `; -export function ContextMenu({ children, selectedIds }: OwnProps) { +export function ContextMenu({ selectedIds }: OwnProps) { const position = useRecoilValue(contextMenuPositionState); - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + const contextMenuOpen = useRecoilValue(contextMenuOpenState); + const contextMenuEntries = useRecoilValue(contextMenuEntriesState); + const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); + const wrapperRef = useRef(null); - useEffect(() => { - function handleClickOutside(event: MouseEvent) { - if (!(event.target as HTMLElement).closest('.action-bar')) { - setContextMenuPosition({ x: null, y: null }); - } - } + useListenClickOutside({ + refs: [wrapperRef], + callback: () => { + setContextMenuOpenState(false); + setActionBarOpenState(true); + }, + }); - document.addEventListener('mousedown', handleClickOutside); - - // Cleanup the event listener when the component unmounts - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [setContextMenuPosition]); - - if (selectedIds.length === 0 || (!position.x && !position.y)) { + if (selectedIds.length === 0 || !contextMenuOpen) { return null; } return ( - - {children} + + {contextMenuEntries} ); } diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx similarity index 82% rename from front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx rename to front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx index 3adfb049e..7979b097f 100644 --- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx @@ -4,12 +4,12 @@ import styled from '@emotion/styled'; type OwnProps = { icon: ReactNode; label: string; - type?: 'standard' | 'warning'; + type?: 'standard' | 'danger'; onClick: () => void; }; type StyledButtonProps = { - type: 'standard' | 'warning'; + type: 'standard' | 'danger'; }; const StyledButton = styled.div` @@ -17,7 +17,7 @@ const StyledButton = styled.div` align-self: stretch; border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => - props.type === 'warning' + props.type === 'danger' ? props.theme.color.red : props.theme.font.color.secondary}; cursor: pointer; @@ -32,9 +32,7 @@ const StyledButton = styled.div` &:hover { background: ${({ theme, type }) => - type === 'warning' - ? theme.tag.background.red - : theme.background.tertiary}; + type === 'danger' ? theme.tag.background.red : theme.background.tertiary}; } `; @@ -43,7 +41,7 @@ const StyledButtonLabel = styled.div` margin-left: ${({ theme }) => theme.spacing(2)}; `; -export function EntityTableContextMenuEntry({ +export function ContextMenuEntry({ label, icon, type = 'standard', diff --git a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx index 0159e3dd2..84a42a58e 100644 --- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx +++ b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx @@ -5,12 +5,8 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar'; import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; -type OwnProps = { - children: React.ReactNode | React.ReactNode[]; -}; - -export function EntityTableActionBar({ children }: OwnProps) { +export function EntityTableActionBar() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - return {children}; + return ; } diff --git a/front/src/modules/ui/table/components/CheckboxCell.tsx b/front/src/modules/ui/table/components/CheckboxCell.tsx index 91e06da77..7a92a4a88 100644 --- a/front/src/modules/ui/table/components/CheckboxCell.tsx +++ b/front/src/modules/ui/table/components/CheckboxCell.tsx @@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil'; import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; -import { contextMenuPositionState } from '../states/contextMenuPositionState'; +import { actionBarOpenState } from '../states/ActionBarIsOpenState'; const StyledContainer = styled.div` align-items: center; @@ -18,14 +18,13 @@ const StyledContainer = styled.div` `; export function CheckboxCell() { - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); - + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); const { currentRowSelected, setCurrentRowSelected } = useCurrentRowSelected(); const handleClick = useCallback(() => { setCurrentRowSelected(!currentRowSelected); - setContextMenuPosition({ x: null, y: null }); - }, [currentRowSelected, setContextMenuPosition, setCurrentRowSelected]); + setActionBarOpenState(true); + }, [currentRowSelected, setActionBarOpenState, setCurrentRowSelected]); return ( diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index a68a06e05..9dfc13de4 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -6,23 +6,24 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope' import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; import { ColumnIndexContext } from '../states/ColumnIndexContext'; +import { contextMenuOpenState } from '../states/ContextMenuIsOpenState'; import { contextMenuPositionState } from '../states/contextMenuPositionState'; import { ViewFieldContext } from '../states/ViewFieldContext'; export function EntityTableCell({ cellIndex }: { cellIndex: number }) { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); const { setCurrentRowSelected } = useCurrentRowSelected(); function handleContextMenu(event: React.MouseEvent) { event.preventDefault(); - setCurrentRowSelected(true); - setContextMenuPosition({ x: event.clientX, y: event.clientY, }); + setContextMenuOpenState(true); } const viewField = useContext(ViewFieldContext); diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx index 846e88560..10bbaf088 100644 --- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx +++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx @@ -5,12 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu'; import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; -type OwnProps = { - children: React.ReactNode | React.ReactNode[]; -}; - -export function EntityTableContextMenu({ children }: OwnProps) { +export function EntityTableContextMenu() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - - return {children}; + return ; } diff --git a/front/src/modules/ui/table/states/ActionBarEntriesState.ts b/front/src/modules/ui/table/states/ActionBarEntriesState.ts new file mode 100644 index 000000000..81b436523 --- /dev/null +++ b/front/src/modules/ui/table/states/ActionBarEntriesState.ts @@ -0,0 +1,7 @@ +import { ReactElement } from 'react'; +import { atom } from 'recoil'; + +export const actionBarEntriesState = atom({ + key: 'actionBarEntriesState', + default: [], +}); diff --git a/front/src/modules/ui/table/states/ActionBarIsOpenState.ts b/front/src/modules/ui/table/states/ActionBarIsOpenState.ts new file mode 100644 index 000000000..3d150e978 --- /dev/null +++ b/front/src/modules/ui/table/states/ActionBarIsOpenState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const actionBarOpenState = atom({ + key: 'actionBarOpenState', + default: false, +}); diff --git a/front/src/modules/ui/table/states/ContextMenuEntriesState.ts b/front/src/modules/ui/table/states/ContextMenuEntriesState.ts new file mode 100644 index 000000000..e79628b6a --- /dev/null +++ b/front/src/modules/ui/table/states/ContextMenuEntriesState.ts @@ -0,0 +1,7 @@ +import { ReactElement } from 'react'; +import { atom } from 'recoil'; + +export const contextMenuEntriesState = atom({ + key: 'contextMenuEntriesState', + default: [], +}); diff --git a/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts b/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts new file mode 100644 index 000000000..139bd3af4 --- /dev/null +++ b/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const contextMenuOpenState = atom({ + key: 'contextMenuOpenState', + default: false, +}); diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 95741730c..22cd51e63 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -1,14 +1,13 @@ +import { useEffect } from 'react'; import { getOperationName } from '@apollo/client/utilities'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { v4 } from 'uuid'; +import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar'; +import { useOpenContextMenu } from '@/companies/hooks/useOpenContextMenu'; import { CompanyTable } from '@/companies/table/components/CompanyTable'; -import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany'; -import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; -import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy'; -import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy'; import { SEARCH_COMPANY_QUERY } from '@/search/queries/search'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; @@ -60,6 +59,14 @@ export function Companies() { const theme = useTheme(); + const setContextMenu = useOpenContextMenu(); + const setActionBar = useOpenActionBar(); + + useEffect(() => { + setContextMenu(); + setActionBar(); + }, [setContextMenu, setActionBar]); + return ( <> - - - - - - - - + + diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index bc6ff9af5..2a05100c4 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -2,8 +2,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; -import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany'; -import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; @@ -28,10 +26,7 @@ export function CompaniesMockMode() { - - - - + diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index 4cf3efbb5..1b75ad122 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -1,17 +1,15 @@ -import { useCallback, useState } from 'react'; -import { getOperationName } from '@apollo/client/utilities'; +import { useCallback, useEffect, useState } from 'react'; import { useTheme } from '@emotion/react'; import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard'; import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; import { defaultPipelineProgressOrderBy, - GET_PIPELINES, PipelineProgressesSelectedSortType, } from '@/pipeline/queries'; -import { BoardActionBarButtonDeleteBoardCard } from '@/ui/board/components/BoardActionBarButtonDeleteBoardCard'; import { EntityBoard } from '@/ui/board/components/EntityBoard'; import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar'; +import { useOpenActionBar } from '@/ui/board/hooks/useActionBar'; import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { AvailableFiltersContext } from '@/ui/filter-n-sort/states/AvailableFiltersContext'; @@ -20,7 +18,6 @@ import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer' import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { PipelineProgressOrderByWithRelationInput, - useDeleteManyPipelineProgressMutation, useUpdatePipelineStageMutation, } from '~/generated/graphql'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; @@ -67,17 +64,11 @@ export function Opportunities() { }); } - const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({ - refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], - }); + const setActionBar = useOpenActionBar(); - async function handleDelete(cardIdsToDelete: string[]) { - await deletePipelineProgress({ - variables: { - ids: cardIdsToDelete, - }, - }); - } + useEffect(() => { + setActionBar(); + }, [setActionBar]); return ( - - - + diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 127b6f736..24424412d 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -1,13 +1,12 @@ +import { useEffect } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { v4 } from 'uuid'; +import { useOpenActionBar } from '@/people/hooks/useOpenActionBar'; +import { useOpenContextMenu } from '@/people/hooks/useOpenContextMenu'; import { PeopleTable } from '@/people/table/components/PeopleTable'; -import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople'; -import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople'; -import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople'; -import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople'; import { IconUser } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; @@ -56,6 +55,14 @@ export function People() { const theme = useTheme(); + const setContextMenu = useOpenContextMenu(); + const setActionBar = useOpenActionBar(); + + useEffect(() => { + setContextMenu(); + setActionBar(); + }, [setContextMenu, setActionBar]); + return ( - - - - - - - - + + ); From a7f4326419f479913878efaa0d7922d3a8cd5ed7 Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Mon, 14 Aug 2023 22:12:29 +0200 Subject: [PATCH 4/8] - moved states --- .../companies/hooks/useOpenActionBar.tsx | 2 +- .../companies/hooks/useOpenContextMenu.tsx | 2 +- .../modules/people/hooks/useOpenActionBar.tsx | 2 +- .../modules/people/hooks/useOpenContextMenu.tsx | 2 +- .../ui/action-bar/components/ActionBar.tsx | 7 ++++--- .../states/ActionBarEntriesState.ts | 0 .../states/ActionBarIsOpenState.ts | 0 .../src/modules/ui/board/hooks/useActionBar.tsx | 2 +- .../ui/context-menu/components/ContextMenu.tsx | 8 ++++---- .../__stories__/ActionBar.stories.tsx | 17 +++++++++++++++++ .../states/ContextMenuEntriesState.ts | 0 .../states/ContextMenuIsOpenState.ts | 0 .../states/ContextMenuPositionState.ts} | 0 .../ui/table/components/CheckboxCell.tsx | 2 +- .../ui/table/components/EntityTableCell.tsx | 4 ++-- 15 files changed, 33 insertions(+), 15 deletions(-) rename front/src/modules/ui/{table => action-bar}/states/ActionBarEntriesState.ts (100%) rename front/src/modules/ui/{table => action-bar}/states/ActionBarIsOpenState.ts (100%) create mode 100644 front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx rename front/src/modules/ui/{table => context-menu}/states/ContextMenuEntriesState.ts (100%) rename front/src/modules/ui/{table => context-menu}/states/ContextMenuIsOpenState.ts (100%) rename front/src/modules/ui/{table/states/contextMenuPositionState.ts => context-menu/states/ContextMenuPositionState.ts} (100%) diff --git a/front/src/modules/companies/hooks/useOpenActionBar.tsx b/front/src/modules/companies/hooks/useOpenActionBar.tsx index 3a623698a..731d2b38e 100644 --- a/front/src/modules/companies/hooks/useOpenActionBar.tsx +++ b/front/src/modules/companies/hooks/useOpenActionBar.tsx @@ -5,9 +5,9 @@ import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { GET_PIPELINES } from '@/pipeline/queries'; import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; +import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { diff --git a/front/src/modules/companies/hooks/useOpenContextMenu.tsx b/front/src/modules/companies/hooks/useOpenContextMenu.tsx index 376c19928..ecb67885f 100644 --- a/front/src/modules/companies/hooks/useOpenContextMenu.tsx +++ b/front/src/modules/companies/hooks/useOpenContextMenu.tsx @@ -6,8 +6,8 @@ import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { GET_PIPELINES } from '@/pipeline/queries'; import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; +import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { diff --git a/front/src/modules/people/hooks/useOpenActionBar.tsx b/front/src/modules/people/hooks/useOpenActionBar.tsx index 2742e6b1e..ea7a6fc5c 100644 --- a/front/src/modules/people/hooks/useOpenActionBar.tsx +++ b/front/src/modules/people/hooks/useOpenActionBar.tsx @@ -4,9 +4,9 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; +import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; diff --git a/front/src/modules/people/hooks/useOpenContextMenu.tsx b/front/src/modules/people/hooks/useOpenContextMenu.tsx index 559970177..e3b8d19bb 100644 --- a/front/src/modules/people/hooks/useOpenContextMenu.tsx +++ b/front/src/modules/people/hooks/useOpenContextMenu.tsx @@ -5,8 +5,8 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; +import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index bc33aed4f..ece4c25f9 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -2,9 +2,10 @@ import React, { useRef } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; -import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; -import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState'; +import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; +import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState'; + +import { actionBarOpenState } from '../states/ActionBarIsOpenState'; type OwnProps = { selectedIds: string[]; diff --git a/front/src/modules/ui/table/states/ActionBarEntriesState.ts b/front/src/modules/ui/action-bar/states/ActionBarEntriesState.ts similarity index 100% rename from front/src/modules/ui/table/states/ActionBarEntriesState.ts rename to front/src/modules/ui/action-bar/states/ActionBarEntriesState.ts diff --git a/front/src/modules/ui/table/states/ActionBarIsOpenState.ts b/front/src/modules/ui/action-bar/states/ActionBarIsOpenState.ts similarity index 100% rename from front/src/modules/ui/table/states/ActionBarIsOpenState.ts rename to front/src/modules/ui/action-bar/states/ActionBarIsOpenState.ts diff --git a/front/src/modules/ui/board/hooks/useActionBar.tsx b/front/src/modules/ui/board/hooks/useActionBar.tsx index 0eee81fff..74a312522 100644 --- a/front/src/modules/ui/board/hooks/useActionBar.tsx +++ b/front/src/modules/ui/board/hooks/useActionBar.tsx @@ -1,6 +1,6 @@ import { useSetRecoilState } from 'recoil'; -import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard'; diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx index 06d587d0b..12ab9c01c 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -2,12 +2,12 @@ import React, { useRef } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; -import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; -import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState'; -import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; +import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; +import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { contextMenuEntriesState } from '../states/ContextMenuEntriesState'; +import { contextMenuOpenState } from '../states/ContextMenuIsOpenState'; import { PositionType } from '../types/PositionType'; type OwnProps = { diff --git a/front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx new file mode 100644 index 000000000..c250b6e59 --- /dev/null +++ b/front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +import { ContextMenu } from '../ContextMenu'; + +const meta: Meta = { + title: 'UI/ContextMenu/ContextMenu', + component: ContextMenu, + decorators: [ComponentDecorator], + args: { selectedIds: [] }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/front/src/modules/ui/table/states/ContextMenuEntriesState.ts b/front/src/modules/ui/context-menu/states/ContextMenuEntriesState.ts similarity index 100% rename from front/src/modules/ui/table/states/ContextMenuEntriesState.ts rename to front/src/modules/ui/context-menu/states/ContextMenuEntriesState.ts diff --git a/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts b/front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts similarity index 100% rename from front/src/modules/ui/table/states/ContextMenuIsOpenState.ts rename to front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts diff --git a/front/src/modules/ui/table/states/contextMenuPositionState.ts b/front/src/modules/ui/context-menu/states/ContextMenuPositionState.ts similarity index 100% rename from front/src/modules/ui/table/states/contextMenuPositionState.ts rename to front/src/modules/ui/context-menu/states/ContextMenuPositionState.ts diff --git a/front/src/modules/ui/table/components/CheckboxCell.tsx b/front/src/modules/ui/table/components/CheckboxCell.tsx index 7a92a4a88..0b3a4749a 100644 --- a/front/src/modules/ui/table/components/CheckboxCell.tsx +++ b/front/src/modules/ui/table/components/CheckboxCell.tsx @@ -2,10 +2,10 @@ import { useCallback } from 'react'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; +import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; -import { actionBarOpenState } from '../states/ActionBarIsOpenState'; const StyledContainer = styled.div` align-items: center; diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index 9dfc13de4..03ab133da 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -1,13 +1,13 @@ import { useContext } from 'react'; import { useSetRecoilState } from 'recoil'; +import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { contextMenuPositionState } from '../../context-menu/states/ContextMenuPositionState'; import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; import { ColumnIndexContext } from '../states/ColumnIndexContext'; -import { contextMenuOpenState } from '../states/ContextMenuIsOpenState'; -import { contextMenuPositionState } from '../states/contextMenuPositionState'; import { ViewFieldContext } from '../states/ViewFieldContext'; export function EntityTableCell({ cellIndex }: { cellIndex: number }) { From cbd0d0a724c4a1406bd20da2d8dd6fe83ef9a03f Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Mon, 14 Aug 2023 23:52:36 +0200 Subject: [PATCH 5/8] - rename entries hooks - tests - move useeffects to sub components --- .../components/HooksCompanyBoard.tsx | 11 +++ .../companies/hooks/useActionBarEntries.tsx | 46 +++++++++++ .../companies/hooks/useContextMenuEntries.tsx | 47 +++++++++++ ...eteCompanies.tsx => useDeleteCompanies.ts} | 15 +--- .../companies/hooks/useOpenActionBar.tsx | 81 ------------------- .../companies/hooks/useOpenContextMenu.tsx | 81 ------------------- .../table/components/CompanyTable.tsx | 7 ++ ...nActionBar.tsx => useActionBarEntries.tsx} | 5 +- ...textMenu.tsx => useContextMenuEntries.tsx} | 5 +- .../people/table/components/PeopleTable.tsx | 7 ++ .../__stories__/ActionBar.stories.tsx | 33 +++++++- .../BoardActionBarButtonDeleteBoardCard.tsx | 1 + ...eActionBar.tsx => useActionBarEntries.tsx} | 4 +- .../ui/board/hooks/useCurrentCardSelected.ts | 6 +- .../ui/board/hooks/useSetCardSelected.ts | 7 +- .../__stories__/ActionBar.stories.tsx | 17 ---- .../__stories__/ContextMenu.stories.tsx | 48 +++++++++++ .../components/GenericEntityTableData.tsx | 10 +++ front/src/pages/companies/Companies.tsx | 11 --- .../src/pages/opportunities/Opportunities.tsx | 5 +- front/src/pages/people/People.tsx | 11 --- 21 files changed, 235 insertions(+), 223 deletions(-) create mode 100644 front/src/modules/companies/hooks/useActionBarEntries.tsx create mode 100644 front/src/modules/companies/hooks/useContextMenuEntries.tsx rename front/src/modules/companies/hooks/{TableContextMenuEntryDeleteCompanies.tsx => useDeleteCompanies.ts} (76%) delete mode 100644 front/src/modules/companies/hooks/useOpenActionBar.tsx delete mode 100644 front/src/modules/companies/hooks/useOpenContextMenu.tsx rename front/src/modules/people/hooks/{useOpenActionBar.tsx => useActionBarEntries.tsx} (96%) rename front/src/modules/people/hooks/{useOpenContextMenu.tsx => useContextMenuEntries.tsx} (96%) rename front/src/modules/ui/board/hooks/{useActionBar.tsx => useActionBarEntries.tsx} (73%) delete mode 100644 front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx create mode 100644 front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx diff --git a/front/src/modules/companies/components/HooksCompanyBoard.tsx b/front/src/modules/companies/components/HooksCompanyBoard.tsx index 5c86847f3..ea93e0a69 100644 --- a/front/src/modules/companies/components/HooksCompanyBoard.tsx +++ b/front/src/modules/companies/components/HooksCompanyBoard.tsx @@ -27,8 +27,12 @@ import { CompanyBoardContext } from '../states/CompanyBoardContext'; export function HooksCompanyBoard({ orderBy, + setActionBar, + setContextMenu, }: { orderBy: PipelineProgresses_Order_By[]; + setActionBar?: () => void; + setContextMenu?: () => void; }) { const setFieldsDefinitionsState = useSetRecoilState( viewFieldsDefinitionsState, @@ -110,6 +114,13 @@ export function HooksCompanyBoard({ const loading = loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies; + if (setActionBar) { + setActionBar(); + } + if (setContextMenu) { + setContextMenu(); + } + useEffect(() => { if (!loading && pipeline && pipelineProgresses && companiesData) { updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies); diff --git a/front/src/modules/companies/hooks/useActionBarEntries.tsx b/front/src/modules/companies/hooks/useActionBarEntries.tsx new file mode 100644 index 000000000..184689c8f --- /dev/null +++ b/front/src/modules/companies/hooks/useActionBarEntries.tsx @@ -0,0 +1,46 @@ +import { useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; +import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; +import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; +import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; +import { ActivityType } from '~/generated/graphql'; + +import { useDeleteSelectedComapnies } from './useDeleteCompanies'; + +export function useActionBarEntries() { + const setActionBarEntries = useSetRecoilState(actionBarEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleActivityClick(type: ActivityType) { + openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company); + } + + const deleteSelectedCompanies = useDeleteSelectedComapnies(); + return () => { + setActionBarEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + key="note" + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + key="task" + />, + } + type="danger" + onClick={() => deleteSelectedCompanies()} + key="delete" + />, + ]); + }; +} diff --git a/front/src/modules/companies/hooks/useContextMenuEntries.tsx b/front/src/modules/companies/hooks/useContextMenuEntries.tsx new file mode 100644 index 000000000..3f5689989 --- /dev/null +++ b/front/src/modules/companies/hooks/useContextMenuEntries.tsx @@ -0,0 +1,47 @@ +import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react'; +import { useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; +import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; +import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState'; +import { ActivityType } from '~/generated/graphql'; + +import { useDeleteSelectedComapnies } from './useDeleteCompanies'; + +export function useContextMenuEntries() { + const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleButtonClick(type: ActivityType) { + openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company); + } + + const deleteSelectedCompanies = useDeleteSelectedComapnies(); + + return () => { + setContextMenuEntries([ + } + onClick={() => handleButtonClick(ActivityType.Note)} + key="note" + />, + } + onClick={() => handleButtonClick(ActivityType.Task)} + key="task" + />, + } + type="danger" + onClick={() => deleteSelectedCompanies()} + key="delete" + />, + ]); + }; +} diff --git a/front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx b/front/src/modules/companies/hooks/useDeleteCompanies.ts similarity index 76% rename from front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx rename to front/src/modules/companies/hooks/useDeleteCompanies.ts index 62745ffbe..bbff7ce50 100644 --- a/front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx +++ b/front/src/modules/companies/hooks/useDeleteCompanies.ts @@ -2,14 +2,12 @@ import { getOperationName } from '@apollo/client/utilities'; import { useRecoilState, useRecoilValue } from 'recoil'; import { GET_PIPELINES } from '@/pipeline/queries'; -import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; -import { IconTrash } from '@/ui/icon/index'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { useDeleteManyCompaniesMutation } from '~/generated/graphql'; -export function TableContextMenuEntryDeleteCompanies() { +export function useDeleteSelectedComapnies() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const resetRowSelection = useResetTableRowSelection(); @@ -20,7 +18,7 @@ export function TableContextMenuEntryDeleteCompanies() { const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - async function handleDeleteClick() { + async function deleteSelectedCompanies() { const rowIdsToDelete = selectedRowIds; resetRowSelection(); @@ -43,12 +41,5 @@ export function TableContextMenuEntryDeleteCompanies() { }); } - return ( - } - type="danger" - onClick={handleDeleteClick} - /> - ); + return deleteSelectedCompanies; } diff --git a/front/src/modules/companies/hooks/useOpenActionBar.tsx b/front/src/modules/companies/hooks/useOpenActionBar.tsx deleted file mode 100644 index 731d2b38e..000000000 --- a/front/src/modules/companies/hooks/useOpenActionBar.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; - -import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; -import { GET_PIPELINES } from '@/pipeline/queries'; -import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; -import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; -import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; -import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; -import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { - ActivityType, - useDeleteManyCompaniesMutation, -} from '~/generated/graphql'; - -export function useOpenActionBar() { - const setActionBarEntries = useSetRecoilState(actionBarEntriesState); - - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleActivityClick(type: ActivityType) { - openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company); - } - - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteCompanies] = useDeleteManyCompaniesMutation({ - refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], - }); - - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteCompanies({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyCompany: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return () => { - setActionBarEntries([ - } - onClick={() => handleActivityClick(ActivityType.Note)} - />, - } - onClick={() => handleActivityClick(ActivityType.Task)} - />, - } - type="danger" - onClick={handleDeleteClick} - />, - ]); - }; -} diff --git a/front/src/modules/companies/hooks/useOpenContextMenu.tsx b/front/src/modules/companies/hooks/useOpenContextMenu.tsx deleted file mode 100644 index ecb67885f..000000000 --- a/front/src/modules/companies/hooks/useOpenContextMenu.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react'; -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; - -import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; -import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; -import { GET_PIPELINES } from '@/pipeline/queries'; -import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; -import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState'; -import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; -import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { - ActivityType, - useDeleteManyCompaniesMutation, -} from '~/generated/graphql'; - -export function useOpenContextMenu() { - const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); - - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company); - } - - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteCompanies] = useDeleteManyCompaniesMutation({ - refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], - }); - - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteCompanies({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyCompany: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return () => { - setContextMenuEntries([ - } - onClick={() => handleButtonClick(ActivityType.Note)} - />, - } - onClick={() => handleButtonClick(ActivityType.Task)} - />, - } - type="danger" - onClick={handleDeleteClick} - />, - ]); - }; -} diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 2574ae4d5..88a26604c 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -2,6 +2,8 @@ import { useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import { companyViewFields } from '@/companies/constants/companyViewFields'; +import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; +import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; @@ -45,6 +47,9 @@ export function CompanyTable() { return { AND: filters.map(turnFilterIntoWhereClause) }; }, [filters]) as any; + const setContextMenu = useContextMenuEntries(); + const setActionBar = useActionBarEntries(); + return ( <> } onClick={() => handleActivityClick(ActivityType.Note)} + key="note" />, } onClick={() => handleActivityClick(ActivityType.Task)} + key="task" />, } type="danger" onClick={handleDeleteClick} + key="delte" />, ]); }; diff --git a/front/src/modules/people/hooks/useOpenContextMenu.tsx b/front/src/modules/people/hooks/useContextMenuEntries.tsx similarity index 96% rename from front/src/modules/people/hooks/useOpenContextMenu.tsx rename to front/src/modules/people/hooks/useContextMenuEntries.tsx index e3b8d19bb..4171cfc2a 100644 --- a/front/src/modules/people/hooks/useOpenContextMenu.tsx +++ b/front/src/modules/people/hooks/useContextMenuEntries.tsx @@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; import { GET_PEOPLE } from '../queries'; -export function useOpenContextMenu() { +export function useContextMenuEntries() { const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const openCreateActivityRightDrawer = @@ -61,17 +61,20 @@ export function useOpenContextMenu() { label="Note" icon={} onClick={() => handleActivityClick(ActivityType.Note)} + key="note" />, } onClick={() => handleActivityClick(ActivityType.Task)} + key="task" />, } type="danger" onClick={handleDeleteClick} + key="delete" />, ]); }; diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index 4f081e9ab..b8ebabecb 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -1,6 +1,8 @@ import { useMemo } from 'react'; import { useRecoilValue } from 'recoil'; +import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; +import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; import { peopleViewFields } from '@/people/constants/peopleViewFields'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState'; @@ -45,6 +47,9 @@ export function PeopleTable() { return { AND: filters.map(turnFilterIntoWhereClause) }; }, [filters]) as any; + const setContextMenu = useContextMenuEntries(); + const setActionBar = useActionBarEntries(); + return ( <> ; +} const meta: Meta = { title: 'UI/ActionBar/ActionBar', - component: ActionBar, - decorators: [ComponentDecorator], - args: { selectedIds: [] }, + component: FilledActionBar, + decorators: [ + (Story) => ( + + + + + + + ), + ComponentDecorator, + ], + args: { selectedIds: ['TestId'] }, }; export default meta; diff --git a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx index 6baeb5057..55138b14a 100644 --- a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx +++ b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx @@ -43,6 +43,7 @@ export function BoardActionBarButtonDeleteBoardCard() { icon={} type="danger" onClick={handleDelete} + key="delete" /> ); } diff --git a/front/src/modules/ui/board/hooks/useActionBar.tsx b/front/src/modules/ui/board/hooks/useActionBarEntries.tsx similarity index 73% rename from front/src/modules/ui/board/hooks/useActionBar.tsx rename to front/src/modules/ui/board/hooks/useActionBarEntries.tsx index 74a312522..a1b23f58c 100644 --- a/front/src/modules/ui/board/hooks/useActionBar.tsx +++ b/front/src/modules/ui/board/hooks/useActionBarEntries.tsx @@ -4,10 +4,10 @@ import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesSt import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard'; -export function useOpenActionBar() { +export function useActionBarEntries() { const setActionBarEntries = useSetRecoilState(actionBarEntriesState); return () => { - setActionBarEntries([]); + setActionBarEntries([]); }; } diff --git a/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts b/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts index 78a17f38d..bfa9b624d 100644 --- a/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts +++ b/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts @@ -1,5 +1,7 @@ import { useContext } from 'react'; -import { useRecoilCallback, useRecoilState } from 'recoil'; +import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil'; + +import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; import { BoardCardIdContext } from '../states/BoardCardIdContext'; import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState'; @@ -10,6 +12,7 @@ export function useCurrentCardSelected() { const [isCardSelected] = useRecoilState( isCardSelectedFamilyState(currentCardId ?? ''), ); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); const setCurrentCardSelected = useRecoilCallback( ({ set }) => @@ -17,6 +20,7 @@ export function useCurrentCardSelected() { if (!currentCardId) return; set(isCardSelectedFamilyState(currentCardId), selected); + setActionBarOpenState(true); }, [], ); diff --git a/front/src/modules/ui/board/hooks/useSetCardSelected.ts b/front/src/modules/ui/board/hooks/useSetCardSelected.ts index 2bb3763f2..a22fa1f87 100644 --- a/front/src/modules/ui/board/hooks/useSetCardSelected.ts +++ b/front/src/modules/ui/board/hooks/useSetCardSelected.ts @@ -1,9 +1,14 @@ -import { useRecoilCallback } from 'recoil'; +import { useRecoilCallback, useSetRecoilState } from 'recoil'; + +import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState'; export function useSetCardSelected() { + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); + return useRecoilCallback(({ set }) => (cardId: string, selected: boolean) => { set(isCardSelectedFamilyState(cardId), selected); + setActionBarOpenState(true); }); } diff --git a/front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx deleted file mode 100644 index c250b6e59..000000000 --- a/front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; - -import { ContextMenu } from '../ContextMenu'; - -const meta: Meta = { - title: 'UI/ContextMenu/ContextMenu', - component: ContextMenu, - decorators: [ComponentDecorator], - args: { selectedIds: [] }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; 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 new file mode 100644 index 000000000..23109ae29 --- /dev/null +++ b/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +import { ContextMenu } from '../ContextMenu'; +import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; +import { useSetRecoilState } from 'recoil'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { TableContext } from '@/ui/table/states/TableContext'; +import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; +import { MemoryRouter } from 'react-router-dom'; +import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState'; +import { contextMenuPositionState } from '../../states/ContextMenuPositionState'; + +function FilledContextMenu(props: { selectedIds: string[] }) { + const setContextMenu = useContextMenuEntries(); + setContextMenu(); + const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + setContextMenuPosition({ + x: 100, + y: 10, + }); + const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); + setContextMenuOpenState(true); + return ; +} + +const meta: Meta = { + title: 'UI/ContextMenu/ContextMenu', + component: FilledContextMenu, + decorators: [ + (Story) => ( + + + + + + + ), + ComponentDecorator, + ], + args: { selectedIds: ['TestId'] }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/front/src/modules/ui/table/components/GenericEntityTableData.tsx b/front/src/modules/ui/table/components/GenericEntityTableData.tsx index 58aae7899..f23920830 100644 --- a/front/src/modules/ui/table/components/GenericEntityTableData.tsx +++ b/front/src/modules/ui/table/components/GenericEntityTableData.tsx @@ -8,12 +8,16 @@ export function GenericEntityTableData({ orderBy = defaultOrderBy, whereFilters, filterDefinitionArray, + setActionBar, + setContextMenu, }: { useGetRequest: any; getRequestResultKey: string; orderBy?: any; whereFilters?: any; filterDefinitionArray: FilterDefinition[]; + setActionBar?: () => void; + setContextMenu?: () => void; }) { const setEntityTableData = useSetEntityTableData(); useGetRequest({ @@ -24,5 +28,11 @@ export function GenericEntityTableData({ }, }); + if (setActionBar) { + setActionBar(); + } + if (setContextMenu) { + setContextMenu(); + } return <>; } diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 01726ad91..ff9b19fbc 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -1,11 +1,8 @@ -import { useEffect } from 'react'; import { getOperationName } from '@apollo/client/utilities'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { v4 } from 'uuid'; -import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar'; -import { useOpenContextMenu } from '@/companies/hooks/useOpenContextMenu'; import { CompanyTable } from '@/companies/table/components/CompanyTable'; import { SEARCH_COMPANY_QUERY } from '@/search/queries/search'; import { IconBuildingSkyscraper } from '@/ui/icon'; @@ -65,14 +62,6 @@ export function Companies() { const theme = useTheme(); - const setContextMenu = useOpenContextMenu(); - const setActionBar = useOpenActionBar(); - - useEffect(() => { - setContextMenu(); - setActionBar(); - }, [setContextMenu, setActionBar]); - return ( - + { - setContextMenu(); - setActionBar(); - }, [setContextMenu, setActionBar]); - return ( Date: Mon, 14 Aug 2023 23:56:49 +0200 Subject: [PATCH 6/8] - fix import order --- .../components/__stories__/ActionBar.stories.tsx | 16 +++++++--------- .../__stories__/ContextMenu.stories.tsx | 14 +++++++------- 2 files changed, 14 insertions(+), 16 deletions(-) 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 aa52674fb..83e6e81d4 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 @@ -1,17 +1,15 @@ +import { MemoryRouter } from 'react-router-dom'; import type { Meta, StoryObj } from '@storybook/react'; +import { useSetRecoilState } from 'recoil'; +import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; +import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; +import { TableContext } from '@/ui/table/states/TableContext'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { ActionBar } from '../ActionBar'; -import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { MemoryRouter } from 'react-router-dom'; -import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; -import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; -import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; -import { TableContext } from '@/ui/table/states/TableContext'; -import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; -import { useSetRecoilState } from 'recoil'; import { actionBarOpenState } from '../../states/ActionBarIsOpenState'; +import { ActionBar } from '../ActionBar'; function FilledActionBar(props: { selectedIds: string[] }) { const setActionBar = useActionBarEntries(); 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 23109ae29..0fa1c6b6f 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 @@ -1,16 +1,16 @@ +import { MemoryRouter } from 'react-router-dom'; import type { Meta, StoryObj } from '@storybook/react'; +import { useSetRecoilState } from 'recoil'; +import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; +import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; +import { TableContext } from '@/ui/table/states/TableContext'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { ContextMenu } from '../ContextMenu'; -import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; -import { useSetRecoilState } from 'recoil'; -import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { TableContext } from '@/ui/table/states/TableContext'; -import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; -import { MemoryRouter } from 'react-router-dom'; import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState'; import { contextMenuPositionState } from '../../states/ContextMenuPositionState'; +import { ContextMenu } from '../ContextMenu'; function FilledContextMenu(props: { selectedIds: string[] }) { const setContextMenu = useContextMenuEntries(); From 43b0945028955718d5f8185a5c580830b1e15d48 Mon Sep 17 00:00:00 2001 From: Weiko Date: Mon, 14 Aug 2023 15:08:47 -0700 Subject: [PATCH 7/8] Reorganize context/states/selectors in dedicated folders (#1205) * Reorganize context/states/selectors in dedicated folders * linter --- front/src/__stories__/App.stories.tsx | 3 --- .../__stories__/TaskGroups.stories.tsx | 4 ++-- .../TaskGroupsWithoutTasks.stories.tsx | 4 ++-- .../ActivityAssigneeEditableField.tsx | 4 ++-- .../ActivityRelationEditableField.tsx | 4 ++-- .../hooks/useInitializeTasksFilters.ts | 4 ++-- ...enCreateActivityDrawerForSelectedRowIds.ts | 2 +- .../src/modules/activities/hooks/useTasks.ts | 6 +++--- .../modules/activities/states/TasksContext.ts | 3 --- .../TasksRecoilScopeContext.ts | 3 +++ front/src/modules/auth/hooks/useAuth.ts | 6 +----- .../auth/states/authFlowUserEmailState.ts | 6 ------ .../auth/states/isAuthenticatedState.ts | 11 ---------- .../auth/states/isAuthenticatingState.ts | 6 ------ .../command-menu/components/CommandMenu.tsx | 4 ++-- .../command-menu/hooks/useCommandMenu.ts | 4 ++-- .../states/commandMenuCommandsState.ts | 4 ++-- .../companies/__stories__/Board.stories.tsx | 4 ++-- .../__stories__/CompanyBoardCard.stories.tsx | 10 ++++----- .../companies/components/CompanyBoardCard.tsx | 8 +++---- .../components/HooksCompanyBoard.tsx | 9 +++++--- .../components/NewCompanyProgressButton.tsx | 2 +- .../components/CompanyNameEditableField.tsx | 4 ++-- .../companies/hooks/useDeleteCompanies.ts | 2 +- .../hooks/useInitializeCompanyBoardFilters.ts | 21 ------------------- .../companies/states/CompanyBoardContext.ts | 3 --- .../states/companyBoardIndexState.ts | 11 ---------- .../CompanyBoardRecoilScopeContext.ts | 5 +++++ .../table/components/CompanyTable.tsx | 14 +++++++++---- .../PeopleFullNameEditableField.tsx | 4 ++-- .../people/hooks/useSetPeopleEntityTable.ts | 4 ++-- .../states/peopleEntityTableFamilyState.ts | 11 ---------- .../people/table/components/PeopleTable.tsx | 14 +++++++++---- .../states/pipelineProgressIdScopedState.ts | 6 ------ .../states/pipelineStageIdScopedState.ts | 6 ------ .../BoardActionBarButtonDeleteBoardCard.tsx | 2 +- .../ui/board/components/EntityBoard.tsx | 13 +++++++----- .../board/components/EntityBoardActionBar.tsx | 2 +- .../ui/board/components/EntityBoardColumn.tsx | 6 +++--- .../BoardCardIdContext.ts | 0 .../BoardColumnIdContext.ts | 0 .../BoardOptionsContext.ts | 0 .../FieldDefinitionContext.ts | 0 .../ui/board/hooks/useCurrentCardSelected.ts | 2 +- .../ui/board/states/BoardCardContext.ts | 3 --- .../ui/board/states/BoardColumnContext.ts | 3 --- .../BoardColumnRecoilScopeContext.ts | 3 +++ .../boardColumnTotalsFamilySelector.ts | 2 +- .../selectedCardIdsSelector.ts | 6 +++--- .../components/GenericEditableDateField.tsx | 10 ++++----- .../GenericEditableDateFieldDisplayMode.tsx | 6 +++--- .../GenericEditableDateFieldEditMode.tsx | 6 +++--- .../components/GenericEditableField.tsx | 2 +- .../components/GenericEditableNumberField.tsx | 10 ++++----- .../GenericEditableNumberFieldEditMode.tsx | 6 +++--- .../components/GenericEditablePhoneField.tsx | 10 ++++----- .../GenericEditablePhoneFieldEditMode.tsx | 6 +++--- .../GenericEditableRelationField.tsx | 10 ++++----- ...enericEditableRelationFieldDisplayMode.tsx | 6 +++--- .../GenericEditableRelationFieldEditMode.tsx | 6 +++--- .../components/GenericEditableTextField.tsx | 10 ++++----- .../GenericEditableTextFieldEditMode.tsx | 6 +++--- .../components/GenericEditableURLField.tsx | 10 ++++----- .../GenericEditableURLFieldEditMode.tsx | 6 +++--- .../components/ProbabilityEditableField.tsx | 6 +++--- .../ProbabilityEditableFieldEditMode.tsx | 6 +++--- .../EditableFieldDefinitionContext.ts | 0 .../EditableFieldEntityIdContext.ts | 0 .../EditableFieldMutationContext.ts | 0 .../editable-field/hooks/useEditableField.ts | 4 ++-- .../hooks/useUpdateGenericEntityField.ts | 2 +- .../ui/editable-field/states/FieldContext.ts | 3 --- .../FieldRecoilScopeContext.ts | 3 +++ .../genericEntityFieldFamilySelector.ts | 2 +- .../variants/components/DateEditableField.tsx | 4 ++-- .../components/PhoneEditableField.tsx | 4 ++-- .../states/AvailableFiltersContext.ts | 5 ----- .../components/EntityTableActionBar.tsx | 2 +- .../ui/table/components/EntityTable.tsx | 2 +- .../ui/table/components/EntityTableBody.tsx | 4 ++-- .../ui/table/components/EntityTableCell.tsx | 4 ++-- .../ui/table/components/EntityTableRow.tsx | 2 +- .../CellHotkeyScopeContext.ts | 0 .../ColumnIndexContext.ts | 0 .../EntityUpdateMutationHookContext.ts | 0 .../{states => contexts}/RowIdContext.ts | 0 .../{states => contexts}/RowIndexContext.ts | 0 .../{states => contexts}/ViewFieldContext.ts | 0 .../editable-cell/components/EditableCell.tsx | 2 +- .../hooks/useCurrentCellPosition.ts | 4 ++-- .../editable-cell/hooks/useEditableCell.ts | 2 +- .../GenericEditableChipCellDisplayMode.tsx | 2 +- .../GenericEditableChipCellEditMode.tsx | 2 +- .../components/GenericEditableDateCell.tsx | 2 +- .../GenericEditableDateCellEditMode.tsx | 2 +- .../GenericEditableDoubleTextCell.tsx | 2 +- .../GenericEditableDoubleTextCellEditMode.tsx | 2 +- ...cEditableDoubleTextChipCellDisplayMode.tsx | 2 +- ...ericEditableDoubleTextChipCellEditMode.tsx | 2 +- .../components/GenericEditableNumberCell.tsx | 2 +- .../GenericEditableNumberCellEditMode.tsx | 2 +- .../components/GenericEditablePhoneCell.tsx | 2 +- .../GenericEditablePhoneCellEditMode.tsx | 2 +- ...GenericEditableRelationCellDisplayMode.tsx | 2 +- .../GenericEditableRelationCellEditMode.tsx | 2 +- .../components/GenericEditableTextCell.tsx | 2 +- .../GenericEditableTextCellEditMode.tsx | 2 +- .../components/GenericEditableURLCell.tsx | 2 +- .../GenericEditableURLCellEditMode.tsx | 2 +- .../ui/table/hooks/useCurrentEntityId.ts | 2 +- .../ui/table/hooks/useCurrentRowSelected.ts | 2 +- .../ui/table/hooks/useSelectAllRows.ts | 2 +- .../ui/table/hooks/useSetEntityTableData.ts | 4 ++-- .../ui/table/hooks/useUpdateEntityField.ts | 2 +- .../modules/ui/table/states/TableContext.ts | 3 --- .../TableRecoilScopeContext.ts | 3 +++ .../allRowsSelectedStatusSelector.ts | 4 ++-- .../{ => selectors}/selectedRowIdsSelector.ts | 4 ++-- .../tableEntityFieldFamilySelector.ts | 2 +- .../table-header/components/TableHeader.tsx | 8 +++---- front/src/pages/companies/Companies.tsx | 4 ++-- .../src/pages/companies/CompaniesMockMode.tsx | 4 ++-- front/src/pages/companies/CompanyShow.tsx | 6 +++--- .../src/pages/companies/companies-filters.tsx | 4 ++-- .../src/pages/opportunities/Opportunities.tsx | 6 +++--- .../opportunities/opportunities-filters.tsx | 10 ++++++--- front/src/pages/people/People.tsx | 4 ++-- front/src/pages/people/PersonShow.tsx | 6 +++--- front/src/pages/people/people-filters.tsx | 4 ++-- front/src/pages/tasks/Tasks.tsx | 8 +++---- front/src/pages/tasks/tasks-filters.tsx | 4 ++-- front/src/sync-hooks/CommandMenuHook.tsx | 4 ++-- .../decorators/CellPositionDecorator.tsx | 4 ++-- 133 files changed, 250 insertions(+), 319 deletions(-) delete mode 100644 front/src/modules/activities/states/TasksContext.ts create mode 100644 front/src/modules/activities/states/recoil-scope-contexts/TasksRecoilScopeContext.ts delete mode 100644 front/src/modules/auth/states/authFlowUserEmailState.ts delete mode 100644 front/src/modules/auth/states/isAuthenticatedState.ts delete mode 100644 front/src/modules/auth/states/isAuthenticatingState.ts delete mode 100644 front/src/modules/companies/hooks/useInitializeCompanyBoardFilters.ts delete mode 100644 front/src/modules/companies/states/CompanyBoardContext.ts delete mode 100644 front/src/modules/companies/states/companyBoardIndexState.ts create mode 100644 front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext.ts delete mode 100644 front/src/modules/people/states/peopleEntityTableFamilyState.ts delete mode 100644 front/src/modules/pipeline/states/pipelineProgressIdScopedState.ts delete mode 100644 front/src/modules/pipeline/states/pipelineStageIdScopedState.ts rename front/src/modules/ui/board/{states => contexts}/BoardCardIdContext.ts (100%) rename front/src/modules/ui/board/{states => contexts}/BoardColumnIdContext.ts (100%) rename front/src/modules/ui/board/{states => contexts}/BoardOptionsContext.ts (100%) rename front/src/modules/ui/board/{states => contexts}/FieldDefinitionContext.ts (100%) delete mode 100644 front/src/modules/ui/board/states/BoardCardContext.ts delete mode 100644 front/src/modules/ui/board/states/BoardColumnContext.ts create mode 100644 front/src/modules/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext.ts rename front/src/modules/ui/board/states/{ => selectors}/boardColumnTotalsFamilySelector.ts (90%) rename front/src/modules/ui/board/states/{ => selectors}/selectedCardIdsSelector.ts (68%) rename front/src/modules/ui/editable-field/{states => contexts}/EditableFieldDefinitionContext.ts (100%) rename front/src/modules/ui/editable-field/{states => contexts}/EditableFieldEntityIdContext.ts (100%) rename front/src/modules/ui/editable-field/{states => contexts}/EditableFieldMutationContext.ts (100%) delete mode 100644 front/src/modules/ui/editable-field/states/FieldContext.ts create mode 100644 front/src/modules/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext.ts rename front/src/modules/ui/editable-field/states/{ => selectors}/genericEntityFieldFamilySelector.ts (88%) delete mode 100644 front/src/modules/ui/filter-n-sort/states/AvailableFiltersContext.ts rename front/src/modules/ui/table/{states => contexts}/CellHotkeyScopeContext.ts (100%) rename front/src/modules/ui/table/{states => contexts}/ColumnIndexContext.ts (100%) rename front/src/modules/ui/table/{states => contexts}/EntityUpdateMutationHookContext.ts (100%) rename front/src/modules/ui/table/{states => contexts}/RowIdContext.ts (100%) rename front/src/modules/ui/table/{states => contexts}/RowIndexContext.ts (100%) rename front/src/modules/ui/table/{states => contexts}/ViewFieldContext.ts (100%) delete mode 100644 front/src/modules/ui/table/states/TableContext.ts create mode 100644 front/src/modules/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext.ts rename front/src/modules/ui/table/states/{ => selectors}/allRowsSelectedStatusSelector.ts (81%) rename front/src/modules/ui/table/states/{ => selectors}/selectedRowIdsSelector.ts (70%) rename front/src/modules/ui/table/states/{ => selectors}/tableEntityFieldFamilySelector.ts (88%) diff --git a/front/src/__stories__/App.stories.tsx b/front/src/__stories__/App.stories.tsx index db8ef3f47..51488fe0c 100644 --- a/front/src/__stories__/App.stories.tsx +++ b/front/src/__stories__/App.stories.tsx @@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { useRecoilState } from 'recoil'; import { currentUserState } from '@/auth/states/currentUserState'; -import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState'; import { App } from '~/App'; import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout'; import { graphqlMocks } from '~/testing/graphqlMocks'; @@ -11,10 +10,8 @@ import { mockedUsersData } from '~/testing/mock-data/users'; const MockedAuth: React.FC = ({ children }) => { const [, setCurrentUser] = useRecoilState(currentUserState); - const [, setIsAuthenticating] = useRecoilState(isAuthenticatingState); setCurrentUser(mockedUsersData[0]); - setIsAuthenticating(false); return <>{children}; }; diff --git a/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx b/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx index 898675026..688bce83c 100644 --- a/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx +++ b/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { TasksContext } from '@/activities/states/TasksContext'; +import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext'; import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; @@ -13,7 +13,7 @@ const meta: Meta = { decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator], parameters: { msw: graphqlMocks, - recoilScopeContext: TasksContext, + recoilScopeContext: TasksRecoilScopeContext, }, }; diff --git a/front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx b/front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx index b3f0dd098..59d7caaf7 100644 --- a/front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx +++ b/front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { graphql } from 'msw'; import { GET_ACTIVITIES } from '@/activities/queries'; -import { TasksContext } from '@/activities/states/TasksContext'; +import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext'; import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; @@ -16,7 +16,7 @@ const meta: Meta = { decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator], parameters: { msw: graphqlMocks, - recoilScopeContext: TasksContext, + recoilScopeContext: TasksRecoilScopeContext, }, }; diff --git a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx index 9623c8493..a5d9f7e00 100644 --- a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx +++ b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx @@ -1,5 +1,5 @@ import { EditableField } from '@/ui/editable-field/components/EditableField'; -import { FieldContext } from '@/ui/editable-field/states/FieldContext'; +import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext'; import { IconUserCircle } from '@/ui/icon'; import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -16,7 +16,7 @@ type OwnProps = { export function ActivityAssigneeEditableField({ activity }: OwnProps) { return ( - + + { diff --git a/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts b/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts index 5f6cda7b8..da1af377f 100644 --- a/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts +++ b/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts @@ -1,6 +1,6 @@ import { useRecoilValue } from 'recoil'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; import { ActivityType } from '~/generated/graphql'; import { diff --git a/front/src/modules/activities/hooks/useTasks.ts b/front/src/modules/activities/hooks/useTasks.ts index 9d8a43a52..2840ec02a 100644 --- a/front/src/modules/activities/hooks/useTasks.ts +++ b/front/src/modules/activities/hooks/useTasks.ts @@ -11,7 +11,7 @@ import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql'; import { tasksFilters } from '~/pages/tasks/tasks-filters'; import { parseDate } from '~/utils/date-utils'; -import { TasksContext } from '../states/TasksContext'; +import { TasksRecoilScopeContext } from '../states/recoil-scope-contexts/TasksRecoilScopeContext'; import { useInitializeTasksFilters } from './useInitializeTasksFilters'; @@ -22,12 +22,12 @@ export function useTasks() { const [activeTabId] = useRecoilScopedState( activeTabIdScopedState, - TasksContext, + TasksRecoilScopeContext, ); const [filters, setFilters] = useRecoilScopedState( filtersScopedState, - TasksContext, + TasksRecoilScopeContext, ); // If there is no filter, we set the default filter to the current user diff --git a/front/src/modules/activities/states/TasksContext.ts b/front/src/modules/activities/states/TasksContext.ts deleted file mode 100644 index b8dd7264e..000000000 --- a/front/src/modules/activities/states/TasksContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; - -export const TasksContext = createContext(null); diff --git a/front/src/modules/activities/states/recoil-scope-contexts/TasksRecoilScopeContext.ts b/front/src/modules/activities/states/recoil-scope-contexts/TasksRecoilScopeContext.ts new file mode 100644 index 000000000..330a328b5 --- /dev/null +++ b/front/src/modules/activities/states/recoil-scope-contexts/TasksRecoilScopeContext.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const TasksRecoilScopeContext = createContext(null); diff --git a/front/src/modules/auth/hooks/useAuth.ts b/front/src/modules/auth/hooks/useAuth.ts index e9ec0769b..fa800f057 100644 --- a/front/src/modules/auth/hooks/useAuth.ts +++ b/front/src/modules/auth/hooks/useAuth.ts @@ -10,12 +10,10 @@ import { } from '~/generated/graphql'; import { currentUserState } from '../states/currentUserState'; -import { isAuthenticatingState } from '../states/isAuthenticatingState'; import { tokenPairState } from '../states/tokenPairState'; export function useAuth() { const [, setTokenPair] = useRecoilState(tokenPairState); - const [, setIsAuthenticating] = useRecoilState(isAuthenticatingState); const [, setCurrentUser] = useRecoilState(currentUserState); const [challenge] = useChallengeMutation(); @@ -65,11 +63,9 @@ export function useAuth() { setCurrentUser(verifyResult.data?.verify.user); setTokenPair(verifyResult.data?.verify.tokens); - setIsAuthenticating(false); - return verifyResult.data?.verify; }, - [setIsAuthenticating, setTokenPair, verify, setCurrentUser], + [setTokenPair, verify, setCurrentUser], ); const handleCrendentialsSignIn = useCallback( diff --git a/front/src/modules/auth/states/authFlowUserEmailState.ts b/front/src/modules/auth/states/authFlowUserEmailState.ts deleted file mode 100644 index ca3d1d42b..000000000 --- a/front/src/modules/auth/states/authFlowUserEmailState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const authFlowUserEmailState = atom({ - key: 'authFlowUserEmailState', - default: '', -}); diff --git a/front/src/modules/auth/states/isAuthenticatedState.ts b/front/src/modules/auth/states/isAuthenticatedState.ts deleted file mode 100644 index c29f2d3b1..000000000 --- a/front/src/modules/auth/states/isAuthenticatedState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { selector } from 'recoil'; - -import { currentUserState } from './currentUserState'; - -export const isAuthenticatedState = selector({ - key: 'isAuthenticatedState', - get: ({ get }) => { - const user = get(currentUserState); - return !!user; - }, -}); diff --git a/front/src/modules/auth/states/isAuthenticatingState.ts b/front/src/modules/auth/states/isAuthenticatingState.ts deleted file mode 100644 index 49705fca3..000000000 --- a/front/src/modules/auth/states/isAuthenticatingState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isAuthenticatingState = atom({ - key: 'isAuthenticatingState', - default: true, -}); diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx index feaeb2de7..bf52cf08e 100644 --- a/front/src/modules/command-menu/components/CommandMenu.tsx +++ b/front/src/modules/command-menu/components/CommandMenu.tsx @@ -15,7 +15,7 @@ import { import { getLogoUrlFromDomainName } from '~/utils'; import { useCommandMenu } from '../hooks/useCommandMenu'; -import { commandMenuCommand } from '../states/commandMenuCommandsState'; +import { commandMenuCommandsState } from '../states/commandMenuCommandsState'; import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState'; import { CommandType } from '../types/Command'; @@ -33,7 +33,7 @@ export function CommandMenu() { const openActivityRightDrawer = useOpenActivityRightDrawer(); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); const [search, setSearch] = useState(''); - const commands = useRecoilValue(commandMenuCommand); + const commands = useRecoilValue(commandMenuCommandsState); useScopedHotkeys( 'ctrl+k,meta+k', diff --git a/front/src/modules/command-menu/hooks/useCommandMenu.ts b/front/src/modules/command-menu/hooks/useCommandMenu.ts index b7843237b..96fe53551 100644 --- a/front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -4,7 +4,7 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { commandMenuCommands } from '../constants/commandMenuCommands'; -import { commandMenuCommand } from '../states/commandMenuCommandsState'; +import { commandMenuCommandsState } from '../states/commandMenuCommandsState'; import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState'; import { Command } from '../types/Command'; @@ -12,7 +12,7 @@ export function useCommandMenu() { const [, setIsCommandMenuOpenedState] = useRecoilState( isCommandMenuOpenedState, ); - const setCommands = useSetRecoilState(commandMenuCommand); + const setCommands = useSetRecoilState(commandMenuCommandsState); const { setHotkeyScopeAndMemorizePreviousScope, goBackToPreviousHotkeyScope, diff --git a/front/src/modules/command-menu/states/commandMenuCommandsState.ts b/front/src/modules/command-menu/states/commandMenuCommandsState.ts index 8071bd8d8..8cea591c0 100644 --- a/front/src/modules/command-menu/states/commandMenuCommandsState.ts +++ b/front/src/modules/command-menu/states/commandMenuCommandsState.ts @@ -2,8 +2,8 @@ import { atom } from 'recoil'; import { Command, CommandType } from '../types/Command'; -export const commandMenuCommand = atom({ - key: 'command-menu/commandMenuCommand', +export const commandMenuCommandsState = atom({ + key: 'command-menu/commandMenuCommandsState', default: [ { to: '', diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx index 86f7d4c7f..83351a73c 100644 --- a/front/src/modules/companies/__stories__/Board.stories.tsx +++ b/front/src/modules/companies/__stories__/Board.stories.tsx @@ -9,14 +9,14 @@ import { graphqlMocks } from '~/testing/graphqlMocks'; import { defaultPipelineProgressOrderBy } from '../../pipeline/queries'; import { HooksCompanyBoard } from '../components/HooksCompanyBoard'; -import { CompanyBoardContext } from '../states/CompanyBoardContext'; +import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; const meta: Meta = { title: 'Modules/Companies/Board', component: EntityBoard, decorators: [ (Story) => ( - + diff --git a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx index a5e1000c5..3aabf1e81 100644 --- a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx +++ b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx @@ -2,8 +2,8 @@ import { MemoryRouter } from 'react-router-dom'; import { Meta, StoryObj } from '@storybook/react'; import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard'; -import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext'; -import { BoardColumnContext } from '@/ui/board/states/BoardColumnContext'; +import { BoardCardIdContext } from '@/ui/board/contexts/BoardCardIdContext'; +import { BoardColumnRecoilScopeContext } from '@/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; @@ -11,16 +11,16 @@ import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progres import { defaultPipelineProgressOrderBy } from '../../pipeline/queries'; import { HooksCompanyBoard } from '../components/HooksCompanyBoard'; -import { CompanyBoardContext } from '../states/CompanyBoardContext'; +import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; const meta: Meta = { title: 'Modules/Companies/CompanyBoardCard', component: CompanyBoardCard, decorators: [ (Story) => ( - + - + diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index 08bd59aed..3b889450c 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -2,14 +2,14 @@ import { ReactNode, useContext } from 'react'; import styled from '@emotion/styled'; import { useRecoilState, useRecoilValue } from 'recoil'; +import { BoardCardIdContext } from '@/ui/board/contexts/BoardCardIdContext'; import { useCurrentCardSelected } from '@/ui/board/hooks/useCurrentCardSelected'; -import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext'; import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState'; import { EntityChipVariant } from '@/ui/chip/components/EntityChip'; import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField'; -import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext'; -import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext'; +import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext'; +import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext'; import { Checkbox, CheckboxVariant, diff --git a/front/src/modules/companies/components/HooksCompanyBoard.tsx b/front/src/modules/companies/components/HooksCompanyBoard.tsx index ea93e0a69..7493169a5 100644 --- a/front/src/modules/companies/components/HooksCompanyBoard.tsx +++ b/front/src/modules/companies/components/HooksCompanyBoard.tsx @@ -23,7 +23,7 @@ import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBo import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds'; import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns'; -import { CompanyBoardContext } from '../states/CompanyBoardContext'; +import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; export function HooksCompanyBoard({ orderBy, @@ -39,7 +39,7 @@ export function HooksCompanyBoard({ ); const [, setAvailableFilters] = useRecoilScopedState( availableFiltersScopedState, - CompanyBoardContext, + CompanyBoardRecoilScopeContext, ); useEffect(() => { @@ -49,7 +49,10 @@ export function HooksCompanyBoard({ const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState); - const filters = useRecoilScopedValue(filtersScopedState, CompanyBoardContext); + const filters = useRecoilScopedValue( + filtersScopedState, + CompanyBoardRecoilScopeContext, + ); const updateCompanyBoard = useUpdateCompanyBoard(); diff --git a/front/src/modules/companies/components/NewCompanyProgressButton.tsx b/front/src/modules/companies/components/NewCompanyProgressButton.tsx index 5744eabed..de4d6af38 100644 --- a/front/src/modules/companies/components/NewCompanyProgressButton.tsx +++ b/front/src/modules/companies/components/NewCompanyProgressButton.tsx @@ -6,8 +6,8 @@ import { v4 as uuidv4 } from 'uuid'; import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries'; import { currentPipelineState } from '@/pipeline/states/currentPipelineState'; import { NewButton } from '@/ui/board/components/NewButton'; +import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext'; import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState'; -import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext'; import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; diff --git a/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx index 39a723d78..b1bb13295 100644 --- a/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import styled from '@emotion/styled'; -import { FieldContext } from '@/ui/editable-field/states/FieldContext'; +import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql'; @@ -60,7 +60,7 @@ export function CompanyNameEditableField({ company }: OwnProps) { } return ( - + { - setAvailableFilters(availableFilters); - }, [setAvailableFilters, availableFilters]); -} diff --git a/front/src/modules/companies/states/CompanyBoardContext.ts b/front/src/modules/companies/states/CompanyBoardContext.ts deleted file mode 100644 index 4ab4abd9e..000000000 --- a/front/src/modules/companies/states/CompanyBoardContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; - -export const CompanyBoardContext = createContext(null); diff --git a/front/src/modules/companies/states/companyBoardIndexState.ts b/front/src/modules/companies/states/companyBoardIndexState.ts deleted file mode 100644 index b9280b813..000000000 --- a/front/src/modules/companies/states/companyBoardIndexState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { CompanyProgress } from '@/companies/types/CompanyProgress'; - -export const companyBoardIndexState = atomFamily< - CompanyProgress | undefined, - string ->({ - key: 'companyBoardIndexState', - default: undefined, -}); diff --git a/front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext.ts b/front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext.ts new file mode 100644 index 000000000..34cf8c703 --- /dev/null +++ b/front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext.ts @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +export const CompanyBoardRecoilScopeContext = createContext( + null, +); diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 88a26604c..943daf703 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -11,7 +11,7 @@ import { IconList } from '@/ui/icon'; import { EntityTable } from '@/ui/table/components/EntityTable'; import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData'; import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useTableViewFields } from '@/views/hooks/useTableViewFields'; import { useViewSorts } from '@/views/hooks/useViewSorts'; @@ -28,7 +28,10 @@ import { defaultOrderBy } from '../../queries'; export function CompanyTable() { const currentViewId = useRecoilValue(currentViewIdState); - const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext); + const orderBy = useRecoilScopedValue( + sortsOrderByScopedState, + TableRecoilScopeContext, + ); const [updateEntityMutation] = useUpdateOneCompanyMutation(); const upsertEntityTableItem = useUpsertEntityTableItem(); @@ -38,10 +41,13 @@ export function CompanyTable() { }); const { updateSorts } = useViewSorts({ availableSorts, - Context: TableContext, + Context: TableRecoilScopeContext, }); - const filters = useRecoilScopedValue(filtersScopedState, TableContext); + const filters = useRecoilScopedValue( + filtersScopedState, + TableRecoilScopeContext, + ); const whereFilters = useMemo(() => { return { AND: filters.map(turnFilterIntoWhereClause) }; diff --git a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx index 28da420d1..004549592 100644 --- a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx +++ b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { FieldContext } from '@/ui/editable-field/states/FieldContext'; +import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext'; import { DoubleTextInputEdit } from '@/ui/input/double-text/components/DoubleTextInputEdit'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Person, useUpdateOnePersonMutation } from '~/generated/graphql'; @@ -46,7 +46,7 @@ export function PeopleFullNameEditableField({ people }: OwnProps) { } return ( - + ({ - key: 'peopleEntityTableFamilyState', - default: null, -}); diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index b8ebabecb..96db69c6e 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -11,7 +11,7 @@ import { IconList } from '@/ui/icon'; import { EntityTable } from '@/ui/table/components/EntityTable'; import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData'; import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useTableViewFields } from '@/views/hooks/useTableViewFields'; import { useViewSorts } from '@/views/hooks/useViewSorts'; @@ -28,7 +28,10 @@ import { defaultOrderBy } from '../../queries'; export function PeopleTable() { const currentViewId = useRecoilValue(currentViewIdState); - const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext); + const orderBy = useRecoilScopedValue( + sortsOrderByScopedState, + TableRecoilScopeContext, + ); const [updateEntityMutation] = useUpdateOnePersonMutation(); const upsertEntityTableItem = useUpsertEntityTableItem(); @@ -38,10 +41,13 @@ export function PeopleTable() { }); const { updateSorts } = useViewSorts({ availableSorts, - Context: TableContext, + Context: TableRecoilScopeContext, }); - const filters = useRecoilScopedValue(filtersScopedState, TableContext); + const filters = useRecoilScopedValue( + filtersScopedState, + TableRecoilScopeContext, + ); const whereFilters = useMemo(() => { return { AND: filters.map(turnFilterIntoWhereClause) }; diff --git a/front/src/modules/pipeline/states/pipelineProgressIdScopedState.ts b/front/src/modules/pipeline/states/pipelineProgressIdScopedState.ts deleted file mode 100644 index 0b0cef3d4..000000000 --- a/front/src/modules/pipeline/states/pipelineProgressIdScopedState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const pipelineProgressIdScopedState = atomFamily({ - key: 'pipelineProgressIdScopedState', - default: null, -}); diff --git a/front/src/modules/pipeline/states/pipelineStageIdScopedState.ts b/front/src/modules/pipeline/states/pipelineStageIdScopedState.ts deleted file mode 100644 index 72c7c472b..000000000 --- a/front/src/modules/pipeline/states/pipelineStageIdScopedState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const pipelineStageIdScopedState = atomFamily({ - key: 'pipelineStageIdScopedState', - default: null, -}); diff --git a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx index 55138b14a..1f1f6713c 100644 --- a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx +++ b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx @@ -7,7 +7,7 @@ import { IconTrash } from '@/ui/icon/index'; import { useDeleteManyPipelineProgressMutation } from '~/generated/graphql'; import { useRemoveCardIds } from '../hooks/useRemoveCardIds'; -import { selectedCardIdsSelector } from '../states/selectedCardIdsSelector'; +import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector'; export function BoardActionBarButtonDeleteBoardCard() { const selectedCardIds = useRecoilValue(selectedCardIdsSelector); diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index 6bc6e33b6..a12ccaea2 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -6,11 +6,11 @@ import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atla import { IconList } from '@tabler/icons-react'; import { useRecoilState } from 'recoil'; -import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; +import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; import { GET_PIPELINE_PROGRESS } from '@/pipeline/queries'; import { BoardHeader } from '@/ui/board/components/BoardHeader'; import { StyledBoard } from '@/ui/board/components/StyledBoard'; -import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext'; +import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext'; import { SelectedSortType } from '@/ui/filter-n-sort/types/interface'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -23,8 +23,8 @@ import { import { useSetCardSelected } from '../hooks/useSetCardSelected'; import { useUpdateBoardCardIds } from '../hooks/useUpdateBoardCardIds'; -import { BoardColumnContext } from '../states/BoardColumnContext'; import { boardColumnsState } from '../states/boardColumnsState'; +import { BoardColumnRecoilScopeContext } from '../states/recoil-scope-contexts/BoardColumnRecoilScopeContext'; import { BoardOptions } from '../types/BoardOptions'; import { EntityBoardColumn } from './EntityBoardColumn'; @@ -113,13 +113,16 @@ export function EntityBoard({ viewIcon={} availableSorts={boardOptions.sorts} onSortsUpdate={updateSorts} - context={CompanyBoardContext} + context={CompanyBoardRecoilScopeContext} /> {sortedBoardColumns.map((column) => ( - + (null); diff --git a/front/src/modules/ui/board/states/BoardColumnContext.ts b/front/src/modules/ui/board/states/BoardColumnContext.ts deleted file mode 100644 index beaa790c6..000000000 --- a/front/src/modules/ui/board/states/BoardColumnContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; - -export const BoardColumnContext = createContext(null); diff --git a/front/src/modules/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext.ts b/front/src/modules/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext.ts new file mode 100644 index 000000000..90bfd27cb --- /dev/null +++ b/front/src/modules/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const BoardColumnRecoilScopeContext = createContext(null); diff --git a/front/src/modules/ui/board/states/boardColumnTotalsFamilySelector.ts b/front/src/modules/ui/board/states/selectors/boardColumnTotalsFamilySelector.ts similarity index 90% rename from front/src/modules/ui/board/states/boardColumnTotalsFamilySelector.ts rename to front/src/modules/ui/board/states/selectors/boardColumnTotalsFamilySelector.ts index eb54b5ac6..2664bb29a 100644 --- a/front/src/modules/ui/board/states/boardColumnTotalsFamilySelector.ts +++ b/front/src/modules/ui/board/states/selectors/boardColumnTotalsFamilySelector.ts @@ -2,7 +2,7 @@ import { selectorFamily } from 'recoil'; import { companyProgressesFamilyState } from '@/companies/states/companyProgressesFamilyState'; -import { boardCardIdsByColumnIdFamilyState } from './boardCardIdsByColumnIdFamilyState'; +import { boardCardIdsByColumnIdFamilyState } from '../boardCardIdsByColumnIdFamilyState'; // TODO: this state should be computed during the synchronization hook and put in a generic // boardColumnTotalsFamilyState indexed by columnId. diff --git a/front/src/modules/ui/board/states/selectedCardIdsSelector.ts b/front/src/modules/ui/board/states/selectors/selectedCardIdsSelector.ts similarity index 68% rename from front/src/modules/ui/board/states/selectedCardIdsSelector.ts rename to front/src/modules/ui/board/states/selectors/selectedCardIdsSelector.ts index ff604d6ef..8ea5e1c1c 100644 --- a/front/src/modules/ui/board/states/selectedCardIdsSelector.ts +++ b/front/src/modules/ui/board/states/selectors/selectedCardIdsSelector.ts @@ -1,8 +1,8 @@ import { selector } from 'recoil'; -import { boardCardIdsByColumnIdFamilyState } from './boardCardIdsByColumnIdFamilyState'; -import { boardColumnsState } from './boardColumnsState'; -import { isCardSelectedFamilyState } from './isCardSelectedFamilyState'; +import { boardCardIdsByColumnIdFamilyState } from '../boardCardIdsByColumnIdFamilyState'; +import { boardColumnsState } from '../boardColumnsState'; +import { isCardSelectedFamilyState } from '../isCardSelectedFamilyState'; export const selectedCardIdsSelector = selector({ key: 'selectedCardIdsSelector', diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx index ca1d779c9..65c698d33 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx @@ -3,10 +3,10 @@ import { useRecoilValue } from 'recoil'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { FieldContext } from '../states/FieldContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; +import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldDateMetadata } from '../types/FieldMetadata'; @@ -30,7 +30,7 @@ export function GenericEditableDateField() { ); return ( - + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx index 603bfe316..86f24bf68 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx @@ -4,9 +4,9 @@ import { useRecoilValue } from 'recoil'; import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay'; import { parseDate } from '~/utils/date-utils'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldDateMetadata } from '../types/FieldMetadata'; diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx index ed7042669..65dd1b38f 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx @@ -1,10 +1,10 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldDateMetadata } from '../types/FieldMetadata'; import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate'; diff --git a/front/src/modules/ui/editable-field/components/GenericEditableField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableField.tsx index 501b1ddf7..f258ef241 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableField.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; import { isFieldDate } from '../types/guards/isFieldDate'; import { isFieldNumber } from '../types/guards/isFieldNumber'; import { isFieldPhone } from '../types/guards/isFieldPhone'; diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx index c59f1e501..80cf83091 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx @@ -3,10 +3,10 @@ import { useRecoilValue } from 'recoil'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { FieldContext } from '../states/FieldContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; +import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldNumberMetadata } from '../types/FieldMetadata'; @@ -29,7 +29,7 @@ export function GenericEditableNumberField() { ); return ( - + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx index ebf5dec19..44f6079be 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx @@ -7,11 +7,11 @@ import { castAsIntegerOrNull, } from '~/utils/cast-as-integer-or-null'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldNumberMetadata } from '../types/FieldMetadata'; diff --git a/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx b/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx index 69a252f9f..5ca81dfdf 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx @@ -4,10 +4,10 @@ import { useRecoilValue } from 'recoil'; import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { FieldContext } from '../states/FieldContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; +import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldPhoneMetadata } from '../types/FieldMetadata'; @@ -30,7 +30,7 @@ export function GenericEditablePhoneField() { ); return ( - + + + } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx index 815fb2497..dc1c80178 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx @@ -3,11 +3,11 @@ import { useRecoilState } from 'recoil'; import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldTextMetadata } from '../types/FieldMetadata'; diff --git a/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx index 322290d8f..726f7efe3 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx @@ -3,10 +3,10 @@ import { useRecoilValue } from 'recoil'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { FieldContext } from '../states/FieldContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; +import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldNumberMetadata } from '../types/FieldMetadata'; @@ -30,7 +30,7 @@ export function GenericEditableURLField() { ); return ( - + ; return ( - + } diff --git a/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx index dd91c4b2d..e0ce8c7de 100644 --- a/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx @@ -4,10 +4,10 @@ import { useRecoilState } from 'recoil'; import { useEditableField } from '@/ui/editable-field/hooks/useEditableField'; +import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; -import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldProbabilityMetadata } from '../types/FieldMetadata'; diff --git a/front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts b/front/src/modules/ui/editable-field/contexts/EditableFieldDefinitionContext.ts similarity index 100% rename from front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts rename to front/src/modules/ui/editable-field/contexts/EditableFieldDefinitionContext.ts diff --git a/front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts b/front/src/modules/ui/editable-field/contexts/EditableFieldEntityIdContext.ts similarity index 100% rename from front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts rename to front/src/modules/ui/editable-field/contexts/EditableFieldEntityIdContext.ts diff --git a/front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts b/front/src/modules/ui/editable-field/contexts/EditableFieldMutationContext.ts similarity index 100% rename from front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts rename to front/src/modules/ui/editable-field/contexts/EditableFieldMutationContext.ts diff --git a/front/src/modules/ui/editable-field/hooks/useEditableField.ts b/front/src/modules/ui/editable-field/hooks/useEditableField.ts index 4db05c696..7cffb74a9 100644 --- a/front/src/modules/ui/editable-field/hooks/useEditableField.ts +++ b/front/src/modules/ui/editable-field/hooks/useEditableField.ts @@ -2,14 +2,14 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; -import { FieldContext } from '../states/FieldContext'; import { isFieldInEditModeScopedState } from '../states/isFieldInEditModeScopedState'; +import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext'; import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope'; export function useEditableField() { const [isFieldInEditMode, setIsFieldInEditMode] = useRecoilScopedState( isFieldInEditModeScopedState, - FieldContext, + FieldRecoilScopeContext, ); const { diff --git a/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts b/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts index 1e6b2e1aa..b7b636686 100644 --- a/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts +++ b/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { EditableFieldMutationContext } from '../states/EditableFieldMutationContext'; +import { EditableFieldMutationContext } from '../contexts/EditableFieldMutationContext'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldChipMetadata, diff --git a/front/src/modules/ui/editable-field/states/FieldContext.ts b/front/src/modules/ui/editable-field/states/FieldContext.ts deleted file mode 100644 index 5e115242f..000000000 --- a/front/src/modules/ui/editable-field/states/FieldContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; - -export const FieldContext = createContext(null); diff --git a/front/src/modules/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext.ts b/front/src/modules/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext.ts new file mode 100644 index 000000000..8e6f18bc4 --- /dev/null +++ b/front/src/modules/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const FieldRecoilScopeContext = createContext(null); diff --git a/front/src/modules/ui/editable-field/states/genericEntityFieldFamilySelector.ts b/front/src/modules/ui/editable-field/states/selectors/genericEntityFieldFamilySelector.ts similarity index 88% rename from front/src/modules/ui/editable-field/states/genericEntityFieldFamilySelector.ts rename to front/src/modules/ui/editable-field/states/selectors/genericEntityFieldFamilySelector.ts index d624a1cdf..c3b988a8e 100644 --- a/front/src/modules/ui/editable-field/states/genericEntityFieldFamilySelector.ts +++ b/front/src/modules/ui/editable-field/states/selectors/genericEntityFieldFamilySelector.ts @@ -1,6 +1,6 @@ import { selectorFamily } from 'recoil'; -import { genericEntitiesFamilyState } from './genericEntitiesFamilyState'; +import { genericEntitiesFamilyState } from '../genericEntitiesFamilyState'; export const genericEntityFieldFamilySelector = selectorFamily({ key: 'genericEntityFieldFamilySelector', 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 da5c159fb..987fd8a0a 100644 --- a/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx +++ b/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx @@ -1,5 +1,5 @@ import { EditableField } from '@/ui/editable-field/components/EditableField'; -import { FieldContext } from '@/ui/editable-field/states/FieldContext'; +import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext'; import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { parseDate } from '~/utils/date-utils'; @@ -21,7 +21,7 @@ export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) { const internalDateValue = value ? parseDate(value).toJSDate() : null; return ( - + + ([]); diff --git a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx index 84a42a58e..7591b3c64 100644 --- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx +++ b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx @@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'; import { ActionBar } from '@/ui/action-bar/components/ActionBar'; -import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; +import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; export function EntityTableActionBar() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx index d3a07d393..637dd900c 100644 --- a/front/src/modules/ui/table/components/EntityTable.tsx +++ b/front/src/modules/ui/table/components/EntityTable.tsx @@ -9,11 +9,11 @@ import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext'; import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus'; import { useResetTableRowSelection } from '../hooks/useResetTableRowSelection'; import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState'; -import { EntityUpdateMutationContext } from '../states/EntityUpdateMutationHookContext'; import { TableHeader } from '../table-header/components/TableHeader'; import { EntityTableBody } from './EntityTableBody'; diff --git a/front/src/modules/ui/table/components/EntityTableBody.tsx b/front/src/modules/ui/table/components/EntityTableBody.tsx index c6204abde..ce6ec88b5 100644 --- a/front/src/modules/ui/table/components/EntityTableBody.tsx +++ b/front/src/modules/ui/table/components/EntityTableBody.tsx @@ -2,9 +2,9 @@ import { useRecoilValue } from 'recoil'; import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState'; +import { RowIdContext } from '../contexts/RowIdContext'; +import { RowIndexContext } from '../contexts/RowIndexContext'; import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; -import { RowIdContext } from '../states/RowIdContext'; -import { RowIndexContext } from '../states/RowIndexContext'; import { tableRowIdsState } from '../states/tableRowIdsState'; import { EntityTableRow } from './EntityTableRow'; diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index 03ab133da..abfce4da5 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -5,10 +5,10 @@ import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpen import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { contextMenuPositionState } from '../../context-menu/states/ContextMenuPositionState'; +import { ColumnIndexContext } from '../contexts/ColumnIndexContext'; +import { ViewFieldContext } from '../contexts/ViewFieldContext'; import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; -import { ColumnIndexContext } from '../states/ColumnIndexContext'; -import { ViewFieldContext } from '../states/ViewFieldContext'; export function EntityTableCell({ cellIndex }: { cellIndex: number }) { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); diff --git a/front/src/modules/ui/table/components/EntityTableRow.tsx b/front/src/modules/ui/table/components/EntityTableRow.tsx index b71306a9f..cc09351ba 100644 --- a/front/src/modules/ui/table/components/EntityTableRow.tsx +++ b/front/src/modules/ui/table/components/EntityTableRow.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { ViewFieldContext } from '../contexts/ViewFieldContext'; import { visibleTableColumnsState } from '../states/tableColumnsState'; -import { ViewFieldContext } from '../states/ViewFieldContext'; import { CheckboxCell } from './CheckboxCell'; import { EntityTableCell } from './EntityTableCell'; diff --git a/front/src/modules/ui/table/states/CellHotkeyScopeContext.ts b/front/src/modules/ui/table/contexts/CellHotkeyScopeContext.ts similarity index 100% rename from front/src/modules/ui/table/states/CellHotkeyScopeContext.ts rename to front/src/modules/ui/table/contexts/CellHotkeyScopeContext.ts diff --git a/front/src/modules/ui/table/states/ColumnIndexContext.ts b/front/src/modules/ui/table/contexts/ColumnIndexContext.ts similarity index 100% rename from front/src/modules/ui/table/states/ColumnIndexContext.ts rename to front/src/modules/ui/table/contexts/ColumnIndexContext.ts diff --git a/front/src/modules/ui/table/states/EntityUpdateMutationHookContext.ts b/front/src/modules/ui/table/contexts/EntityUpdateMutationHookContext.ts similarity index 100% rename from front/src/modules/ui/table/states/EntityUpdateMutationHookContext.ts rename to front/src/modules/ui/table/contexts/EntityUpdateMutationHookContext.ts diff --git a/front/src/modules/ui/table/states/RowIdContext.ts b/front/src/modules/ui/table/contexts/RowIdContext.ts similarity index 100% rename from front/src/modules/ui/table/states/RowIdContext.ts rename to front/src/modules/ui/table/contexts/RowIdContext.ts diff --git a/front/src/modules/ui/table/states/RowIndexContext.ts b/front/src/modules/ui/table/contexts/RowIndexContext.ts similarity index 100% rename from front/src/modules/ui/table/states/RowIndexContext.ts rename to front/src/modules/ui/table/contexts/RowIndexContext.ts diff --git a/front/src/modules/ui/table/states/ViewFieldContext.ts b/front/src/modules/ui/table/contexts/ViewFieldContext.ts similarity index 100% rename from front/src/modules/ui/table/states/ViewFieldContext.ts rename to front/src/modules/ui/table/contexts/ViewFieldContext.ts diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx index 1c93f0584..bbd92dcf5 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import { IconButton } from '@/ui/button/components/IconButton'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext'; +import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useCurrentCellEditMode } from '../hooks/useCurrentCellEditMode'; import { useEditableCell } from '../hooks/useEditableCell'; diff --git a/front/src/modules/ui/table/editable-cell/hooks/useCurrentCellPosition.ts b/front/src/modules/ui/table/editable-cell/hooks/useCurrentCellPosition.ts index 2ac9cb3f9..9442eb4aa 100644 --- a/front/src/modules/ui/table/editable-cell/hooks/useCurrentCellPosition.ts +++ b/front/src/modules/ui/table/editable-cell/hooks/useCurrentCellPosition.ts @@ -1,7 +1,7 @@ import { useContext, useMemo } from 'react'; -import { ColumnIndexContext } from '../../states/ColumnIndexContext'; -import { RowIndexContext } from '../../states/RowIndexContext'; +import { ColumnIndexContext } from '../../contexts/ColumnIndexContext'; +import { RowIndexContext } from '../../contexts/RowIndexContext'; import { CellPosition } from '../../types/CellPosition'; export function useCurrentCellPosition() { diff --git a/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts b/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts index 8da2ee7a5..94d0898cc 100644 --- a/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts +++ b/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts @@ -4,8 +4,8 @@ import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; +import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext'; import { useCloseCurrentCellInEditMode } from '../../hooks/useClearCellInEditMode'; -import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useCurrentCellEditMode } from './useCurrentCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx index 02046311f..904b89b77 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx @@ -7,7 +7,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { getLogoUrlFromDomainName } from '~/utils'; type OwnProps = { diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx index fac65c418..ed998cd8f 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { TextCellEdit } from './TextCellEdit'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx index 7607c9165..418029214 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx @@ -7,7 +7,7 @@ import { import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { GenericEditableDateCellEditMode } from './GenericEditableDateCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx index fe2244f3b..c7b656797 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx @@ -7,7 +7,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { DateCellEdit } from './DateCellEdit'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx index a3a4b8cdc..a8d929249 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx @@ -7,7 +7,7 @@ import { import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { GenericEditableDoubleTextCellEditMode } from './GenericEditableDoubleTextCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx index d53349c1a..86e218e45 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { DoubleTextCellEdit } from './DoubleTextCellEdit'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx index 348e6b73a..856f599c7 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx @@ -8,7 +8,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; type OwnProps = { viewField: ViewFieldDefinition; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx index 9a04faea8..6f6794ddd 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { DoubleTextCellEdit } from './DoubleTextCellEdit'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx index 693e8b38a..dced1a660 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { GenericEditableNumberCellEditMode } from './GenericEditableNumberCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx index 89db636a7..056f5d396 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { canBeCastAsPositiveIntegerOrNull, castAsPositiveIntegerOrNull, diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx index 907a43110..f44501f03 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx @@ -7,7 +7,7 @@ import { import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { GenericEditablePhoneCellEditMode } from './GenericEditablePhoneCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx index fb9e94be2..64b13a75b 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { TextCellEdit } from './TextCellEdit'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx index ff9b0168d..6e7780fad 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx @@ -7,7 +7,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { UserChip } from '@/users/components/UserChip'; import { getLogoUrlFromDomainName } from '~/utils'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx index fc4542169..b9ef34bda 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx @@ -10,7 +10,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { UserPicker } from '@/users/components/UserPicker'; type OwnProps = { diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx index 700c800d3..a29ec86b4 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx @@ -7,7 +7,7 @@ import { import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx index 7a54f275d..dcda09d7d 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { TextCellEdit } from './TextCellEdit'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx index 18a5f0c41..6ad38877f 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx @@ -7,7 +7,7 @@ import { import { InplaceInputURLDisplayMode } from '@/ui/input/url/components/URLTextInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { sanitizeURL } from '~/utils'; import { GenericEditableURLCellEditMode } from './GenericEditableURLCellEditMode'; diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx index 605c9d87b..28b6805a5 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx @@ -6,7 +6,7 @@ import { } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; -import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { isURL } from '~/utils/is-url'; import { TextCellEdit } from './TextCellEdit'; diff --git a/front/src/modules/ui/table/hooks/useCurrentEntityId.ts b/front/src/modules/ui/table/hooks/useCurrentEntityId.ts index ae7940735..e37f1284a 100644 --- a/front/src/modules/ui/table/hooks/useCurrentEntityId.ts +++ b/front/src/modules/ui/table/hooks/useCurrentEntityId.ts @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { RowIdContext } from '../states/RowIdContext'; +import { RowIdContext } from '../contexts/RowIdContext'; export function useCurrentRowEntityId() { const currentEntityId = useContext(RowIdContext); diff --git a/front/src/modules/ui/table/hooks/useCurrentRowSelected.ts b/front/src/modules/ui/table/hooks/useCurrentRowSelected.ts index 0f5ea5665..b2c1a8e10 100644 --- a/front/src/modules/ui/table/hooks/useCurrentRowSelected.ts +++ b/front/src/modules/ui/table/hooks/useCurrentRowSelected.ts @@ -1,8 +1,8 @@ import { useContext } from 'react'; import { useRecoilCallback, useRecoilState } from 'recoil'; +import { RowIdContext } from '../contexts/RowIdContext'; import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState'; -import { RowIdContext } from '../states/RowIdContext'; export function useCurrentRowSelected() { const currentRowId = useContext(RowIdContext); diff --git a/front/src/modules/ui/table/hooks/useSelectAllRows.ts b/front/src/modules/ui/table/hooks/useSelectAllRows.ts index 5a996cda8..00b027eba 100644 --- a/front/src/modules/ui/table/hooks/useSelectAllRows.ts +++ b/front/src/modules/ui/table/hooks/useSelectAllRows.ts @@ -1,7 +1,7 @@ import { useRecoilCallback, useRecoilValue } from 'recoil'; -import { allRowsSelectedStatusSelector } from '../states/allRowsSelectedStatusSelector'; import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState'; +import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector'; import { tableRowIdsState } from '../states/tableRowIdsState'; export function useSelectAllRows() { diff --git a/front/src/modules/ui/table/hooks/useSetEntityTableData.ts b/front/src/modules/ui/table/hooks/useSetEntityTableData.ts index 983f16837..e0d6a5716 100644 --- a/front/src/modules/ui/table/hooks/useSetEntityTableData.ts +++ b/front/src/modules/ui/table/hooks/useSetEntityTableData.ts @@ -3,7 +3,7 @@ import { useRecoilCallback } from 'recoil'; import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState'; import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { TableContext } from '@/ui/table/states/TableContext'; +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'; @@ -14,7 +14,7 @@ import { numberOfTableRowsState } from '../states/numberOfTableRowsState'; export function useSetEntityTableData() { const resetTableRowSelection = useResetTableRowSelection(); - const tableContextScopeId = useContextScopeId(TableContext); + const tableContextScopeId = useContextScopeId(TableRecoilScopeContext); return useRecoilCallback( ({ set, snapshot }) => diff --git a/front/src/modules/ui/table/hooks/useUpdateEntityField.ts b/front/src/modules/ui/table/hooks/useUpdateEntityField.ts index 4fbe45c75..1c9d74613 100644 --- a/front/src/modules/ui/table/hooks/useUpdateEntityField.ts +++ b/front/src/modules/ui/table/hooks/useUpdateEntityField.ts @@ -41,7 +41,7 @@ import { ViewFieldURLMetadata, ViewFieldURLValue, } from '../../editable-field/types/ViewField'; -import { EntityUpdateMutationContext } from '../states/EntityUpdateMutationHookContext'; +import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext'; export function useUpdateEntityField() { const updateEntity = useContext(EntityUpdateMutationContext); diff --git a/front/src/modules/ui/table/states/TableContext.ts b/front/src/modules/ui/table/states/TableContext.ts deleted file mode 100644 index 39ce72d73..000000000 --- a/front/src/modules/ui/table/states/TableContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; - -export const TableContext = createContext(null); diff --git a/front/src/modules/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext.ts b/front/src/modules/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext.ts new file mode 100644 index 000000000..e1305044f --- /dev/null +++ b/front/src/modules/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const TableRecoilScopeContext = createContext(null); diff --git a/front/src/modules/ui/table/states/allRowsSelectedStatusSelector.ts b/front/src/modules/ui/table/states/selectors/allRowsSelectedStatusSelector.ts similarity index 81% rename from front/src/modules/ui/table/states/allRowsSelectedStatusSelector.ts rename to front/src/modules/ui/table/states/selectors/allRowsSelectedStatusSelector.ts index 401404495..16b4a8e3c 100644 --- a/front/src/modules/ui/table/states/allRowsSelectedStatusSelector.ts +++ b/front/src/modules/ui/table/states/selectors/allRowsSelectedStatusSelector.ts @@ -1,8 +1,8 @@ import { selector } from 'recoil'; -import { AllRowsSelectedStatus } from '../types/AllRowSelectedStatus'; +import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; +import { numberOfTableRowsState } from '../numberOfTableRowsState'; -import { numberOfTableRowsState } from './numberOfTableRowsState'; import { selectedRowIdsSelector } from './selectedRowIdsSelector'; export const allRowsSelectedStatusSelector = selector({ diff --git a/front/src/modules/ui/table/states/selectedRowIdsSelector.ts b/front/src/modules/ui/table/states/selectors/selectedRowIdsSelector.ts similarity index 70% rename from front/src/modules/ui/table/states/selectedRowIdsSelector.ts rename to front/src/modules/ui/table/states/selectors/selectedRowIdsSelector.ts index 8cd0027c8..b64e0fbe4 100644 --- a/front/src/modules/ui/table/states/selectedRowIdsSelector.ts +++ b/front/src/modules/ui/table/states/selectors/selectedRowIdsSelector.ts @@ -1,7 +1,7 @@ import { selector } from 'recoil'; -import { isRowSelectedFamilyState } from './isRowSelectedFamilyState'; -import { tableRowIdsState } from './tableRowIdsState'; +import { isRowSelectedFamilyState } from '../isRowSelectedFamilyState'; +import { tableRowIdsState } from '../tableRowIdsState'; export const selectedRowIdsSelector = selector({ key: 'selectedRowIdsSelector', diff --git a/front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts b/front/src/modules/ui/table/states/selectors/tableEntityFieldFamilySelector.ts similarity index 88% rename from front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts rename to front/src/modules/ui/table/states/selectors/tableEntityFieldFamilySelector.ts index 4590118fb..c4b83d27f 100644 --- a/front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts +++ b/front/src/modules/ui/table/states/selectors/tableEntityFieldFamilySelector.ts @@ -1,6 +1,6 @@ import { selectorFamily } from 'recoil'; -import { tableEntitiesFamilyState } from './tableEntitiesFamilyState'; +import { tableEntitiesFamilyState } from '../tableEntitiesFamilyState'; export const tableEntityFieldFamilySelector = selectorFamily({ key: 'tableEntityFieldFamilySelector', 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 65cbe8e7b..f198880e3 100644 --- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx +++ b/front/src/modules/ui/table/table-header/components/TableHeader.tsx @@ -15,7 +15,7 @@ import { TableOptionsDropdownButton } from '@/ui/table/options/components/TableO import { TopBar } from '@/ui/top-bar/TopBar'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; -import { TableContext } from '../../states/TableContext'; +import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext'; type OwnProps = { viewName: string; @@ -44,7 +44,7 @@ export function TableHeader({ }: OwnProps) { const [sorts, setSorts] = useRecoilScopedState[]>( sortScopedState, - TableContext, + TableRecoilScopeContext, ); const handleSortsUpdate = onSortsUpdate ?? setSorts; @@ -76,7 +76,7 @@ export function TableHeader({ rightComponent={ <> @@ -93,7 +93,7 @@ export function TableHeader({ } bottomComponent={ { diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index ff9b19fbc..4045a884a 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -11,7 +11,7 @@ import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTab import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem'; import { useUpsertTableRowId } from '@/ui/table/hooks/useUpsertTableRowId'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { useInsertOneCompanyMutation } from '~/generated/graphql'; @@ -68,7 +68,7 @@ export function Companies() { icon={} onAddButtonClick={handleAddButtonClick} > - + diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index 2a05100c4..1a1c72b1d 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -5,7 +5,7 @@ import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableM import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; const StyledTableContainer = styled.div` @@ -22,7 +22,7 @@ export function CompaniesMockMode() { title="Companies" icon={} > - + diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx index f7d293021..f9fb9db0b 100644 --- a/front/src/pages/companies/CompanyShow.tsx +++ b/front/src/pages/companies/CompanyShow.tsx @@ -7,10 +7,10 @@ import { CompanyTeam } from '@/companies/components/CompanyTeam'; import { useCompanyQuery } from '@/companies/queries'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField'; +import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext'; +import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext'; import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox'; -import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext'; -import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; diff --git a/front/src/pages/companies/companies-filters.tsx b/front/src/pages/companies/companies-filters.tsx index b2e93124f..05cf3cb24 100644 --- a/front/src/pages/companies/companies-filters.tsx +++ b/front/src/pages/companies/companies-filters.tsx @@ -7,7 +7,7 @@ import { IconUser, IconUsers, } from '@/ui/icon/index'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { icon } from '@/ui/theme/constants/icon'; import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect'; import { Company } from '~/generated/graphql'; @@ -51,7 +51,7 @@ export const companiesFilters: FilterDefinitionByEntity[] = [ icon: , type: 'entity', entitySelectComponent: ( - + ), }, ]; diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index 5f0ce1b12..bf8b60616 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -2,15 +2,15 @@ import { useCallback, useState } from 'react'; import { useTheme } from '@emotion/react'; import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard'; -import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; +import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; import { defaultPipelineProgressOrderBy, PipelineProgressesSelectedSortType, } from '@/pipeline/queries'; import { EntityBoard } from '@/ui/board/components/EntityBoard'; import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar'; +import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext'; import { useActionBarEntries } from '@/ui/board/hooks/useActionBarEntries'; -import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { IconTargetArrow } from '@/ui/icon/index'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; @@ -71,7 +71,7 @@ export function Opportunities() { icon={} > - + [] ), type: 'entity', entitySelectComponent: ( - + ), }, { @@ -43,7 +45,9 @@ export const opportunitiesFilters: FilterDefinitionByEntity[] icon: , type: 'entity', entitySelectComponent: ( - + ), }, ]; diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index d6ea4cb58..f61a5a984 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -9,7 +9,7 @@ import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTab import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem'; import { useUpsertTableRowId } from '@/ui/table/hooks/useUpsertTableRowId'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { useInsertOnePersonMutation } from '~/generated/graphql'; @@ -56,7 +56,7 @@ export function People() { const theme = useTheme(); return ( - + } diff --git a/front/src/pages/people/PersonShow.tsx b/front/src/pages/people/PersonShow.tsx index 2206bfec0..6f0aeea2e 100644 --- a/front/src/pages/people/PersonShow.tsx +++ b/front/src/pages/people/PersonShow.tsx @@ -7,10 +7,10 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta import { useFavorites } from '@/favorites/hooks/useFavorites'; import { GET_PERSON, usePersonQuery } from '@/people/queries'; import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField'; +import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext'; +import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext'; import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox'; -import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext'; -import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext'; -import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext'; import { IconUser } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; diff --git a/front/src/pages/people/people-filters.tsx b/front/src/pages/people/people-filters.tsx index 5ce2af084..12d0bbc97 100644 --- a/front/src/pages/people/people-filters.tsx +++ b/front/src/pages/people/people-filters.tsx @@ -8,7 +8,7 @@ import { IconPhone, IconUser, } from '@/ui/icon/index'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { icon } from '@/ui/theme/constants/icon'; import { Person } from '~/generated/graphql'; @@ -39,7 +39,7 @@ export const peopleFilters: FilterDefinitionByEntity[] = [ ), type: 'entity', entitySelectComponent: ( - + ), }, { diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/tasks/Tasks.tsx index e9b678bcf..26f332df6 100644 --- a/front/src/pages/tasks/Tasks.tsx +++ b/front/src/pages/tasks/Tasks.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { TaskGroups } from '@/activities/components/TaskGroups'; -import { TasksContext } from '@/activities/states/TasksContext'; +import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext'; import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton'; import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope'; import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index'; @@ -47,17 +47,17 @@ export function Tasks() { icon={} > - + - + } rightComponent={ } diff --git a/front/src/pages/tasks/tasks-filters.tsx b/front/src/pages/tasks/tasks-filters.tsx index d3c27c048..cf3725abc 100644 --- a/front/src/pages/tasks/tasks-filters.tsx +++ b/front/src/pages/tasks/tasks-filters.tsx @@ -1,6 +1,6 @@ import { IconUser } from '@tabler/icons-react'; -import { TasksContext } from '@/activities/states/TasksContext'; +import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext'; import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity'; import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect'; import { Activity } from '~/generated/graphql'; @@ -12,7 +12,7 @@ export const tasksFilters: FilterDefinitionByEntity[] = [ icon: , type: 'entity', entitySelectComponent: ( - + ), }, ]; diff --git a/front/src/sync-hooks/CommandMenuHook.tsx b/front/src/sync-hooks/CommandMenuHook.tsx index b056093ed..da6bd7096 100644 --- a/front/src/sync-hooks/CommandMenuHook.tsx +++ b/front/src/sync-hooks/CommandMenuHook.tsx @@ -2,10 +2,10 @@ import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; import { commandMenuCommands } from '@/command-menu/constants/commandMenuCommands'; -import { commandMenuCommand } from '@/command-menu/states/commandMenuCommandsState'; +import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState'; export function CommandMenuHook() { - const setCommands = useSetRecoilState(commandMenuCommand); + const setCommands = useSetRecoilState(commandMenuCommandsState); const commands = commandMenuCommands; useEffect(() => { diff --git a/front/src/testing/decorators/CellPositionDecorator.tsx b/front/src/testing/decorators/CellPositionDecorator.tsx index 951b47335..677916f3b 100644 --- a/front/src/testing/decorators/CellPositionDecorator.tsx +++ b/front/src/testing/decorators/CellPositionDecorator.tsx @@ -1,7 +1,7 @@ import { Decorator } from '@storybook/react'; -import { ColumnIndexContext } from '../../modules/ui/table/states/ColumnIndexContext'; -import { RowIndexContext } from '../../modules/ui/table/states/RowIndexContext'; +import { ColumnIndexContext } from '../../modules/ui/table/contexts/ColumnIndexContext'; +import { RowIndexContext } from '../../modules/ui/table/contexts/RowIndexContext'; export const CellPositionDecorator: Decorator = (Story) => ( From 45687f5100de9f0f3f063768718a66108939ede4 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 14 Aug 2023 15:43:55 -0700 Subject: [PATCH 8/8] Fix conficts --- front/src/modules/people/hooks/useActionBarEntries.tsx | 2 +- front/src/modules/people/hooks/useContextMenuEntries.tsx | 2 +- front/src/modules/people/table/components/PeopleTable.tsx | 4 ++-- .../action-bar/components/__stories__/ActionBar.stories.tsx | 4 ++-- .../components/__stories__/ContextMenu.stories.tsx | 4 ++-- .../table/context-menu/components/EntityTableContextMenu.tsx | 2 +- front/src/pages/people/People.tsx | 4 ++-- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/front/src/modules/people/hooks/useActionBarEntries.tsx b/front/src/modules/people/hooks/useActionBarEntries.tsx index 6409ad8c4..d3bf44c8f 100644 --- a/front/src/modules/people/hooks/useActionBarEntries.tsx +++ b/front/src/modules/people/hooks/useActionBarEntries.tsx @@ -7,7 +7,7 @@ import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; diff --git a/front/src/modules/people/hooks/useContextMenuEntries.tsx b/front/src/modules/people/hooks/useContextMenuEntries.tsx index 4171cfc2a..9e26db4cf 100644 --- a/front/src/modules/people/hooks/useContextMenuEntries.tsx +++ b/front/src/modules/people/hooks/useContextMenuEntries.tsx @@ -7,7 +7,7 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; -import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index 96db69c6e..db3bf4bf9 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -1,9 +1,9 @@ import { useMemo } from 'react'; import { useRecoilValue } from 'recoil'; -import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; -import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; import { peopleViewFields } from '@/people/constants/peopleViewFields'; +import { useActionBarEntries } from '@/people/hooks/useActionBarEntries'; +import { useContextMenuEntries } from '@/people/hooks/useContextMenuEntries'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; 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 83e6e81d4..8ce5f2b1f 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 @@ -4,7 +4,7 @@ import { useSetRecoilState } from 'recoil'; import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; @@ -24,7 +24,7 @@ const meta: Meta = { component: FilledActionBar, decorators: [ (Story) => ( - + 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 0fa1c6b6f..8146b9150 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 @@ -4,7 +4,7 @@ import { useSetRecoilState } from 'recoil'; import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; -import { TableContext } from '@/ui/table/states/TableContext'; +import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; @@ -30,7 +30,7 @@ const meta: Meta = { component: FilledContextMenu, decorators: [ (Story) => ( - + diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx index 10bbaf088..bd49c6cb8 100644 --- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx +++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx @@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'; import { ContextMenu } from '@/ui/context-menu/components/ContextMenu'; -import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; +import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; export function EntityTableContextMenu() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index f61a5a984..6f2845285 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -65,8 +65,8 @@ export function People() { - - + + );