TTime/frontend/src/Components/NewWeeklyReport.tsx

//info: New weekly report form component to create a new weekly report to
//sumbit development time, meeting time, admin time, own work time, study time and testing time
import { useState } from "react";
import type { NewWeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useNavigate, useParams } from "react-router-dom";
import Button from "./Button";

/**
 * Renders a form for creating a new weekly report.
 * @returns The JSX element representing the new weekly report form.
 */
export default function NewWeeklyReport(): JSX.Element {
  const [week, setWeek] = useState<number>(0);
  const [developmentTime, setDevelopmentTime] = useState<number>(0);
  const [meetingTime, setMeetingTime] = useState<number>(0);
  const [adminTime, setAdminTime] = useState<number>(0);
  const [ownWorkTime, setOwnWorkTime] = useState<number>(0);
  const [studyTime, setStudyTime] = useState<number>(0);
  const [testingTime, setTestingTime] = useState<number>(0);

  const { projectName } = useParams();
  const token = localStorage.getItem("accessToken") ?? "";

  const handleNewWeeklyReport = async (): Promise<boolean> => {
    const newWeeklyReport: NewWeeklyReport = {
      projectName: projectName ?? "",
      week: week,
      developmentTime: developmentTime,
      meetingTime: meetingTime,
      adminTime: adminTime,
      ownWorkTime: ownWorkTime,
      studyTime: studyTime,
      testingTime: testingTime,
    };

    const response = await api.submitWeeklyReport(newWeeklyReport, token);
    console.log(response);
    if (response.success) {
      return true;
    } else {
      return false;
    }
  };

  const navigate = useNavigate();
  // Check if the browser is Chrome or Edge
  const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent);

  return (
    <>
      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            void (async (): Promise<void> => {
              if (week === 0 || week > 53 || week < 1) {
                alert("Please enter a valid week number");
                return;
              }

              const success = await handleNewWeeklyReport();
              if (!success) {
                alert(
                  "Error occurred! Your connection to the server might be lost or a time report for this week already exists, please check your connection or go to the edit page to edit your report or change week number.",
                );
                return;
              }
              alert("Weekly report submitted successfully");
              navigate(-1);
            })();
          }}
        >
          <div className="flex flex-col items-center">
            {isChromeOrEdge ? (
              <input
                className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
                type="week"
                placeholder="Week"
                onChange={(e) => {
                  const weekNumber = parseInt(e.target.value.split("-W")[1]);
                  setWeek(weekNumber);
                }}
                onKeyDown={(event) => {
                  const keyValue = event.key;
                  if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                    event.preventDefault();
                }}
                onPaste={(event) => {
                  event.preventDefault();
                }}
              />
            ) : (
              <input
                className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
                type="text"
                placeholder="Week (Numbers Only)"
                onChange={(e) => {
                  const weekNumber = parseInt(e.target.value);
                  setWeek(weekNumber);
                }}
                onKeyDown={(event) => {
                  const keyValue = event.key;
                  if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                    event.preventDefault();
                }}
                onPaste={(event) => {
                  event.preventDefault();
                }}
              />
            )}
            <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
              <thead>
                <tr>
                  <th className="w-1/2 py-2 border-b-2 border-black">
                    Activity
                  </th>
                  <th className="w-1/2 py-2 border-b-2 border-black">
                    Total Time (min)
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-black">
                <tr className="h-[10vh]">
                  <td>Development</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={developmentTime === 0 ? "" : developmentTime}
                      onChange={(e) => {
                        if (e.target.value === "") {
                          setDevelopmentTime(0);
                          return;
                        } else {
                          setDevelopmentTime(parseInt(e.target.value));
                        }
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (
                          !/\d/.test(keyValue) &&
                          keyValue !== "Backspace" &&
                          keyValue !== "ArrowLeft" &&
                          keyValue !== "ArrowRight"
                        )
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Meeting</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={meetingTime === 0 ? "" : meetingTime}
                      onChange={(e) => {
                        if (e.target.value === "") {
                          setMeetingTime(0);
                          return;
                        } else {
                          setMeetingTime(parseInt(e.target.value));
                        }
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (
                          !/\d/.test(keyValue) &&
                          keyValue !== "Backspace" &&
                          keyValue !== "ArrowLeft" &&
                          keyValue !== "ArrowRight"
                        )
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Administration</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={adminTime === 0 ? "" : adminTime}
                      onChange={(e) => {
                        if (e.target.value === "") {
                          setAdminTime(0);
                          return;
                        } else {
                          setAdminTime(parseInt(e.target.value));
                        }
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (
                          !/\d/.test(keyValue) &&
                          keyValue !== "Backspace" &&
                          keyValue !== "ArrowLeft" &&
                          keyValue !== "ArrowRight"
                        )
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Own Work</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={ownWorkTime === 0 ? "" : ownWorkTime}
                      onChange={(e) => {
                        if (e.target.value === "") {
                          setOwnWorkTime(0);
                          return;
                        } else {
                          setOwnWorkTime(parseInt(e.target.value));
                        }
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (
                          !/\d/.test(keyValue) &&
                          keyValue !== "Backspace" &&
                          keyValue !== "ArrowLeft" &&
                          keyValue !== "ArrowRight"
                        )
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Studies</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={studyTime === 0 ? "" : studyTime}
                      onChange={(e) => {
                        if (e.target.value === "") {
                          setStudyTime(0);
                          return;
                        } else {
                          setStudyTime(parseInt(e.target.value));
                        }
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (
                          !/\d/.test(keyValue) &&
                          keyValue !== "Backspace" &&
                          keyValue !== "ArrowLeft" &&
                          keyValue !== "ArrowRight"
                        )
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Testing</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={testingTime === 0 ? "" : testingTime}
                      onChange={(e) => {
                        if (e.target.value === "") {
                          setTestingTime(0);
                          return;
                        } else {
                          setTestingTime(parseInt(e.target.value));
                        }
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (
                          !/\d/.test(keyValue) &&
                          keyValue !== "Backspace" &&
                          keyValue !== "ArrowLeft" &&
                          keyValue !== "ArrowRight"
                        )
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
              </tbody>
            </table>
            <Button
              text="Submit"
              onClick={(): void => {
                return;
              }}
              type="submit"
            />
          </div>
        </form>
      </div>
    </>
  );
}