Fix increment tab counters when linking nodes

Fix #171

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/tasks/TaskFormDialog.tsx

@@ -15,7 +15,7 @@ import type { ReactNode } from "react";
 import { useTranslate } from "@probo/i18n";
 import { Breadcrumb } from "@probo/ui";
 import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
+import { useFragment, useRelayEnvironment } from "react-relay";
 import { z } from "zod";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
@@ -24,6 +24,7 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
 import type { TaskFormDialogFragment$key } from "./__generated__/TaskFormDialogFragment.graphql";
 import { MeasureSelectField } from "/components/form/MeasureSelectField";
 import { Controller } from "react-hook-form";
+import { updateStoreCounter } from "/hooks/useMutationWithIncrement";
 
 const taskFragment = graphql`
   fragment TaskFormDialogFragment on Task {
@@ -93,6 +94,7 @@ export default function TaskFormDialog(props: Props) {
   const dialogRef = props.ref ?? useDialogRef();
   const organizationId = useOrganizationId();
   const task = useFragment(taskFragment, props.task);
+  const relayEnv = useRelayEnvironment();
   const [mutate] = task
     ? useMutationWithToasts(taskUpdateMutation, {
         successMessage: __("Task updated successfully."),
@@ -142,6 +144,9 @@ export default function TaskFormDialog(props: Props) {
           },
           connections: [props.connection!],
         },
+        onCompleted: () => {
+          updateStoreCounter(relayEnv, data.measureId, "tasks(first:0)", 1);
+        },
       });
       reset();
     }

apps/console/src/components/tasks/TasksCard.tsx

@@ -16,7 +16,7 @@ import {
   useDialogRef,
 } from "@probo/ui";
 import { Fragment } from "react";
-import { graphql, useMutation } from "react-relay";
+import { graphql, useMutation, useRelayEnvironment } from "react-relay";
 import { useTranslate } from "@probo/i18n";
 import { usePageTitle } from "@probo/hooks";
 import type { ItemOf } from "/types";
@@ -24,9 +24,10 @@ import TaskFormDialog, {
   taskUpdateMutation,
 } from "/components/tasks/TaskFormDialog";
 import { useOrganizationId } from "/hooks/useOrganizationId";
-import { Link, useLocation } from "react-router";
+import { Link, useLocation, useParams } from "react-router";
 import { promisifyMutation } from "@probo/helpers";
 import type { TaskFormDialogFragment$key } from "./__generated__/TaskFormDialogFragment.graphql";
+import { updateStoreCounter } from "/hooks/useMutationWithIncrement";
 
 type Props = {
   tasks: ({
@@ -94,15 +95,13 @@ export default function TasksCard({ tasks, connectionId }: Props) {
                         <TaskStateIcon state={h.state!} />
                         {h.label}
                       </h2>
-                      {tasksPerHash
-                        .get(h.hash)
-                        ?.map((task) => (
-                          <TaskRow
-                            key={task.id}
-                            task={task}
-                            connectionId={connectionId}
-                          />
-                        ))}
+                      {tasksPerHash.get(h.hash)?.map((task) => (
+                        <TaskRow
+                          key={task.id}
+                          task={task}
+                          connectionId={connectionId}
+                        />
+                      ))}
                     </Fragment>
                   ))
               : // Todo and Done tab simply list todos
@@ -142,7 +141,9 @@ function TaskRow(props: TaskRowProps) {
   const { __ } = useTranslate();
   const confirm = useConfirm();
   const [deleteTask] = useMutation(deleteMutation);
+  const params = useParams<{ measureId?: string }>();
 
+  const relayEnv = useRelayEnvironment();
   const [updateTask, isUpdating] = useMutation(taskUpdateMutation);
 
   const onToggle = () => {
@@ -164,6 +165,16 @@ function TaskRow(props: TaskRowProps) {
             input: { taskId: props.task.id },
             connections: [props.connectionId],
           },
+          onCompleted: () => {
+            if (params.measureId) {
+              updateStoreCounter(
+                relayEnv,
+                params.measureId,
+                "tasks(first:0)",
+                -1
+              );
+            }
+          },
         }),
       {
         message: "Are you sure you want to delete this task?",