From 38a81e7e56184c8b77e1d34781e7e1ee262f575f Mon Sep 17 00:00:00 2001
From: morrys <lorenzo.digiacomo85@gmail.com>
Date: Thu, 3 Aug 2023 16:52:20 +0200
Subject: [PATCH] version 2.0.0

---
 README.md                                     |  8 ++---
 __tests__/forms.tsx                           | 21 +++++++-----
 docs/useFormSetValue.md                       |  4 +--
 docs/useFormSubmit.md                         |  4 +--
 examples/form/package.json                    |  4 +--
 examples/form/src/AppRelayForms.tsx           |  7 +++-
 examples/form/src/Form.tsx                    |  1 +
 examples/form/src/FormState.tsx               |  3 +-
 examples/form/yarn.lock                       | 33 +++++++++----------
 package-lock.json                             |  8 ++---
 package.json                                  |  6 ++--
 src/index.ts                                  |  4 +--
 src/relay/queryErrorsFieldQuery.graphql.ts    |  4 +--
 src/relay/queryFieldQuery.graphql.ts          |  4 +--
 src/{useFormSubmit.tsx => useForm.tsx}        |  4 +--
 src/{useFormSetValue.tsx => useFormField.tsx} |  2 +-
 src/useFormState.tsx                          |  7 ++--
 17 files changed, 69 insertions(+), 55 deletions(-)
 rename src/{useFormSubmit.tsx => useForm.tsx} (98%)
 rename src/{useFormSetValue.tsx => useFormField.tsx} (99%)

diff --git a/README.md b/README.md
index d401eb6..5f31e99 100644
--- a/README.md
+++ b/README.md
@@ -22,13 +22,13 @@ This repository manages the three libraries to manage forms by exploiting the po
 
 [See SimpleExample.md](./docs/RelaySimpleExample.md)
 
-## useFormSetValue
+## useFormField
 
-[See useFormSetValue.md](./docs/useFormSetValue.md)
+[See useFormField.md](./docs/useFormSetValue.md)
 
-## useFormSubmit
+## useForm
 
-[See useFormSubmit.md](./docs/useFormSubmit.md)
+[See useForm.md](./docs/useFormSubmit.md)
 
 ## useFormState
 
diff --git a/__tests__/forms.tsx b/__tests__/forms.tsx
index 266c41d..b7f2ece 100644
--- a/__tests__/forms.tsx
+++ b/__tests__/forms.tsx
@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 import { useCallback } from 'react';
+import { RelayEnvironmentProvider } from 'relay-hooks';
 import {
     Environment,
     Network,
@@ -11,8 +12,7 @@ import {
     RequestParameters,
     Variables,
 } from 'relay-runtime';
-import { RelayEnvironmentProvider } from 'relay-hooks';
-import { useFormSubmit, useFormState, useFormSetValue } from '../src/';
+import { useForm, useFormState, useFormField } from '../src/';
 
 async function fetchQuery(operation: RequestParameters, variables: Variables) {
     const response = await fetch('http://localhost:3000/graphql', {
@@ -62,10 +62,15 @@ export const Form: React.FC<Props> = ({ promise, jestOnSubmit }) => {
 export const HAVE_ERRORS = 'have errors';
 
 export const Errors: React.FC<any> = () => {
-    const { errors, isSubmitting, isValidating } = useFormState();
+    const value = useFormState();
+
+    if (value == null) {
+        return <div />;
+    }
+    const { errors, isSubmitting, isValidating } = value;
     return (
         <>
-            <div data-testid={'errors'}>{errors.length !== 0 ? HAVE_ERRORS : ''}</div>;
+            <div data-testid={'errors'}>{errors && errors.length !== 0 ? HAVE_ERRORS : ''}</div>;
             <div data-testid={'isSubmitting'}>{'' + isSubmitting}</div>;
             <div data-testid={'isValidating'}>{'' + isValidating}</div>;
         </>
@@ -100,7 +105,7 @@ export const validateFirstName = jest.fn(validatePromiseField);
 //export const validateLastName = jest.fn(validateField);
 
 export const FormInternal: React.FC<any> = ({ onSubmit }) => {
-    const data = useFormSubmit({ onSubmit });
+    const data = useForm({ onSubmit });
     return (
         <form onSubmit={data.submit} action="#">
             <div>
@@ -139,7 +144,7 @@ export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
         [fieldKey, validate],
     );
 
-    const [{ error, value }, setValue] = useFormSetValue({
+    const [{ error, value }, setValue] = useFormField({
         key: fieldKey,
         validate: validate ? validateCallback : undefined,
         initialValue: 1,
@@ -151,7 +156,7 @@ export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
             if (fieldKey === 'complex') {
                 setValue({
                     test: value,
-                });
+                } as any);
             } else {
                 setValue(value);
             }
@@ -161,7 +166,7 @@ export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
     ref.current += 1;
     return (
         <>
-            {error && <div data-testid={fieldKey + '-error'}>{error}</div>}
+            {error && <div data-testid={fieldKey + '-error'}>{error as any}</div>}
             <input
                 data-testid={fieldKey}
                 type="text"
diff --git a/docs/useFormSetValue.md b/docs/useFormSetValue.md
index 2cff50e..ceabf12 100644
--- a/docs/useFormSetValue.md
+++ b/docs/useFormSetValue.md
@@ -1,6 +1,6 @@
 ---
 id: use-form-set-value
-title: useFormSetValue
+title: useFormField
 ---
 
 This hook allows you to define new fields that will be used in the validation and submit phase
@@ -56,7 +56,7 @@ const validate = (value: string) => {
 
 export const Field: React.FC<any> = ({ placeholder, fieldKey }) => {
 
-    const [{ error, value }, setValue] = useFormSetValue({
+    const [{ error, value }, setValue] = useFormField({
         key: fieldKey,
         validate,
         initialValue: "try",
diff --git a/docs/useFormSubmit.md b/docs/useFormSubmit.md
index dcaa97a..9d6022e 100644
--- a/docs/useFormSubmit.md
+++ b/docs/useFormSubmit.md
@@ -1,6 +1,6 @@
 ---
 id: use-form-submit
-title: useFormSubmit
+title: useForm
 ---
 
 This hook allows you to define new fields that will be used in the validation and submit phase
@@ -36,7 +36,7 @@ export type FormSubmitReturn = {
 
 ```tsx
 export const FormInternal: React.FC<any> = () => {
-const { submit, validate, reset } = useFormSubmit({ onSubmit: (values) => console.log("values", values)});
+const { submit, validate, reset } = useForm({ onSubmit: (values) => console.log("values", values)});
 
     return (
         <form onSubmit={submit} action="#">
diff --git a/examples/form/package.json b/examples/form/package.json
index c413368..5718758 100644
--- a/examples/form/package.json
+++ b/examples/form/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "dependencies": {
     "react-relay-forms": "^1.1.1",
-    "relay-forms": "1.1.1",
+    "relay-forms": "file:../../relay-forms-2.0.0-a1.tgz",
     "relay-forms-nodeps": "^1.1.1",
     "react-relay": "14.1.0",
-    "relay-hooks": "7.2.0",
+    "relay-hooks": "8.0.0",
     "relay-runtime": "^14.1.0",
     "react-dropzone": "11.0.1",
     "@emotion/react": "^11.7.1",
diff --git a/examples/form/src/AppRelayForms.tsx b/examples/form/src/AppRelayForms.tsx
index 668c3c7..872b8f0 100644
--- a/examples/form/src/AppRelayForms.tsx
+++ b/examples/form/src/AppRelayForms.tsx
@@ -16,6 +16,11 @@ const App = () => {
     );
 };
 
-export { useFormSetValue, useFormSubmit, useFormState, useFormValue } from 'relay-forms';
+export {
+    useFormField as useFormSetValue,
+    useForm as useFormSubmit,
+    useFormState,
+    useFormValue,
+} from 'relay-forms';
 
 export default App;
diff --git a/examples/form/src/Form.tsx b/examples/form/src/Form.tsx
index 23f51e5..27d74b6 100644
--- a/examples/form/src/Form.tsx
+++ b/examples/form/src/Form.tsx
@@ -72,6 +72,7 @@ export const FormInternal: React.FC<any> = ({ onSubmit }) => {
             autoComplete="off"
             sx={{ mt: 1, paddingTop: '15px' }}
         >
+            <FormState data={data} />
             <InputField validate={required} fieldKey="firstName" placeholder="First name" />
             <InputField validate={validateMinFive} fieldKey="lastName" placeholder="Last name" />
             <SelectField width={155} placeholder="Gender" validate={required} fieldKey="gender">
diff --git a/examples/form/src/FormState.tsx b/examples/form/src/FormState.tsx
index 72397ac..5bdd160 100644
--- a/examples/form/src/FormState.tsx
+++ b/examples/form/src/FormState.tsx
@@ -37,7 +37,8 @@ function LinearProgressWithButton(props: any) {
 }
 
 export const FormState: React.FC<any> = ({ data }) => {
-    const { errors, isSubmitting, isValidating } = useFormState();
+    const state = useFormState();
+    const { errors, isSubmitting, isValidating } = state || {};
     const liErrors = errors ? (
         (errors as any[]).map((error) => (
             <Alert key={'alert' + error.key} severity="error">
diff --git a/examples/form/yarn.lock b/examples/form/yarn.lock
index b1781a3..37dfffe 100644
--- a/examples/form/yarn.lock
+++ b/examples/form/yarn.lock
@@ -1766,12 +1766,12 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
-"@restart/hooks@^0.3.1":
-  version "0.3.27"
-  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505"
-  integrity sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==
+"@restart/hooks@^0.4.9":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.11.tgz#8876ccce1d4ad2a4b793a31689d63df36cf56088"
+  integrity sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==
   dependencies:
-    dequal "^2.0.2"
+    dequal "^2.0.3"
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
@@ -3773,7 +3773,7 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
-dequal@^2.0.2:
+dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -4552,7 +4552,7 @@ fbjs-css-vars@^1.0.0:
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
-fbjs@^3.0.0, fbjs@^3.0.2:
+fbjs@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6"
   integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==
@@ -7967,18 +7967,17 @@ relay-forms-nodeps@^1.1.1:
   resolved "https://registry.yarnpkg.com/relay-forms-nodeps/-/relay-forms-nodeps-1.1.1.tgz#39072c0ed077746c73a7c03d129125b45df93142"
   integrity sha512-5SOME+8Yfor+RwjNNEKAY2cAcYtYKx12aw4gE1HoYkdBqDKJ8dm8Bcl7XNQiQ4V5Vg6MQQqIquaxfau09/ODDg==
 
-relay-forms@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/relay-forms/-/relay-forms-1.1.1.tgz#4b8f8f2835a2ca2a9bfade000d98ae3ffe6fc6be"
-  integrity sha512-omyh5GMYis5mlVgSTCneIJkwbjy1UUANacrdutmQHBzbMIjKVentJxgCZDEeNA8KI8Bnx0SpuYUa0ja1P5JwtQ==
+"relay-forms@file:../../relay-forms-2.0.0-a1.tgz":
+  version "2.0.0-a1"
+  resolved "file:../../relay-forms-2.0.0-a1.tgz#7e0b086dd780f3ad94412cb974e478af266257db"
 
-relay-hooks@7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-7.2.0.tgz#0641929ce456a7be1d719e1e2f959b4b1c3611bb"
-  integrity sha512-5yBnAtjnxTPXArITn8oCqBqAIkYm06KykNWRY8cJCWFoBqBWbA2ygZ5AfOcsgNZk3cg1cEXxRzqj68vbDrr9TQ==
+relay-hooks@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-8.0.0.tgz#06758db91d6c9e4f7623352c542b5a5dfc3c0a96"
+  integrity sha512-fvTzmSt8cxwsAQWCbE/ubXLqNeJq3kMVpvXI2HKYq8bylT1jhSUkEjBVO1N+P0lDTyVxw4be+HZPIR9v8XnKYA==
   dependencies:
-    "@restart/hooks" "^0.3.1"
-    fbjs "^3.0.0"
+    "@restart/hooks" "^0.4.9"
+    fbjs "^3.0.2"
 
 relay-runtime@14.1.0, relay-runtime@^14.1.0:
   version "14.1.0"
diff --git a/package-lock.json b/package-lock.json
index 27b8cb8..3b6eb3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "relay-forms",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "relay-forms",
-      "version": "1.1.1",
+      "version": "2.0.0",
       "license": "MIT",
       "devDependencies": {
         "@babel/cli": "^7.8.3",
@@ -59,8 +59,8 @@
       },
       "peerDependencies": {
         "react": "^16.9.0 || ^17 || ^18",
-        "relay-hooks": "^7.2.0",
-        "relay-runtime": "^13.0.2 || ^14.0.0"
+        "relay-hooks": "^7.2.0 || ^8.0.0",
+        "relay-runtime": "^13.0.2 || ^14.0.0 || ^15.0.0"
       }
     },
     "node_modules/@ampproject/remapping": {
diff --git a/package.json b/package.json
index 3886b20..f2cc9a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "relay-forms",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "keywords": [
     "forms",
     "relay",
@@ -52,8 +52,8 @@
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17 || ^18",
-    "relay-runtime": "^13.0.2 || ^14.0.0",
-    "relay-hooks": "^7.2.0"
+    "relay-runtime": "^13.0.2 || ^14.0.0 || ^15.0.0",
+    "relay-hooks": "^7.2.0 || ^8.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
diff --git a/src/index.ts b/src/index.ts
index 2d02f01..8c5d9d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
 export { useFormState } from './useFormState';
-export { useFormSubmit } from './useFormSubmit';
-export { useFormSetValue } from './useFormSetValue';
+export { useForm } from './useForm';
+export { useFormField } from './useFormField';
 export { useFormValue } from './useFormValue';
 
 export * from './RelayFormsTypes';
diff --git a/src/relay/queryErrorsFieldQuery.graphql.ts b/src/relay/queryErrorsFieldQuery.graphql.ts
index 55e792a..00b6159 100644
--- a/src/relay/queryErrorsFieldQuery.graphql.ts
+++ b/src/relay/queryErrorsFieldQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ee7ef7f29bb623892b97d24679b5ea49>>
+ * @generated SignedSource<<5a0e2c9c0f979fb24973c3cb36a508ca>>
  * @relayHash 1e729a4dd469bbcedf1c07919286ff70
  * @lightSyntaxTransform
  * @nogrep
@@ -131,7 +131,7 @@ return {
     "selections": (v0/*: any*/)
   },
   "params": {
-    "id": "1e729a4dd469bbcedf1c07919286ff70",
+    "id": "1e729a4dd469bbcedf1c07919286ff70\r",
     "metadata": {},
     "name": "queryErrorsFieldQuery",
     "operationKind": "query",
diff --git a/src/relay/queryFieldQuery.graphql.ts b/src/relay/queryFieldQuery.graphql.ts
index 65c9b69..51e12b1 100644
--- a/src/relay/queryFieldQuery.graphql.ts
+++ b/src/relay/queryFieldQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ef1f2206a47b44bb3fa3b21c43635794>>
+ * @generated SignedSource<<b7f8b9e989d2a24db8e7f1769edd641b>>
  * @relayHash 0b493a6f66e132f2693f91a5da941414
  * @lightSyntaxTransform
  * @nogrep
@@ -107,7 +107,7 @@ return {
     "selections": (v0/*: any*/)
   },
   "params": {
-    "id": "0b493a6f66e132f2693f91a5da941414",
+    "id": "0b493a6f66e132f2693f91a5da941414\r",
     "metadata": {},
     "name": "queryFieldQuery",
     "operationKind": "query",
diff --git a/src/useFormSubmit.tsx b/src/useForm.tsx
similarity index 98%
rename from src/useFormSubmit.tsx
rename to src/useForm.tsx
index 20943f6..dd75772 100644
--- a/src/useFormSubmit.tsx
+++ b/src/useForm.tsx
@@ -3,7 +3,7 @@ import { useRelayEnvironment } from 'relay-hooks';
 import { Snapshot, isPromise, IEnvironment } from 'relay-runtime';
 import { queryFieldQuery$data } from './relay/queryFieldQuery.graphql';
 import { FormSubmitOptions, FormSubmitReturn } from './RelayFormsTypes';
-import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormSetValue';
+import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormField';
 import { operationQueryForm, commit } from './Utils';
 
 function logicSubmit(
@@ -122,7 +122,7 @@ function logicSubmit(
     };
 }
 
-export const useFormSubmit = <ValueType extends object = object>({
+export const useForm = <ValueType extends object = object>({
     onSubmit,
 }: FormSubmitOptions<ValueType>): FormSubmitReturn => {
     const environment = useRelayEnvironment();
diff --git a/src/useFormSetValue.tsx b/src/useFormField.tsx
similarity index 99%
rename from src/useFormSetValue.tsx
rename to src/useFormField.tsx
index a6ee9b1..43275cd 100644
--- a/src/useFormSetValue.tsx
+++ b/src/useFormField.tsx
@@ -189,7 +189,7 @@ function logicSetValue<ValueType>(params: LogicParams<ValueType>): LogicReturn<V
     };
 }
 
-export function useFormSetValue<ValueType>({
+export function useFormField<ValueType>({
     key,
     initialValue,
     validate,
diff --git a/src/useFormState.tsx b/src/useFormState.tsx
index 16c4a3d..72beaf9 100644
--- a/src/useFormState.tsx
+++ b/src/useFormState.tsx
@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { useRelayEnvironment } from 'relay-hooks';
+import { Snapshot } from 'relay-runtime';
 import { queryErrorsFieldQuery$data } from './relay/queryErrorsFieldQuery.graphql';
 import { operationQueryErrorsForm } from './Utils';
 
 export const useFormState = (): queryErrorsFieldQuery$data['form'] | null => {
     const environment = useRelayEnvironment();
 
-    const snapshot = React.useMemo(() => {
-        return environment.lookup(operationQueryErrorsForm.fragment);
+    const snapshot: Snapshot = React.useMemo(() => {
+        const s: any = environment.lookup(operationQueryErrorsForm.fragment);
+        s.seenRecords.add('local:form');
+        return s;
     }, [environment]);
 
     const [data, setData] = React.useState((snapshot.data as queryErrorsFieldQuery$data).form);