From 9f61a36a68833757f3c32aa123f6637180d0e4a5 Mon Sep 17 00:00:00 2001 From: Johanna Date: Wed, 20 Mar 2024 20:36:34 +0100 Subject: [PATCH] Added comments to TypeScript API, merge --- frontend/src/API/API.ts | 143 ++++++++++++++++-- frontend/src/Components/AddProject.tsx | 6 +- .../Components/AllTimeReportsInProject.tsx | 72 +++++++++ 3 files changed, 202 insertions(+), 19 deletions(-) create mode 100644 frontend/src/Components/AllTimeReportsInProject.tsx diff --git a/frontend/src/API/API.ts b/frontend/src/API/API.ts index 8fd66d3..8778129 100644 --- a/frontend/src/API/API.ts +++ b/frontend/src/API/API.ts @@ -4,50 +4,135 @@ import { User, Project, NewProject, + WeeklyReport, } from "../Types/goTypes"; -// This type of pattern should be hard to misuse +/** + * Response object returned by API methods. + */ export interface APIResponse { + /** Indicates whether the API call was successful */ success: boolean; + /** Optional message providing additional information or error description */ message?: string; + /** Optional data returned by the API method */ data?: T; } -// Note that all protected routes also require a token -// Defines all the methods that an instance of the API must implement +/** + * Interface defining methods that an instance of the API must implement. + */ interface API { - /** Register a new user */ + /** + * Register a new user + * @param {NewUser} user The user object to be registered + * @returns {Promise>} A promise containing the API response with the user data. + */ registerUser(user: NewUser): Promise>; - /** Remove a user */ + + /** + * Removes a user. + * @param {string} username The username of the user to be removed. + * @param {string} token The authentication token. + * @returns {Promise>} A promise containing the API response with the removed user data. + */ removeUser(username: string, token: string): Promise>; - /** Login */ + + /** + * Check if user is project manager. + * @param {string} username The username of the user. + * @param {string} projectName The name of the project. + * @param {string} token The authentication token. + * @returns {Promise>} A promise containing the API response indicating if the user is a project manager. + */ + checkIfProjectManager( + username: string, + projectName: string, + token: string, + ): Promise>; + + /** Logs in a user with the provided credentials. + * @param {NewUser} NewUser The user object containing username and password. + * @returns {Promise>} A promise resolving to an API response with a token. + */ login(NewUser: NewUser): Promise>; - /** Renew the token */ + + /** + * Renew the token + * @param {string} token The current authentication token. + * @returns {Promise>} A promise resolving to an API response with a renewed token. + */ renewToken(token: string): Promise>; - /** Create a project */ + + /** Promote user to admin */ + + /** Creates a new project. + * @param {NewProject} project The project object containing name and description. + * @param {string} token The authentication token. + * @returns {Promise>} A promise resolving to an API response with the created project. + */ createProject( project: NewProject, token: string, ): Promise>; - /** Submit a weekly report */ + + /** Submits a weekly report + * @param {NewWeeklyReport} weeklyReport The weekly report object. + * @param {string} token The authentication token. + * @returns {Promise>} A promise resolving to an API response with the submitted report. + */ submitWeeklyReport( - project: NewWeeklyReport, + weeklyReport: NewWeeklyReport, token: string, ): Promise>; - /**Gets a weekly report*/ + + /** Gets a weekly report for a specific user, project and week + * @param {string} username The username of the user. + * @param {string} projectName The name of the project. + * @param {string} week The week number. + * @param {string} token The authentication token. + * @returns {Promise>} A promise resolving to an API response with the retrieved report. + */ getWeeklyReport( username: string, projectName: string, week: string, token: string, - ): Promise>; - /** Gets all the projects of a user*/ + ): Promise>; + + /** + * Returns all the weekly reports for a user in a particular project + * The username is derived from the token + * @param {string} projectName The name of the project + * @param {string} token The token of the user + * @returns {APIResponse} A list of weekly reports + */ + getWeeklyReportsForUser( + username: string, + projectName: string, + token: string, + ): Promise>; + + /** Gets all the projects of a user + * @param {string} token - The authentication token. + * @returns {Promise>} A promise containing the API response with the user's projects. + */ getUserProjects(token: string): Promise>; - /** Gets a project from id*/ + + /** Gets a project by its id. + * @param {number} id The id of the project to retrieve. + * @returns {Promise>} A promise resolving to an API response containing the project data. + */ getProject(id: number): Promise>; + + /** Gets a list of all users. + * @param {string} token The authentication token of the requesting user. + * @returns {Promise>} A promise resolving to an API response containing the list of users. + */ + getAllUsers(token: string): Promise>; } -// Export an instance of the API +/** An instance of the API */ export const api: API = { async registerUser(user: NewUser): Promise> { try { @@ -253,7 +338,6 @@ export const api: API = { } }, - // Gets a projet by id, currently untested since we have no javascript-based tests async getProject(id: number): Promise> { try { const response = await fetch(`/api/project/${id}`, { @@ -278,4 +362,31 @@ export const api: API = { }; } }, + + async getAllUsers(token: string): Promise> { + try { + const response = await fetch("/api/users/all", { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer " + token, + }, + }); + + if (!response.ok) { + return Promise.resolve({ + success: false, + message: "Failed to get users", + }); + } else { + const data = (await response.json()) as string[]; + return Promise.resolve({ success: true, data }); + } + } catch (e) { + return Promise.resolve({ + success: false, + message: "API is not ok", + }); + } + }, }; diff --git a/frontend/src/Components/AddProject.tsx b/frontend/src/Components/AddProject.tsx index 45814e3..f5f4a08 100644 --- a/frontend/src/Components/AddProject.tsx +++ b/frontend/src/Components/AddProject.tsx @@ -7,7 +7,7 @@ import Button from "./Button"; /** * Tries to add a project to the system - * @param props - Project name and description + * @param {Object} props - Project name and description * @returns {boolean} True if created, false if not */ function CreateProject(props: { name: string; description: string }): boolean { @@ -34,8 +34,8 @@ function CreateProject(props: { name: string; description: string }): boolean { } /** - * Tries to add a project to the system - * @returns {JSX.Element} UI for project adding + * Provides UI for adding a project to the system. + * @returns {JSX.Element} - Returns the component UI for adding a project */ function AddProject(): JSX.Element { const [name, setName] = useState(""); diff --git a/frontend/src/Components/AllTimeReportsInProject.tsx b/frontend/src/Components/AllTimeReportsInProject.tsx new file mode 100644 index 0000000..ab99e04 --- /dev/null +++ b/frontend/src/Components/AllTimeReportsInProject.tsx @@ -0,0 +1,72 @@ +//Info: This component is used to display all the time reports for a project. It will display the week number, +//total time spent, and if the report has been signed or not. The user can click on a report to edit it. +import { useEffect, useState } from "react"; +import { WeeklyReport } from "../Types/goTypes"; +import { Link, useParams } from "react-router-dom"; +import { api } from "../API/API"; + +/** + * Renders a component that displays all the time reports for a specific project. + * @returns {JSX.Element} representing the component. + */ +function AllTimeReportsInProject(): JSX.Element { + const { projectName } = useParams(); + const [weeklyReports, setWeeklyReports] = useState([]); + + const getWeeklyReports = async (): Promise => { + const token = localStorage.getItem("accessToken") ?? ""; + const response = await api.getWeeklyReportsForProject( + localStorage.getItem("username") ?? "", + projectName ?? "", + token, + ); + console.log(response); + if (response.success) { + setWeeklyReports(response.data ?? []); + } else { + console.error(response.message); + } + }; + + // Call getProjects when the component mounts + useEffect(() => { + void getWeeklyReports(); + }); + + return ( + <> +
+ {weeklyReports.map((newWeeklyReport, index) => ( + +
+

+ {"Week: "} + {newWeeklyReport.week} +

+

+ {"Total Time: "} + {newWeeklyReport.developmentTime + + newWeeklyReport.meetingTime + + newWeeklyReport.adminTime + + newWeeklyReport.ownWorkTime + + newWeeklyReport.studyTime + + newWeeklyReport.testingTime}{" "} + min +

+

+ {"Signed: "} + {newWeeklyReport.signedBy ? "YES" : "NO"} +

+
+ + ))} +
+ + ); +} + +export default AllTimeReportsInProject;