Bump eslint-plugin-react-hooks to 7.0.0 and fix all react compiler lint errors

frontend/eslint.config.js

@@ -16,7 +16,7 @@ export default [
     pluginReact.configs.flat["jsx-runtime"],
     eslintConfigPrettier,
     ...pluginQuery.configs["flat/recommended"],
-    reactHooks.configs["recommended-latest"],
+    reactHooks.configs.flat.recommended,
     {
         files: ["**/*.{js,jsx,ts,tsx}"],
         languageOptions: {

frontend/package.json

@@ -59,7 +59,7 @@
         "eslint": "^9.37.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
         "globals": "^16.4.0",
         "prettier": "^3.6.2",
         "typescript": "^5.9.3",

frontend/src/components/drawers/DrawerBlock.tsx

@@ -60,8 +60,6 @@ const DrawerBlock = ({ drawer, moveDrawer, dropDrawer }: DrawerBlockProps) => {
     const [isSimpleOpen, setIsSimpleOpen] = useState(false)
     const [isCreateOpen, setCreateOpen] = useState(false)
 
-    const [tasks, setTasks] = useState<Task[]>([])
-
     const { t } = useTranslation("translation")
 
     const sortMenuItems = useMemo(() => makeSortMenuItems(t), [t])
@@ -81,6 +79,11 @@ const DrawerBlock = ({ drawer, moveDrawer, dropDrawer }: DrawerBlockProps) => {
         getNextPageParam: (lastPage) => getPageFromURL(lastPage.next),
     })
 
+    const tasks = useMemo(() => {
+        if (!data) return []
+        return data.pages.flatMap((page) => page.results ?? []) || []
+    }, [data])
+
     const hasNextPage = data?.pages[data?.pages?.length - 1].next !== null
 
     /// Drawer Drag and Drop
@@ -134,46 +137,59 @@ const DrawerBlock = ({ drawer, moveDrawer, dropDrawer }: DrawerBlockProps) => {
         }),
     })
 
-    drag(drop(ref))
+    useEffect(() => {
+        drag(drop(ref))
+    }, [drag, drop])
     /// ---
 
-    // Task Drag and Drop
-    useEffect(() => {
-        if (!data) return
-        const results = data.pages.flatMap((page) => page.results ?? []) || []
-        setTasks(results)
-    }, [data])
+    // Task Drag and Drop - using local state for temporary reordering
+    const [tempTaskOrder, setTempTaskOrder] = useState<Task[]>([])
+
+    // Use temp order if available, otherwise use derived tasks
+    const displayTasks = tempTaskOrder.length > 0 ? tempTaskOrder : tasks
 
     const { mutateAsync, isPending } = useMutation({
         mutationFn: (data: Partial<Task>[]) => {
             return patchReorderTask(data)
         },
     })
 
-    const moveTask = useCallback((dragIndex: number, hoverIndex: number) => {
-        setTasks((prevTasks) => {
-            const updatedTasks = [...prevTasks]
+    const moveTask = useCallback(
+        (dragIndex: number, hoverIndex: number) => {
+            const currentTasks =
+                tempTaskOrder.length > 0 ? tempTaskOrder : tasks
+            const updatedTasks = [...currentTasks]
             const [moved] = updatedTasks.splice(dragIndex, 1)
             updatedTasks.splice(hoverIndex, 0, moved)
-            return updatedTasks
-        })
-    }, [])
+            setTempTaskOrder(updatedTasks)
+        },
+        [tasks, tempTaskOrder],
+    )
 
     const dropTask = useCallback(async () => {
-        const results = data?.pages.flatMap((page) => page.results) || []
-        const changedTasks = tasks
+        const results = data?.pages.flatMap((page) => page.results ?? []) || []
+        const currentTasks = tempTaskOrder.length > 0 ? tempTaskOrder : tasks
+        const changedTasks = currentTasks
             .map((task, index) => ({ id: task.id, order: index }))
             .filter((task, index) => results[index]?.id !== task.id)
 
-        if (changedTasks.length === 0) return
+        if (changedTasks.length === 0) {
+            setTempTaskOrder([]) // Reset temp order
+            return
+        }
 
-        await mutateAsync(changedTasks)
-
-        await queryClient.invalidateQueries({
-            queryKey: ["tasks", { drawerID: drawer.id, ordering: "order" }],
-        })
-        setOrdering("order")
-    }, [tasks, data, drawer.id, mutateAsync])
+        try {
+            await mutateAsync(changedTasks)
+            await queryClient.invalidateQueries({
+                queryKey: ["tasks", { drawerID: drawer.id, ordering: "order" }],
+            })
+            setOrdering("order")
+        } catch (_) {
+            toast.error(t("common.error_perform"))
+        } finally {
+            setTempTaskOrder([]) // Ensure temp order is reset
+        }
+    }, [tasks, tempTaskOrder, t, data, drawer.id, mutateAsync])
     // ---
 
     const deleteMutation = useMutation({
@@ -257,7 +273,7 @@ const DrawerBlock = ({ drawer, moveDrawer, dropDrawer }: DrawerBlockProps) => {
                 <SkeletonTasks taskCount={taskCount} />
             ) : (
                 <TaskList $isDragging={isDragging}>
-                    {tasks?.map((task) => (
+                    {displayTasks.map((task) => (
                         <DrawerTask
                             key={task.id}
                             task={task}