fix: remove useEffect causing useRecord to reset

In this change I removed useEffect cusing useRecord to
reset its inner. This happend when useRecord parameter
has been updated and wasnt consistent with the useState
react hook which stays the same no matter of the initial prop

fixes #624

src/frontend/components/actions/edit.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import { useHistory } from 'react-router'
 import { DrawerContent, Box, DrawerFooter, Button, Icon } from '@admin-bro/design-system'
 
@@ -19,10 +19,17 @@ const Edit: FC<ActionProps> = (props) => {
     handleChange,
     submit: handleSubmit,
     loading,
+    setRecord,
   } = useRecord(initialRecord, resource.id)
   const { translateButton } = useTranslation()
   const history = useHistory()
 
+  useEffect(() => {
+    if (initialRecord) {
+      setRecord(initialRecord)
+    }
+  }, [initialRecord])
+
   const submit = (event: React.FormEvent<HTMLFormElement>): boolean => {
     event.preventDefault()
     handleSubmit().then((response) => {

src/frontend/components/actions/new.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import { useHistory } from 'react-router'
 import { DrawerContent, Box, DrawerFooter, Button, Icon } from '@admin-bro/design-system'
 
@@ -19,10 +19,17 @@ const New: FC<ActionProps> = (props) => {
     handleChange,
     submit: handleSubmit,
     loading,
+    setRecord,
   } = useRecord(initialRecord, resource.id)
   const { translateButton } = useTranslation()
   const history = useHistory()
 
+  useEffect(() => {
+    if (initialRecord) {
+      setRecord(initialRecord)
+    }
+  }, [initialRecord])
+
   const submit = (event: React.FormEvent<HTMLFormElement>): boolean => {
     event.preventDefault()
     handleSubmit().then((response) => {

src/frontend/hooks/use-record/index.ts

@@ -1,5 +1,5 @@
 export * from './use-record'
-export * from './use-record-result.type'
+export * from './use-record.type'
 export * from './is-entire-record-given'
 export * from './merge-record-response'
 export * from './record-to-form-data'

src/frontend/hooks/use-record/use-record.tsx

@@ -7,8 +7,9 @@ import useNotice from '../use-notice'
 import { RecordActionResponse } from '../../../backend/actions/action.interface'
 import mergeRecordResponse from './merge-record-response'
 import updateRecord from './update-record'
-import { UseRecordResult } from './use-record-result.type'
+import { UseRecordOptions, UseRecordResult } from './use-record.type'
 import isEntireRecordGiven from './is-entire-record-given'
+import { flat } from '../../../utils'
 
 const api = new ApiClient()
 
@@ -20,30 +21,31 @@ const api = new ApiClient()
  * @bundle
  * @param {RecordJSON} [initialRecord],
  * @param {string} resourceId
- * @return {UseRecordResult}*
+ * @param {UseRecordOptions} [options]
+ * @return {UseRecordResult}
  */
 export const useRecord = (
   initialRecord: RecordJSON | undefined,
   resourceId: string,
+  options?: UseRecordOptions,
 ): UseRecordResult => {
   // setting up state
   const [loading, setLoading] = useState(false)
   const [progress, setProgress] = useState(0)
+
+  const filteredPrams = options?.onlyParams
+    ? flat.selectParams(initialRecord?.params || {}, ...options.onlyParams)
+    : initialRecord?.params ?? {}
+
   const [record, setRecord] = useState<RecordJSON>({
     ...initialRecord,
-    params: initialRecord?.params ?? {},
+    params: filteredPrams,
     errors: initialRecord?.errors ?? {},
     populated: initialRecord?.populated ?? {},
   } as RecordJSON)
 
   const onNotice = useNotice()
 
-  useEffect(() => {
-    if (initialRecord) {
-      setRecord(initialRecord)
-    }
-  }, [initialRecord])
-
   const handleChange = useCallback((
     propertyOrRecord: RecordJSON | string,
     value?: any,
@@ -99,9 +101,9 @@ export const useRecord = (
       setLoading(false)
     })
     return promise
-  }, [record, resourceId, setLoading, setProgress])
+  }, [record, resourceId, setLoading, setProgress, setRecord])
 
-  return { record, handleChange, submit: handleSubmit, loading, progress }
+  return { record, handleChange, submit: handleSubmit, loading, progress, setRecord }
 }
 
 export default useRecord

src/frontend/hooks/use-record/use-record-result.type.ts → src/frontend/hooks/use-record/use-record.type.ts

@@ -4,6 +4,18 @@ import { OnPropertyChange } from '../../components/property-type/base-property-p
 import { RecordActionResponse } from '../../../backend/actions/action.interface'
 import { RecordJSON } from '../../interfaces'
 
+/**
+ * Custom options passed to useRecord
+ *
+ * @memberof useRecord
+ * @alias UseRecordOptions
+ */
+export type UseRecordOptions = {
+  /**
+   * If set, useRecord will operates only on selected params.
+   */
+  onlyParams?: Array<string>;
+}
 
 /**
  * Result of useRecord hook
@@ -36,4 +48,10 @@ export type UseRecordResult = {
    * Upload progress
    */
   progress: number;
+
+  /**
+   * Sets value for the record from the outside. You might use it when you update the record
+   * simultaneously in an another place.
+   */
+  setRecord: React.Dispatch<React.SetStateAction<RecordJSON>>;
 }