From 52e0e385a460f6edde9ce0de9cb790df2148deab Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Fri, 12 Jan 2024 14:30:36 +0100 Subject: [PATCH] Pass object name plural in props + remove unused state (#3401) * Pass object name plural in props + remove unused state * Fix test --------- Co-authored-by: Thomas Trompette --- .../object-record/components/RecordTableEffect.tsx | 5 ----- .../hooks/__tests__/useObjectRecordTable.test.tsx | 14 +++++++------- .../object-record/hooks/useObjectRecordTable.ts | 9 +++------ .../record-table/components/RecordTable.tsx | 12 +++++------- .../record-table/components/RecordTableBody.tsx | 8 ++++++-- .../components/RecordTableBodyEffect.tsx | 10 ++++++++-- .../components/RecordTableBodyFetchMoreLoader.tsx | 10 ++++++++-- .../components/RecordTableWithWrappers.tsx | 1 + .../hooks/internal/useRecordTableStates.ts | 2 -- .../record-table/hooks/useRecordTable.ts | 9 +-------- .../states/objectNamePluralStateScopeMap.ts | 6 ------ .../components/SignInBackgroundMockContainer.tsx | 2 +- 12 files changed, 40 insertions(+), 48 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts diff --git a/packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx b/packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx index 7ad4c61f4..b4725f2b6 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx @@ -22,13 +22,8 @@ export const RecordTableEffect = ({ setAvailableTableColumns, setOnEntityCountChange, setObjectMetadataConfig, - setObjectNamePlural, } = useRecordTable({ recordTableId }); - useEffect(() => { - setObjectNamePlural(objectNamePlural); - }, [setObjectNamePlural, objectNamePlural]); - const { objectNameSingular } = useObjectNameSingularFromPlural({ objectNamePlural, }); diff --git a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx index bc8286cc7..0824b33ee 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx @@ -5,18 +5,15 @@ import { renderHook } from '@testing-library/react'; import { RecoilRoot } from 'recoil'; import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; const recordTableId = 'people'; +const objectNamePlural = 'people'; const onColumnsChange = jest.fn(); const ObjectNamePluralSetter = ({ children }: { children: ReactNode }) => { - const { setObjectNamePlural } = useRecordTable({ recordTableId }); - setObjectNamePlural('people'); - return <>{children}; }; @@ -39,9 +36,12 @@ const Wrapper = ({ children }: { children: ReactNode }) => { describe('useObjectRecordTable', () => { it('should skip fetch if currentWorkspace is undefined', async () => { - const { result } = renderHook(() => useObjectRecordTable(), { - wrapper: Wrapper, - }); + const { result } = renderHook( + () => useObjectRecordTable(objectNamePlural), + { + wrapper: Wrapper, + }, + ); expect(result.current.loading).toBe(false); expect(Array.isArray(result.current.records)).toBe(true); diff --git a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts index d815f3f44..f4927c856 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts @@ -11,12 +11,9 @@ import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constan import { useFindManyRecords } from './useFindManyRecords'; -export const useObjectRecordTable = () => { - const { - objectNamePlural, - setRecordTableData, - setIsRecordTableInitialLoading, - } = useRecordTable(); +export const useObjectRecordTable = (objectNamePlural: string) => { + const { setRecordTableData, setIsRecordTableInitialLoading } = + useRecordTable(); const currentWorkspace = useRecoilValue(currentWorkspaceState); const { objectNameSingular } = useObjectNameSingularFromPlural({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index b0e878ab6..6a8a3e53e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -1,6 +1,5 @@ import { useContext } from 'react'; import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody'; import { RecordTableBodyEffect } from '@/object-record/record-table/components/RecordTableBodyEffect'; @@ -99,20 +98,19 @@ const StyledTable = styled.table` type RecordTableProps = { recordTableId: string; + objectNamePlural: string; onColumnsChange: (columns: any) => void; createRecord: () => void; }; export const RecordTable = ({ recordTableId, + objectNamePlural, onColumnsChange, createRecord, }: RecordTableProps) => { const recordTableRef = useContext(RecordTableRefContext); - const { scopeId, objectNamePluralState } = - useRecordTableStates(recordTableId); - - const objectNamePlural = useRecoilValue(objectNamePluralState()); + const { scopeId } = useRecordTableStates(recordTableId); return ( - - + + ) : ( <> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx index 0fc0121bd..6ed4d949c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx @@ -6,7 +6,11 @@ import { RowIdContext } from '@/object-record/record-table/contexts/RowIdContext import { RowIndexContext } from '@/object-record/record-table/contexts/RowIndexContext'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; -export const RecordTableBody = () => { +type RecordTableBodyProps = { + objectNamePlural: string; +}; + +export const RecordTableBody = ({ objectNamePlural }: RecordTableBodyProps) => { const { tableRowIdsState } = useRecordTableStates(); const tableRowIds = useRecoilValue(tableRowIdsState()); @@ -22,7 +26,7 @@ export const RecordTableBody = () => { ))} - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx index d3af3ac94..3ce133548 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx @@ -5,14 +5,20 @@ import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; -export const RecordTableBodyEffect = () => { +type RecordTableBodyEffectProps = { + objectNamePlural: string; +}; + +export const RecordTableBodyEffect = ({ + objectNamePlural, +}: RecordTableBodyEffectProps) => { const { fetchMoreRecords: fetchMoreObjects, records, setRecordTableData, queryStateIdentifier, loading, - } = useObjectRecordTable(); + } = useObjectRecordTable(objectNamePlural); const { tableLastRowVisibleState } = useRecordTableStates(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx index 1b0802409..860d9e3aa 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx @@ -8,8 +8,14 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; import { grayScale } from '@/ui/theme/constants/colors'; -export const RecordTableBodyFetchMoreLoader = () => { - const { queryStateIdentifier } = useObjectRecordTable(); +type RecordTableBodyFetchMoreLoaderProps = { + objectNamePlural: string; +}; + +export const RecordTableBodyFetchMoreLoader = ({ + objectNamePlural, +}: RecordTableBodyFetchMoreLoaderProps) => { + const { queryStateIdentifier } = useObjectRecordTable(objectNamePlural); const { setRecordTableLastRowVisible } = useRecordTable(); const isFetchingMoreObjects = useRecoilValue( diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx index 744bf1df0..172743807 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx @@ -120,6 +120,7 @@ export const RecordTableWithWrappers = ({
(columns) => { persistViewFields( mapColumnDefinitionsToViewFields(columns), diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts index 8425354f2..1e9d6a4ad 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts @@ -8,7 +8,6 @@ import { isSoftFocusOnTableCellFamilyStateScopeMap } from '@/object-record/recor import { isTableCellInEditModeFamilyStateScopeMap } from '@/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap'; import { numberOfTableRowsStateScopeMap } from '@/object-record/record-table/states/numberOfTableRowsStateScopeMap'; import { objectMetadataConfigStateScopeMap } from '@/object-record/record-table/states/objectMetadataConfigStateScopeMap'; -import { objectNamePluralStateScopeMap } from '@/object-record/record-table/states/objectNamePluralStateScopeMap'; import { onColumnsChangeStateScopeMap } from '@/object-record/record-table/states/onColumnsChangeStateScopeMap'; import { onEntityCountChangeStateScopeMap } from '@/object-record/record-table/states/onEntityCountChangeStateScopeMap'; import { resizeFieldOffsetStateScopeMap } from '@/object-record/record-table/states/resizeFieldOffsetStateScopeMap'; @@ -49,7 +48,6 @@ export const useRecordTableStates = (recordTableId?: string) => { objectMetadataConfigStateScopeMap, scopeId, ), - objectNamePluralState: getState(objectNamePluralStateScopeMap, scopeId), onColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId), onEntityCountChangeState: getState( onEntityCountChangeStateScopeMap, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts index 716826200..9b4f8358a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts @@ -1,4 +1,4 @@ -import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil'; +import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; import { useGetIsSomeCellInEditMode } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode'; @@ -42,7 +42,6 @@ export const useRecordTable = (props?: useRecordTableProps) => { tableLastRowVisibleState, numberOfTableColumnsSelector, selectedRowIdsSelector, - objectNamePluralState, } = useRecordTableStates(recordTableId); const setAvailableTableColumns = useSetRecoilState( @@ -71,10 +70,6 @@ export const useRecordTable = (props?: useRecordTableProps) => { tableLastRowVisibleState(), ); - const [objectNamePlural, setObjectNamePlural] = useRecoilState( - objectNamePluralState(), - ); - const onColumnsChange = useRecoilCallback( ({ snapshot }) => (columns: ColumnDefinition[]) => { @@ -351,7 +346,5 @@ export const useRecordTable = (props?: useRecordTableProps) => { setSoftFocusPosition, getIsSomeCellInEditMode, selectedRowIdsSelector, - objectNamePlural, - setObjectNamePlural, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts deleted file mode 100644 index 20ae79085..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const objectNamePluralStateScopeMap = createStateScopeMap({ - key: 'objectNamePlural', - defaultValue: '', -}); diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx index 54c74980d..8e18843fb 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx @@ -15,7 +15,7 @@ const StyledContainer = styled.div` export const SignInBackgroundMockContainer = () => { const objectNamePlural = 'companies'; - const recordTableId = 'Sign-up-mock-record-table-id'; + const recordTableId = 'sign-up-mock-record-table-id'; const viewBarId = 'companies-mock'; return (