Tasks (#175)

* tasks

* task input

* fixed jazz things

* create new task ui

* feat: simple feature flag

---------

Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
Co-authored-by: Aslam H <iupin5212@gmail.com>

web/components/routes/task/TaskForm.tsx

@@ -0,0 +1,114 @@
+"use client"
+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"
+
+interface TaskFormProps {}
+
+export const TaskForm: React.FC<TaskFormProps> = ({}) => {
+	const [title, setTitle] = useState("")
+	const [inputVisible, setInputVisible] = useState(false)
+	const { me } = useAccount({ root: {} })
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault()
+		if (title.trim()) {
+			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()
+				},
+				{ owner: me._owner }
+			)
+			me.root.tasks?.push(newTask)
+			resetForm()
+		}
+	}
+
+	const resetForm = () => {
+		setTitle("")
+		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 = format(new Date(), "EEE, MMMM do, yyyy")
+
+	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">
+							<span className="text-muted-foreground text-xs">{formattedDate}</span>
+						</div>
+					</motion.form>
+				)}
+			</AnimatePresence>
+		</div>
+	)
+}

web/components/routes/task/TaskItem.tsx

@@ -0,0 +1,26 @@
+import { Task } from "@/lib/schema/tasks"
+import { Checkbox } from "@/components/ui/checkbox"
+import { format } from "date-fns"
+
+interface TaskItemProps {
+	task: Task
+	onUpdateTask: (taskId: string, updates: Partial<Task>) => void
+}
+
+export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask }) => {
+	const statusChange = (checked: boolean) => {
+		onUpdateTask(task.id, { status: checked ? "done" : "todo" })
+	}
+
+	const formattedDate = format(new Date(task.createdAt), "EEE, MMMM do, yyyy")
+
+	return (
+		<li className="bg-result transitiion-opacity flex items-center justify-between rounded-lg p-2 px-3 hover:opacity-60">
+			<div className="flex flex-row items-center gap-3">
+				<Checkbox checked={task.status === "done"} onCheckedChange={statusChange} />
+				<p className={task.status === "done" ? "text-foreground line-through" : ""}>{task.title}</p>
+			</div>
+			<span className="text-muted-foreground text-xs">{formattedDate}</span>
+		</li>
+	)
+}

web/components/routes/task/TaskList.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { ListOfTasks, Task } from "@/lib/schema/tasks"
+import { TaskItem } from "./TaskItem"
+
+interface TaskListProps {
+	tasks?: ListOfTasks
+	onUpdateTask: (taskId: string, updates: Partial<Task>) => void
+}
+
+export const TaskList: React.FC<TaskListProps> = ({ tasks, onUpdateTask }) => {
+	return (
+		<ul className="flex flex-col gap-y-2">
+			{tasks?.map(
+				task =>
+					task?.id && (
+						<li key={task.id}>
+							<TaskItem task={task} onUpdateTask={onUpdateTask} />
+						</li>
+					)
+			)}
+		</ul>
+	)
+}

web/components/routes/task/TaskRoute.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { Task } from "@/lib/schema/tasks"
+import { TaskList } from "./TaskList"
+import { TaskForm } from "./TaskForm"
+import { LaIcon } from "@/components/custom/la-icon"
+
+export const TaskRoute: React.FC = () => {
+	const { me } = useAccount({ root: { tasks: [] } })
+	const tasks = me?.root.tasks
+	console.log(tasks, "tasks here")
+
+	const updateTask = (taskId: string, updates: Partial<Task>) => {
+		if (me?.root?.tasks) {
+			const taskIndex = me.root.tasks.findIndex(task => task?.id === taskId)
+			if (taskIndex !== -1) {
+				Object.assign(me.root.tasks[taskIndex]!, updates)
+			}
+		}
+	}
+
+	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" />
+				<h1 className="text-xl font-bold">Current Tasks</h1>
+			</div>
+			<TaskForm />
+			<TaskList tasks={tasks} onUpdateTask={updateTask} />
+		</div>
+	)
+}