Upload 7.8

part7/ultimate-hooks/src/App.js

@@ -0,0 +1,98 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+const useField = (type) => {
+  const [value, setValue] = useState("");
+
+  const onChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const reset = () => {
+    setValue("");
+  };
+
+  return {
+    type,
+    value,
+    onChange,
+    reset,
+  };
+};
+
+const useResource = (baseUrl) => {
+  const [resources, setResources] = useState([]);
+
+  useEffect(() => {
+    const getAll = async () => {
+      const response = await axios.get(baseUrl);
+      setResources(response.data);
+    };
+    getAll();
+  }, [baseUrl]);
+
+  const create = async (resource) => {
+    const response = await axios.post(baseUrl, resource);
+    setResources(resources.concat(response.data));
+  };
+
+  const service = {
+    create,
+  };
+  return [resources, service];
+};
+
+const App = () => {
+  const { reset: resetContent, ...content } = useField("text");
+  const { reset: resetName, ...name } = useField("text");
+  const { reset: resetNumber, ...number } = useField("text");
+
+  const [notes, noteService] = useResource("http://localhost:3005/notes");
+  const [persons, personService] = useResource("http://localhost:3005/persons");
+
+  const handleNoteSubmit = async (event) => {
+    event.preventDefault();
+    const newNote = { content: content.value };
+    await noteService.create(newNote);
+    resetContent();
+  };
+
+  const handlePersonSubmit = async (event) => {
+    event.preventDefault();
+    const newPerson = {
+      name: name.value,
+      number: number.value,
+      id: persons.length + 1,
+    };
+    await personService.create(newPerson);
+    resetName();
+    resetNumber();
+  };
+
+  return (
+    <div>
+      <h2>notes</h2>
+      <form onSubmit={handleNoteSubmit}>
+        <input {...content} />
+        <button>create</button>
+      </form>
+      {notes.map((n) => (
+        <p key={n.id}>{n.content}</p>
+      ))}
+
+      <h2>persons</h2>
+      <form onSubmit={handlePersonSubmit}>
+        name <input {...name} /> <br />
+        number <input {...number} />
+        <button>create</button>
+      </form>
+      {persons.map((n) => (
+        <p key={n.id}>
+          {n.name} {n.number}
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default App;