resolução aula 401

PedroPaivaDev · Dec 7, 2022 · c4fd44f · c4fd44f
1 parent 2c16259
commit c4fd44f
Showing 1 changed file with 29 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -15,33 +15,43 @@ const App = () => {
     estado: ''
   })
 
-  // fetch('https://ranekapi.origamid.dev/json/api/usuario', {
-  //   method: 'POST',
-  //   headers: {
-  //     'Content-Type': 'application/json',
-  //   },
-  //   body: JSON.stringify(form),
-  // });
+  const [response, setResponse] = React.useState();
 
   let id;
 
-  const handleInputChange = ({target}) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    fetch('https://ranekapi.origamid.dev/json/api/usuario', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(form),
+    }).then((resolve) => {
+      setResponse(resolve)
+      console.log(resolve)
+    }).catch((reject) => console.log(reject))
+  }
+
+  const handleChange = ({target}) => {
     id = target.id
     setForm({ ...form, [id]:target.value })
-    console.log(target)
   }
 
   return (
-    <form>
-      <Input value={form.nome} onChange={handleInputChange} type="text" refe="nome">Nome</Input>
-      <Input value={form.email} onChange={handleInputChange} type="email" refe="email">Email</Input>
-      <Input value={form.senha} onChange={handleInputChange} type="password" refe="senha">Senha</Input>
-      <Input value={form.cep} onChange={handleInputChange} type="text" refe="cep">Cep</Input>
-      <Input value={form.rua} onChange={handleInputChange} type="text" refe="rua">Rua</Input>
-      <Input value={form.numero} onChange={handleInputChange} type="number" refe="numero">Número</Input>
-      <Input value={form.bairro} onChange={handleInputChange} type="text" refe="bairro">Bairro</Input>
-      <Input value={form.cidade} onChange={handleInputChange} type="text" refe="cidade">Cidade</Input>
-      <Input value={form.estado} onChange={handleInputChange} type="text" refe="estado">Estado</Input>
+    <form onSubmit={handleSubmit}>
+      <Input value={form.nome} onChange={handleChange} type="text" refe="nome">Nome</Input>
+      <Input value={form.email} onChange={handleChange} type="email" refe="email">Email</Input>
+      <Input value={form.senha} onChange={handleChange} type="password" refe="senha">Senha</Input>
+      <Input value={form.cep} onChange={handleChange} type="text" refe="cep">Cep</Input>
+      <Input value={form.rua} onChange={handleChange} type="text" refe="rua">Rua</Input>
+      <Input value={form.numero} onChange={handleChange} type="number" refe="numero">Número</Input>
+      <Input value={form.bairro} onChange={handleChange} type="text" refe="bairro">Bairro</Input>
+      <Input value={form.cidade} onChange={handleChange} type="text" refe="cidade">Cidade</Input>
+      <Input value={form.estado} onChange={handleChange} type="text" refe="estado">Estado</Input>
+      {response && response.ok && <p>Formulário Enviado</p>}
+      <button>Enviar</button>
     </form>
   );
 };