fix(client): sync all forms when receiving prop (e.g. after mutation), …

…fixes #160

- create shared hook `useSyncForm`

client/src/renderer/components/LinkForm.tsx

@@ -2,6 +2,7 @@ import { pick } from 'lodash';
 import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { LinkQuery } from '../generated/graphql';
+import useSyncForm from '../hooks/useSyncForm';
 import { isUrlValid } from '../utils/textHelpers';
 import { OptionalReactComponent } from '../utils/types';
 import useSaveOnUnmount from '../utils/useSaveOnUnmount';
@@ -51,8 +52,9 @@ const LinkForm: React.FC<LinkFormProps> = ({
       return { values: formValues, errors };
     },
   });
-  const { watch, handleSubmit } = formProps;
+  const { watch, handleSubmit, reset } = formProps;
 
+  useSyncForm(reset, defaultValues, link);
   useSaveOnUnmount({ onSubmit, defaultValues }, formProps);
 
   return (

client/src/renderer/components/TagForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import styled from 'styled-components';
 import { TagsQuery } from '../generated/graphql';
+import useSyncForm from '../hooks/useSyncForm';
 import colorTools from '../utils/colorTools';
 import useSaveOnUnmount from '../utils/useSaveOnUnmount';
 import { TextField } from './CommonStyles';
@@ -34,7 +35,7 @@ interface TagFormProps {
 const TagForm: React.FC<TagFormProps> = ({ tag, onSubmit }) => {
   const defaultValues = pick(tag, tagFormFields);
 
-  const { register, getValues, handleSubmit } = useForm<TagInForm>({
+  const { register, getValues, handleSubmit, reset } = useForm<TagInForm>({
     defaultValues,
     mode: 'onBlur',
     resolver: (formValues) => {
@@ -44,6 +45,7 @@ const TagForm: React.FC<TagFormProps> = ({ tag, onSubmit }) => {
     },
   });
 
+  useSyncForm(reset, defaultValues, tag);
   useSaveOnUnmount({ onSubmit, defaultValues }, { getValues });
 
   const { ref: registerRef, ...registerProps } = register('color');

client/src/renderer/components/TextForm.tsx

@@ -1,7 +1,8 @@
 import { pick } from 'lodash';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { NotesForListQuery } from '../generated/graphql';
+import useSyncForm from '../hooks/useSyncForm';
 import { OptionalReactComponent } from '../utils/types';
 import useSaveOnUnmount from '../utils/useSaveOnUnmount';
 import { NameInput } from './formComponents';
@@ -39,9 +40,8 @@ const TextForm: React.FC<TextFormProps> = ({
     },
   });
   const { register, reset, handleSubmit } = formProps;
-  useEffect(() => {
-    reset(defaultValues);
-  }, [reset, text]);
+
+  useSyncForm(reset, defaultValues, text);
 
   useSaveOnUnmount({ onSubmit, defaultValues }, formProps);
 

client/src/renderer/hooks/useSyncForm.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { UseFormReset } from 'react-hook-form';
+
+const useSyncForm = <FormType, EntityType extends FormType>(
+  reset: UseFormReset<FormType>,
+  defaultValues: FormType,
+  entityProp: EntityType
+) => {
+  // observe changes of prop entity (because it stays identity-stable), but use picked value of defaultValues
+  useEffect(() => {
+    reset(defaultValues);
+  }, [reset, entityProp]);
+};
+
+export default useSyncForm;