diff --git a/src/main/components/App.tsx b/src/main/components/App.tsx index 6811cae..96b4788 100644 --- a/src/main/components/App.tsx +++ b/src/main/components/App.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { useTableContext } from "../views/TableView"; import Table from "./Table"; import TopBar from "./TopBar"; -import { format, addDays, startOfWeek, subDays, getDay } from "date-fns"; +import { format, addDays, subDays } from "date-fns"; export interface Project { id: number; @@ -24,11 +24,8 @@ export interface TaskStatus { color: string; } -const getWeekDates = (date: Date) => { - const dayOfWeek = getDay(date); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday - const adjustedDate = dayOfWeek === 0 ? addDays(date, 1) : date; - const startDate = startOfWeek(adjustedDate, { weekStartsOn: 1 }); - const dates = Array.from({ length: 7 }, (_, i) => { +const getWeekDates = (startDate: Date) => { + const dates = Array.from({ length: 5 }, (_, i) => { return format(addDays(startDate, i), "yyyy-MM-dd"); }); return dates; @@ -63,14 +60,14 @@ const App: React.FC = () => { const incrementDates = () => { setDates((prevDates) => { - const newDates = getWeekDates(addDays(new Date(prevDates[0]), 8)); + const newDates = getWeekDates(addDays(new Date(prevDates[0]), 2)); return newDates; }); }; const decrementDates = () => { setDates((prevDates) => { - const newDates = getWeekDates(subDays(new Date(prevDates[0]), 6)); + const newDates = getWeekDates(subDays(new Date(prevDates[0]), 0)); return newDates; }); }; diff --git a/src/main/components/Table.tsx b/src/main/components/Table.tsx index 0b70528..ce23c04 100644 --- a/src/main/components/Table.tsx +++ b/src/main/components/Table.tsx @@ -1,4 +1,4 @@ -import { format } from "date-fns"; +import { format, parseISO } from "date-fns"; import { useEffect, useRef } from "react"; import * as React from "react"; import { Project, TaskStatus } from "./App"; @@ -34,7 +34,7 @@ const Table: React.FC = ({ nextTaskId, handleTaskNameChange, taskStatuses, - editTaskStatus + editTaskStatus, }) => { const containerRef = useRef(null); const newProjectInputRef = useRef(null); @@ -46,7 +46,7 @@ const Table: React.FC = ({ if (containerWidth) { document.documentElement.style.setProperty( "--taskcell-enclosure-width", - `${(containerWidth - 128) / 7}px` + `${(containerWidth - 128) / 5}px` ); } }; @@ -73,14 +73,19 @@ const Table: React.FC = ({ Projects - {dates.map((date) => ( - -
-
{format(date, "EEEE")}
-
{format(date, "yyyy-MM-dd")}
-
- - ))} + {dates.map((date) => { + const dateObj = parseISO(date); + return ( + +
+
{format(dateObj, "EEEE")}
+
+ {format(dateObj, "yyyy-MM-dd")} +
+
+ + ); + })} @@ -97,7 +102,10 @@ const Table: React.FC = ({ value={project.name} className="project-input" placeholder="New project" - onBlur={(e) => { if (e.target.value === "") removeProject(project.id) }} + onBlur={(e) => { + if (e.target.value === "") + removeProject(project.id); + }} onChange={(e) => handleProjectNameChange( project.id, @@ -114,7 +122,9 @@ const Table: React.FC = ({ if (e.target === e.currentTarget) { addTaskToProject(project, date); setTimeout(() => { - if (newTaskInputRef.current) { + if ( + newTaskInputRef.current + ) { newTaskInputRef.current.focus(); } }, 0); @@ -136,14 +146,19 @@ const Table: React.FC = ({ removeTask={removeTask} key={task.id} inputRef={ - task.id === nextTaskId - 1 + task.id === + nextTaskId - 1 ? newTaskInputRef : null } - handleTaskNameChange={handleTaskNameChange} + handleTaskNameChange={ + handleTaskNameChange + } status={task.status} taskStatuses={taskStatuses} - editTaskStatus={editTaskStatus} + editTaskStatus={ + editTaskStatus + } /> ))}