making signifigant progress

Week-16-React_Router_and_React_Bootstrap/src/App.jsx

@@ -1,36 +1,62 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-//import { useState } from "react";
-import NavBar from "./components/NavBar";
+import { useEffect, useState } from "react";
+import { useUserContext } from '../src/components/UserContext';
+import UserNavbar from "./components/UserNavbar";
+import AdminNavbar from "./components/AdminNavbar";
 import Home from "./pages/Home/Home";
 import Login from "./pages/Login/Login";
 import Admin from "./pages/Admin/Admin";
 import ChildA from "./pages/ChildA/ChildA"
 import ChildB from './pages/ChildB/ChildB'
 import ChildC from './pages/ChildC/ChildC'
 import ChildD from './pages/ChildD/ChildD'
+import Users from './pages/Users/Users'
+import Footer from "./components/Footer";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./App.css";
 
 function App() {
-
-  //const [count, setCount] = useState(0);
+   //Api URL
+   const Chores_Api_URL = 'https://6489d1fc5fa58521cab04f75.mockapi.io/ChoreDb'
+  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(()=> {
+        getChores()
+      }, [])
+      //Context for Navbar
+      const { user } = useUserContext();
 
-
   return (
     <>
       <Router>
-        <NavBar />
+      {user ? (
+        <>
+          {user.role === 'admin' ? <AdminNavbar /> : <UserNavbar />}
+        </>
+      ) : null}
 
         <Routes>
           <Route exact path="/" element={<Home />} />
           <Route path="/Login" element={<Login />} />
-          <Route path="/Admin" element={<Admin />} />
-          <Route path="/ChildA" element={<ChildA />} />
-          <Route path="/ChildB" element={<ChildB />} />
-          <Route path="/ChildC" element={<ChildC />} />
-          <Route path="/ChildD" element={<ChildD />} />
+          <Route path="/Admin" element={<Admin getChores={getChores} chores={chores} 
+          Chores_Api_URL={Chores_Api_URL}/>} />
+          <Route path="/ChildA" element={<ChildA chores={chores}/>} />
+          <Route path="/ChildB" element={<ChildB chores={chores}/>} />
+          <Route path="/ChildC" element={<ChildC chores={chores}/>} />
+          <Route path="/ChildD" element={<ChildD chores={chores}/>} />
+          <Route path="/Users" element={<Users />} />
         </Routes>
       </Router>
+      <Footer />
     </>
   );
 }

Week-16-React_Router_and_React_Bootstrap/src/components/AdminNavbar.jsx

@@ -0,0 +1,42 @@
+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';
+
+const AdminNavbar = () => {
+    const { user, logout } = useUserContext();
+
+    const navigate = useNavigate();
+
+    const handleLogout = () => {
+      logout();
+      navigate('/');
+    };
+  return (
+    <Navbar className="p-3" bg="dark" data-bs-theme="dark" expand="lg">
+      <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>
+          </ButtonGroup>
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+};
+
+export default AdminNavbar;

Week-16-React_Router_and_React_Bootstrap/src/components/Atable.jsx

@@ -0,0 +1,45 @@
+import Table from 'react-bootstrap/Table';
+import filterByName from './filterByName';
+import DisplayTableRow from './DisplayTableRow';
+
+
+export default function Atable({chores,
+    deleteTask,
+    uuser,
+    utask,
+    udate,
+    setUuser,
+    setUtask,
+    setUdate,
+    updatedTask
+}) {
+  return (
+    <Table striped bordered hover variant="dark">
+      <thead>
+        <tr>
+          <th>Ayla's Tasks</th>
+          <th>Date Assigned:</th>
+          <th>Task:</th>
+          <th>Update:</th>
+          <th>Delete:</th>
+        </tr>
+      </thead>
+      <tbody>
+        {filterByName("Ayla", chores).map((chore, index) => (
+          <DisplayTableRow
+            key={index}
+            chore={chore}
+            deleteTask={deleteTask}
+            uuser={uuser}
+            utask={utask}
+            udate={udate}
+            setUuser={setUuser}
+            setUtask={setUtask}
+            setUdate={setUdate}
+            updatedTask={updatedTask}
+          />
+        ))}
+      </tbody>
+    </Table>
+  );
+}

Week-16-React_Router_and_React_Bootstrap/src/components/Btable.jsx

@@ -0,0 +1,45 @@
+import Table from 'react-bootstrap/Table';
+import filterByName from './filterByName';
+import DisplayTableRow from './DisplayTableRow';
+
+
+export default function Btable({chores,
+    deleteTask,
+    uuser,
+    utask,
+    udate,
+    setUuser,
+    setUtask,
+    setUdate,
+    updatedTask
+}) {
+  return (
+    <Table striped bordered hover variant="dark">
+      <thead>
+        <tr>
+          <th>Braiden's Tasks</th>
+          <th>Date Assigned:</th>
+          <th>Task:</th>
+          <th>Update:</th>
+          <th>Delete:</th>
+        </tr>
+      </thead>
+      <tbody>
+        {filterByName("Braiden", chores).map((chore, index) => (
+          <DisplayTableRow
+            key={index}
+            chore={chore}
+            deleteTask={deleteTask}
+            uuser={uuser}
+            utask={utask}
+            udate={udate}
+            setUuser={setUuser}
+            setUtask={setUtask}
+            setUdate={setUdate}
+            updatedTask={updatedTask}
+          />
+        ))}
+      </tbody>
+    </Table>
+  );
+}

Week-16-React_Router_and_React_Bootstrap/src/components/Ctable.jsx

@@ -0,0 +1,45 @@
+import Table from 'react-bootstrap/Table';
+import filterByName from './filterByName';
+import DisplayTableRow from './DisplayTableRow';
+
+
+export default function Ctable({chores,
+    deleteTask,
+    uuser,
+    utask,
+    udate,
+    setUuser,
+    setUtask,
+    setUdate,
+    updatedTask
+}) {
+  return (
+    <Table striped bordered hover variant="dark">
+      <thead>
+        <tr>
+          <th>Callan's Tasks</th>
+          <th>Date Assigned:</th>
+          <th>Task:</th>
+          <th>Update:</th>
+          <th>Delete:</th>
+        </tr>
+      </thead>
+      <tbody>
+        {filterByName("Callan", chores).map((chore, index) => (
+          <DisplayTableRow
+            key={index}
+            chore={chore}
+            deleteTask={deleteTask}
+            uuser={uuser}
+            utask={utask}
+            udate={udate}
+            setUuser={setUuser}
+            setUtask={setUtask}
+            setUdate={setUdate}
+            updatedTask={updatedTask}
+          />
+        ))}
+      </tbody>
+    </Table>
+  );
+}

Week-16-React_Router_and_React_Bootstrap/src/components/DisplayTableRow.jsx

@@ -0,0 +1,43 @@
+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}) {
+
+
+  //Modal State
+  const [modalShow, setModalShow] = useState(false);
+
+  return (
+
+    <tr>
+      <td>{chore.name}</td>
+      <td>{chore.date}</td>
+      <td>{chore.task}</td>
+      <td>
+      <Button variant="warning" 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}
+      />
+
+
+      </td>
+      <td>
+        <Button variant="danger" onClick={(e) => deleteTask(e, chore.id)}>Delete</Button>
+      </td>
+    </tr>
+  );
+}

Week-16-React_Router_and_React_Bootstrap/src/components/Dtable.jsx

@@ -0,0 +1,45 @@
+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
+}) {
+  return (
+    <Table striped bordered hover variant="dark">
+      <thead>
+        <tr>
+          <th>Delaney's Tasks</th>
+          <th>Date Assigned:</th>
+          <th>Task:</th>
+          <th>Update:</th>
+          <th>Delete:</th>
+        </tr>
+      </thead>
+      <tbody>
+        {filterByName("Delaney", chores).map((chore, index) => (
+          <DisplayTableRow
+            key={index}
+            chore={chore}
+            deleteTask={deleteTask}
+            uuser={uuser}
+            utask={utask}
+            udate={udate}
+            setUuser={setUuser}
+            setUtask={setUtask}
+            setUdate={setUdate}
+            updatedTask={updatedTask}
+          />
+        ))}
+      </tbody>
+    </Table>
+  );
+}

Week-16-React_Router_and_React_Bootstrap/src/components/Footer.jsx

@@ -0,0 +1,7 @@
+export default function Footer(){
+    return(
+    <footer>
+        © Patrick Corcoran 2023
+    </footer>
+    );
+};

Week-16-React_Router_and_React_Bootstrap/src/components/NavBar.jsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 const NavBar = () => {
   return (
     <Navbar className="p-3" bg="dark" data-bs-theme="dark" expand="lg">
-      <Navbar.Brand as={Link} to="/">
+      <Navbar.Brand>
         House Chores
       </Navbar.Brand>
       <Navbar.Toggle aria-controls="navbar-nav" />