Merge pull request #72 from SCCapstone/s-orug-issue-18

s orug issue 18
good stuff sai

client/src/App.js

@@ -9,6 +9,7 @@ import CreateAccount from "./views/CreateAccount/FormSignUp";
 import LeftSideNavBar from "./components/LeftSideNavBar/LeftSideNavBar";
 import TermsServices from "./views/TermsServices";
 import LoginForm from "./views/Login/loginform";
+import AdminPage from "./views/AdminPage/AdminPage";
 //import "./App.css";
 
 var React = require("react");
@@ -119,6 +120,7 @@ class App extends Component {
             <Route path="/createaccount" element={<CreateAccount />} />
             <Route path="/termsservices" element={<TermsServices />} />
             <Route path="/login" element={<LoginForm />} />
+            <Route path="/admin" element={<AdminPage />} />
           </Routes>
         </BrowserRouter>
       </div>

client/src/components/AdminPage/EditableRow.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+const EditableRow = ({
+  editFormData,
+  handleEditFormChange,
+  handleCancelClick,
+}) => {
+  return (
+    <tr>
+      <td>
+        <input
+          type="text"
+          required="required"
+          placeholder="Enter a name..."
+          name="fullName"
+          value={editFormData.fullName}
+          onChange={handleEditFormChange}
+        ></input>
+      </td>
+      <td>
+        <input
+          type="text"
+          required="required"
+          placeholder="Enter an username..."
+          name="username"
+          value={editFormData.username}
+          onChange={handleEditFormChange}
+        ></input>
+      </td>
+      <td>
+        <input
+          type="text"
+          required="required"
+          placeholder="Enter a password..."
+          name="password"
+          value={editFormData.password}
+          onChange={handleEditFormChange}
+        ></input>
+      </td>
+      <td>
+        <input
+          type="email"
+          required="required"
+          placeholder="Enter an email..."
+          name="email"
+          value={editFormData.email}
+          onChange={handleEditFormChange}
+        ></input>
+      </td>
+      <td>
+        <button type="submit">Save</button>
+        <button type="button" onClick={handleCancelClick}>
+          Cancel
+        </button>
+      </td>
+    </tr>
+  );
+};
+
+export default EditableRow;

client/src/components/AdminPage/ReadOnlyRow.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+const ReadOnlyRow = ({ contact, handleEditClick, handleDeleteClick }) => {
+  return (
+    <tr>
+      <td>{contact.fullName}</td>
+      <td>{contact.username}</td>
+      <td>{contact.password}</td>
+      <td>{contact.email}</td>
+      <td>
+        <button
+          type="button"
+          onClick={(event) => handleEditClick(event, contact)}
+        >
+          Edit
+        </button>
+        <button type="button" onClick={() => handleDeleteClick(contact.id)}>
+          Delete
+        </button>
+      </td>
+    </tr>
+  );
+};
+
+export default ReadOnlyRow;

client/src/views/AdminPage/AdminPage.css

@@ -0,0 +1,27 @@
+.app-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 1rem;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th,
+td {
+  border: 1px solid #ffffff;
+  text-align: left;
+  padding: 8px;
+  font-size: 32px;
+}
+
+th {
+  background-color: #b49a67;
+}
+
+td {
+  background-color: #b49a67;
+}

client/src/views/AdminPage/AdminPage.js

@@ -0,0 +1,185 @@
+import React, { useState, Fragment } from "react";
+import { nanoid } from "nanoid";
+import "./AdminPage.css";
+import data from "./users.json";
+import ReadOnlyRow from "../../components/AdminPage/ReadOnlyRow";
+import EditableRow from "../../components/AdminPage/EditableRow";
+
+const AdminPage = () => {
+  const [contacts, setContacts] = useState(data);
+  const [addFormData, setAddFormData] = useState({
+    fullName: "",
+    username: "",
+    password: "",
+    email: "",
+  });
+
+  const [editFormData, setEditFormData] = useState({
+    fullName: "",
+    username: "",
+    password: "",
+    email: "",
+  });
+
+  const [editContactId, setEditContactId] = useState(null);
+
+  const handleAddFormChange = (event) => {
+    event.preventDefault();
+
+    const fieldName = event.target.getAttribute("name");
+    const fieldValue = event.target.value;
+
+    const newFormData = { ...addFormData };
+    newFormData[fieldName] = fieldValue;
+
+    setAddFormData(newFormData);
+  };
+
+  const handleEditFormChange = (event) => {
+    event.preventDefault();
+
+    const fieldName = event.target.getAttribute("name");
+    const fieldValue = event.target.value;
+
+    const newFormData = { ...editFormData };
+    newFormData[fieldName] = fieldValue;
+
+    setEditFormData(newFormData);
+  };
+
+  const handleAddFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newContact = {
+      id: nanoid(),
+      fullName: addFormData.fullName,
+      username: addFormData.username,
+      password: addFormData.password,
+      email: addFormData.email,
+    };
+
+    const newContacts = [...contacts, newContact];
+    setContacts(newContacts);
+  };
+
+  const handleEditFormSubmit = (event) => {
+    event.preventDefault();
+
+    const editedContact = {
+      id: editContactId,
+      fullName: editFormData.fullName,
+      username: editFormData.username,
+      password: editFormData.password,
+      email: editFormData.email,
+    };
+
+    const newContacts = [...contacts];
+
+    const index = contacts.findIndex((contact) => contact.id === editContactId);
+
+    newContacts[index] = editedContact;
+
+    setContacts(newContacts);
+    setEditContactId(null);
+  };
+
+  const handleEditClick = (event, contact) => {
+    event.preventDefault();
+    setEditContactId(contact.id);
+
+    const formValues = {
+      fullName: contact.fullName,
+      username: contact.username,
+      password: contact.password,
+      email: contact.email,
+    };
+
+    setEditFormData(formValues);
+  };
+
+  const handleCancelClick = () => {
+    setEditContactId(null);
+  };
+
+  const handleDeleteClick = (contactId) => {
+    const newContacts = [...contacts];
+
+    const index = contacts.findIndex((contact) => contact.id === contactId);
+
+    newContacts.splice(index, 1);
+
+    setContacts(newContacts);
+  };
+
+  return (
+    <div className="app-container">
+      <form onSubmit={handleEditFormSubmit}>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Username</th>
+              <th>Password</th>
+              <th>Email</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {contacts.map((contact) => (
+              <Fragment>
+                {editContactId === contact.id ? (
+                  <EditableRow
+                    editFormData={editFormData}
+                    handleEditFormChange={handleEditFormChange}
+                    handleCancelClick={handleCancelClick}
+                  />
+                ) : (
+                  <ReadOnlyRow
+                    contact={contact}
+                    handleEditClick={handleEditClick}
+                    handleDeleteClick={handleDeleteClick}
+                  />
+                )}
+              </Fragment>
+            ))}
+          </tbody>
+        </table>
+      </form>
+
+      <h2>Add a New User</h2>
+      <form onSubmit={handleAddFormSubmit}>
+        <input
+          type="text"
+          name="fullName"
+          required="required"
+          placeholder="Enter a name..."
+          onChange={handleAddFormChange}
+        />
+        <input
+          type="text"
+          name="username"
+          required="required"
+          placeholder="Enter an username..."
+          onChange={handleAddFormChange}
+        />
+        <input
+          type="text"
+          name="password"
+          required="required"
+          placeholder="Enter a password..."
+          onChange={handleAddFormChange}
+        />
+        <input
+          type="email"
+          name="email"
+          required="required"
+          placeholder="Enter an email..."
+          onChange={handleAddFormChange}
+        />
+        <button type="submit">Add</button>
+      </form>
+    </div>
+  );
+};
+
+export default AdminPage;

client/src/views/AdminPage/users.json

@@ -0,0 +1,51 @@
+[
+  {
+    "id": 1,
+    "fullName": "Erna Vega",
+    "username": "lizardrescue",
+    "password": "638673b6f059f7245fd9c8ca",
+    "email": "[email protected]"
+  },
+  {
+    "id": 2,
+    "fullName": "Ana Mcfadden",
+    "username": "pandaproceed",
+    "password": "638673b6988c6c44fe3da1ca",
+    "email": "[email protected]"
+  },
+  {
+    "id": 3,
+    "fullName": "Nita Whitaker",
+    "username": "snailrecord",
+    "password": "638673b69645e5139624fac6",
+    "email": "[email protected]"
+  },
+  {
+    "id": 4,
+    "fullName": "Faulkner Tyler",
+    "username": "donkeydamage",
+    "password": "638673b67aeeafa03541f6b6",
+    "email": "[email protected]"
+  },
+  {
+    "id": 5,
+    "fullName": "Velasquez Williamson",
+    "username": "rino",
+    "password": "638673b63f00d77a2b6316f5",
+    "email": "[email protected]"
+  },
+  {
+    "id": 6,
+    "fullName": "Catherine Alexander",
+    "username": "tikeciov",
+    "password": "638673b61d01f7be67029e1e",
+    "email": "[email protected]"
+  },
+  {
+    "id": 7,
+    "fullName": "Chavez Morrow",
+    "username": "gazellerat",
+    "password": "638673b6a5b1dced274942f2",
+    "email": "[email protected]"
+  }
+]