tasks logic

web/components/custom/sidebar/partial/task-section.tsx

@@ -71,11 +71,6 @@ export const TaskSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 				count={upcomingTasks.length}
 				isActive={pathname === "/tasks/upcoming"}
 			/>
-			{isFetching ? (
-				<div className="py-2 text-center text-gray-500">Fetching tasks...</div>
-			) : (
-				<List tasks={me.root.tasks as ListOfTasks} />
-			)}
 		</div>
 	)
 }
@@ -105,13 +100,3 @@ const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({ title, href, coun
 		</Link>
 	</div>
 )
-
-interface ListProps {
-	tasks: (Task | null)[] | undefined
-}
-
-const List: React.FC<ListProps> = ({ tasks }) => {
-	return (
-		<div>{tasks?.filter((task): task is Task => task !== null).map(task => <div key={task.id}>{task.title}</div>)}</div>
-	)
-}

web/components/routes/task/TaskForm.tsx

@@ -1,126 +1,3 @@
-// import { useState, useEffect, useRef } from "react"
-// import { motion, AnimatePresence } from "framer-motion"
-// import { ListOfTasks, Task } from "@/lib/schema/tasks"
-// import { Input } from "@/components/ui/input"
-// import { Button } from "@/components/ui/button"
-// import { useAccount } from "@/lib/providers/jazz-provider"
-// import { LaIcon } from "@/components/custom/la-icon"
-// import { Checkbox } from "@/components/ui/checkbox"
-// import { format } from "date-fns"
-// import { DatePicker } from "@/components/ui/date-picker"
-
-// interface TaskFormProps {
-// 	filter?: "today" | "upcoming"
-// }
-
-// export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
-// 	const [title, setTitle] = useState("")
-// 	const [dueDate, setDueDate] = useState<Date | undefined>(filter === "today" ? new Date() : undefined)
-// 	const [inputVisible, setInputVisible] = useState(false)
-// 	const { me } = useAccount({ root: {} })
-// 	const inputRef = useRef<HTMLInputElement>(null)
-
-// 	const handleSubmit = (e: React.FormEvent) => {
-// 		e.preventDefault()
-// 		if (title.trim() && (filter !== "upcoming" || dueDate)) {
-// 			if (me?.root?.tasks === undefined) {
-// 				if (!me) return
-// 				me.root.tasks = ListOfTasks.create([], { owner: me })
-// 			}
-
-// 			const newTask = Task.create(
-// 				{
-// 					title,
-// 					description: "",
-// 					status: "todo",
-// 					createdAt: new Date(),
-// 					updatedAt: new Date(),
-// 					dueDate: dueDate || null
-// 				},
-// 				{ owner: me._owner }
-// 			)
-// 			me.root.tasks?.push(newTask)
-// 			resetForm()
-// 		}
-// 	}
-
-// 	const resetForm = () => {
-// 		setTitle("")
-// 		setDueDate(filter === "today" ? new Date() : undefined)
-// 		setInputVisible(false)
-// 	}
-
-// 	const handleKeyDown = (e: React.KeyboardEvent) => {
-// 		if (e.key === "Escape") {
-// 			resetForm()
-// 		} else if (e.key === "Backspace" && title.trim() === "") {
-// 			resetForm()
-// 		}
-// 	}
-
-// 	useEffect(() => {
-// 		if (inputVisible && inputRef.current) {
-// 			inputRef.current.focus()
-// 		}
-// 	}, [inputVisible])
-
-// 	const formattedDate = dueDate ? format(dueDate, "EEE, MMMM do, yyyy") : "Select a date"
-
-// 	return (
-// 		<div className="flex items-center space-x-2">
-// 			<AnimatePresence mode="wait">
-// 				{!inputVisible ? (
-// 					<motion.div
-// 						key="add-button"
-// 						initial={{ opacity: 0, width: 0 }}
-// 						animate={{ opacity: 1, width: "auto" }}
-// 						exit={{ opacity: 0, width: 0 }}
-// 						transition={{ duration: 0.3 }}
-// 					>
-// 						<Button
-// 							className="flex flex-row items-center gap-1"
-// 							onClick={() => setInputVisible(true)}
-// 							variant="outline"
-// 						>
-// 							<LaIcon name="Plus" />
-// 							Add task
-// 						</Button>
-// 					</motion.div>
-// 				) : (
-// 					<motion.form
-// 						key="input-form"
-// 						initial={{ width: 0, opacity: 0 }}
-// 						animate={{ width: "100%", opacity: 1 }}
-// 						exit={{ width: 0, opacity: 0 }}
-// 						transition={{ duration: 0.3 }}
-// 						onSubmit={handleSubmit}
-// 						className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
-// 					>
-// 						<div className="flex flex-row items-center gap-3">
-// 							<Checkbox checked={false} onCheckedChange={() => {}} />
-// 							<Input
-// 								autoFocus
-// 								ref={inputRef}
-// 								value={title}
-// 								className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
-// 								onChange={e => setTitle(e.target.value)}
-// 								onKeyDown={handleKeyDown}
-// 								placeholder="Task title"
-// 							/>
-// 						</div>
-// 						<div className="flex items-center space-x-2">
-// 							{filter === "upcoming" && (
-// 								<DatePicker date={dueDate} onDateChange={(date: Date | undefined) => setDueDate(date)} />
-// 							)}
-// 							<span className="text-muted-foreground text-xs">{formattedDate}</span>
-// 						</div>
-// 					</motion.form>
-// 				)}
-// 			</AnimatePresence>
-// 		</div>
-// 	)
-// }
-
 import { useState, useEffect, useRef } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { ListOfTasks, Task } from "@/lib/schema/tasks"
@@ -145,7 +22,7 @@ export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
 
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault()
-		if (title.trim() && (filter === "today" || (filter === "upcoming" && dueDate))) {
+		if (title.trim() && (filter !== "upcoming" || dueDate)) {
 			if (me?.root?.tasks === undefined) {
 				if (!me) return
 				me.root.tasks = ListOfTasks.create([], { owner: me })
@@ -158,7 +35,7 @@ export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
 					status: "todo",
 					createdAt: new Date(),
 					updatedAt: new Date(),
-					dueDate: dueDate || (filter === "today" ? new Date() : null)
+					dueDate: filter === "upcoming" ? dueDate : filter === "today" ? new Date() : null
 				},
 				{ owner: me._owner }
 			)

web/components/routes/task/TaskItem.tsx

@@ -2,7 +2,6 @@ import { Task } from "@/lib/schema/tasks"
 import { Checkbox } from "@/components/ui/checkbox"
 import { format } from "date-fns"
 import { useState, useRef, useEffect } from "react"
-import { Input } from "@/components/ui/input"
 
 interface TaskItemProps {
 	task: Task
@@ -50,7 +49,7 @@ export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask, onDelete
 		}
 	}
 
-	const formattedDate = format(new Date(task.createdAt), "EEE, MMMM do, yyyy")
+	const formattedDate = task.dueDate ? format(new Date(task.dueDate), "EEE, MMMM do, yyyy") : "No due date"
 
 	return (
 		<li className="bg-result transitiion-opacity flex items-center justify-between rounded-lg p-2 px-3 hover:opacity-60">

web/components/routes/task/TaskRoute.tsx

@@ -46,7 +46,10 @@ export const TaskRoute: React.FC<TaskRouteProps> = ({ filter }) => {
 	return (
 		<div className="flex flex-col space-y-4 p-4">
 			<div className="flex flex-row items-center gap-1">
-				<LaIcon name="ListTodo" className="size-6" />
+				<LaIcon
+					name={filter === "today" ? "BookOpenCheck" : filter === "upcoming" ? "History" : "ListTodo"}
+					className="size-6"
+				/>
 				<h1 className="text-xl font-bold">
 					{filter === "today" ? "Today's Tasks" : filter === "upcoming" ? "Upcoming Tasks" : "All Tasks"}
 				</h1>

web/components/routes/task/new-task-actions.ts

@@ -48,9 +48,8 @@ export const useTaskActions = () => {
 		try {
 			me.root.tasks.splice(index, 1)
 
-			toast.success("Task deleted", {
+			toast.success("Task completed", {
-				position: "bottom-right",
+				position: "bottom-right"
-				description: `${task.title} has been deleted.`
 			})
 		} catch (error) {
 			console.error("Failed to delete task", error)

web/components/ui/date-picker.tsx

@@ -13,8 +13,15 @@ interface DatePickerProps {
 }
 
 export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
+	const [open, setOpen] = React.useState(false)
+
+	const selectDate = (selectedDate: Date | undefined) => {
+		onDateChange(selectedDate)
+		setOpen(false) // Закрываем Popover после выбора даты
+	}
+
 	return (
-		<Popover>
+		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger asChild>
 				<Button
 					variant={"outline"}
@@ -25,7 +32,7 @@ export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
 				</Button>
 			</PopoverTrigger>
 			<PopoverContent className="w-auto p-0" align="start">
-				<Calendar mode="single" selected={date} onSelect={onDateChange} initialFocus />
+				<Calendar mode="single" selected={date} onSelect={selectDate} initialFocus />
 			</PopoverContent>
 		</Popover>
 	)