feat: add new options to useRecord hook

options are:
* includeParams (in useRecord)
* isSynced (return property)
* UseRecordSubmitOptions (in submit)

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback } from 'react'
 import { AxiosResponse } from 'axios'
 import ApiClient, { RecordActionAPIParams } from '../../utils/api-client'
 import { RecordJSON } from '../../interfaces'
@@ -7,7 +7,7 @@ import useNotice from '../use-notice'
 import { RecordActionResponse } from '../../../backend/actions/action.interface'
 import mergeRecordResponse from './merge-record-response'
 import updateRecord from './update-record'
-import { UseRecordOptions, UseRecordResult } from './use-record.type'
+import { UseRecordOptions, UseRecordResult, UseRecordSubmitOptions } from './use-record.type'
 import isEntireRecordGiven from './is-entire-record-given'
 import { flat } from '../../../utils'
 
@@ -31,10 +31,11 @@ export const useRecord = (
 ): UseRecordResult => {
   // setting up state
   const [loading, setLoading] = useState(false)
+  const [isSynced, setIsSynced] = useState(true)
   const [progress, setProgress] = useState(0)
 
-  const filteredPrams = options?.onlyParams
-    ? flat.selectParams(initialRecord?.params || {}, ...options.onlyParams)
+  const filteredPrams = options?.includeParams
+    ? flat.selectParams(initialRecord?.params || {}, ...options.includeParams)
     : initialRecord?.params ?? {}
 
   const [record, setRecord] = useState<RecordJSON>({
@@ -56,13 +57,14 @@ export const useRecord = (
     } else {
       setRecord(updateRecord(propertyOrRecord as string, value, incomingRecord))
     }
+    setIsSynced(false)
   }, [setRecord])
 
-  const handleSubmit = useCallback((
+  const handleSubmit: UseRecordResult['submit'] = useCallback((
     customParams: Record<string, string> = {},
+    submitOptions?: UseRecordSubmitOptions,
   ): Promise<AxiosResponse<RecordActionResponse>> => {
     setLoading(true)
-
     const formData = recordToFormData(record)
     Object.entries(customParams).forEach(([key, value]) => formData.set(key, value))
 
@@ -88,9 +90,12 @@ export const useRecord = (
       if (response.data.notice) {
         onNotice(response.data.notice)
       }
-      setRecord(prev => mergeRecordResponse(prev, response.data))
+      if (submitOptions?.updateOnSave !== false) {
+        setRecord(prev => mergeRecordResponse(prev, response.data))
+      }
       setProgress(0)
       setLoading(false)
+      setIsSynced(true)
     }).catch(() => {
       onNotice({
         message:
@@ -103,7 +108,7 @@ export const useRecord = (
     return promise
   }, [record, resourceId, setLoading, setProgress, setRecord])
 
-  return { record, handleChange, submit: handleSubmit, loading, progress, setRecord }
+  return { record, handleChange, submit: handleSubmit, loading, progress, setRecord, isSynced }
 }
 
 export default useRecord

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

@@ -14,7 +14,22 @@ export type UseRecordOptions = {
   /**
    * If set, useRecord will operates only on selected params.
    */
-  onlyParams?: Array<string>;
+  includeParams?: Array<string>;
+}
+
+/**
+ * Custom options passed to useRecord
+ *
+ * @memberof useRecord
+ * @alias UseRecordSubmitOptions
+ */
+export type UseRecordSubmitOptions = {
+  /**
+   * Indicates if record should be updated after the submit action, which returns updated record.
+   * You might turn this of if you use function like lodash debounce, where you might have old
+   * state in the action response.
+   */
+  updateOnSave?: boolean;
 }
 
 /**
@@ -38,7 +53,10 @@ export type UseRecordResult = {
    * If custom params are given as an argument - they are merged
    * to the payload.
    */
-  submit: (customParams?: Record<string, string>) => Promise<AxiosResponse<RecordActionResponse>>;
+  submit: (
+    customParams?: Record<string, string>,
+    options?: UseRecordSubmitOptions
+  ) => Promise<AxiosResponse<RecordActionResponse>>;
   /**
    * Flag indicates loading.
    */
@@ -54,4 +72,10 @@ export type UseRecordResult = {
    * simultaneously in an another place.
    */
   setRecord: React.Dispatch<React.SetStateAction<RecordJSON>>;
+
+  /**
+   * Indicates if record is in "synced" state. It is when it was either just created from initial
+   * record or submitted. After at least one handleChange it is false until the successful submit
+   */
+  isSynced: boolean;
 }