Final Commenting

Fraju-pc · Aug 1, 2023 · 7c30701 · 7c30701
1 parent 22bc545
commit 7c30701
Show file tree

Hide file tree

Showing 26 changed files with 426 additions and 292 deletions.
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/App.jsx b/Week-16-React_Router_and_React_Bootstrap/src/App.jsx
@@ -1,3 +1,4 @@
+//Imports
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { useUserContext } from '../src/components/UserContext';
@@ -14,28 +15,32 @@ import Users from './pages/Users/Users'
 import Footer from "./components/Footer";
 import "bootstrap/dist/css/bootstrap.min.css";
 import './index.css'
+import './scrollbar.css'
 
-
+//Main App
 function App() {
+
    //Api URL
    const Chores_Api_URL = 'https://6489d1fc5fa58521cab04f75.mockapi.io/ChoreDb'
-  const [chores, setChores] = useState([]);
+   const [chores, setChores] = useState([]);
 
     //Api Pull function
     async function getChores() {
       const response = await fetch(Chores_Api_URL)
       const data = await response.json();
-      //console.log(data);
       setChores(data)
-      //console.log(chores);
+
     };
-     //Useeffect to pull data on loadin
-      useEffect(()=> {
+
+    //Useeffect to pull data on loadin
+    useEffect(()=> {
         getChores()
-      }, [])
-      //Context for Navbar
-      const { user } = useUserContext();
+    }, [])
+
+    //Context for Navbar
+    const { user } = useUserContext();
 
+  //Html Output
   return (
     <>
       <Router>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/AdminNavbar.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/AdminNavbar.jsx
@@ -1,42 +1,48 @@
+//Imports
 import React from "react";
 import { Navbar, Nav } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { useUserContext } from "./UserContext";
-import Button from 'react-bootstrap/Button';
-import { useNavigate } from 'react-router-dom';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Button from "react-bootstrap/Button";
+import { useNavigate } from "react-router-dom";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
 
+//Admin Nav Bar
 const AdminNavbar = () => {
-    const { user, logout } = useUserContext();
+  //Setup Context
+  const { user, logout } = useUserContext();
 
-    const navigate = useNavigate();
+  //Setup Navigate
+  const navigate = useNavigate();
 
-    const handleLogout = () => {
-      logout();
-      navigate('/');
-    };
+  //Log Out Button Function
+  const handleLogout = () => {
+    logout();
+    navigate("/");
+  };
+
+  //Html Output
   return (
     <Navbar id="nav" className="p-3" data-bs-theme="dark" expand="lg">
-      <Navbar.Brand>
-        House Chores
-      </Navbar.Brand>
+      <Navbar.Brand>House Chores</Navbar.Brand>
       <Navbar.Toggle aria-controls="navbar-nav" />
       <Navbar.Collapse id="navbar-nav">
         <Nav className="ms-auto">
-
           <Nav.Link as={Link} to="/Admin">
             Task Management
           </Nav.Link>
           <Nav.Link as={Link} to="/Users">
             User Management
           </Nav.Link>
           <ButtonGroup size="sm">
-            <Button variant="success" onClick={handleLogout}>Logout</Button>
+            <Button variant="success" onClick={handleLogout}>
+              Logout
+            </Button>
           </ButtonGroup>
         </Nav>
       </Navbar.Collapse>
     </Navbar>
   );
 };
 
-export default AdminNavbar;
+export default AdminNavbar;
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/Atable.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/Atable.jsx
@@ -14,7 +14,7 @@ export default function Atable({chores,
     updatedTask
 }) {
   return (
-    <Table id="table" striped bordered hover variant="dark">
+    <Table id="table" striped bordered hover variant="dark" className='scrollbar scrollbar-success'>
       <thead>
         <tr>
           <th>Ayla's Tasks</th>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/Btable.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/Btable.jsx
@@ -1,8 +1,9 @@
+//Imports
 import Table from 'react-bootstrap/Table';
 import filterByName from './filterByName';
 import DisplayTableRow from './DisplayTableRow';
 
-
+//Braiden's Table
 export default function Btable({chores,
     deleteTask,
     uuser,
@@ -13,6 +14,8 @@ export default function Btable({chores,
     setUdate,
     updatedTask
 }) {
+
+  //Html Output
   return (
     <Table id="table" striped bordered hover variant="dark">
       <thead>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/Ctable.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/Ctable.jsx
@@ -1,8 +1,9 @@
+//Imports
 import Table from 'react-bootstrap/Table';
 import filterByName from './filterByName';
 import DisplayTableRow from './DisplayTableRow';
 
-
+//Callan's Table
 export default function Ctable({chores,
     deleteTask,
     uuser,
@@ -13,6 +14,8 @@ export default function Ctable({chores,
     setUdate,
     updatedTask
 }) {
+
+  //Html Output
   return (
     <Table id="table" striped bordered hover variant="dark">
       <thead>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/DisplayTableRow.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/DisplayTableRow.jsx
@@ -1,42 +1,52 @@
+//Imports
 import { Button } from "react-bootstrap";
 import { useState } from "react";
 import UpdateTask from "../components/UpdateTask";
 
-export default function DisplayTableRow({ chore, deleteTask, uuser, utask, udate, 
-  setUuser,  setUtask, setUdate, updatedTask}) {
-
+//Function to Draw the Table rows on Admin page
+export default function DisplayTableRow({
+  chore,
+  deleteTask,
+  uuser,
+  utask,
+  udate,
+  setUuser,
+  setUtask,
+  setUdate,
+  updatedTask,
+}) {
 
   //Modal State
   const [modalShow, setModalShow] = useState(false);
 
+  //Html Output
   return (
-
     <tr>
       <td>{chore.name}</td>
       <td>{chore.date}</td>
       <td>{chore.task}</td>
       <td>
-      <Button variant="success" onClick={() => setModalShow(true)}>
-        Update
-      </Button>
+        <Button variant="success" onClick={() => setModalShow(true)}>
+          Update
+        </Button>
 
-      <UpdateTask
-        show={modalShow}
-        onHide={() => setModalShow(false)}
-        chore={chore}
-        uuser={uuser}
-        utask={utask}
-        udate={udate}
-        setUuser={setUuser}
-        setUtask={setUtask}
-        setUdate={setUdate}
-        updatedTask={updatedTask}
-      />
-
-
+        <UpdateTask
+          show={modalShow}
+          onHide={() => setModalShow(false)}
+          chore={chore}
+          uuser={uuser}
+          utask={utask}
+          udate={udate}
+          setUuser={setUuser}
+          setUtask={setUtask}
+          setUdate={setUdate}
+          updatedTask={updatedTask}
+        />
       </td>
       <td>
-        <Button variant="danger" onClick={(e) => deleteTask(e, chore.id)}>Delete</Button>
+        <Button variant="danger" onClick={(e) => deleteTask(e, chore.id)}>
+          Delete
+        </Button>
       </td>
     </tr>
   );

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/Dtable.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/Dtable.jsx
@@ -1,18 +1,22 @@
-import Table from 'react-bootstrap/Table';
-import filterByName from './filterByName';
-import DisplayTableRow from './DisplayTableRow';
+//Imports
+import Table from "react-bootstrap/Table";
+import filterByName from "./filterByName";
+import DisplayTableRow from "./DisplayTableRow";
 
-
-export default function Dtable({chores,
-    deleteTask,
-    uuser,
-    utask,
-    udate,
-    setUuser,
-    setUtask,
-    setUdate,
-    updatedTask
+//Delaney's Table
+export default function Dtable({
+  chores,
+  deleteTask,
+  uuser,
+  utask,
+  udate,
+  setUuser,
+  setUtask,
+  setUdate,
+  updatedTask,
 }) {
+
+  //Html Output
   return (
     <Table id="table" striped bordered hover variant="dark">
       <thead>
@@ -42,4 +46,4 @@ export default function Dtable({chores,
       </tbody>
     </Table>
   );
-}
+}
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/EmailAdmin.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/EmailAdmin.jsx
@@ -1,4 +1,4 @@
-
+//Function that sends email when task complete button is pressed    
 export default function EmailAdmin({chore}){
     //portion that sends the email
     window.Email.send({

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/Footer.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/Footer.jsx
@@ -1,4 +1,7 @@
+//Footer Function
 export default function Footer(){
+
+    //Html Output
     return(
     <footer>
         © Patrick Corcoran 2023

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/LoginTableRow.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/LoginTableRow.jsx
@@ -1,34 +1,42 @@
+//Imports
 import { Button } from "react-bootstrap";
 import { useState } from "react";
-import Modal from 'react-bootstrap/Modal';
+import Modal from "react-bootstrap/Modal";
 import Form from "react-bootstrap/Form";
 
-
-export default function DisplayTableRow({ log, deleteUser, username, password,  
-  setUsername, setPassword, updatedUser}) {
-
+//Table Row Function
+export default function DisplayTableRow({
+  log,
+  deleteUser,
+  username,
+  password,
+  setUsername,
+  setPassword,
+  updatedUser,
+}) {
 
   //Modal State
   const [show, setShow] = useState(false);
 
+  //Open / Close Modal functions
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
+
+  //Html Output
   return (
-
     <tr>
       <td>{log.name}</td>
       <td>{log.password}</td>
-
       <td>
-      <Button variant="success" onClick={handleShow}>
-        Update
-      </Button>
-      <Modal show={show} onHide={handleClose} animation={false}>
-        <Modal.Header closeButton>
-          <Modal.Title>Update User</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-        <Form>
+        <Button variant="success" onClick={handleShow}>
+          Update
+        </Button>
+        <Modal show={show} onHide={handleClose} animation={false}>
+          <Modal.Header closeButton>
+            <Modal.Title>Update User</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <Form>
               <Form.Group className="mb-3" controlId="formBasicText">
                 <Form.Label>User Name</Form.Label>
                 <Form.Control
@@ -47,23 +55,23 @@ export default function DisplayTableRow({ log, deleteUser, username, password,
                   onChange={(e) => setPassword(e.target.value)}
                 />
               </Form.Group>
-
             </Form>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={handleClose}>
-            Close
-          </Button>
-          <Button variant="warning" onClick={(e) => updatedUser(e, log.id)}>
-            Save Changes
-          </Button>
-        </Modal.Footer>
-      </Modal>
-
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={handleClose}>
+              Close
+            </Button>
+            <Button variant="warning" onClick={(e) => updatedUser(e, log.id)}>
+              Save Changes
+            </Button>
+          </Modal.Footer>
+        </Modal>
       </td>
       <td>
-        <Button variant="danger" onClick={(e) => deleteUser(e, log.id)}>Delete</Button>
+        <Button variant="danger" onClick={(e) => deleteUser(e, log.id)}>
+          Delete
+        </Button>
       </td>
     </tr>
   );
-}
+}