refactor: replace useContext with Recoil state

Vardhaman619 · Nov 11, 2024 · ecfe15a · ecfe15a
1 parent 3db6985
commit ecfe15a
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 72 deletions.
diff --git a/...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { useRef, useState } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { useRef } from 'react';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
@@ -15,7 +15,7 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit
 import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useRecordTable } from '../hooks/useRecordTable';
 
-import { RecordTableScrollContext } from '@/object-record/record-table/contexts/RecordTableScrollContext';
+import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
 import { RecordTableInternalEffect } from './RecordTableInternalEffect';
 
 const StyledTableWithHeader = styled.div`
@@ -46,9 +46,10 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
-  const [enableXScroll, setEnableXScroll] = useState(true);
-  const [enableYScroll, setEnableYScroll] = useState(true);
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const isScrollEnabledForRecordTable = useRecoilValue(
+    isScrollEnabledForRecordTableState,
+  );
 
   const { resetTableRowSelection, setRowSelected } = useRecordTable({
     recordTableId,
@@ -71,46 +72,37 @@ export const RecordTableWithWrappers = ({
 
   return (
     <EntityDeleteContext.Provider value={deleteOneRecord}>
-      <RecordTableScrollContext.Provider
-        value={{
-          enableXScroll,
-          enableYScroll,
-          setEnableXScroll,
-          setEnableYScroll,
-        }}
+      <ScrollWrapper
+        enableXScroll={isScrollEnabledForRecordTable.enableXScroll}
+        enableYScroll={isScrollEnabledForRecordTable.enableYScroll}
+        contextProviderName="recordTableWithWrappers"
       >
-        <ScrollWrapper
-          enableXScroll={enableXScroll}
-          enableYScroll={enableYScroll}
-          contextProviderName="recordTableWithWrappers"
-        >
-          <RecordUpdateContext.Provider value={updateRecordMutation}>
-            <StyledTableWithHeader>
-              <StyledTableContainer>
-                <StyledTableInternalContainer ref={tableBodyRef}>
-                  <RecordTable
-                    viewBarId={viewBarId}
-                    recordTableId={recordTableId}
-                    objectNameSingular={objectNameSingular}
-                    onColumnsChange={handleColumnsChange}
-                  />
-                  <DragSelect
-                    dragSelectable={tableBodyRef}
-                    onDragSelectionStart={() => {
-                      resetTableRowSelection();
-                    }}
-                    onDragSelectionChange={setRowSelected}
-                  />
-                </StyledTableInternalContainer>
-                <RecordTableInternalEffect
-                  tableBodyRef={tableBodyRef}
+        <RecordUpdateContext.Provider value={updateRecordMutation}>
+          <StyledTableWithHeader>
+            <StyledTableContainer>
+              <StyledTableInternalContainer ref={tableBodyRef}>
+                <RecordTable
+                  viewBarId={viewBarId}
                   recordTableId={recordTableId}
+                  objectNameSingular={objectNameSingular}
+                  onColumnsChange={handleColumnsChange}
+                />
+                <DragSelect
+                  dragSelectable={tableBodyRef}
+                  onDragSelectionStart={() => {
+                    resetTableRowSelection();
+                  }}
+                  onDragSelectionChange={setRowSelected}
                 />
-              </StyledTableContainer>
-            </StyledTableWithHeader>
-          </RecordUpdateContext.Provider>
-        </ScrollWrapper>
-      </RecordTableScrollContext.Provider>
+              </StyledTableInternalContainer>
+              <RecordTableInternalEffect
+                tableBodyRef={tableBodyRef}
+                recordTableId={recordTableId}
+              />
+            </StyledTableContainer>
+          </StyledTableWithHeader>
+        </RecordUpdateContext.Provider>
+      </ScrollWrapper>
     </EntityDeleteContext.Provider>
   );
 };
diff --git a/.../twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts b/.../twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts
diff --git a/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -1,40 +1,41 @@
-import styled from '@emotion/styled';
-
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-
-import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
-
-import { RecordTableScrollContext } from '@/object-record/record-table/contexts/RecordTableScrollContext';
-import { useCallback, useContext } from 'react';
+import styled from '@emotion/styled';
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
+import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
 
 type RecordTableColumnHeadWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
 };
 
 const StyledDropdown = styled(Dropdown)`
   display: flex;
-
   flex: 1;
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
-  const { setEnableXScroll, setEnableYScroll } = useContext(
-    RecordTableScrollContext,
+  const isScrollEnabledForRecordTable = useSetRecoilState(
+    isScrollEnabledForRecordTableState,
   );
   const handleDropdownOpen = useCallback(() => {
-    setEnableXScroll(false);
-    setEnableYScroll(false);
-  }, [setEnableXScroll, setEnableYScroll]);
+    isScrollEnabledForRecordTable({
+      enableXScroll: false,
+      enableYScroll: false,
+    });
+  }, [isScrollEnabledForRecordTable]);
   const handleDropdownClose = useCallback(() => {
-    setEnableXScroll(true);
-    setEnableYScroll(true);
-  }, [setEnableXScroll, setEnableYScroll]);
+    isScrollEnabledForRecordTable({
+      enableXScroll: true,
+      enableYScroll: true,
+    });
+  }, [isScrollEnabledForRecordTable]);
   return (
     <StyledDropdown
       onOpen={handleDropdownOpen}

diff --git a/...front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts b/...front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
@@ -0,0 +1,13 @@
+import { createState } from 'twenty-ui';
+type isScrollEnabledForRecordTableStateType = {
+  enableXScroll: boolean;
+  enableYScroll: boolean;
+};
+export const isScrollEnabledForRecordTableState =
+  createState<isScrollEnabledForRecordTableStateType>({
+    key: 'isScrollEnabledForRecordTableState',
+    defaultValue: {
+      enableXScroll: true,
+      enableYScroll: true,
+    },
+  });
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@@ -45,7 +45,6 @@ export const ScrollWrapper = ({
     useScrollStates(contextProviderName);
   const setScrollTop = useSetRecoilState(scrollTopComponentState);
   const setScrollLeft = useSetRecoilState(scrollLeftComponentState);
-
   const handleScroll = (overlayScroll: OverlayScrollbars) => {
     const target = overlayScroll.elements().scrollOffsetElement;
     setScrollTop(target.scrollTop);