Add update task state

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/pages/ControlOverviewPage.tsx

@@ -5,12 +5,15 @@ import {
   PreloadedQuery,
   usePreloadedQuery,
   useQueryLoader,
+  useMutation,
 } from "react-relay";
 import { CheckCircle2 } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
+import { useToast } from "@/hooks/use-toast";
 
 import { Helmet } from "react-helmet-async";
 import type { ControlOverviewPageQuery as ControlOverviewPageQueryType } from "./__generated__/ControlOverviewPageQuery.graphql";
+import type { ControlOverviewPageUpdateTaskStateMutation as ControlOverviewPageUpdateTaskStateMutationType } from "./__generated__/ControlOverviewPageUpdateTaskStateMutation.graphql";
 
 const controlOverviewPageQuery = graphql`
   query ControlOverviewPageQuery($controlId: ID!) {
@@ -36,6 +39,21 @@ const controlOverviewPageQuery = graphql`
   }
 `;
 
+const updateTaskStateMutation = graphql`
+  mutation ControlOverviewPageUpdateTaskStateMutation(
+    $input: UpdateTaskStateInput!
+  ) {
+    updateTaskState(input: $input) {
+      taskEdge {
+        node {
+          id
+          state
+        }
+      }
+    }
+  }
+`;
+
 function ControlOverviewPageContent({
   queryRef,
 }: {
@@ -43,11 +61,52 @@ function ControlOverviewPageContent({
 }) {
   const data = usePreloadedQuery<ControlOverviewPageQueryType>(
     controlOverviewPageQuery,
-    queryRef,
+    queryRef
   );
+  const { toast } = useToast();
+  const [updateTaskState] =
+    useMutation<ControlOverviewPageUpdateTaskStateMutationType>(
+      updateTaskStateMutation
+    );
   const control = data.control;
   const tasks = control?.tasks?.edges.map((edge) => edge?.node) ?? [];
 
+  const handleTaskClick = (taskId: string, currentState: string) => {
+    const newState = currentState === "DONE" ? "TODO" : "DONE";
+
+    updateTaskState({
+      variables: {
+        input: {
+          taskId,
+          state: newState,
+        },
+      },
+      optimisticResponse: {
+        updateTaskState: {
+          task: {
+            id: taskId,
+            state: newState,
+          },
+        },
+      },
+      onCompleted: () => {
+        toast({
+          title: "Task updated",
+          description: `Task has been ${
+            newState === "DONE" ? "completed" : "reopened"
+          }.`,
+        });
+      },
+      onError: (error) => {
+        toast({
+          title: "Error updating task",
+          description: error.message,
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
   return (
     <div className="min-h-screen bg-white p-6 space-y-6">
       <div className="space-y-4">
@@ -101,12 +160,24 @@ function ControlOverviewPageContent({
                     ? "border-gray-400 bg-gray-100"
                     : "border-gray-300"
                 }`}
+                onClick={() =>
+                  task?.id &&
+                  task?.state &&
+                  handleTaskClick(task.id, task.state)
+                }
               >
                 {task?.state === "DONE" && (
                   <CheckCircle2 className="w-4 h-4 text-gray-500" />
                 )}
               </div>
-              <div className="flex-1 flex items-center justify-between">
+              <div
+                className="flex-1 flex items-center justify-between cursor-pointer"
+                onClick={() =>
+                  task?.id &&
+                  task?.state &&
+                  handleTaskClick(task.id, task.state)
+                }
+              >
                 <div>
                   <h3
                     className={`text-sm ${
@@ -165,7 +236,7 @@ function ControlOverviewPageFallback() {
 export default function ControlOverviewPage() {
   const { controlId } = useParams();
   const [queryRef, loadQuery] = useQueryLoader<ControlOverviewPageQueryType>(
-    controlOverviewPageQuery,
+    controlOverviewPageQuery
   );
 
   useEffect(() => {

apps/console/src/pages/__generated__/ControlOverviewPageUpdateTaskStateMutation.graphql.ts

@@ -0,0 +1,128 @@
+/**
+ * @generated SignedSource<<191b5c89c10a7d949997216a79f49598>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type TaskState = "DONE" | "TODO";
+export type UpdateTaskStateInput = {
+  state: TaskState;
+  taskId: string;
+};
+export type ControlOverviewPageUpdateTaskStateMutation$variables = {
+  input: UpdateTaskStateInput;
+};
+export type ControlOverviewPageUpdateTaskStateMutation$data = {
+  readonly updateTaskState: {
+    readonly taskEdge: {
+      readonly node: {
+        readonly id: string;
+        readonly state: TaskState;
+      };
+    };
+  };
+};
+export type ControlOverviewPageUpdateTaskStateMutation = {
+  response: ControlOverviewPageUpdateTaskStateMutation$data;
+  variables: ControlOverviewPageUpdateTaskStateMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateTaskStatePayload",
+    "kind": "LinkedField",
+    "name": "updateTaskState",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "TaskEdge",
+        "kind": "LinkedField",
+        "name": "taskEdge",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "Task",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "state",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ControlOverviewPageUpdateTaskStateMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ControlOverviewPageUpdateTaskStateMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "ea56b9c3f41a4b69a3643884f8f2306d",
+    "id": null,
+    "metadata": {},
+    "name": "ControlOverviewPageUpdateTaskStateMutation",
+    "operationKind": "mutation",
+    "text": "mutation ControlOverviewPageUpdateTaskStateMutation(\n  $input: UpdateTaskStateInput!\n) {\n  updateTaskState(input: $input) {\n    taskEdge {\n      node {\n        id\n        state\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "3113753b83cf06bd8aca41610c1e89fd";
+
+export default node;