refactor react components

todo-web/src/components/FilterButton.js

@@ -1,8 +1,13 @@
 function FilterButton(props) {
   return (
-    <button type="button" className="btn toggle-btn" aria-pressed="true">
+    <button
+      type="button"
+      className="btn toggle-btn"
+      aria-pressed={props.isPressed}
+      onClick={() => props.setFilter(props.name)}
+    >
       <span className="visually-hidden">Show </span>
-      <span>all </span>
+      <span>{props.name}</span>
       <span className="visually-hidden"> tasks</span>
     </button>
   );

todo-web/src/components/Todo.js

@@ -1,8 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 export default function Todo(props) {
     const [isEditing, setEditing] = useState(false);
     const [newName, setNewName] = useState('');
+    const editFieldRef = useRef(null);
+    const editButtonRef = useRef(null);
+    useEffect(() => {
+      if (isEditing) {
+        editFieldRef.current.focus();
+      } else {
+        editButtonRef.current.focus();
+      }
+    }, [isEditing]);
     function handleChange(e) {
       setNewName(e.target.value);
     }
@@ -22,7 +31,9 @@ export default function Todo(props) {
             id={props.id}
             className="todo-text"
             type="text"
+            value={newName}
             onChange={handleChange}
+            ref={editFieldRef}
           />
         </div>
         <div className="btn-group">
@@ -59,6 +70,7 @@ export default function Todo(props) {
             type="button"
             className="btn"
             onClick={() => setEditing(true)}
+            ref={editButtonRef}
           >
             Edit <span className="visually-hidden">{props.name}</span>
           </button>

todo-web/src/index.js

@@ -4,12 +4,6 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const DATA = [
-  { id: "todo-0", name: "Eat", completed: true },
-  { id: "todo-1", name: "Sleep", completed: false },
-  { id: "todo-2", name: "Repeat", completed: false }
-];
-
 ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want to start measuring performance in your app, pass a function