Merge pull request #115 from dev-family/ADM-188

ADM-188; (Fix) Double data update on the crud pages

admiral/dataTable/DataTable.tsx

@@ -10,6 +10,7 @@ import { arrayMove } from '@dnd-kit/sortable'
 import { useCrudIndex } from '../crud/CrudIndexPageContext'
 import { useTopLocation } from '../router'
 import styles from './DataTable.module.scss'
+import { useUpdateEffect } from '../utils/hooks'
 
 export type DataTableProps<RecordType> = {
     resource: string
@@ -60,6 +61,7 @@ export function DataTable<RecordType extends { id: number | string }>({
 
     const [selectedKeys, setSelectedKeys] = useState<Key[]>([])
     const [selectedRows, setSelectedRows] = useState<RecordType[]>([])
+    const isFirstRender = useRef(true)
 
     const onSelectionChange = useCallback(
         (selectedRowKeys: Key[], selectedRows: RecordType[]) => {
@@ -130,6 +132,10 @@ export function DataTable<RecordType extends { id: number | string }>({
     }, [resource, urlState, fetch])
 
     useEffect(() => {
+        if (autoupdateTime && isAutoupdateTurnOn && isFirstRender.current) {
+            return
+        }
+
         fetch(resource, urlState)
     }, [resource, urlState])
 

admiral/filters/QuickFilters.tsx

@@ -14,6 +14,7 @@ import {
 } from '../form'
 import debounce from 'lodash.debounce'
 import cn from 'classnames'
+import useUpdateEffect from '../utils/hooks/useUpdateEffect'
 
 export type QuickFiltersProps = {
     filters?: string[]
@@ -34,21 +35,17 @@ export const QuickFilters: React.FC<QuickFiltersProps> = ({ filters }) => {
         setOptions(filterOptions)
     }, [filterOptions])
 
-    useEffect(() => {
-        if (shouldUpdateUrlState.current) {
-            const delayDebounceSetUrlState = debounce((value) => {
-                setUrlState((prevUrlState) => ({
-                    ...prevUrlState,
-                    filter: value,
-                }))
-            }, 500)
-            delayDebounceSetUrlState(values)
+    useUpdateEffect(() => {
+        const delayDebounceSetUrlState = debounce((value) => {
+            setUrlState((prevUrlState) => ({
+                ...prevUrlState,
+                filter: value,
+            }))
+        }, 500)
+        delayDebounceSetUrlState(values)
 
-            return () => {
-                delayDebounceSetUrlState.cancel()
-            }
-        } else {
-            shouldUpdateUrlState.current = true
+        return () => {
+            delayDebounceSetUrlState.cancel()
         }
     }, [values])
 

admiral/utils/hooks/index.ts

@@ -3,3 +3,4 @@ export { default as useMedia } from './useMedia'
 export { default as useMergedState } from './useMergedState'
 export { default as useSafeSetState } from './useSafeSetState'
 export { default as useUrlState } from './useUrlState'
+export { default as useUpdateEffect } from './useUpdateEffect'

admiral/utils/hooks/useUpdateEffect.ts

@@ -0,0 +1,16 @@
+import type { DependencyList, EffectCallback } from 'react'
+import { useEffect, useRef } from 'react'
+
+const useUpdateEffect = (callback: EffectCallback, dependencies: DependencyList) => {
+    const isFirstRender = useRef(true)
+
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false
+        } else {
+            return callback()
+        }
+    }, dependencies)
+}
+
+export default useUpdateEffect