tweak to individual pages

Fraju-pc · Jul 31, 2023 · 22bc545 · 22bc545
1 parent 3c9952b
commit 22bc545
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 133 deletions.
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/Admin/Admin.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/Admin/Admin.jsx
@@ -3,10 +3,7 @@ import Form from "react-bootstrap/Form";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
-//import Table from 'react-bootstrap/Table';
 import React, { useState } from "react";
-//import DisplayTableRow from "../../components/DisplayTableRow";
-//import filterByName from "../../components/filterByName";
 import Atable from "../../components/Atable";
 import Btable from "../../components/Btable";
 import Ctable from "../../components/Ctable";
@@ -22,76 +19,72 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
   const [udate, setUdate] = useState("");
 
   const addTask = async (e) => {
-    e.preventDefault()
+    e.preventDefault();
     try {
-        const response = await fetch(Chores_Api_URL, {
-         method: 'POST',
-         headers: {
-           'Content-Type': 'application/json'
-           },
-           body: JSON.stringify({
-            name: user,
-            task: task,
-            date: date
-            })
-         });
-         const data = await response.json();
-          //logic when the Post is successful
-         console.log(data);
-         getChores();
-         setUser('');
-         setTask('');
-         setDate('');
-       } catch(error) {
-     //logic for when there is an error
-     console.log(error)
-         } 
+      const response = await fetch(Chores_Api_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: user,
+          task: task,
+          date: date,
+        }),
+      });
+      const data = await response.json();
+      //logic when the Post is successful
+      console.log(data);
+      getChores();
+      setUser("");
+      setTask("");
+      setDate("");
+    } catch (error) {
+      //logic for when there is an error
+      console.log(error);
     }
-    const deleteTask = async (e, id) => {
-      e.preventDefault()
-      try {
-          const response = await fetch(`${Chores_Api_URL}/${id}`, {
-            method: 'DELETE'
-          });
-           const data = await response.json();
-            //logic when the delete is successful
-           console.log(data);
-           getChores();
-
-         } catch(error) {
-       //logic for when there is an error
-       console.log(error)
-           } 
-      }
-      const updatedTask = async (e, id) => {
-        e.preventDefault()
-        try {
-            const response = await fetch(`${Chores_Api_URL}/${id}`, {
-             method: 'PUT',
-             headers: {
-               'Content-Type': 'application/json'
-               },
-               body: JSON.stringify({
-                name: uuser,
-                task: utask,
-                date: udate
-                })
-             });
-             const data = await response.json();
-              //logic when the Put is successful
-             console.log(data);
-             getChores();
-             setUuser('');
-             setUtask('');
-             setUdate('');
-
-           } catch(error) {
-         //logic for when there is an error
-         console.log(error)
-             } 
-        }
-
-
+  };
+  const deleteTask = async (e, id) => {
+    e.preventDefault();
+    try {
+      const response = await fetch(`${Chores_Api_URL}/${id}`, {
+        method: "DELETE",
+      });
+      const data = await response.json();
+      //logic when the delete is successful
+      console.log(data);
+      getChores();
+    } catch (error) {
+      //logic for when there is an error
+      console.log(error);
+    }
+  };
+  const updatedTask = async (e, id) => {
+    e.preventDefault();
+    try {
+      const response = await fetch(`${Chores_Api_URL}/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: uuser,
+          task: utask,
+          date: udate,
+        }),
+      });
+      const data = await response.json();
+      //logic when the Put is successful
+      console.log(data);
+      getChores();
+      setUuser("");
+      setUtask("");
+      setUdate("");
+    } catch (error) {
+      //logic for when there is an error
+      console.log(error);
+    }
+  };
 
   return (
     <Container>
@@ -139,70 +132,69 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
         <Col xs={1} md={3}></Col>
       </Row>
       <Row className="m-4 p-3">
-        <Col>
+        <Col className="m-3">
           <div className="round-corners">
-        <Atable 
-            chores={chores}
-            deleteTask={deleteTask}
-            uuser={uuser}
-            utask={utask}
-            udate={udate}
-            setUuser={setUuser}
-            setUtask={setUtask}
-            setUdate={setUdate}
-            updatedTask={updatedTask}
-        />
-        </div>
+            <Atable
+              chores={chores}
+              deleteTask={deleteTask}
+              uuser={uuser}
+              utask={utask}
+              udate={udate}
+              setUuser={setUuser}
+              setUtask={setUtask}
+              setUdate={setUdate}
+              updatedTask={updatedTask}
+            />
+          </div>
         </Col>
-      <Col >
-      <div className="round-corners">
-      <Btable 
-            chores={chores}
-            deleteTask={deleteTask}
-            uuser={uuser}
-            utask={utask}
-            udate={udate}
-            setUuser={setUuser}
-            setUtask={setUtask}
-            setUdate={setUdate}
-            updatedTask={updatedTask}
-        />
-        </div>
+        <Col className="m-3">
+          <div className="round-corners">
+            <Btable
+              chores={chores}
+              deleteTask={deleteTask}
+              uuser={uuser}
+              utask={utask}
+              udate={udate}
+              setUuser={setUuser}
+              setUtask={setUtask}
+              setUdate={setUdate}
+              updatedTask={updatedTask}
+            />
+          </div>
         </Col>
       </Row>
       <Row className="m-4 p-3">
-        <Col>
-        <div className="round-corners">
-      <Ctable 
-            chores={chores}
-            deleteTask={deleteTask}
-            uuser={uuser}
-            utask={utask}
-            udate={udate}
-            setUuser={setUuser}
-            setUtask={setUtask}
-            setUdate={setUdate}
-            updatedTask={updatedTask}
-        />
-        </div>
+        <Col className="m-3">
+          <div className="round-corners">
+            <Ctable
+              chores={chores}
+              deleteTask={deleteTask}
+              uuser={uuser}
+              utask={utask}
+              udate={udate}
+              setUuser={setUuser}
+              setUtask={setUtask}
+              setUdate={setUdate}
+              updatedTask={updatedTask}
+            />
+          </div>
         </Col>
-     <Col>
-     <div className="round-corners">
-      <Dtable 
-            chores={chores}
-            deleteTask={deleteTask}
-            uuser={uuser}
-            utask={utask}
-            udate={udate}
-            setUuser={setUuser}
-            setUtask={setUtask}
-            setUdate={setUdate}
-            updatedTask={updatedTask}
-        />
-        </div>
+        <Col className="m-3">
+          <div className="round-corners">
+            <Dtable
+              chores={chores}
+              deleteTask={deleteTask}
+              uuser={uuser}
+              utask={utask}
+              udate={udate}
+              setUuser={setUuser}
+              setUtask={setUtask}
+              setUdate={setUdate}
+              updatedTask={updatedTask}
+            />
+          </div>
         </Col>
       </Row>
-
     </Container>
   );
 }
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildA/ChildA.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildA/ChildA.jsx
@@ -3,11 +3,17 @@ import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import filterByName from '../../components/filterByName';
 import UserTableRow from '../../components/UserTableRow';
+import { Col } from 'react-bootstrap';
 
 
 export default function ChildA({chores}) {
   return (
     <Container>
+      <Row>
+        <Col className="p-3 m-4" id="form-area"><h1 id="text-header">Ayla's Tasks:</h1></Col>
+        <Col></Col>
+        <Col></Col>
+      </Row>
         <Row className='m-3 p-3'>
           <div className='round-corners'>
     <Table id="table" striped bordered hover variant="dark">

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildB/ChildB.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildB/ChildB.jsx
@@ -1,19 +1,24 @@
 import Table from 'react-bootstrap/Table';
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
-
+import { Col } from 'react-bootstrap';
 import filterByName from '../../components/filterByName';
 import UserTableRow from '../../components/UserTableRow';
 
 
 export default function ChildB({chores}) {
   return (
     <Container>
+      <Row>
+        <Col className="p-3 m-4" id="form-area"><h1 id="text-header">Braiden's Tasks:</h1></Col>
+        <Col></Col>
+        <Col></Col>
+      </Row>
         <Row className='m-3 p-3'>
     <Table striped bordered hover variant="dark">
       <thead>
         <tr>
-          <th>Ayla's Tasks</th>
+          <th>Braiden's Tasks</th>
           <th>Date Assigned:</th>
           <th>Task:</th>
           <th>Completed?:</th>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildC/ChildC.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildC/ChildC.jsx
@@ -1,19 +1,24 @@
 import Table from 'react-bootstrap/Table';
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
-
+import { Col } from 'react-bootstrap';
 import filterByName from '../../components/filterByName';
 import UserTableRow from '../../components/UserTableRow';
 
 
 export default function ChildC({chores}) {
   return (
     <Container>
+      <Row>
+        <Col className="p-3 m-4" id="form-area"><h1 id="text-header">Callan's Tasks:</h1></Col>
+        <Col></Col>
+        <Col></Col>
+      </Row>
         <Row className='m-3 p-3'>
     <Table striped bordered hover variant="dark">
       <thead>
         <tr>
-          <th>Ayla's Tasks</th>
+          <th>Callan's Tasks</th>
           <th>Date Assigned:</th>
           <th>Task:</th>
           <th>Completed?:</th>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildD/ChildD.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildD/ChildD.jsx
@@ -1,19 +1,24 @@
 import Table from 'react-bootstrap/Table';
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
-
+import { Col } from 'react-bootstrap';
 import filterByName from '../../components/filterByName';
 import UserTableRow from '../../components/UserTableRow';
 
 
 export default function ChildD({chores}) {
   return (
     <Container>
+      <Row>
+        <Col className="p-3 m-4" id="form-area"><h1 id="text-header">Delaney's Tasks:</h1></Col>
+        <Col></Col>
+        <Col></Col>
+      </Row>
         <Row className='m-3 p-3'>
     <Table striped bordered hover variant="dark">
       <thead>
         <tr>
-          <th>Ayla's Tasks</th>
+          <th>Delaney's Tasks</th>
           <th>Date Assigned:</th>
           <th>Task:</th>
           <th>Completed?:</th>