- Implement ESLint with @antfu/eslint-config and apply consistent formatting across the codebase.

- Refactor `useTasks` to improve task fetching, creation, and updating logic.
- Enhance `TodoItem` and `ListScreen` with improved bindings, sorting, and category handling.
- Update dependencies and adjust task grouping in various components.

src/composables/useTasks.ts

@@ -1,89 +1,88 @@
-import { ref } from 'vue';
-import { useApi } from './useApi.ts';
-import { Task } from '../types.ts';
-import { useArrayReduce, useArrayUnique } from '@vueuse/core'
+import type { Task } from '../types.ts'
+import { useArrayUnique } from '@vueuse/core'
+import { ref } from 'vue'
+import { useApi } from './useApi.ts'
 
-const tasks = ref<Task[]>([]);
-const isLoading = ref(false);
-const error = ref<string | null>(null);
+const tasks = ref<Task[]>([])
+const isLoading = ref(false)
+const error = ref<string | null>(null)
 
 export function useTasks() {
-  const api = useApi();
+  const api = useApi()
 
   const fetchTasks = async (force = false) => {
-    if (tasks.value.length > 0 && !force) return;
+    if (tasks.value.length > 0 && !force)
+      return
 
-    isLoading.value = true;
-    error.value = null;
+    isLoading.value = true
+    error.value = null
     try {
-      const data = await api.get('e5880167-9322-4d7b-8a38-e06bae8a7734/list').then((res) => res.json());
-      tasks.value = data.tasks ?? [];
-    } catch (e: any) {
-      error.value = e.message || 'Failed to fetch tasks';
-      console.error('Error fetching tasks:', e);
-    } finally {
-      isLoading.value = false;
+      const data = await api.get('e5880167-9322-4d7b-8a38-e06bae8a7734/list').then(res => res.json())
+      tasks.value = data.tasks ?? []
     }
-  };
+    catch (e: any) {
+      error.value = e.message || 'Failed to fetch tasks'
+      console.error('Error fetching tasks:', e)
+    }
+    finally {
+      isLoading.value = false
+    }
+  }
 
   const createTask = async (taskData: Partial<Task>) => {
-    isLoading.value = true;
-    error.value = null;
+    isLoading.value = true
+    error.value = null
     try {
       // Get next ID as per current logic in CreateScreen.vue
-      const nextId = await api.get('d49dde4c-530d-46ee-8205-d1357563ac16')
-        .then((response) => response.json())
-        .then((json) => json.nextId as number)
-        .catch(() => null);
-
-      if (!nextId) throw new Error('Could not get next task ID');
+      const nextId = tasks.value.sort((a, b) => b.id_ - a.id_).reduce((acc, task) => {
+        if (task.id_ === acc + 1)
+          return acc + 1
+        return task.id_ + 1
+      }, 0)
 
       const newTask: Partial<Task> = {
         ...taskData,
         id_: nextId,
         logs: [],
         archived: false,
-      };
-
-      const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [newTask] }).then((res) => res.json());
-      if (data.tasks) {
-        tasks.value = data.tasks;
       }
-    } catch (e: any) {
-      error.value = e.message || 'Failed to create task';
-      console.error('Error creating task:', e);
-      throw e;
-    } finally {
-      isLoading.value = false;
+
+      const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [newTask] }).then(res => res.json())
+      if (data.tasks) {
+        tasks.value = data.tasks
+      }
     }
-  };
-
-  const updateTask = async (task: Task) => {
-    console.log('updateTask',task);
-    isLoading.value = true;
-    error.value = null;
-    try {
-      const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [task] }).then((res) => res.json());
-      if (data.tasks) {
-        tasks.value = data.tasks;
-      }
-    } catch (e: any) {
-      error.value = e.message || 'Failed to update task';
-      console.error('Error updating task:', e);
-      throw e;
-    } finally {
-      isLoading.value = false;
+    catch (e: any) {
+      error.value = e.message || 'Failed to create task'
+      console.error('Error creating task:', e)
+      throw e
+    }
+    finally {
+      isLoading.value = false
     }
   }
 
-  const tasksByCategory = useArrayReduce(tasks.value.sort((a,b) => a.id_ - b.id_), (acc, task) => {
-    const tag = task.tag ?? 'Uncategorized';
-    acc[tag] = acc[tag] ?? [];
-    acc[tag].push(task);
-    return acc;
-  }, {} as Record<string, Task[]>)
+  const updateTask = async (task: Task) => {
+    console.log('updateTask', task)
+    isLoading.value = true
+    error.value = null
+    try {
+      const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [task] }).then(res => res.json())
+      if (data.tasks) {
+        tasks.value = data.tasks
+      }
+    }
+    catch (e: any) {
+      error.value = e.message || 'Failed to update task'
+      console.error('Error updating task:', e)
+      throw e
+    }
+    finally {
+      isLoading.value = false
+    }
+  }
 
-  const categories = useArrayUnique(Object.keys(tasksByCategory.value))
+  const categories = useArrayUnique(tasks.value.map(task => task.tag))
 
   return {
     tasks,
@@ -93,5 +92,5 @@ export function useTasks() {
     createTask,
     updateTask,
     categories,
-  };
+  }
 }