fix: make changes regarding comments

twentyhq · Nov 13, 2024 · 0dec324 · 0dec324
1 parent a79f9ab
commit 0dec324
Show file tree

Hide file tree

Showing 19 changed files with 350 additions and 186 deletions.
diff --git a/...ty-front/src/modules/object-record/record-group/components/RecordGroupContextProvider.tsx b/...ty-front/src/modules/object-record/record-group/components/RecordGroupContextProvider.tsx
diff --git a/...nty-front/src/modules/object-record/record-group/hooks/useCurrentRecordGroupDefinition.ts b/...nty-front/src/modules/object-record/record-group/hooks/useCurrentRecordGroupDefinition.ts
@@ -1,24 +1,37 @@
-import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
+import { RecordGroupContext } from '@/object-record/record-group/states/context/RecordGroupContext';
+import { hasRecordGroupDefinitionsComponentSelector } from '@/object-record/record-group/states/hasRecordGroupDefinitionsComponentSelector';
 import { recordGroupDefinitionsComponentState } from '@/object-record/record-group/states/recordGroupDefinitionsComponentState';
-import { recordGroupDefaultId } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 
 export const useCurrentRecordGroupDefinition = (recordTableId?: string) => {
-  const currentRecordGroupId = useCurrentRecordGroupId();
+  const context = useContext(RecordGroupContext);
+
+  const hasRecordGroups = useRecoilComponentValueV2(
+    hasRecordGroupDefinitionsComponentSelector,
+    recordTableId,
+  );
 
   const recordGroupDefinitions = useRecoilComponentValueV2(
     recordGroupDefinitionsComponentState,
     recordTableId,
   );
 
   const recordGroupDefinition = useMemo(() => {
-    if (currentRecordGroupId === recordGroupDefaultId) {
+    if (!hasRecordGroups) {
       return undefined;
     }
 
-    return recordGroupDefinitions.find(({ id }) => id === currentRecordGroupId);
-  }, [currentRecordGroupId, recordGroupDefinitions]);
+    if (!context) {
+      throw new Error(
+        'useCurrentRecordGroupDefinition must be used within a RecordGroupContextProvider.',
+      );
+    }
+
+    return recordGroupDefinitions.find(
+      ({ id }) => id === context.recordGroupId,
+    );
+  }, [context, hasRecordGroups, recordGroupDefinitions]);
 
   return recordGroupDefinition;
 };
diff --git a/...ages/twenty-front/src/modules/object-record/record-group/hooks/useCurrentRecordGroupId.ts b/...ages/twenty-front/src/modules/object-record/record-group/hooks/useCurrentRecordGroupId.ts
@@ -6,12 +6,14 @@ export const useCurrentRecordGroupId = () => {
 
   if (!context) {
     throw new Error(
-      'useCurrentRecordGroup must be used within a RecordGroupContextProvider',
+      'useCurrentRecordGroupId must be used within a RecordGroupContextProvider.',
     );
   }
 
   if (!context.recordGroupId) {
-    throw new Error('RecordGroupContext is malformed');
+    throw new Error(
+      'RecordGroupContext is malformed. recordGroupId is missing.',
+    );
   }
 
   return context.recordGroupId;

diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts
@@ -30,7 +30,7 @@ export const useRecordGroupActions = () => {
   });
 
   const { viewGroupFieldMetadataItem } = useRecordGroups({
-    objectMetadataNameSingular: objectNameSingular,
+    objectNameSingular,
   });
 
   const { handleVisibilityChange: handleRecordGroupVisibilityChange } =

diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroups.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroups.ts
@@ -5,18 +5,18 @@ import { recordGroupDefinitionsComponentState } from '@/object-record/record-gro
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 type UseRecordGroupsParams = {
-  objectMetadataNameSingular: string;
+  objectNameSingular: string;
 };
 
 export const useRecordGroups = ({
-  objectMetadataNameSingular,
+  objectNameSingular,
 }: UseRecordGroupsParams) => {
   const recordGroupDefinitions = useRecoilComponentValueV2(
     recordGroupDefinitionsComponentState,
   );
 
   const { objectMetadataItem } = useObjectMetadataItem({
-    objectNameSingular: objectMetadataNameSingular,
+    objectNameSingular,
   });
 
   const viewGroupFieldMetadataItem = useMemo(() => {

diff --git a/...c/modules/object-record/record-group/states/hasRecordGroupDefinitionsComponentSelector.ts b/...c/modules/object-record/record-group/states/hasRecordGroupDefinitionsComponentSelector.ts
@@ -0,0 +1,21 @@
+import { recordGroupDefinitionsComponentState } from '@/object-record/record-group/states/recordGroupDefinitionsComponentState';
+
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
+
+export const hasRecordGroupDefinitionsComponentSelector =
+  createComponentSelectorV2<boolean>({
+    key: 'hasRecordGroupDefinitionsComponentSelector',
+    componentInstanceContext: ViewComponentInstanceContext,
+    get:
+      ({ instanceId }) =>
+      ({ get }) => {
+        const recordGroupDefinitions = get(
+          recordGroupDefinitionsComponentState.atomFamily({
+            instanceId,
+          }),
+        );
+
+        return recordGroupDefinitions.length > 0;
+      },
+  });
diff --git a/...ages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/...ages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
@@ -27,6 +27,9 @@ export const useFindManyParams = (
     objectNameSingular,
   });
 
+  const currentRecordGroupDefinition =
+    useCurrentRecordGroupDefinition(recordTableId);
+
   const tableViewFilterGroups = useRecoilComponentValueV2(
     tableViewFilterGroupsComponentState,
     recordTableId,
@@ -40,33 +43,13 @@ export const useFindManyParams = (
     recordTableId,
   );
 
-  const filter = computeViewRecordGqlOperationFilter(
+  const stateFilter = computeViewRecordGqlOperationFilter(
     tableFilters,
     objectMetadataItem?.fields ?? [],
     tableViewFilterGroups,
   );
 
-  const orderBy = turnSortsIntoOrderBy(objectMetadataItem, tableSorts);
-
-  return { objectNameSingular, filter, orderBy };
-};
-
-export const useLoadRecordIndexTable = (objectNameSingular: string) => {
-  const { objectMetadataItem } = useObjectMetadataItem({
-    objectNameSingular,
-  });
-
-  const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
-
-  const { setRecordTableData, setIsRecordTableInitialLoading } =
-    useRecordTable();
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const params = useFindManyParams(objectNameSingular);
-
-  const recordGqlFields = useRecordTableRecordGqlFields({ objectMetadataItem });
-
-  const groupByFilter = useMemo(() => {
+  const recordGroupFilter = useMemo(() => {
     if (isDefined(currentRecordGroupDefinition)) {
       const fieldMetadataItem = objectMetadataItem?.fields.find(
         (fieldMetadataItem) =>
@@ -87,9 +70,32 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     // TODO: Handle case when value is nullable
 
     return {};
-  }, [objectMetadataItem?.fields, currentRecordGroupDefinition]);
+  }, [objectMetadataItem.fields, currentRecordGroupDefinition]);
+
+  const orderBy = turnSortsIntoOrderBy(objectMetadataItem, tableSorts);
 
-  // TODO: Don't fetch records based on visibleRecordGroups here, this hook instead should be placed somewhere else with a dedicated filter for a given visible record group
+  return {
+    objectNameSingular,
+    filter: {
+      ...stateFilter,
+      ...recordGroupFilter,
+    },
+    orderBy,
+  };
+};
+
+export const useLoadRecordIndexTable = (objectNameSingular: string) => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const { setRecordTableData, setIsRecordTableInitialLoading } =
+    useRecordTable();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const params = useFindManyParams(objectNameSingular);
+
+  const recordGqlFields = useRecordTableRecordGqlFields({ objectMetadataItem });
 
   const {
     records,
@@ -100,10 +106,6 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     hasNextPage,
   } = useFindManyRecords({
     ...params,
-    filter: {
-      ...params.filter,
-      ...groupByFilter,
-    },
     recordGqlFields,
     onCompleted: () => {
       setIsRecordTableInitialLoading(false);

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
@@ -1,14 +1,17 @@
 import styled from '@emotion/styled';
 import { isNonEmptyString, isNull } from '@sniptt/guards';
 
-import { RecordGroupContextProvider } from '@/object-record/record-group/components/RecordGroupContextProvider';
+import { hasRecordGroupDefinitionsComponentSelector } from '@/object-record/record-group/states/hasRecordGroupDefinitionsComponentSelector';
 import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
+import { RecordTableStickyEffect } from '@/object-record/record-table/components/RecordTableStickyEffect';
 import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
 import { RecordTableBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEffect';
+import { RecordTableBodyRecordGroupEffects } from '@/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupEffects';
+import { RecordTableBodyRecordGroups } from '@/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroups';
 import { RecordTableBodyUnselectEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyUnselectEffect';
 import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
 import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
@@ -60,6 +63,11 @@ export const RecordTable = ({
     recordTableId,
   );
 
+  const hasRecordGroups = useRecoilComponentValueV2(
+    hasRecordGroupDefinitionsComponentSelector,
+    recordTableId,
+  );
+
   const recordTableIsEmpty =
     !isRecordTableInitialLoading &&
     tableRowIds.length === 0 &&
@@ -83,11 +91,11 @@ export const RecordTable = ({
         recordTableId={recordTableId}
         viewBarId={viewBarId}
       >
-        <RecordGroupContextProvider
-          objectMetadataNameSingular={objectNameSingular}
-        >
+        {!hasRecordGroups ? (
           <RecordTableBodyEffect />
-        </RecordGroupContextProvider>
+        ) : (
+          <RecordTableBodyRecordGroupEffects />
+        )}
         <RecordTableBodyUnselectEffect
           tableBodyRef={tableBodyRef}
           recordTableId={recordTableId}
@@ -97,12 +105,15 @@ export const RecordTable = ({
         ) : (
           <>
             <StyledTable className="entity-table-cell" ref={tableBodyRef}>
-              <RecordTableHeader
-                objectMetadataNameSingular={objectNameSingular}
-              />
-              <RecordTableBody
-                objectMetadataNameSingular={objectNameSingular}
-              />
+              <RecordTableHeader objectNameSingular={objectNameSingular} />
+              {!hasRecordGroups ? (
+                <RecordTableBody />
+              ) : (
+                <RecordTableBodyRecordGroups
+                  objectNameSingular={objectNameSingular}
+                />
+              )}
+              <RecordTableStickyEffect />
             </StyledTable>
             <DragSelect
               dragSelectable={tableBodyRef}

diff --git a/...nty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRow.tsx b/...nty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRow.tsx
@@ -0,0 +1,19 @@
+import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
+import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
+import { tableRowIdsByGroupComponentFamilyState } from '@/object-record/record-table/states/tableRowIdsByGroupComponentFamilyState';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+
+export const RecordTableRecordGroupRows = () => {
+  const recordGroupId = useCurrentRecordGroupId();
+
+  const recordGroupRowIds = useRecoilComponentFamilyValueV2(
+    tableRowIdsByGroupComponentFamilyState,
+    recordGroupId,
+  );
+
+  return recordGroupRowIds.map((recordId, rowIndex) => {
+    return (
+      <RecordTableRow key={recordId} recordId={recordId} rowIndex={rowIndex} />
+    );
+  });
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRows.tsx
@@ -1,21 +1,14 @@
-import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
-import { recordGroupDefaultId } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
-import { tableRowIdsByGroupComponentFamilyState } from '@/object-record/record-table/states/tableRowIdsByGroupComponentFamilyState';
-import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { tableAllRowIdsComponentState } from '@/object-record/record-table/states/tableAllRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableRows = () => {
-  const recordGroupId = useCurrentRecordGroupId();
-
-  const tableRowIdsByGroup = useRecoilComponentFamilyValueV2(
-    tableRowIdsByGroupComponentFamilyState,
-    recordGroupId,
-  );
+  const rowIds = useRecoilComponentValueV2(tableAllRowIdsComponentState);
 
   return (
     <>
-      {tableRowIdsByGroup.map((recordId, rowIndex) => {
+      {rowIds.map((recordId, rowIndex) => {
         return (
           <RecordTableRow
             key={recordId}
@@ -24,9 +17,7 @@ export const RecordTableRows = () => {
           />
         );
       })}
-      {recordGroupId !== recordGroupDefaultId && (
-        <RecordTableBodyFetchMoreLoader />
-      )}
+      <RecordTableBodyFetchMoreLoader />
     </>
   );
 };