Merge branch 'main' into SCRUM-90-course-page

Author: Imafe

.github/workflows/cloudformation.yml

@@ -0,0 +1,29 @@
+name: Deploy Frontend with new AWS Services
+
+on:
+  workflow_dispatch:
+    inputs:
+      project_name:
+        description: 'Project Name'
+        required: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up AWS CLI
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.AWS_REGION }}
+    - name: Deploy CloudFormation Stack
+      run: |
+        aws cloudformation deploy \
+          --template-file ./.github/workflows/stacks/testStackCF.yaml \
+          --stack-name ${{ github.event.inputs.project_name }}-stack \
+          --parameter-overrides ProjectName=${{ github.event.inputs.project_name }} \
+          --capabilities CAPABILITY_IAM
+    - name: Deploy frontend to S3
+      run: aws s3 sync ./dist/ ${{ secrets.S3_BUCKET }} --delete

.github/workflows/s3-deploy.yml

@@ -1,4 +1,4 @@
-name: s3-depl
+name: Auto Deployment
 
 on:
     push:
@@ -22,6 +22,11 @@ jobs:
                   aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                   aws-region: ${{ secrets.AWS_REGION }}
             - name: Build React App
-              run: npm install && npm run build
+              env:
+                  VITE_API_URL: ${{ secrets.VITE_API_URL }}
+              run: |
+                  npm install
+                  npm run build
+
             - name: Deploy app build to S3 bucket
-              run: aws s3 sync ./dist/ s3://attendunce-frontend --delete
+              run: aws s3 sync ./dist/ ${{ secrets.S3_BUCKET }} --delete

.github/workflows/s3-test-deploy.yml

@@ -1,4 +1,4 @@
-name: s3-depl-test
+name: Auto Test Deployment
 
 on:
     push:
@@ -22,6 +22,11 @@ jobs:
                   aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                   aws-region: ${{ secrets.AWS_REGION }}
             - name: Build React App
-              run: npm install && npm run build
+              env:
+                  VITE_API_URL: ${{ secrets.VITE_API_URL }}
+              run: |
+                  npm install
+                  npm run build
+
             - name: Deploy app build to S3 bucket
-              run: aws s3 sync ./dist/ s3://attendunce-frontend-test --delete
+              run: aws s3 sync ./dist/ ${{ secrets.S3_BUCKET_TEST }} --delete

.github/workflows/stacks/testStackCF.yaml

@@ -0,0 +1,11 @@
+AWSTemplateFormatVersion: '2010-09-09'
+Parameters:
+  ProjectName:
+    Type: String
+    Description: 'Name of Project'
+Resources:
+  S3Bucket:
+    Type: 'AWS::S3::Bucket'
+    Properties:
+      BucketName: !Sub '${ProjectName}-blablabla-attendunce-bucket'
+      # AccessControl: PublicRead

src/pages/course/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import RootPage from "../root";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
@@ -11,26 +11,23 @@ import { Avatar, Button, IconButton, capitalize, styled } from "@mui/material";
 import CancelIcon from "@mui/icons-material/Cancel";
 
 const Course = () => {
-    const { response, error, loading, sendRequest } = useAxiosRequest<
-        Empty,
-        FullCourse
-    >();
+    const { response, sendRequest } = useAxiosRequest<Empty, FullCourse>();
     const navigate = useNavigate();
     const { id } = useParams();
 
     const [courseData, setCourseData] = useState<FullCourse>();
 
-    const getCourseData = () => {
+    const getCourseData = useCallback(() => {
         sendRequest({
             method: "GET",
             route: `/course/get/${id}`,
             useJWT: true
         });
-    };
+    }, [id, sendRequest]);
 
     useEffect(() => {
         getCourseData();
-    }, [sendRequest]);
+    }, [getCourseData]);
 
     useEffect(() => {
         if (response) setCourseData(response);
@@ -76,13 +73,8 @@ const Course = () => {
         navigate(`/profile/${username}`);
     };
 
-    const showAttendenceStats = () => {
-        return (
-            IsStudent() &&
-            courseData?.attended != -1 &&
-            courseData?.missed != -1
-        );
-    };
+    const showAttendenceStats = () =>
+        IsStudent() && courseData?.attended != -1 && courseData?.missed != -1;
 
     const handleEnrollment = (enroll: boolean, username: string = "") => {
         let url = "course/enroll/" + id;

src/pages/courses/index.tsx

@@ -3,7 +3,7 @@ import Container from "@mui/material/Container";
 import "./courses.css"; // Import CSS file for additional styling
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { backend_delete, backend_post, useAxiosRequest } from "../../utils";
+import { backend_delete, useAxiosRequest } from "../../utils";
 import { Course, Empty } from "../../types/common";
 import { IsAdmin } from "../../utils";
 import {
@@ -22,7 +22,7 @@ type ResponseData = Course[];
 
 const Courses = () => {
     const navigate = useNavigate();
-    const { response, error, loading, sendRequest } = useAxiosRequest<
+    const { response, error, sendRequest } = useAxiosRequest<
         Empty,
         ResponseData
     >();
@@ -97,7 +97,7 @@ const Courses = () => {
         backend_delete("/course/delete/" + course_id, true).then((resp) => {
             if (resp.ok) {
                 if (course_data == undefined) return;
-                let tempCourses: Course[] = [...course_data];
+                const tempCourses: Course[] = [...course_data];
                 for (let i = 0; i < tempCourses.length; i++) {
                     if (tempCourses[i].id === course_id) {
                         tempCourses.splice(i, 1);

src/pages/create_course/index.tsx

@@ -17,19 +17,6 @@ const CreateCourse = () => {
     // const navigate = useNavigate();
     const [regStatus, setRegStatus] = useState("");
 
-    const handleResponse = (data: any) => {
-        console.log(data);
-        if (
-            !("course_name" in data) ||
-            typeof data["course_name"] !== "string"
-        ) {
-            setRegStatus("failed");
-            return;
-        } else {
-            setRegStatus("success");
-        }
-    };
-
     // TODO: Add first and last name validation
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         setRegStatus("submitting");
@@ -43,7 +30,17 @@ const CreateCourse = () => {
             })
         )
             .then((resp) => resp.json())
-            .then((data) => handleResponse(data))
+            .then((data) => {
+                if (
+                    !("course_name" in data) ||
+                    typeof data["course_name"] !== "string"
+                ) {
+                    setRegStatus("failed");
+                    return;
+                } else {
+                    setRegStatus("success");
+                }
+            })
             .catch((error) => console.log(error));
     };
 

src/pages/create_lecture/index.tsx

@@ -43,6 +43,7 @@ const CreateLecture = () => {
                 lecture_series: data.get("lecture_series") == "on"
             })
         )
+
             .then((resp) => {
                 if (resp.ok) {
                     setRegStatus("success");

src/pages/create_user/index.tsx

@@ -74,19 +74,6 @@ const CreateUser = () => {
         });
     };
 
-    const handleTokenResponse = (data: any) => {
-        console.log(data);
-        if (!("username" in data) || typeof data["username"] !== "string") {
-            setRegStatus("failed");
-            return;
-        } else {
-            setRegStatus("success");
-        }
-        // event.currentTarget.reset()
-        // navigate(0);
-        // navigate("/home", { replace: true });
-    };
-
     // TODO: Add first and last name validation
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         setRegStatus("submitting");
@@ -116,7 +103,17 @@ const CreateUser = () => {
             })
         )
             .then((resp) => resp.json())
-            .then((data) => handleTokenResponse(data))
+            .then((data) => {
+                if (
+                    !("username" in data) ||
+                    typeof data["username"] !== "string"
+                ) {
+                    setRegStatus("failed");
+                    return;
+                } else {
+                    setRegStatus("success");
+                }
+            })
             .catch((error) => console.log(error));
     };
 

src/pages/login/index.tsx

@@ -127,7 +127,10 @@ const SignIn = () => {
                         </Button>
                         <Grid container>
                             <Grid item xs>
-                                <Link href="#" variant="body2">
+                                <Link
+                                    href="/reset_password_request"
+                                    variant="body2"
+                                >
                                     Forgot password?
                                 </Link>
                             </Grid>

src/pages/people/index.tsx

@@ -1,12 +1,11 @@
 import RootPage from "../root";
 import Container from "@mui/material/Container";
 import "./people.css"; // Import CSS file for additional styling
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
     deleteAuthCookies,
     backend_get,
     IsAdmin,
-    json_request,
     backend_delete
 } from "../../utils";
 import { useNavigate } from "react-router-dom";
@@ -27,7 +26,7 @@ const People = () => {
         return resp.json();
     };
 
-    const fetchUsers = async () => {
+    const fetchUsers = useCallback(async () => {
         try {
             const students_query = await getUserRole("student");
             const teachers_query = await getUserRole("teacher");
@@ -54,11 +53,11 @@ const People = () => {
             console.error("Error fetching profile:", error);
             // Show error on frontend
         }
-    };
+    }, [navigate]);
 
     useEffect(() => {
         fetchUsers();
-    }, [navigate]);
+    }, [fetchUsers, navigate]);
 
     const StyledTable = styled("table")({
         borderCollapse: "collapse",
@@ -106,7 +105,7 @@ const People = () => {
         backend_delete("/user/delete/" + username, true).then((resp) => {
             if (resp.ok) {
                 if (allUsers == undefined) return;
-                let tempUsers: User[] = [...allUsers];
+                const tempUsers: User[] = [...allUsers];
                 for (let i = 0; i < tempUsers.length; i++) {
                     if (tempUsers[i].username === username) {
                         tempUsers.splice(i, 1);

src/pages/profile/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import RootPage from "../root";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
@@ -24,7 +24,7 @@ const Profile = () => {
         avatarUrl: ""
     });
 
-    const getProfileData = async () => {
+    const getProfileData = useCallback(async () => {
         let username = "";
         if (id != undefined) username = id;
         else {
@@ -37,7 +37,7 @@ const Profile = () => {
         }
         const resp = await backend_get("user/get/" + username, true);
         return resp.json();
-    };
+    }, [id]);
 
     // const [loggedInUsername, setLoggedInUsername] = useState("");
     //store image inside a storage solution (S3 bucket)!
@@ -66,7 +66,7 @@ const Profile = () => {
         };
 
         fetchUserProfile();
-    }, [navigate]);
+    }, [getProfileData, navigate]);
 
     return (
         <RootPage>