Now shows project statistics

frontend/src/Components/ProjectInfoModal.tsx

@@ -1,30 +1,48 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Button from "./Button";
 import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
 import { Link } from "react-router-dom";
+import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
 
 function ProjectInfoModal(props: {
-  isVisible: boolean;
   projectname: string;
   onClose: () => void;
   onClick: (username: string) => void;
 }): JSX.Element {
   const [users, setUsers] = useState<ProjectMember[]>([]);
+  const [times, setTimes] = useState<projectTimes>();
+  const totalTime = useRef(0);
   GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
-  if (!props.isVisible) return <></>;
+
+  GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
+
+  useEffect(() => {
+    if (times?.totalTime !== undefined) {
+      totalTime.current = times.totalTime;
+    }
+  }, [times]);
 
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[47vh] w-[40] flex flex-col">
-        <div className="pl-20 pr-20">
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
+        <div className="pl-10 pr-10">
           <h1 className="font-bold text-[32px] mb-[20px]">
-            {localStorage.getItem("projectName") ?? ""}
+            {props.projectname}
           </h1>
-          <h2 className="font-bold text-[24px] mb-[20px]">Project members:</h2>
-          <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
+          <div className="p-1 text-center">
+            <h2 className="text-[20px] font-bold">Statistics:</h2>
+          </div>
+          <div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
+            <p className="p-2">Number of members: {users.length}</p>
+            <p className="p-2">Total time reported: {totalTime.current}</p>
+          </div>
+          <div className="h-[6vh] p-7 text-center">
+            <h2 className="text-[20px] font-bold">Project members:</h2>
+          </div>
+          <div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
             <ul className="text-left font-medium space-y-2">
               <div></div>
               {users.map((user) => (
@@ -44,31 +62,36 @@ function ProjectInfoModal(props: {
               ))}
             </ul>
           </div>
-        </div>
-        <div className="space-x-16">
-          <Button
-            text={"Delete"}
-            onClick={function (): void {
-              //DELETE PROJECT
-            }}
-            type="button"
-          />
-          <Link to={"/adminProjectAddMember"}>
+          <div className="space-x-5 my-2">
             <Button
-              text={"Add Member"}
+              text={"Delete"}
               onClick={function (): void {
-                return;
+                //DELETE PROJECT
               }}
               type="button"
             />
-          </Link>
-          <Button
-            text={"Close"}
-            onClick={function (): void {
-              props.onClose();
-            }}
-            type="button"
-          />
+            <Link
+              to={{
+                pathname: "/adminProjectAddMember",
+                search: props.projectname,
+              }}
+            >
+              <Button
+                text={"Add Member"}
+                onClick={function (): void {
+                  return;
+                }}
+                type="button"
+              />
+            </Link>
+            <Button
+              text={"Close"}
+              onClick={function (): void {
+                props.onClose();
+              }}
+              type="button"
+            />
+          </div>
         </div>
       </div>
     </div>