a/ExerciseTracker
1
0
Fork 0
mirror of https://codeberg.org/andyscott/ExerciseTracker.git synced 2024-11-09 06:00:48 -05:00
Code Issues Projects Releases Packages Wiki Activity

Update state information to prefill edit forms with current values

Browse source
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
1 changed files with 15 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
exercises-ui/src/pages/EditPage.js
View file

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