marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Setup tsc compilation and eslint

Browse source
This commit is contained in:
Chris Veleris 2024-10-28 18:21:39 +02:00
parent c8083c7c4f
commit 32bcc014d6
31 changed files with 2591 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/frontend/components/Area/AreaModal.tsx
View file

@ -5,6 +5,7 @@ import { useDataContext } from '../../contexts/DataContext';
interface AreaModalProps {
isOpen: boolean;
onClose: () => void;
onSave: (areaData: Area) => void;
area?: Area | null;
}

2
app/frontend/components/Areas.tsx
View file

@ -57,7 +57,7 @@ const Areas: React.FC = () => {
if (!areaToDelete) return;
try {
await deleteArea(areaToDelete.id);
await deleteArea(areaToDelete.id!);
setIsConfirmDialogOpen(false);
setAreaToDelete(null);
} catch (error) {

31
app/frontend/components/Navbar.tsx
View file

@ -1,7 +1,8 @@
// src/components/Navbar.tsx
import React, { useState, useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import React, { useState, useRef, useEffect } from "react";
import { Link } from "react-router-dom";
import { UserIcon } from "@heroicons/react/24/solid";
interface NavbarProps {
isDarkMode: boolean;
@ -30,9 +31,9 @@ const Navbar: React.FC<NavbarProps> = ({
setIsDropdownOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
@ -63,14 +64,17 @@ const Navbar: React.FC<NavbarProps> = ({
className="flex items-center focus:outline-none"
aria-label="User Menu"
>
<img
src={
currentUser?.avatarUrl ||
'https://www.gravatar.com/avatar/placeholder?d=mp'
}
alt="User Avatar"
className="h-8 w-8 rounded-full object-cover border-2 border-green-500"
/>
{currentUser?.avatarUrl ? (
<img
src={currentUser.avatarUrl}
alt="User Avatar"
className="h-8 w-8 rounded-full object-cover border-2 border-green-500"
/>
) : (
<div className="h-8 w-8 rounded-full border-2 border-green-500 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
<UserIcon className="h-6 w-6 text-gray-500 dark:text-gray-300" />
</div>
)}
</button>
{/* Dropdown Menu */}
@ -84,8 +88,7 @@ const Navbar: React.FC<NavbarProps> = ({
</Link>
<button
onClick={() => {
// Handle logout logic here
console.log('Logout clicked');
console.log("Logout clicked");
}}
className="w-full text-left block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
>

2
app/frontend/components/Note/NoteDetails.tsx
View file

@ -24,7 +24,7 @@ const NoteDetails: React.FC = () => {
const handleDeleteNote = async () => {
if (!noteToDelete) return;
try {
await deleteNote(noteToDelete.id);
await deleteNote(noteToDelete.id!);
navigate('/notes');
} catch (err) {
console.error('Error deleting note:', err);

4
app/frontend/components/Notes.tsx
View file

@ -17,7 +17,7 @@ const Notes: React.FC = () => {
const handleDeleteNote = async () => {
if (!noteToDelete) return;
try {
await deleteNote(noteToDelete.id);
await deleteNote(noteToDelete.id!);
setIsConfirmDialogOpen(false);
setNoteToDelete(null);
} catch (err) {
@ -30,7 +30,7 @@ const Notes: React.FC = () => {
setIsNoteModalOpen(true);
};
const handleSaveNote = async (noteData: { id: number; }) => {
const handleSaveNote = async (noteData: Note) => {
try {
if (noteData.id) {
await updateNote(noteData.id, noteData);

4
app/frontend/components/Profile/ProfileSettings.tsx
View file

@ -176,7 +176,7 @@ const ProfileSettings: React.FC<ProfileSettingsProps> = ({ currentUser }) => {
</div>
{/* Avatar Image Upload */}
<div className="mb-4">
{/* <div className="mb-4">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Avatar Image
</label>
@ -193,7 +193,7 @@ const ProfileSettings: React.FC<ProfileSettingsProps> = ({ currentUser }) => {
className="mt-2 h-24 w-24 rounded-full object-cover"
/>
)}
</div>
</div> */}
{/* Save Button */}
<div className="flex justify-end">

129
app/frontend/components/Project/ProjectDetails.tsx
View file

@ -1,44 +1,52 @@
import React, { useEffect, useState } from 'react';
import { useParams, useLocation, useNavigate, Link } from 'react-router-dom';
import { PencilSquareIcon, TrashIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
import TaskList from '../Task/TaskList';
import ProjectModal from '../Project/ProjectModal';
import ConfirmDialog from '../Shared/ConfirmDialog';
import { useDataContext } from '../../contexts/DataContext';
import NewTask from '../Task/NewTask';
import React, { useEffect, useState } from "react";
import { useParams, useLocation, useNavigate, Link } from "react-router-dom";
import {
PencilSquareIcon,
TrashIcon,
Squares2X2Icon,
} from "@heroicons/react/24/solid";
import TaskList from "../Task/TaskList";
import ProjectModal from "../Project/ProjectModal";
import ConfirmDialog from "../Shared/ConfirmDialog";
import { useDataContext } from "../../contexts/DataContext";
import NewTask from "../Task/NewTask";
import { Project } from "../../entities/Project";
import { Task } from "../../entities/Task";
import useManageTasks from "../../hooks/useManageTasks";
const ProjectDetails: React.FC = () => {
const { updateTask, deleteTask } = useManageTasks();
const { id } = useParams<{ id: string }>();
const location = useLocation();
const navigate = useNavigate();
const { areas, createArea, updateArea, deleteArea } = useDataContext();
const { projects, updateProject, deleteProject } = useDataContext();
const { areas } = useDataContext();
const { updateProject, deleteProject } = useDataContext();
const [project, setProject] = useState<any>(null);
const [tasks, setTasks] = useState<any[]>([]);
const [project, setProject] = useState<Project>();
const [tasks, setTasks] = useState<Task[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
const { title: stateTitle, icon: stateIcon } = location.state || {};
const projectTitle = stateTitle || project?.name || 'Project';
const projectIcon = stateIcon || 'bi-folder-fill';
const projectTitle = stateTitle || project?.name || "Project";
const projectIcon = stateIcon || "bi-folder-fill";
useEffect(() => {
const fetchProject = async () => {
try {
const response = await fetch(`/api/project/${id}`, {
credentials: 'include',
headers: { Accept: 'application/json' },
credentials: "include",
headers: { Accept: "application/json" },
});
const data = await response.json();
if (response.ok) {
setProject(data);
setTasks(data.tasks || []);
} else {
throw new Error(data.error || 'Failed to fetch project.');
throw new Error(data.error || "Failed to fetch project.");
}
} catch (error) {
setError((error as Error).message);
@ -52,11 +60,10 @@ const ProjectDetails: React.FC = () => {
const handleTaskCreate = async (taskData: Partial<any>) => {
if (!project?.id) {
console.error('Project ID is missing');
console.error("Project ID is missing");
return;
}
// Add the project_id to the taskData payload
const taskPayload = {
...taskData,
project_id: project.id,
@ -64,12 +71,12 @@ const ProjectDetails: React.FC = () => {
try {
const response = await fetch(`/api/task`, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: 'include',
credentials: "include",
body: JSON.stringify(taskPayload),
});
@ -77,32 +84,56 @@ const ProjectDetails: React.FC = () => {
if (response.ok) {
setTasks([...tasks, newTask]);
} else {
throw new Error(newTask.error || 'Failed to create task');
throw new Error(newTask.error || "Failed to create task");
}
} catch (err) {
console.error('Error creating task:', err);
console.error("Error creating task:", err);
}
};
const handleTaskUpdate = async (updatedTask: any) => {
// Simulated function for task update
const handleTaskUpdate = async (updatedTask: Task) => {
if (updatedTask.id === undefined) {
console.error("Cannot update task: Task ID is missing");
return;
}
try {
await updateTask(updatedTask.id, updatedTask);
setTasks((prevTasks) =>
prevTasks.map((task) =>
task.id === updatedTask.id ? updatedTask : task
)
);
} catch (err) {
console.error("Error updating task:", err);
}
};
const handleTaskDelete = async (taskId: number) => {
// Simulated function for task deletion
const handleTaskDelete = async (taskId: number | undefined) => {
if (taskId === undefined) {
console.error("Cannot delete task: Task ID is missing");
return;
}
try {
await deleteTask(taskId);
setTasks((prevTasks) => prevTasks.filter((task) => task.id !== taskId));
} catch (err) {
console.error("Error deleting task:", err);
}
};
const handleEditProject = () => {
setIsModalOpen(true);
};
const handleSaveProject = async (updatedProject: any) => {
const handleSaveProject = async (updatedProject: Project) => {
if (!updatedProject) return;
try {
await updateProject(updatedProject.id, updatedProject);
await updateProject(updatedProject.id!, updatedProject);
setProject(updatedProject);
setIsModalOpen(false);
} catch (err) {
console.error('Error saving project:', err);
console.error("Error saving project:", err);
}
};
@ -110,10 +141,10 @@ const ProjectDetails: React.FC = () => {
if (!project) return;
try {
await deleteProject(project.id);
navigate('/projects');
await deleteProject(project.id!);
navigate("/projects");
} catch (err) {
console.error('Error deleting project:', err);
console.error("Error deleting project:", err);
}
};
@ -141,7 +172,9 @@ const ProjectDetails: React.FC = () => {
<div className="flex items-center justify-between mb-8">
<div className="flex items-center">
<i className={`bi ${projectIcon} text-xl mr-2`}></i>
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100">{projectTitle}</h2>
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100">
{projectTitle}
</h2>
</div>
<div className="flex space-x-2">
<button
@ -173,13 +206,29 @@ const ProjectDetails: React.FC = () => {
)}
{project?.description && (
<p className="text-gray-700 dark:text-gray-300 mb-6">{project.description}</p>
<p className="text-gray-700 dark:text-gray-300 mb-6">
{project.description}
</p>
)}
{/* Create a new task for this project */}
<NewTask onTaskCreate={(taskName: string) => handleTaskCreate({ name: taskName, status: 'not_started', project: project })} />
<NewTask
onTaskCreate={(taskName: string) =>
handleTaskCreate({
name: taskName,
status: "not_started",
project: project,
})
}
/>
<TaskList tasks={tasks} onTaskCreate={handleTaskCreate} onTaskUpdate={handleTaskUpdate} onTaskDelete={handleTaskDelete} projects={[project]} />
<TaskList
tasks={tasks}
onTaskCreate={handleTaskCreate}
onTaskUpdate={handleTaskUpdate}
onTaskDelete={handleTaskDelete}
projects={project ? [project] : []}
/>
<ProjectModal
isOpen={isModalOpen}

5
app/frontend/components/Project/ProjectModal.tsx
View file

@ -48,10 +48,11 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ isOpen, onClose, onSave, on
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
) => {
const { name, value, type, checked } = e.target;
const { name, value, type } = e.target;
setFormData((prev) => ({
...prev,
[name]: type === 'checkbox' ? checked : value,
[name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value,
}));
};

61
app/frontend/components/Projects.tsx
View file

@ -1,10 +1,6 @@
import React, { useState, useEffect } from "react";
import { Project } from "../entities/Project";
import {
Link,
useNavigate,
useSearchParams,
} from "react-router-dom";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
import ConfirmDialog from "./Shared/ConfirmDialog";
import ProjectModal from "./Project/ProjectModal";
@ -13,28 +9,35 @@ import useFetchProjects from "../hooks/useFetchProjects";
// Utility function to generate initials
const getProjectInitials = (name: string) => {
const words = name.trim().split(' ').filter(word => word.length > 0);
const words = name
.trim()
.split(" ")
.filter((word) => word.length > 0);
if (words.length === 1) {
return name.toUpperCase();
}
return words.map(word => word[0].toUpperCase()).join('');
return words.map((word) => word[0].toUpperCase()).join("");
};
const Projects: React.FC = () => {
const { areas, createProject, updateProject, deleteProject } = useDataContext();
const { areas, createProject, updateProject, deleteProject } =
useDataContext();
const [taskStatusCounts, setTaskStatusCounts] = useState<Record<number, any>>({});
const [taskStatusCounts, setTaskStatusCounts] = useState<Record<number, any>>(
{}
);
const [isProjectModalOpen, setIsProjectModalOpen] = useState<boolean>(false);
const [projectToEdit, setProjectToEdit] = useState<Project | null>(null);
const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState<boolean>(false);
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
const [isConfirmDialogOpen, setIsConfirmDialogOpen] =
useState<boolean>(false);
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const activeFilter = searchParams.get("active");
const areaFilter = searchParams.get("area_id") || "";
const activeFilter = searchParams.get("active") ?? "active";
const areaFilter = searchParams.get("area_id") ?? "";
const {
projects,
@ -48,7 +51,8 @@ const Projects: React.FC = () => {
setTaskStatusCounts(fetchedTaskStatusCounts);
}, [fetchedTaskStatusCounts]);
const getCompletionPercentage = (projectId: number) => {
const getCompletionPercentage = (projectId: number | undefined) => {
if (!projectId) return 0;
const taskStatus = taskStatusCounts[projectId] || {};
const totalTasks =
(taskStatus.done || 0) +
@ -67,7 +71,7 @@ const Projects: React.FC = () => {
await createProject(project);
}
setIsProjectModalOpen(false);
mutate();
mutate();
};
const handleEditProject = (project: Project) => {
@ -77,18 +81,21 @@ const Projects: React.FC = () => {
const handleDeleteProject = async () => {
if (!projectToDelete) return;
await deleteProject(projectToDelete.id);
await deleteProject(projectToDelete.id!);
setIsConfirmDialogOpen(false);
setProjectToDelete(null);
mutate();
};
const handleActiveFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const handleActiveFilterChange = (
e: React.ChangeEvent<HTMLSelectElement>
) => {
const newActiveFilter = e.target.value;
const params = new URLSearchParams(searchParams);
if (newActiveFilter === "all") {
params.delete("active");
params.delete("active");
} else {
params.set("active", newActiveFilter);
}
@ -208,7 +215,10 @@ const Projects: React.FC = () => {
className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-md relative"
style={{ minHeight: "280px", maxHeight: "280px" }} // Increased card height for image space
>
<div className="bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden rounded-t-lg" style={{ height: "160px" }}>
<div
className="bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden rounded-t-lg"
style={{ height: "160px" }}
>
<span className="text-2xl font-extrabold text-gray-500 dark:text-gray-400 opacity-20">
{getProjectInitials(project.name)}
</span>
@ -225,10 +235,17 @@ const Projects: React.FC = () => {
<div className="relative">
<button
className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-400 focus:outline-none"
onClick={() => setActiveDropdown(activeDropdown === project.id ? null : project.id)}
onClick={() =>
setActiveDropdown(
activeDropdown === project.id
? null
: project.id ?? null
)
}
>
<EllipsisVerticalIcon className="h-5 w-5" />
</button>
{activeDropdown === project.id && (
<div className="absolute right-0 mt-2 w-28 bg-white dark:bg-gray-700 shadow-lg rounded-md z-10">
<button
@ -257,12 +274,12 @@ const Projects: React.FC = () => {
<div
className="bg-blue-500 h-2 rounded-full"
style={{
width: `${getCompletionPercentage(project.id)}%`,
width: `${getCompletionPercentage(project?.id)}%`,
}}
></div>
</div>
<span className="text-xs text-gray-500 dark:text-gray-400">
{getCompletionPercentage(project.id)}%
{getCompletionPercentage(project?.id)}%
</span>
</div>
</div>

9
app/frontend/components/Shared/PriorityDropdown.tsx
View file

@ -1,9 +1,10 @@
import React, { useState, useRef, useEffect } from 'react';
import { ChevronDownIcon, ArrowDownIcon, ArrowUpIcon, FireIcon } from '@heroicons/react/24/outline'; // Import the icons
import { PriorityType } from '../../entities/Task';
interface PriorityDropdownProps {
value: string;
onChange: (value: string) => void;
value: PriorityType;
onChange: (value: PriorityType) => void;
}
const priorities = [
@ -26,7 +27,7 @@ const PriorityDropdown: React.FC<PriorityDropdownProps> = ({ value, onChange })
}
};
const handleSelect = (priority: string) => {
const handleSelect = (priority: PriorityType) => {
onChange(priority);
setIsOpen(false);
};
@ -64,7 +65,7 @@ const PriorityDropdown: React.FC<PriorityDropdownProps> = ({ value, onChange })
{priorities.map((priority) => (
<button
key={priority.value}
onClick={() => handleSelect(priority.value)}
onClick={() => handleSelect(priority.value as PriorityType)}
className="flex items-center justify-between px-4 py-2 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-600 w-full"
>
<span className="flex items-center space-x-2">

9
app/frontend/components/Shared/StatusDropdown.tsx
View file

@ -1,9 +1,10 @@
import React, { useState, useRef, useEffect } from 'react';
import { ChevronDownIcon, MinusIcon, ClockIcon, CheckCircleIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
import { StatusType } from '../../entities/Task';
interface StatusDropdownProps {
value: string;
onChange: (value: string) => void;
value: StatusType;
onChange: (value: StatusType) => void;
}
const statuses = [
@ -27,7 +28,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = ({ value, onChange }) => {
}
};
const handleSelect = (status: string) => {
const handleSelect = (status: StatusType) => {
onChange(status);
setIsOpen(false);
};
@ -65,7 +66,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = ({ value, onChange }) => {
{statuses.map((status) => (
<button
key={status.value}
onClick={() => handleSelect(status.value)}
onClick={() => handleSelect(status.value as StatusType)}
className="flex items-center justify-between space-x-2 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-600 w-full"
>
<span className="flex items-center space-x-2">

8
app/frontend/components/Sidebar.tsx
View file

@ -44,16 +44,14 @@ const Sidebar: React.FC<SidebarProps> = ({
const navigate = useNavigate();
const location = useLocation();
// State for the dropdown in SidebarFooter
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
// Function to toggle the dropdown
const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};
const handleNavClick = (path: string, title: string, icon: string) => {
navigate(path, { state: { title, icon } });
const handleNavClick = (path: string, title: string, icon: JSX.Element) => {
navigate(path, { state: { title } });
if (window.innerWidth < 1024) {
setIsSidebarOpen(false);
}
@ -68,7 +66,7 @@ const Sidebar: React.FC<SidebarProps> = ({
<div className="flex flex-col h-full overflow-y-auto">
{isSidebarOpen ? (
<>
<div className="p-3">
<div className="px-3 pb-3 pt-6">
{/* Sidebar Content */}
<SidebarNav
handleNavClick={handleNavClick}

28
app/frontend/components/Sidebar/SidebarAreas.tsx
View file

@ -1,23 +1,25 @@
import React from 'react';
import { Squares2X2Icon, PlusCircleIcon } from '@heroicons/react/24/outline';
import React from "react";
import { Squares2X2Icon, PlusCircleIcon } from "@heroicons/react/24/outline";
import { Location } from "react-router-dom";
import { Area } from "../../entities/Area";
interface SidebarAreasProps {
handleNavClick: (path: string, title: string, icon: string) => void;
handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
location: Location;
isDarkMode: boolean;
openAreaModal: () => void;
openAreaModal: (area: Area | null) => void;
areas: Area[];
}
const SidebarAreas: React.FC<SidebarAreasProps> = ({
handleNavClick,
location,
isDarkMode,
openAreaModal,
}) => {
const isActiveArea = (path: string) => {
return location.pathname === path
? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white'
: 'text-gray-700 dark:text-gray-300';
? "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white"
: "text-gray-700 dark:text-gray-300";
};
return (
@ -26,9 +28,15 @@ const SidebarAreas: React.FC<SidebarAreasProps> = ({
{/* "AREAS" Title with Add Button */}
<li
className={`flex justify-between items-center px-4 py-2 rounded-md uppercase text-xs tracking-wider cursor-pointer hover:text-black dark:hover:text-white ${isActiveArea(
'/areas'
"/areas"
)}`}
onClick={() => handleNavClick('/areas', 'Areas', 'squares2x2')}
onClick={() =>
handleNavClick(
"/areas",
"Areas",
<Squares2X2Icon className="h-5 w-5 mr-2" />
)
}
>
<span className="flex items-center">
<Squares2X2Icon className="h-5 w-5 mr-2" />
@ -37,7 +45,7 @@ const SidebarAreas: React.FC<SidebarAreasProps> = ({
<button
onClick={(e) => {
e.stopPropagation();
openAreaModal();
openAreaModal(null);
}}
className="text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white focus:outline-none"
aria-label="Add Area"

6
app/frontend/components/Sidebar/SidebarNav.tsx
View file

@ -12,7 +12,7 @@ import {
} from '@heroicons/react/24/solid';
interface SidebarNavProps {
handleNavClick: (path: string, title: string) => void;
handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
location: Location;
isDarkMode: boolean;
}
@ -28,7 +28,7 @@ const navLinks = [
{ path: '/tasks', title: 'All Tasks', icon: <ListBulletIcon className="h-5 w-5" /> },
];
const SidebarNav: React.FC<SidebarNavProps> = ({ handleNavClick, location, isDarkMode }) => {
const SidebarNav: React.FC<SidebarNavProps> = ({ handleNavClick, location }) => {
const isActive = (path: string, query?: string) => {
const isPathMatch = location.pathname === '/tasks';
const isQueryMatch = query ? location.search.includes(query) : location.search === '';
@ -42,7 +42,7 @@ const SidebarNav: React.FC<SidebarNavProps> = ({ handleNavClick, location, isDar
{navLinks.map((link) => (
<li key={link.path}>
<button
onClick={() => handleNavClick(link.path, link.title)}
onClick={() => handleNavClick(link.path, link.title, link.icon)}
className={`w-full text-left px-4 py-1 flex items-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ${isActive(
link.path,
link.query

6
app/frontend/components/Sidebar/SidebarNotes.tsx
View file

@ -4,7 +4,7 @@ import { BookOpenIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
import { Note } from '../../entities/Note';
interface SidebarNotesProps {
handleNavClick: (path: string, title: string, icon: string) => void;
handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
location: Location;
isDarkMode: boolean;
openNoteModal: (note: Note | null) => void;
@ -14,9 +14,7 @@ interface SidebarNotesProps {
const SidebarNotes: React.FC<SidebarNotesProps> = ({
handleNavClick,
location,
isDarkMode,
openNoteModal,
notes,
}) => {
const isActiveNote = (path: string) => {
return location.pathname === path
@ -31,7 +29,7 @@ const SidebarNotes: React.FC<SidebarNotesProps> = ({
className={`flex justify-between items-center rounded-md px-4 py-2 uppercase text-xs tracking-wider cursor-pointer hover:text-black dark:hover:text-white ${isActiveNote(
'/notes'
)}`}
onClick={() => handleNavClick('/notes', 'Notes', 'book')}
onClick={() => handleNavClick('/notes', 'Notes', <BookOpenIcon className="h-5 w-5 mr-2" />)}
>
<span className="flex items-center">
<BookOpenIcon className="h-5 w-5 mr-2" />

4
app/frontend/components/Sidebar/SidebarProjects.tsx
View file

@ -4,7 +4,7 @@ import { FolderIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
import { Project } from '../../entities/Project';
interface SidebarProjectsProps {
handleNavClick: (path: string, title: string, icon: string) => void;
handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
location: Location;
isDarkMode: boolean;
openProjectModal: () => void;
@ -49,7 +49,7 @@ const SidebarProjects: React.FC<SidebarProjectsProps> = ({
className={`flex justify-between items-center px-4 py-2 uppercase rounded-md text-xs tracking-wider cursor-pointer hover:text-black dark:hover:text-white ${isActiveProject(
'/projects'
)}`}
onClick={() => handleNavClick('/projects', 'Projects', 'folder')}
onClick={() => handleNavClick('/projects', 'Projects', <FolderIcon className="h-5 w-5 mr-2" />)}
>
<span className="flex items-center">
<FolderIcon className="h-5 w-5 mr-2" />

4
app/frontend/components/Sidebar/SidebarTags.tsx
View file

@ -4,7 +4,7 @@ import { TagIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
import { Tag } from '../../entities/Tag';
interface SidebarTagsProps {
handleNavClick: (path: string, title: string, icon: string) => void;
handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
location: Location;
isDarkMode: boolean;
openTagModal: (tag: Tag | null) => void;
@ -32,7 +32,7 @@ const SidebarTags: React.FC<SidebarTagsProps> = ({
className={`flex justify-between items-center rounded-md px-4 py-2 uppercase text-xs tracking-wider cursor-pointer hover:text-black dark:hover:text-white ${isActiveTag(
'/tags'
)}`}
onClick={() => handleNavClick('/tags', 'Tags', 'tag')}
onClick={() => handleNavClick('/tags', 'Tags', <TagIcon className="h-5 w-5 mr-2" />)}
>
<span className="flex items-center">
<TagIcon className="h-5 w-5 mr-2" />

2
app/frontend/components/Tag/TagModal.tsx
View file

@ -7,7 +7,7 @@ interface TagModalProps {
isOpen: boolean;
onClose: () => void;
onSave: (tag: Tag) => void;
tag?: Tag;
tag?: Tag | null;
}
const TagModal: React.FC<TagModalProps> = ({ isOpen, onClose, onSave, tag }) => {

10
app/frontend/components/Tags.tsx
View file

@ -1,9 +1,10 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { PencilSquareIcon, TrashIcon, PlusCircleIcon, TagIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import { PencilSquareIcon, TrashIcon, TagIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import ConfirmDialog from './Shared/ConfirmDialog';
import TagModal from './Tag/TagModal';
import { useDataContext } from '../contexts/DataContext';
import { Tag } from '../entities/Tag';
const Tags: React.FC = () => {
const { tags, createTag, updateTag, deleteTag, isLoading, isError } = useDataContext();
@ -16,7 +17,7 @@ const Tags: React.FC = () => {
const handleDeleteTag = async () => {
if (!tagToDelete) return;
try {
await deleteTag(tagToDelete.id);
await deleteTag(tagToDelete.id!);
setIsConfirmDialogOpen(false);
setTagToDelete(null);
} catch (err) {
@ -29,11 +30,6 @@ const Tags: React.FC = () => {
setIsTagModalOpen(true);
};
const handleCreateTag = () => {
setSelectedTag(null);
setIsTagModalOpen(true);
};
const handleSaveTag = async (tagData: Tag) => {
try {
if (tagData.id) {

4
app/frontend/components/Task/TaskHeader.tsx
View file

@ -34,7 +34,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ task, project, onTaskClick }) =
{/* Second Line (Tags, Due Date, Status) */}
<div className="flex items-center flex-wrap justify-start md:justify-end space-x-4">
<TaskTags tags={task.tags} />
<TaskTags tags={task.tags || []} onTagRemove={() => {}}/>
{task.due_date && <TaskDueDate dueDate={task.due_date} />}
<TaskStatusBadge status={task.status} />
</div>
@ -60,7 +60,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ task, project, onTaskClick }) =
{/* Third Line (Tags, indented) */}
<div className="pl-6">
<TaskTags tags={task.tags} />
<TaskTags tags={task.tags || []} onTagRemove={() => {}} />
</div>
</div>
</div>

20
app/frontend/components/Task/TaskModal.tsx
View file

@ -1,21 +1,13 @@
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Task } from '../../entities/Task';
import { PriorityType, StatusType, Task } from '../../entities/Task';
import TaskActions from './TaskActions';
import PriorityDropdown from '../Shared/PriorityDropdown';
import StatusDropdown from '../Shared/StatusDropdown';
import ConfirmDialog from '../Shared/ConfirmDialog';
import { useToast } from '../Shared/ToastContext'; // Import the toast hook
import { useToast } from '../Shared/ToastContext';
import TagInput from '../Tag/TagInput';
interface Tag {
id?: number;
name: string;
}
interface Project {
id: number;
name: string;
}
import { Project } from '../../entities/Project';
import { Tag } from '../../entities/Tag';
interface TaskModalProps {
isOpen: boolean;
@ -257,7 +249,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
</label>
<StatusDropdown
value={formData.status}
onChange={(value) => setFormData({ ...formData, status: value })}
onChange={(value: StatusType) => setFormData({ ...formData, status: value })}
/>
</div>
<div>
@ -266,7 +258,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
</label>
<PriorityDropdown
value={formData.priority || 'medium'}
onChange={(value) => setFormData({ ...formData, priority: value })}
onChange={(value: PriorityType) => setFormData({ ...formData, priority: value })}
/>
</div>
<div>

7
app/frontend/components/Task/TaskTags.tsx
View file

@ -1,14 +1,11 @@
import { TagIcon } from '@heroicons/react/24/solid';
import React from 'react';
import { useNavigate } from 'react-router-dom';
interface Tag {
id: number;
name: string;
}
import { Tag } from '../../entities/Tag';
interface TaskTagsProps {
tags: Tag[];
onTagRemove: (tagToRemoveId: number) => void;
className?: string;
}

2
app/frontend/components/Task/getDescription.ts
View file

@ -3,7 +3,7 @@ import { Project } from "../../entities/Project";
export const getDescription = (query: URLSearchParams, projects: Project[]): string => {
const projectId = query.get('project_id');
if (projectId) {
const project = projects.find((p) => p.id.toString() === projectId);
const project = projects.find((p) => p.id?.toString() === projectId);
return project
? `You are currently viewing all tasks associated with the "${project.name}" project. You can organize tasks within this project, set their priority, and track their completion. Use this space to focus on the tasks that belong specifically to this project.`
: 'You are viewing tasks for a specific project. Use this space to manage and track tasks associated with this project.';

4
app/frontend/components/Task/getTitleAndIcon.ts
View file

@ -1,7 +1,9 @@
import { Project } from "../../entities/Project";
export const getTitleAndIcon = (query: URLSearchParams, projects: Project[]) => {
const projectId = query.get('project_id');
if (projectId) {
const project = projects.find((p) => p.id.toString() === projectId);
const project = projects.find((p) => p.id?.toString() === projectId);
return { title: project ? project.name : 'Project', icon: 'bi-folder-fill' };
}

2
app/frontend/entities/Tag.ts
View file

@ -1,4 +1,4 @@
export interface Tag {
id: number | undefined;
id?: number | undefined;
name: string;
}

7
app/frontend/entities/Task.ts
View file

@ -3,10 +3,13 @@ import { Tag } from "./Tag";
export interface Task {
id?: number;
name: string;
status: 'not_started' | 'in_progress' | 'done' | 'archived';
priority?: 'low' | 'medium' | 'high';
status: StatusType;
priority?: PriorityType;
due_date?: string;
note?: string;
tags?: Tag[];
project_id?: number;
}
export type StatusType = 'not_started' | 'in_progress' | 'done' | 'archived';
export type PriorityType = 'low' | 'medium' | 'high';

9
app/frontend/hooks/useManageNotes.ts
View file

@ -24,7 +24,7 @@ const useManageNotes = () => {
const newNote: Note = await response.json();
mutate([...notes, newNote], false);
mutate([...(notes || []), newNote], false);
},
[mutate, notes]
);
@ -47,7 +47,7 @@ const useManageNotes = () => {
const updatedNote: Note = await response.json();
mutate(notes.map((note) => (note.id === noteId ? updatedNote : note)), false);
mutate((notes || []).map((note) => (note.id === noteId ? updatedNote : note)), false);
},
[mutate, notes]
);
@ -66,8 +66,8 @@ const useManageNotes = () => {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to delete note.');
}
mutate(notes.filter((note) => note.id !== noteId), false);
mutate((notes || []).filter((note) => note.id !== noteId), false);
},
[mutate, notes]
);
@ -79,6 +79,7 @@ const useManageNotes = () => {
createNote,
updateNote,
deleteNote,
mutate
};
};

13
eslint.config.mjs Normal file
View file

@ -0,0 +1,13 @@
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
export default [
{files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
];

2322
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

14
package.json
View file

@ -1,6 +1,6 @@
{
"name": "tududi",
"version": "1.0.0",
"version": "0.3",
"description": "`tududi` is a task and project management web application built with Sinatra. It allows users to efficiently manage their tasks and projects, categorize them into different areas, and track due dates. `tududi` is designed to be intuitive and easy to use, providing a seamless experience for personal productivity.",
"main": "index.js",
"directories": {
@ -8,8 +8,9 @@
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "NODE_ENV=development webpack serve --config webpack.config.js"
"build": "tsc --noEmit && webpack --config webpack.config.js",
"start": "tsc --noEmit && NODE_ENV=development webpack serve --config webpack.config.js",
"lint": "eslint 'app/frontend/**/*.{js,jsx,ts,tsx}'"
},
"keywords": [],
"author": "",
@ -19,13 +20,19 @@
"@babel/preset-env": "^7.25.7",
"@babel/preset-react": "^7.25.7",
"@babel/preset-typescript": "^7.25.7",
"@eslint/js": "^9.13.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^8.11.0",
"@typescript-eslint/parser": "^8.11.0",
"autoprefixer": "^10.4.20",
"babel-loader": "^9.2.1",
"css-loader": "^7.1.2",
"eslint": "^9.13.0",
"eslint-plugin-react": "^7.37.2",
"globals": "^15.11.0",
"postcss": "^8.4.47",
"postcss-loader": "^8.1.1",
"react-refresh": "^0.14.2",
@ -33,6 +40,7 @@
"tailwindcss": "^3.4.13",
"ts-loader": "^9.5.1",
"typescript": "^5.6.2",
"typescript-eslint": "^8.11.0",
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.1.0"

49
public/js/bundle.js
View file

File diff suppressed because one or more lines are too long