Update state information to prefill edit forms with current values

exercises-ui/src/pages/EditPage.js

@@ -2,20 +2,25 @@ import "../App.css";
 import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
 
-export const EditPage = () => {
-  const [name, setName] = useState("");
-  const [reps, setReps] = useState("");
-  const [weight, setWeight] = useState("");
-  const [unit, setUnit] = useState("");
-  const [date, setDate] = useState("");
+export const EditPage = ({ exerciseToEdit }) => {
+  const [name, setName] = useState(exerciseToEdit.name);
+  const [reps, setReps] = useState(exerciseToEdit.reps);
+  const [weight, setWeight] = useState(exerciseToEdit.weight);
+  const [unit, setUnit] = useState(exerciseToEdit.unit);
+  const [date, setDate] = useState(exerciseToEdit.date);
 
   const history = useHistory();
 
   const editExercise = async () => {
-    const updatedExercise = { name, reps, weight, unit, date };
-    const response = await fetch(`/exercises/id`, {
+    const response = await fetch(`/exercises/${exerciseToEdit._id}`, {
       method: "PUT",
-      body: JSON.stringify(updatedExercise),
+      body: JSON.stringify({
+        name: name,
+        reps: reps,
+        weight: weight,
+        unit: unit,
+        date: date,
+      }),
       headers: { "Content-Type": "application/json" },
     });
     if (response.status === 200) {
@@ -31,51 +36,32 @@ export const EditPage = () => {
       <h2>Edit Exercise</h2>
       <input
         type="text"
-        placeholder="Enter name here"
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
       <input
         type="number"
-        placeholder="Enter reps here"
         value={reps}
         onChange={(e) => setReps(e.target.value)}
       />
       <input
         type="number"
-        placeholder="Enter weight here"
         value={weight}
         onChange={(e) => setWeight(e.target.value)}
       />
       <input
         type="text"
-        placeholder="Enter unit here"
         value={unit}
         onChange={(e) => setUnit(e.target.value)}
       />
       <input
         type="text"
-        placeholder="Enter date here"
         value={date}
         onChange={(e) => setDate(e.target.value)}
       />
-      <button onClick={editExercise}>Edit</button>
+      <button onClick={editExercise}>Save</button>
     </div>
   );
 };
 
-//   const response = await fetch(`/exercises/${exerciseToEdit._id}`, {
-//     method: 'PUT',
-//     body: JSON.stringify({ name: name, reps: reps, weight: weight, unit: unit, date: date }),
-//     headers: {
-//       'Content-Type': 'application/json',
-//     },
-//   });
-//   if(response.status === 200){
-//        alert("Successfully edited the exercise!");
-//   } else {
-//        alert(`Failed to edit the exercise, status code = ${response.status}`);
-//   }
-// };
-
 export default EditPage;