From 8760ab0911e4bae8d4105e38c69c6de73d09c0fd Mon Sep 17 00:00:00 2001 From: Wojciech Date: Sun, 11 Oct 2020 17:57:31 +0200 Subject: [PATCH] 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 | 9 ++++++- src/frontend/components/actions/new.tsx | 9 ++++++- src/frontend/hooks/use-record/index.ts | 2 +- src/frontend/hooks/use-record/use-record.tsx | 24 ++++++++++--------- ...cord-result.type.ts => use-record.type.ts} | 18 ++++++++++++++ 5 files changed, 48 insertions(+), 14 deletions(-) rename src/frontend/hooks/use-record/{use-record-result.type.ts => use-record.type.ts} (68%) diff --git a/src/frontend/components/actions/edit.tsx b/src/frontend/components/actions/edit.tsx index 46e96f7ed..c56f5a812 100644 --- a/src/frontend/components/actions/edit.tsx +++ b/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 = (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): boolean => { event.preventDefault() handleSubmit().then((response) => { diff --git a/src/frontend/components/actions/new.tsx b/src/frontend/components/actions/new.tsx index 5479c5c48..df5c6cd0a 100644 --- a/src/frontend/components/actions/new.tsx +++ b/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 = (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): boolean => { event.preventDefault() handleSubmit().then((response) => { diff --git a/src/frontend/hooks/use-record/index.ts b/src/frontend/hooks/use-record/index.ts index 55c388582..92ce66a4d 100644 --- a/src/frontend/hooks/use-record/index.ts +++ b/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' diff --git a/src/frontend/hooks/use-record/use-record.tsx b/src/frontend/hooks/use-record/use-record.tsx index a7e30d157..20b59c800 100644 --- a/src/frontend/hooks/use-record/use-record.tsx +++ b/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({ ...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 diff --git a/src/frontend/hooks/use-record/use-record-result.type.ts b/src/frontend/hooks/use-record/use-record.type.ts similarity index 68% rename from src/frontend/hooks/use-record/use-record-result.type.ts rename to src/frontend/hooks/use-record/use-record.type.ts index 68fb0d966..26343540a 100644 --- a/src/frontend/hooks/use-record/use-record-result.type.ts +++ b/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; +} /** * 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>; }