Update state information to prefill edit forms with current values

This commit is contained in:
Andrew Scott 2022-06-04 03:19:18 -04:00
parent 1139da980d
commit ec4f910562
Signed by: a
GPG key ID: 3EB62D0BBB8DB381

View file

@ -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;