+
+ {/*create a simple form with two inputs, labels and a submit button*/}
+
+
+ {/*form validation feedback*/}
+
+ ❌ First Name must be at least 2 characters
+
+
+ ❌ Last Name must be at least 2 characters
+
+
+ {/*option for user to go back to main page of listview*/}
+
+ View Persons
+
+
+
+ ;
}
export default AddView;
\ No newline at end of file
diff --git a/frontend/src/views/DeleteView.tsx b/frontend/src/views/DeleteView.tsx
new file mode 100644
index 00000000..6e1690c5
--- /dev/null
+++ b/frontend/src/views/DeleteView.tsx
@@ -0,0 +1,66 @@
+import Person from "../models/Person";
+import React, {useState} from "react";
+import axios from "axios";
+import {Link} from "react-router-dom";
+
+/*
+❗There is no form validation on this view
+*/
+
+/*
+ This view deals with deletion of a current entity in the database.
+ It takes in the name of the person.
+ And sends a post request to the server to delete the person in the database.
+
+ */
+const DeleteView = () => {
+
+ const [person, setPerson] = useState({});
+
+ // handle the change event for person's name updation on the form
+ const handlePerson = (e: React.ChangeEvent) => {
+ if (e.target.id === "firstName") {
+ setPerson({firstName: e.target.value, lastName: person.lastName});
+ }
+ if (e.target.id === "lastName") {
+ setPerson({lastName: e.target.value, firstName: person.firstName});
+ }
+ }
+
+ //handle the submit event and handle axios post request
+ const handleSubmit = () => {
+ axios.post("http://localhost:8080/delete", person).then((response) => {
+ if (response.status === 200 && response.data === true) {
+ alert("Person deleted");
+ } else {
+ alert("Person not found in database");
+ }
+ }).catch((err) => {
+ console.warn(err);
+ });
+ }
+
+ return
+
Delete View
+
+
+ View Persons
+
+
;
+}
+
+export default DeleteView;
\ No newline at end of file
diff --git a/frontend/src/views/EditView.tsx b/frontend/src/views/EditView.tsx
new file mode 100644
index 00000000..91bb7f88
--- /dev/null
+++ b/frontend/src/views/EditView.tsx
@@ -0,0 +1,100 @@
+import Person from "../models/Person";
+import React, {useState} from "react";
+import axios from "axios";
+import {Link} from "react-router-dom";
+
+/*
+❗There is no form validation on this view
+ */
+
+/*
+ This view deals with updation of a current entity in the database.
+ It takes in the old name of the person, and the new name of the person.
+ It then sends a post request to the server to update the person in the database.
+ */
+const EditView = () => {
+
+ const [oldName, setOldName] = useState({});
+ const [newName, setNewName] = useState({});
+
+ //handle the change event for old name
+ const handleOldName = (e: React.ChangeEvent) => {
+ if (e.target.id === "oldFirstName") {
+ setOldName({firstName: e.target.value, lastName: oldName.lastName});
+ }
+ if (e.target.id === "oldLastName") {
+ setOldName({lastName: e.target.value, firstName: oldName.firstName});
+ }
+ }
+
+ //handle the change event for new name
+ const handleNewName = (e: React.ChangeEvent) => {
+ if (e.target.id === "newFirstName") {
+ setNewName({firstName: e.target.value, lastName: newName.lastName});
+ }
+ if (e.target.id === "newLastName") {
+ setNewName({lastName: e.target.value, firstName: newName.firstName});
+ }
+ }
+
+ //handle the submit event and handle axios post request
+ const handleSubmit = () => {
+ const personPackage = {
+ old: oldName,
+ latest: newName
+ }
+ console.log(personPackage);
+ axios.post("http://localhost:8080/update", personPackage, {
+ headers: {
+ "Content-Type": "application/json"
+ }
+ }).then((response) => {
+ if (response.status === 200 && response.data === true) {
+ alert("Person edited");
+ } else {
+ alert("Person not found in database");
+ }
+ }).catch((err) => {
+ console.warn(err);
+ });
+ }
+
+ return
+
Edit View
+
+
+ View Persons
+
+
;
+}
+
+export default EditView;
\ No newline at end of file
diff --git a/frontend/src/views/ListView.tsx b/frontend/src/views/ListView.tsx
index fd149aba..8e66edde 100644
--- a/frontend/src/views/ListView.tsx
+++ b/frontend/src/views/ListView.tsx
@@ -37,7 +37,10 @@ function ListView(){
}
}
- Add Person
+