Fix initial state values and handle empty input values in NewWeeklyReport component

This commit is contained in:
Davenludd 2024-03-20 21:53:27 +01:00
parent b9b17bf229
commit 900797facc

View file

@ -12,12 +12,12 @@ import Button from "./Button";
*/ */
export default function NewWeeklyReport(): JSX.Element { export default function NewWeeklyReport(): JSX.Element {
const [week, setWeek] = useState<number>(0); const [week, setWeek] = useState<number>(0);
const [developmentTime, setDevelopmentTime] = useState<number>(); const [developmentTime, setDevelopmentTime] = useState<number>(0);
const [meetingTime, setMeetingTime] = useState<number>(); const [meetingTime, setMeetingTime] = useState<number>(0);
const [adminTime, setAdminTime] = useState<number>(); const [adminTime, setAdminTime] = useState<number>(0);
const [ownWorkTime, setOwnWorkTime] = useState<number>(); const [ownWorkTime, setOwnWorkTime] = useState<number>(0);
const [studyTime, setStudyTime] = useState<number>(); const [studyTime, setStudyTime] = useState<number>(0);
const [testingTime, setTestingTime] = useState<number>(); const [testingTime, setTestingTime] = useState<number>(0);
const { projectName } = useParams(); const { projectName } = useParams();
const token = localStorage.getItem("accessToken") ?? ""; const token = localStorage.getItem("accessToken") ?? "";
@ -26,12 +26,12 @@ export default function NewWeeklyReport(): JSX.Element {
const newWeeklyReport: NewWeeklyReport = { const newWeeklyReport: NewWeeklyReport = {
projectName: projectName ?? "", projectName: projectName ?? "",
week: week, week: week,
developmentTime: developmentTime ?? 0, developmentTime: developmentTime,
meetingTime: meetingTime ?? 0, meetingTime: meetingTime,
adminTime: adminTime ?? 0, adminTime: adminTime,
ownWorkTime: ownWorkTime ?? 0, ownWorkTime: ownWorkTime,
studyTime: studyTime ?? 0, studyTime: studyTime,
testingTime: testingTime ?? 0, testingTime: testingTime,
}; };
await api.submitWeeklyReport(newWeeklyReport, token); await api.submitWeeklyReport(newWeeklyReport, token);
@ -112,9 +112,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number" type="number"
min="0" min="0"
className="border-2 border-black rounded-md text-center w-1/2" className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime} value={developmentTime === 0 ? "" : developmentTime}
onChange={(e) => { onChange={(e) => {
setDevelopmentTime(parseInt(e.target.value)); if (e.target.value === "") {
setDevelopmentTime(0);
return;
} else {
setDevelopmentTime(parseInt(e.target.value));
}
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
const keyValue = event.key; const keyValue = event.key;
@ -131,9 +136,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number" type="number"
min="0" min="0"
className="border-2 border-black rounded-md text-center w-1/2" className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime} value={meetingTime === 0 ? "" : meetingTime}
onChange={(e) => { onChange={(e) => {
setMeetingTime(parseInt(e.target.value)); if (e.target.value === "") {
setMeetingTime(0);
return;
} else {
setMeetingTime(parseInt(e.target.value));
}
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
const keyValue = event.key; const keyValue = event.key;
@ -150,9 +160,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number" type="number"
min="0" min="0"
className="border-2 border-black rounded-md text-center w-1/2" className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime} value={adminTime === 0 ? "" : adminTime}
onChange={(e) => { onChange={(e) => {
setAdminTime(parseInt(e.target.value)); if (e.target.value === "") {
setAdminTime(0);
return;
} else {
setAdminTime(parseInt(e.target.value));
}
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
const keyValue = event.key; const keyValue = event.key;
@ -169,9 +184,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number" type="number"
min="0" min="0"
className="border-2 border-black rounded-md text-center w-1/2" className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime} value={ownWorkTime === 0 ? "" : ownWorkTime}
onChange={(e) => { onChange={(e) => {
setOwnWorkTime(parseInt(e.target.value)); if (e.target.value === "") {
setOwnWorkTime(0);
return;
} else {
setOwnWorkTime(parseInt(e.target.value));
}
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
const keyValue = event.key; const keyValue = event.key;
@ -188,9 +208,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number" type="number"
min="0" min="0"
className="border-2 border-black rounded-md text-center w-1/2" className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime} value={studyTime === 0 ? "" : studyTime}
onChange={(e) => { onChange={(e) => {
setStudyTime(parseInt(e.target.value)); if (e.target.value === "") {
setStudyTime(0);
return;
} else {
setStudyTime(parseInt(e.target.value));
}
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
const keyValue = event.key; const keyValue = event.key;
@ -207,9 +232,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number" type="number"
min="0" min="0"
className="border-2 border-black rounded-md text-center w-1/2" className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime} value={testingTime === 0 ? "" : testingTime}
onChange={(e) => { onChange={(e) => {
setTestingTime(parseInt(e.target.value)); if (e.target.value === "") {
setTestingTime(0);
return;
} else {
setTestingTime(parseInt(e.target.value));
}
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
const keyValue = event.key; const keyValue = event.key;