useScrollStates hook created replacing direct access to scrollTopState & scrollLeftState

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

@@ -5,7 +5,7 @@ import { useIcons } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftComponentState';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

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

@@ -11,8 +11,8 @@ import { useRecordTableStates } from '@/object-record/record-table/hooks/interna
 import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { RGBA } from '@/ui/theme/constants/Rgba';
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
-import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftComponentState';
+import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopComponentState';
 
 const StyledTable = styled.table<{
   freezeFirstColumns?: boolean;

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

@@ -12,7 +12,7 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftComponentState';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 
 import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -3,11 +3,8 @@ import styled from '@emotion/styled';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { useRecoilCallback } from 'recoil';
-
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
-import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
-
 import 'overlayscrollbars/overlayscrollbars.css';
+import { useScrollStates } from '@/ui/utilities/scroll/hooks/useScrollSates';
 
 export const ScrollWrapperContext = createContext<RefObject<HTMLDivElement>>({
   current: null,
@@ -37,6 +34,7 @@ export const ScrollWrapper = ({
   hideY,
 }: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
+  const {scrollLeftState, scrollTopState} = useScrollStates()
 
   const handleScroll = useRecoilCallback(
     ({ set }) =>

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollSates.ts

@@ -0,0 +1,23 @@
+import { useAvailableScopeIdOrThrow } from "@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId";
+import { scrollLeftComponentState } from "@/ui/utilities/scroll/states/scrollLeftComponentState";
+import { scrollTopComponentState } from "@/ui/utilities/scroll/states/scrollTopComponentState";
+import { extractComponentState } from "@/ui/utilities/state/component-state/utils/extractComponentState"
+import { ViewScopeInternalContext } from "@/views/scopes/scope-internal-context/ViewScopeInternalContext";
+
+export const useScrollStates = (scrollWrapperId?:string) => {
+    const componentId = useAvailableScopeIdOrThrow(
+        ViewScopeInternalContext,
+        scrollWrapperId,
+      );
+
+    return{
+        scrollLeftState: extractComponentState(
+            scrollLeftComponentState,
+            componentId
+        ),
+        scrollTopState: extractComponentState(
+            scrollTopComponentState,
+            componentId
+        )
+    }
+}

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftComponentState.ts

@@ -0,0 +1,6 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const scrollLeftComponentState = createComponentState<number>({
+  key: 'scroll/scrollLeftState',
+  defaultValue: 0,
+});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopComponentState.ts

@@ -0,0 +1,6 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const scrollTopComponentState = createComponentState<number>({
+  key: 'scroll/scrollTopState',
+  defaultValue: 0,
+});

packages/twenty-server/src/engine/api/graphql/workspace-query-runner/listeners/entity-events-to-db.listener.ts

@@ -49,6 +49,7 @@ export class EntityEventsToDbListener {
     payload: ObjectRecordCreateEvent<any>,
     operation: string,
   ) {
+
     if (!payload.objectMetadata.isAuditLogged) {
       return;
     }