assignment-dev-08-FE-refactor

springAssignmentSystem/doc/progress.txt

@@ -99,4 +99,8 @@
 
 - 20231011
 		- https://youtu.be/SOyfQCsOvO4?si=HsjKAdQBiflZHORp
-		- https://youtu.be/d_YH4TnLuhk?si=BmgFG1gWJvDLp5kO
+		- https://youtu.be/d_YH4TnLuhk?si=BmgFG1gWJvDLp5kO
+
+- 20231012
+		- https://youtu.be/d_YH4TnLuhk?si=BmgFG1gWJvDLp5kO
+			- progress : 16:22

springAssignmentSystem/frontend/frontend_app/src/AssignmentView/index.js

@@ -1,16 +1,15 @@
-import React, { useEffect, useInsertionEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useLocalState } from "../util/useLocalStorage";
 import ajax from "../Services/fetchService";
 import { Link } from "react-router-dom";
-import { Badge, Button, Container } from "react-bootstrap";
-
+import { Button, Container } from "react-bootstrap";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
-
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
 import DropdownButton from "react-bootstrap/DropdownButton";
+import StatusBadge from "../StatusBadge";
 
 const AssignmentView = () => {
   const assignmentId = window.location.href.split("/assignments/")[1];
@@ -31,7 +30,7 @@ const AssignmentView = () => {
   // https://youtu.be/2XRQzR4y2yM?si=p8QcytO5aBC6ufBj&t=459
   // setup current status
   const previousAssignmentValue = useRef(assignment);
-  
+
   // https://youtu.be/zQiKOu8iGco?si=w4oK-Ap9YBPTTEWl&t=2007
   function updateAssignment(prop, value) {
     //assignment[prop] = value;
@@ -43,7 +42,6 @@ const AssignmentView = () => {
 
   function saveAssignment() {
     // call BE API save assignment
-
     // https://youtu.be/2XRQzR4y2yM?si=aiNeLhS3SXsU18HE&t=833
     // means when submit an assignment at the first time
     if (assignment.status === assignmentStatuses[0].status) {
@@ -101,11 +99,9 @@ const AssignmentView = () => {
       // https://youtu.be/K-ywr1I1mr0?si=nFWaN1mbJ8cKub_r&t=845
       .then((assignmentsResponse) => {
         let assignmentsData = assignmentsResponse.assignment;
-
-        console.log("BE response assignmentsData = " + assignmentsData);
-        console.log("BE response branch = " + assignmentsData.branch);
-        console.log("BE response githubUrl = " + assignmentsData.githubUrl);
-
+        // console.log("BE response assignmentsData = " + assignmentsData);
+        // console.log("BE response branch = " + assignmentsData.branch);
+        // console.log("BE response githubUrl = " + assignmentsData.githubUrl);
         if (assignmentsData.branch === null) {
           assignmentsData.branch = "";
         }
@@ -138,9 +134,9 @@ const AssignmentView = () => {
           )}
         </Col>
         <Col>
-          <Badge pill bg="info" style={{ fontSize: "1.3em" }}>
-            {assignment.status}
-          </Badge>
+          <div className="d-flex align-items-start">
+            <StatusBadge text={assignment.status} />
+          </div>
         </Col>
       </Row>
       <p></p>
@@ -184,14 +180,6 @@ const AssignmentView = () => {
                     {assignmentEnum.assignmentNum}
                   </Dropdown.Item>
                 ))}
-
-                {/* <Dropdown.Item eventKey="1">Action</Dropdown.Item>
-                <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
-                <Dropdown.Item eventKey="3" active>
-                  Active Item
-                </Dropdown.Item> */}
-                {/* <Dropdown.Divider />
-                <Dropdown.Item eventKey="4">Separated link</Dropdown.Item> */}
               </DropdownButton>
             </Col>
           </Form.Group>

springAssignmentSystem/frontend/frontend_app/src/CodeReviewAssignmentView/index.js

@@ -3,17 +3,15 @@ import { useLocalState } from "../util/useLocalStorage";
 import ajax from "../Services/fetchService";
 import { Link, json } from "react-router-dom";
 import { Badge, Button, Container } from "react-bootstrap";
-
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
-
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import Dropdown from "react-bootstrap/Dropdown";
-import DropdownButton from "react-bootstrap/DropdownButton";
-import userEvent from "@testing-library/user-event";
+import { useNavigate } from "react-router-dom";
+import StatusBadge from "../StatusBadge";
 
 const CodeReviewerAssignmentView = () => {
+  const navigate = useNavigate();
+
   console.log(
     ">>> (CodeReviewerAssignmentView) window.location.href = " +
       window.location.href
@@ -51,7 +49,6 @@ const CodeReviewerAssignmentView = () => {
 
     // https://youtu.be/2XRQzR4y2yM?si=aiNeLhS3SXsU18HE&t=833
     // means when submit an assignment at the first time
-
     // https://youtu.be/SOyfQCsOvO4?si=Eu1z9CWZO0c-e3Zq&t=816
 
     console.log(
@@ -103,9 +100,9 @@ const CodeReviewerAssignmentView = () => {
       .then((assignmentsResponse) => {
         let assignmentsData = assignmentsResponse.assignment;
 
-        console.log("BE response assignmentsData = " + assignmentsData);
-        console.log("BE response branch = " + assignmentsData.branch);
-        console.log("BE response githubUrl = " + assignmentsData.githubUrl);
+        // console.log("BE response assignmentsData = " + assignmentsData);
+        // console.log("BE response branch = " + assignmentsData.branch);
+        // console.log("BE response githubUrl = " + assignmentsData.githubUrl);
 
         if (assignmentsData.branch === null) {
           assignmentsData.branch = "";
@@ -139,9 +136,12 @@ const CodeReviewerAssignmentView = () => {
           )}
         </Col>
         <Col>
-          <Badge pill bg="info" style={{ fontSize: "1.3em" }}>
+          {/* <Badge pill bg="info" style={{ fontSize: "1.3em" }}>
             {assignment.status}
-          </Badge>
+          </Badge> */}
+          <div className="d-flex align-items-start">
+            <StatusBadge text={assignment.status} />
+          </div>
         </Col>
       </Row>
       <p></p>
@@ -206,7 +206,10 @@ const CodeReviewerAssignmentView = () => {
 
           <Button
             variant="secondary"
-            onClick={() => (window.location.href = "/dashboard")}
+            onClick={() =>
+              //window.location.href = "/dashboard"
+              navigate("/dashboard")
+            }
           >
             Back
           </Button>

springAssignmentSystem/frontend/frontend_app/src/CodeReviewerDashBoard/index.js

@@ -5,7 +5,6 @@ import React, { useEffect, useState } from "react";
 import { useLocalState } from "../util/useLocalStorage";
 import { Link } from "react-router-dom";
 import ajax from "../Services/fetchService";
-// import Card from "react-bootstrap/Card";
 import { Button, Card, Col, Row, Badge, Container } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import StatusBadge from "../StatusBadge";
@@ -18,7 +17,8 @@ const CodeReviewerDashboard = () => {
   // https://youtu.be/SOyfQCsOvO4?si=7WyTqRP2AlsyPAkx&t=207
   function editReview(assignment) {
     console.log(">>> (editReview) assignment = " + JSON.stringify(assignment));
-    window.location.href = `/code_review/${assignment.id}`;
+    //window.location.href = `/code_review/${assignment.id}`;
+    navigate(`/code_review/${assignment.id}`);
   }
 
   // https://youtu.be/utXVb3R1yuE?si=4Hv8qBS_gQ8mJVfF&t=408
@@ -59,7 +59,8 @@ const CodeReviewerDashboard = () => {
     ajax("/api/assignments/", "POST", getJwt).then((assignment) => {
       console.log("BE response = " + assignment);
       // redirect to new assignment URL
-      window.location.href = `/assignments/${assignment.id}`;
+      //window.location.href = `/assignments/${assignment.id}`;
+      navigate(`/assignments/${assignment.id}`);
     });
   }
 
@@ -74,7 +75,8 @@ const CodeReviewerDashboard = () => {
             style={{ cursor: "pointer" }}
             onClick={() => {
               setJwt(null);
-              window.location.href = "/login";
+              //window.location.href = "/login";
+              navigate("/login");
             }}
           >
             Logout

springAssignmentSystem/frontend/frontend_app/src/Dashboard/index.js

@@ -5,7 +5,6 @@ import React, { useEffect, useState } from "react";
 import { useLocalState } from "../util/useLocalStorage";
 import { Link } from "react-router-dom";
 import ajax from "../Services/fetchService";
-// import Card from "react-bootstrap/Card";
 import { Button, Card, Col, Row, Badge } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import StatusBadge from "../StatusBadge";
@@ -40,24 +39,11 @@ const Dashboard = () => {
     console.log("createAssignment ...");
     // V2
     ajax("/api/assignments/", "POST", getJwt)
-      // V1
-      // fetch("/api/assignments/", {
-      //   headers: {
-      //     "Content-type": "application/json",
-      //     Authentication: `Bearer ${getJwt}`,
-      //   },
-      //   method: "POST",
-      //   body: JSON.stringify({ user: "admin-user" }),
-      // })
-      // .then((response) => {
-      //   if (response.status === 200) {
-      //     return response.json();
-      //   }
-      // })
       .then((assignment) => {
         console.log("BE response = " + assignment);
         // redirect to new assignment URL
-        window.location.href = `/assignments/${assignment.id}`;
+        //window.location.href = `/assignments/${assignment.id}`;
+        navigate(`/assignments/${assignment.id}`);
       });
   }
 
@@ -76,7 +62,8 @@ const Dashboard = () => {
             style={{ cursor: "pointer" }}
             onClick={() => {
               setJwt(null);
-              window.location.href = "/login";
+              //window.location.href = "/login";
+              navigate("/login");
             }}
           >
             Logout

springAssignmentSystem/frontend/frontend_app/src/Login/index.js

@@ -1,21 +1,20 @@
 import React, { useState } from "react";
 import { useLocalState } from "../util/useLocalStorage";
 import { Container, Row, Col, Button, Form } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
 
 // https://youtu.be/YYDpGYOjfqM?si=KndWtVvDf0dtxBBS&t=161
 // https://youtu.be/6qJ8JXWC9IA?si=Dv8hRVq4jVtHc34j&t=118
 
 const Login = () => {
+  const navigate = useNavigate();
   // binding value with useState (init with null), so once val is updated, React will automatically update element as well
   // https://youtu.be/6qJ8JXWC9IA?si=Az2koaES1S5aCnVN&t=460
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-
   const [getJwt, setJwt] = useLocalState("", "jwt"); // getter, setter
 
-  console.log(">>> username = " + username);
-  console.log(">>> password = " + password);
-
+  console.log(">>> username = " + username + " password = " + password);
   function sendLoginRequest() {
     console.log(">>> sendLoginRequest start");
 
@@ -42,15 +41,11 @@ const Login = () => {
         }
       })
       .then(([body, headers]) => {
-        // headers.forEach((element) => {
-        //   console.log(element);
-        // });
-
         // jwt : json web token
         //const jwt = headers.get("authorization")
         setJwt(headers.get("authorization"));
-        window.location.href = "dashboard"; // redirect to dashboard
-        //console.log(jwt)
+        //window.location.href = "dashboard"; // redirect to dashboard
+        navigate("dashboard");
         console.log(getJwt);
         console.log(body);
       })

springAssignmentSystem/frontend/frontend_app/src/Services/fetchService.js

@@ -1,5 +1,3 @@
-//import { useLocalState } from "../util/useLocalStorage";
-
 // https://youtu.be/w6YUDqKiT8I?si=fzulkygkBkmQOTDh&t=863
 
 function ajax(url, requestMethod, jwt, requestBody) {

springAssignmentSystem/frontend/frontend_app/src/StatusBadge/index.js

@@ -3,7 +3,7 @@ import { Badge } from "react-bootstrap";
 
 // https://github.com/tp02ga/AssignmentSubmissionApp/blob/master/front-end/src/StatusBadge/index.js
 // https://youtu.be/MGtkDvpD6rs?si=8fiI7fI_uO9vqr3b&t=729
-
+// https://youtu.be/d_YH4TnLuhk?si=T5FeTjUEDWkkJkKl&t=431
 const StatusBadge = (props) => {
   const { text } = props;
   function getColorOfBadge() {