DATA

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.39.4",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,23 +1,12 @@
-import logo from './logo.svg';
 import './App.css';
+import Customers from './Customers';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>Customers</h1>
+      <Customers />
+
     </div>
   );
 }

src/Customers.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { useForm } from "react-hook-form";
+
+const Customers = () => {
+  const [country, setCountry] = useState();
+  const [name, setName] = useState("");
+  const [uCountry, setuCountry] = useState("");
+
+  const options = {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+  };
+  const url = "https://restcountries.com/v3.1/all";
+  // console.log(country);
+  useEffect(() => {
+    const gettingCountry = async () => {
+      try {
+        await axios.get(url, options).then((response) => {
+          const data = response.data;
+          // console.log(data);
+          // console.log("****** FROM useEffect");
+          setCountry(data);
+        });
+      } catch (error) {
+        console.error(error);
+        return error;
+      }
+    };
+
+    gettingCountry();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const {
+    register,
+    // handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const sentData = async (e) => {
+    const addCustomer = `http://localhost:7000/customers  `;
+
+
+    e.preventDefault();
+    const data = {
+      id: "6", // esto sera manejado con algun paquete para id's automaticos
+      name: name,
+      country: uCountry,
+    };
+
+    const headers = {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    };
+
+    await axios
+      .post(addCustomer, data, { headers: headers })
+      .then((res) => {
+        const data = res.data;
+        console.log(data);
+        console.log("heyyyy");
+        //console.log(data.message);
+        if (data.Message === "SUCCESS") {
+          alert("Customer creado con exito");
+          window.location.href = "/";
+        }
+        console.log("******__****: ", res);
+      })
+      .catch((err) => {
+        throw err;
+      });
+  };
+
+  if (!country) return "Cargando contenido...";
+  return (
+    <section className="">
+      {/* { country.alpha3Code } */}
+      <form onSubmit={sentData}>
+        <p> Ingresa tus datos</p>
+        <input
+          {...register("fullName", { required: true })}
+          placeholder={"Ingresa tu nombre"}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        {errors.fullName && <p>Full name is required.</p>}
+        <p>
+          <select
+            onChange={(e) => setuCountry(e.target.value)}
+          >
+            {country.map((item, id) => (
+              <option key={id} value={item.name.common}>
+                {item.name.common}
+              </option>
+            ))}
+          </select>
+        </p>
+        <input type="submit" />
+      </form>
+    </section>
+  );
+};
+
+export default Customers;