Upload 7.6

part7/routed-anecdotes/src/App.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useField } from "./hooks/hooks";
 import { Route, Routes, Link, useMatch, useNavigate } from "react-router-dom";
 
 const Menu = () => {
@@ -37,7 +38,7 @@ const Anecdote = ({ anecdote }) => (
     </h2>
     <p>has {anecdote.votes} votes</p>
     <p>
-      for more info see <a href={anecdote.info}>{anecdote.info}</a>
+      for more info see <a href={anecdote.info}>here</a>
     </p>
   </div>
 );
@@ -90,51 +91,46 @@ const Footer = () => (
 
 const CreateNew = (props) => {
   const navigate = useNavigate();
-  const [content, setContent] = useState("");
-  const [author, setAuthor] = useState("");
-  const [info, setInfo] = useState("");
+  const { reset: contentReset, ...content } = useField("content");
+  const { reset: authorReset, ...author } = useField("author");
+  const { reset: infoReset, ...info } = useField("info");
 
   const handleSubmit = (e) => {
     e.preventDefault();
     props.addNew({
-      content,
-      author,
-      info,
+      content: content.value,
+      author: author.value,
+      info: info.value,
       votes: 0,
     });
     navigate("/");
   };
 
+  const handleReset = () => {
+    contentReset();
+    authorReset();
+    infoReset();
+  };
+
   return (
     <div>
       <h2>create a new anecdote</h2>
       <form onSubmit={handleSubmit}>
         <div>
           content
-          <input
-            name="content"
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-          />
+          <input {...content} />
         </div>
         <div>
           author
-          <input
-            name="author"
-            value={author}
-            onChange={(e) => setAuthor(e.target.value)}
-          />
+          <input {...author} />
         </div>
         <div>
           url for more info
-          <input
-            name="info"
-            value={info}
-            onChange={(e) => setInfo(e.target.value)}
-          />
+          <input {...info} />
         </div>
         <button>create</button>
       </form>
+      <button onClick={handleReset}>reset</button>
     </div>
   );
 };

part7/routed-anecdotes/src/hooks/hooks.js

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+export const useField = (name) => {
+  const [value, setValue] = useState("");
+
+  const onChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const reset = () => {
+    setValue("");
+  };
+
+  return {
+    name,
+    value,
+    onChange,
+    reset,
+  };
+};