admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Pass object name plural in props + remove unused state (#3401)

Browse Source 
* Pass object name plural in props + remove unused state

* Fix test

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-12 14:30:36 +01:00
committed by GitHub
parent 3e8f4ec2c5
commit 52e0e385a4
12 changed files with 40 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx
View File

@ -22,13 +22,8 @@ export const RecordTableEffect = ({
setAvailableTableColumns,
setOnEntityCountChange,
setObjectMetadataConfig,
setObjectNamePlural,
} = useRecordTable({ recordTableId });
useEffect(() => {
setObjectNamePlural(objectNamePlural);
}, [setObjectNamePlural, objectNamePlural]);
const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});

14
packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx
View File

@ -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);

9
packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts
View File

@ -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({

12
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -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 (
<RecordTableScope
@ -123,8 +121,8 @@ export const RecordTable = ({
{objectNamePlural ? (
<StyledTable ref={recordTableRef} className="entity-table-cell">
<RecordTableHeader createRecord={createRecord} />
<RecordTableBodyEffect />
<RecordTableBody />
<RecordTableBodyEffect objectNamePlural={objectNamePlural} />
<RecordTableBody objectNamePlural={objectNamePlural} />
</StyledTable>
) : (
<></>

8
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx
View File

@ -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 = () => {
</RowIdContext.Provider>
))}
</tbody>
<RecordTableBodyFetchMoreLoader />
<RecordTableBodyFetchMoreLoader objectNamePlural={objectNamePlural} />
</>
);
};

10
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
View File

@ -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();

10
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx
View File

@ -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(

1
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -120,6 +120,7 @@ export const RecordTableWithWrappers = ({
<div ref={tableBodyRef}>
<RecordTable
recordTableId={recordTableId}
objectNamePlural={objectNamePlural}
onColumnsChange={useRecoilCallback(() => (columns) => {
persistViewFields(
mapColumnDefinitionsToViewFields(columns),

2
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts
View File

@ -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,

9
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
View File

@ -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<FieldMetadata>[]) => {
@ -351,7 +346,5 @@ export const useRecordTable = (props?: useRecordTableProps) => {
setSoftFocusPosition,
getIsSomeCellInEditMode,
selectedRowIdsSelector,
objectNamePlural,
setObjectNamePlural,
};
};

6
packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts
View File

@ -1,6 +0,0 @@
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const objectNamePluralStateScopeMap = createStateScopeMap<string>({
key: 'objectNamePlural',
defaultValue: '',
});

2
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
View File

@ -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 (