wip: add ability to change project on edit / new pages.

twenty-backend/lib/twenty-backend/graphql/type/project.rb

@@ -1,7 +1,7 @@
 module Twenty::GraphQL::Type
   class Project < GraphQL::Schema::Object
     require_relative "task"
-    field :id, ID, null: false
+    field :id, Int, null: false
     field :name, String, null: false
     field :path, String, null: false
     field :color, String, null: false

twenty-backend/share/twenty-backend/schema.graphql

@@ -35,7 +35,7 @@ type Mutation {
 
 type Project {
   color: String!
-  id: ID!
+  id: Int!
   name: String!
   path: String!
   tasks: [Task!]!

twenty-frontend/src/js/components/Task.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Select } from "/components/forms/Select";
 import { useCreateTask } from "/hooks/mutations/useCreateTask";
 import { useUpdateTask } from "/hooks/mutations/useUpdateTask";
 import { useFindTask } from "/hooks/queries/useFindTask";
 import { useProjects } from "/hooks/queries/useProjects";
-import { Task, Project, TaskInput } from "/types/schema";
+import { Task, Project, TaskInput, Maybe } from "/types/schema";
 import { rendermd } from "/lib/markdown-utils";
 import classnames from "classnames";
 
@@ -22,31 +21,44 @@ const DEFAULT_TASK_CONTENT = [
 ].join("\n");
 
 export function Task({ taskId }: { taskId?: number }) {
-  const { register, handleSubmit, watch, setValue: set } = useForm<TaskInput>();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue: set,
+  } = useForm<TaskInput>({
+    defaultValues: { projectId: 1 },
+  });
   const [isEditable, setIsEditable] = useState<boolean>(!taskId);
   const [createTask] = useCreateTask();
-  const [updateTask] = useUpdateTask();
+  const updateTask = useUpdateTask();
   const { data: taskData, loading: findingTask } = useFindTask(Number(taskId));
   const { data: projectsData, loading: findingProjects } = useProjects();
   const task = taskData?.findTask;
   const projects = projectsData?.projects;
   const content = watch("content");
+  const projectId: Maybe<number> = watch("projectId");
   const onSave = (input: TaskInput) => {
     if (taskId) {
-      updateTask({ variables: { taskId, input } })
-        .then(() => location.href = '/tasks');
+      updateTask({ variables: { taskId, input } }).then(
+        () => (location.href = "/tasks"),
+      );
     } else {
-      createTask({ variables: { input } })
-        .then(() => location.href = '/tasks');
+      createTask({ variables: { input } }).then(
+        () => (location.href = "/tasks"),
+      );
     }
   };
 
   useEffect(() => {
     const title = task ? task.title : "New task";
     document.title = title;
-    set("projectId", 1);
   }, []);
 
+  useEffect(() => {
+    set("projectId", task?.project?.id);
+  }, [task?.project?.id]);
+
   if (findingProjects || findingTask) {
     return null;
   }
@@ -72,7 +84,15 @@ export function Task({ taskId }: { taskId?: number }) {
         </div>
         <div className="panel-body">
           <div>
-            <Select {...register("projectId")} className="form">
+            <select
+              {...register("projectId")}
+              className="form"
+              value={projectId}
+              onChange={event => {
+                const v: string = event.target.value;
+                set("projectId", Number(v));
+              }}
+            >
               {projects.map((project: Project, key: number) => {
                 return (
                   <option key={key} value={project.id}>
@@ -80,7 +100,7 @@ export function Task({ taskId }: { taskId?: number }) {
                   </option>
                 );
               })}
-            </Select>
+            </select>
           </div>
           <div>
             <input

twenty-frontend/src/js/hooks/mutations/useUpdateTask.ts

@@ -1,4 +1,8 @@
-import { UpdateTaskPayload, MutationUpdateTaskArgs } from "/types/schema";
+import {
+  UpdateTaskPayload,
+  MutationUpdateTaskArgs,
+  TaskInput,
+} from "/types/schema";
 import { gql, useMutation } from "@apollo/client";
 
 const GQL = gql`
@@ -9,6 +13,18 @@ const GQL = gql`
   }
 `;
 
+type TArgs = {
+  variables: { taskId: number; input: TaskInput };
+};
+
 export function useUpdateTask() {
-  return useMutation<UpdateTaskPayload, MutationUpdateTaskArgs>(GQL);
+  const [update] = useMutation<UpdateTaskPayload, MutationUpdateTaskArgs>(GQL);
+  return ({ variables: { taskId, input }, ...rest }: TArgs) => {
+    const projectId = Number(input.projectId);
+    const variables = {
+      taskId,
+      input: { ...input, ...{ projectId } },
+    };
+    return update({ variables, ...rest });
+  };
 }

twenty-frontend/src/js/types/schema.ts

@@ -77,7 +77,7 @@ export type MutationUpdateTaskArgs = {
 export type Project = {
   __typename?: "Project";
   color: Scalars["String"]["output"];
-  id: Scalars["ID"]["output"];
+  id: Scalars["Int"]["output"];
   name: Scalars["String"]["output"];
   path: Scalars["String"]["output"];
   tasks: Array<Task>;