fix: create update cycle modal project id pre-load data updated (#3502)

web/components/cycles/form.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // components
 import { DateDropdown, ProjectDropdown } from "components/dropdowns";
@@ -11,19 +12,28 @@ import { ICycle } from "@plane/types";
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
   handleClose: () => void;
+  status: boolean;
   projectId: string;
   setActiveProject: (projectId: string) => void;
   data?: ICycle | null;
 };
 
+const defaultValues: Partial<ICycle> = {
+  name: "",
+  description: "",
+  start_date: null,
+  end_date: null,
+};
+
 export const CycleForm: React.FC<Props> = (props) => {
-  const { handleFormSubmit, handleClose, projectId, setActiveProject, data } = props;
+  const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data } = props;
   // form data
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
     watch,
+    reset,
   } = useForm<ICycle>({
     defaultValues: {
       project: projectId,
@@ -34,6 +44,13 @@ export const CycleForm: React.FC<Props> = (props) => {
     },
   });
 
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
   const startDate = watch("start_date");
   const endDate = watch("end_date");
 

web/components/cycles/modal.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useApplication, useCycle } from "hooks/store";
+import { useApplication, useCycle, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -25,11 +25,12 @@ const cycleService = new CycleService();
 export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
   const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
   // states
-  const [activeProject, setActiveProject] = useState<string>(projectId);
+  const [activeProject, setActiveProject] = useState<string | null>(null);
   // store hooks
   const {
     eventTracker: { postHogEventTracker },
   } = useApplication();
+  const { workspaceProjectIds } = useProject();
   const { createCycle, updateCycleDetails } = useCycle();
   // toast alert
   const { setToastAlert } = useToast();
@@ -134,6 +135,27 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
       });
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
+      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
+  }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -164,7 +186,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
-                  projectId={activeProject}
+                  status={data ? true : false}
+                  projectId={activeProject ?? ""}
                   setActiveProject={setActiveProject}
                   data={data}
                 />