tasks

web/app/hooks/actions/use-task-actions.ts

@@ -2,7 +2,7 @@ import { useCallback } from "react"
 import { toast } from "sonner"
 import { LaAccount } from "@/lib/schema"
 import { ID } from "jazz-tools"
-import { ListOfTasks, Task } from "~/lib/schema/task"
+import { Task } from "~/lib/schema/task"
 
 export const useTaskActions = () => {
   const newTask = useCallback((me: LaAccount): Task | null => {
@@ -12,7 +12,7 @@ export const useTaskActions = () => {
     }
 
     if (!me.root.tasks) {
-      me.root.tasks = ListOfTasks.create([], { owner: me })
+      me.root.tasks = []
     }
 
     const newTask = Task.create(
@@ -33,7 +33,9 @@ export const useTaskActions = () => {
   const deleteTask = useCallback((me: LaAccount, taskId: ID<Task>): void => {
     if (!me.root?.tasks) return
 
-    const index = me.root.tasks.findIndex((item) => item?.id === taskId)
+    const index: number = me.root.tasks.findIndex(
+      (item: Task) => item?.id === taskId,
+    )
     if (index === -1) {
       toast.error("Task not found")
       return

web/app/routes/_layout/_pages/_protected/tasks/-list.tsx

@@ -12,6 +12,14 @@ export const TaskList: React.FC<TaskListProps> = ({
   onUpdateTask,
   onDeleteTask,
 }) => {
+  if (tasks.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8">
+        <p className="text-sm text-muted-foreground">You have no tasks yet</p>
+      </div>
+    )
+  }
+
   return (
     <ul className="flex flex-col gap-y-2">
       {tasks?.map(

web/app/routes/_layout/_pages/_protected/tasks/index.tsx

@@ -86,7 +86,7 @@ function TaskComponent() {
   const tasks = me?.root.tasks
   const { deleteTask } = useTaskActions()
 
-  const filteredTasks = tasks?.filter((task) => {
+  const filteredTasks = tasks?.filter((task: Task) => {
     if (!task) return false
     if (filter === "today") {
       return task.status !== "done" && task.dueDate && isToday(task.dueDate)
@@ -98,7 +98,9 @@ function TaskComponent() {
 
   const updateTask = (taskId: string, updates: Partial<Task>) => {
     if (me?.root?.tasks) {
-      const taskIndex = me.root.tasks.findIndex((task) => task?.id === taskId)
+      const taskIndex = me.root.tasks.findIndex(
+        (task: Task) => task?.id === taskId,
+      )
       if (taskIndex !== -1) {
         Object.assign(me.root.tasks[taskIndex]!, updates)
       }
@@ -135,9 +137,7 @@ function TaskComponent() {
       </div> */}
       <TaskForm />
       <TaskList
-        tasks={
+        tasks={filteredTasks?.filter((task: Task) => task !== null) || []}
-          filteredTasks?.filter((task): task is Task => task !== null) || []
-        }
         onUpdateTask={updateTask}
         onDeleteTask={onDeleteTask}
       />