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 <thomast@twenty.com>

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,
   });

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(), {
+    const { result } = renderHook(
-      wrapper: Wrapper,
+      () => useObjectRecordTable(objectNamePlural),
-    });
+      {
+        wrapper: Wrapper,
+      },
+    );
 
     expect(result.current.loading).toBe(false);
     expect(Array.isArray(result.current.records)).toBe(true);

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 = () => {
+export const useObjectRecordTable = (objectNamePlural: string) => {
-  const {
+  const { setRecordTableData, setIsRecordTableInitialLoading } =
-    objectNamePlural,
+    useRecordTable();
-    setRecordTableData,
-    setIsRecordTableInitialLoading,
-  } = useRecordTable();
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const { objectNameSingular } = useObjectNameSingularFromPlural({

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

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

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

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 = () => {
+type RecordTableBodyFetchMoreLoaderProps = {
-  const { queryStateIdentifier } = useObjectRecordTable();
+  objectNamePlural: string;
+};
+
+export const RecordTableBodyFetchMoreLoader = ({
+  objectNamePlural,
+}: RecordTableBodyFetchMoreLoaderProps) => {
+  const { queryStateIdentifier } = useObjectRecordTable(objectNamePlural);
   const { setRecordTableLastRowVisible } = useRecordTable();
 
   const isFetchingMoreObjects = useRecoilValue(

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

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

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,

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

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

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

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 (