refactor: update create/update issue modal to use currently active store's create/update method. (#3395)

* refactor: update `create/update issue` modal to use currently active store's create/update method.

* chore: add condition to avoid multiple API calls if the current store is MODULE or CYCLE.

* remove: console log

* chore: update `currentStore` to `storeType`.

web/components/command-palette/command-palette.tsx

@@ -60,6 +60,7 @@ export const CommandPalette: FC = observer(() => {
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
     isAnyModalOpen,
+    createIssueStoreType,
   } = commandPalette;
 
   const { setToastAlert } = useToast();
@@ -216,6 +217,7 @@ export const CommandPalette: FC = observer(() => {
         isOpen={isCreateIssueModalOpen}
         onClose={() => toggleCreateIssueModal(false)}
         data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_id: moduleId.toString() } : undefined}
+        storeType={createIssueStoreType}
       />
 
       {workspaceSlug && projectId && issueId && issueDetails && (

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -75,7 +75,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
               setTrackElement("MODULE_EMPTY_STATE");
-              toggleCreateIssueModal(true);
+              toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
             },
           }}
           secondaryButton={

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -43,7 +43,7 @@ export interface IBaseKanBanLayout {
   };
   showLoader?: boolean;
   viewId?: string;
-  currentStore?: TCreateModalStoreTypes;
+  storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
 }
@@ -62,7 +62,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     issueActions,
     showLoader,
     viewId,
-    currentStore,
+    storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
   } = props;
@@ -277,7 +277,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
             viewId={viewId}
             disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
             canEditProperties={canEditProperties}
-            currentStore={currentStore}
+            storeType={storeType}
             addIssuesToView={addIssuesToView}
           />
         </DragDropContext>

web/components/issues/issue-layouts/kanban/default.tsx

@@ -42,7 +42,7 @@ export interface IGroupByKanBan {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   disableIssueCreation?: boolean;
-  currentStore?: TCreateModalStoreTypes;
+  storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
 }
@@ -64,7 +64,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     quickAddCallback,
     viewId,
     disableIssueCreation,
-    currentStore,
+    storeType,
     addIssuesToView,
     canEditProperties,
   } = props;
@@ -107,7 +107,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                     count={(issueIds as TGroupedIssues)?.[_list.id]?.length || 0}
                     issuePayload={_list.payload}
                     disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
-                    currentStore={currentStore}
+                    storeType={storeType}
                     addIssuesToView={addIssuesToView}
                     kanbanFilters={kanbanFilters}
                     handleKanbanFilters={handleKanbanFilters}
@@ -163,7 +163,7 @@ export interface IKanBan {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   disableIssueCreation?: boolean;
-  currentStore?: TCreateModalStoreTypes;
+  storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
 }
@@ -184,7 +184,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     quickAddCallback,
     viewId,
     disableIssueCreation,
-    currentStore,
+    storeType,
     addIssuesToView,
     canEditProperties,
   } = props;
@@ -208,7 +208,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       quickAddCallback={quickAddCallback}
       viewId={viewId}
       disableIssueCreation={disableIssueCreation}
-      currentStore={currentStore}
+      storeType={storeType}
       addIssuesToView={addIssuesToView}
       canEditProperties={canEditProperties}
     />

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -25,7 +25,7 @@ interface IHeaderGroupByCard {
   handleKanbanFilters: any;
   issuePayload: Partial<TIssue>;
   disableIssueCreation?: boolean;
-  currentStore?: TCreateModalStoreTypes;
+  storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
 }
 
@@ -40,6 +40,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
     handleKanbanFilters,
     issuePayload,
     disableIssueCreation,
+    storeType,
     addIssuesToView,
   } = props;
   const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id);
@@ -83,7 +84,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
           fieldsToShow={["all"]}
         />
       ) : (
-        <CreateUpdateIssueModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
+        <CreateUpdateIssueModal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          data={issuePayload}
+          storeType={storeType}
+        />
       )}
       {renderExistingIssueModal && (
         <ExistingIssuesListModal

web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx

@@ -50,7 +50,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
       showLoader={true}
       QuickActions={CycleIssueQuickActions}
       viewId={cycleId?.toString() ?? ""}
-      currentStore={EIssuesStoreType.CYCLE}
+      storeType={EIssuesStoreType.CYCLE}
       addIssuesToView={(issueIds: string[]) => {
         if (!workspaceSlug || !projectId || !cycleId) throw new Error();
         return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);

web/components/issues/issue-layouts/kanban/roots/module-root.tsx

@@ -50,7 +50,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
       showLoader={true}
       QuickActions={ModuleIssueQuickActions}
       viewId={moduleId?.toString()}
-      currentStore={EIssuesStoreType.MODULE}
+      storeType={EIssuesStoreType.MODULE}
       addIssuesToView={(issueIds: string[]) => {
         if (!workspaceSlug || !projectId || !moduleId) throw new Error();
         return issues.addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);

web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx

@@ -52,7 +52,7 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
       issues={issues}
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
-      currentStore={EIssuesStoreType.PROFILE}
+      storeType={EIssuesStoreType.PROFILE}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
     />
   );

web/components/issues/issue-layouts/kanban/roots/project-root.tsx

@@ -43,7 +43,7 @@ export const KanBanLayout: React.FC = observer(() => {
       issuesFilter={issuesFilter}
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
-      currentStore={EIssuesStoreType.PROJECT}
+      storeType={EIssuesStoreType.PROJECT}
     />
   );
 });

web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx

@@ -35,7 +35,7 @@ export const ProjectViewKanBanLayout: React.FC<IViewKanBanLayout> = observer((pr
       issues={issues}
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
-      currentStore={EIssuesStoreType.PROJECT_VIEW}
+      storeType={EIssuesStoreType.PROJECT_VIEW}
       viewId={viewId?.toString()}
     />
   );

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -69,7 +69,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
   isDragStarted?: boolean;
   disableIssueCreation?: boolean;
-  currentStore?: TCreateModalStoreTypes;
+  storeType?: TCreateModalStoreTypes;
   enableQuickIssueCreate: boolean;
   canEditProperties: (projectId: string | undefined) => boolean;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
@@ -172,7 +172,7 @@ export interface IKanBanSwimLanes {
   showEmptyGroup: boolean;
   isDragStarted?: boolean;
   disableIssueCreation?: boolean;
-  currentStore?: TCreateModalStoreTypes;
+  storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   enableQuickIssueCreate: boolean;
   quickAddCallback?: (

web/components/issues/issue-layouts/list/base-list-root.tsx

@@ -48,7 +48,7 @@ interface IBaseListRoot {
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
   };
   viewId?: string;
-  currentStore: TCreateModalStoreTypes;
+  storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
 }
@@ -60,7 +60,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
     QuickActions,
     issueActions,
     viewId,
-    currentStore,
+    storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
   } = props;
@@ -134,7 +134,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
           enableIssueQuickAdd={!!enableQuickAdd}
           canEditProperties={canEditProperties}
           disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-          currentStore={currentStore}
+          storeType={storeType}
           addIssuesToView={addIssuesToView}
         />
       </div>

web/components/issues/issue-layouts/list/default.tsx

@@ -34,7 +34,7 @@ export interface IGroupByList {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   disableIssueCreation?: boolean;
-  currentStore: TCreateModalStoreTypes;
+  storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   viewId?: string;
 }
@@ -53,7 +53,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     quickAddCallback,
     viewId,
     disableIssueCreation,
-    currentStore,
+    storeType,
     addIssuesToView,
   } = props;
   // store hooks
@@ -116,7 +116,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                     count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
                     issuePayload={_list.payload}
                     disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
-                    currentStore={currentStore}
+                    storeType={storeType}
                     addIssuesToView={addIssuesToView}
                   />
                 </div>
@@ -166,7 +166,7 @@ export interface IList {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   disableIssueCreation?: boolean;
-  currentStore: TCreateModalStoreTypes;
+  storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
 }
 
@@ -184,7 +184,7 @@ export const List: React.FC<IList> = (props) => {
     enableIssueQuickAdd,
     canEditProperties,
     disableIssueCreation,
-    currentStore,
+    storeType,
     addIssuesToView,
   } = props;
 
@@ -203,7 +203,7 @@ export const List: React.FC<IList> = (props) => {
         quickAddCallback={quickAddCallback}
         viewId={viewId}
         disableIssueCreation={disableIssueCreation}
-        currentStore={currentStore}
+        storeType={storeType}
         addIssuesToView={addIssuesToView}
       />
     </div>

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -19,12 +19,12 @@ interface IHeaderGroupByCard {
   count: number;
   issuePayload: Partial<TIssue>;
   disableIssueCreation?: boolean;
-  currentStore: TCreateModalStoreTypes;
+  storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
 }
 
 export const HeaderGroupByCard = observer(
-  ({ icon, title, count, issuePayload, disableIssueCreation, currentStore, addIssuesToView }: IHeaderGroupByCard) => {
+  ({ icon, title, count, issuePayload, disableIssueCreation, storeType, addIssuesToView }: IHeaderGroupByCard) => {
     const router = useRouter();
     const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
 
@@ -101,7 +101,12 @@ export const HeaderGroupByCard = observer(
               fieldsToShow={["all"]}
             />
           ) : (
-            <CreateUpdateIssueModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
+            <CreateUpdateIssueModal
+              isOpen={isOpen}
+              onClose={() => setIsOpen(false)}
+              data={issuePayload}
+              storeType={storeType}
+            />
           )}
 
           {renderExistingIssueModal && (

web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx

@@ -34,7 +34,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {
       issues={issues}
       QuickActions={ArchivedIssueQuickActions}
       issueActions={issueActions}
-      currentStore={EIssuesStoreType.PROJECT}
+      storeType={EIssuesStoreType.PROJECT}
     />
   );
 });

web/components/issues/issue-layouts/list/roots/cycle-root.tsx

@@ -48,7 +48,7 @@ export const CycleListLayout: React.FC = observer(() => {
       QuickActions={CycleIssueQuickActions}
       issueActions={issueActions}
       viewId={cycleId?.toString()}
-      currentStore={EIssuesStoreType.CYCLE}
+      storeType={EIssuesStoreType.CYCLE}
       addIssuesToView={(issueIds: string[]) => {
         if (!workspaceSlug || !projectId || !cycleId) throw new Error();
         return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);

web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx

@@ -43,7 +43,7 @@ export const DraftIssueListLayout: FC = observer(() => {
       issues={issues}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
-      currentStore={EIssuesStoreType.PROJECT}
+      storeType={EIssuesStoreType.PROJECT}
     />
   );
 });

web/components/issues/issue-layouts/list/roots/module-root.tsx

@@ -48,7 +48,7 @@ export const ModuleListLayout: React.FC = observer(() => {
       QuickActions={ModuleIssueQuickActions}
       issueActions={issueActions}
       viewId={moduleId?.toString()}
-      currentStore={EIssuesStoreType.MODULE}
+      storeType={EIssuesStoreType.MODULE}
       addIssuesToView={(issueIds: string[]) => {
         if (!workspaceSlug || !projectId || !moduleId) throw new Error();
         return issues.addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);

web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx

@@ -52,7 +52,7 @@ export const ProfileIssuesListLayout: FC = observer(() => {
       issues={issues}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
-      currentStore={EIssuesStoreType.PROFILE}
+      storeType={EIssuesStoreType.PROFILE}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
     />
   );

web/components/issues/issue-layouts/list/roots/project-root.tsx

@@ -44,7 +44,7 @@ export const ListLayout: FC = observer(() => {
       issues={issues}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
-      currentStore={EIssuesStoreType.PROJECT}
+      storeType={EIssuesStoreType.PROJECT}
     />
   );
 });

web/components/issues/issue-layouts/list/roots/project-view-root.tsx

@@ -36,7 +36,7 @@ export const ProjectViewListLayout: React.FC<IViewListLayout> = observer((props)
       issues={issues}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
-      currentStore={EIssuesStoreType.PROJECT_VIEW}
+      storeType={EIssuesStoreType.PROJECT_VIEW}
       viewId={viewId?.toString()}
     />
   );

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -11,6 +11,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
 
 export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
@@ -58,6 +60,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
+        storeType={EIssuesStoreType.PROJECT}
       />
       <CustomMenu
         placement="bottom-start"

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -11,6 +11,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
 
 export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
@@ -58,6 +60,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
+        storeType={EIssuesStoreType.CYCLE}
       />
       <CustomMenu
         placement="bottom-start"

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -11,6 +11,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
 
 export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
@@ -58,6 +60,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
+        storeType={EIssuesStoreType.MODULE}
       />
       <CustomMenu
         placement="bottom-start"

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -14,6 +14,7 @@ import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constant
 import { EUserProjectRoles } from "constants/project";
+import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
@@ -67,6 +68,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
+        storeType={EIssuesStoreType.PROJECT}
       />
       <CustomMenu
         placement="bottom-start"

web/components/issues/issue-modal/form.tsx

@@ -65,7 +65,6 @@ const fileService = new FileService();
 
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const { data, onChange, onClose, onSubmit, projectId, isCreateMoreToggleEnabled, onCreateMoreToggleChange } = props;
-  console.log("onCreateMoreToggleChange", typeof onCreateMoreToggleChange);
   // states
   const [labelModal, setLabelModal] = useState(false);
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);

web/components/issues/issue-modal/modal.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useIssues, useProject } from "hooks/store";
+import { useApplication, useCycle, useIssues, useModule, useProject, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -12,7 +11,7 @@ import { IssueFormRoot } from "./form";
 // types
 import type { TIssue } from "@plane/types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
+import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
 
 export interface IssuesModalProps {
   data?: Partial<TIssue>;
@@ -20,31 +19,108 @@ export interface IssuesModalProps {
   onClose: () => void;
   onSubmit?: (res: TIssue) => Promise<void>;
   withDraftIssueWrapper?: boolean;
+  storeType?: TCreateModalStoreTypes;
 }
 
 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true } = props;
+  const {
+    data,
+    isOpen,
+    onClose,
+    onSubmit,
+    withDraftIssueWrapper = true,
+    storeType = EIssuesStoreType.PROJECT,
+  } = props;
   // states
   const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
   const [createMore, setCreateMore] = useState(false);
-  // router
+  const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
   // store hooks
+  const {
+    eventTracker: { postHogEventTracker },
+  } = useApplication();
+  const { currentUser } = useUser();
+  const {
+    router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
+  } = useApplication();
+  const { currentWorkspace } = useWorkspace();
   const { workspaceProjectIds } = useProject();
-  const {
+  const { fetchCycleDetails } = useCycle();
-    issues: { createIssue, updateIssue },
+  const { fetchModuleDetails } = useModule();
-  } = useIssues(EIssuesStoreType.PROJECT);
+  const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
-  const {
+  const { issues: moduleIssues } = useIssues(EIssuesStoreType.MODULE);
-    issues: { addIssueToCycle },
+  const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
-  } = useIssues(EIssuesStoreType.CYCLE);
+  const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const {
+  const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
-    issues: { addIssueToModule },
+  // store mapping based on current store
-  } = useIssues(EIssuesStoreType.MODULE);
+  const issueStores = {
+    [EIssuesStoreType.PROJECT]: {
+      store: projectIssues,
+      dataIdToUpdate: activeProjectId,
+      viewId: undefined,
+    },
+    [EIssuesStoreType.PROJECT_VIEW]: {
+      store: viewIssues,
+      dataIdToUpdate: activeProjectId,
+      viewId: projectViewId,
+    },
+    [EIssuesStoreType.PROFILE]: {
+      store: profileIssues,
+      dataIdToUpdate: currentUser?.id || undefined,
+      viewId: undefined,
+    },
+    [EIssuesStoreType.CYCLE]: {
+      store: cycleIssues,
+      dataIdToUpdate: activeProjectId,
+      viewId: cycleId,
+    },
+    [EIssuesStoreType.MODULE]: {
+      store: moduleIssues,
+      dataIdToUpdate: activeProjectId,
+      viewId: moduleId,
+    },
+  };
   // toast alert
   const { setToastAlert } = useToast();
   // local storage
   const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
+  // current store details
+  const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[storeType];
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProjectId being set to some other project
+    if (!isOpen) {
+      setActiveProjectId(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_id) {
+      setActiveProjectId(data.project_id);
+      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 && !activeProjectId)
+      setActiveProjectId(projectId ?? workspaceProjectIds?.[0]);
+  }, [data, projectId, workspaceProjectIds, isOpen, activeProjectId]);
+
+  const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
+    if (!workspaceSlug || !activeProjectId) return;
+
+    await cycleIssues.addIssueToCycle(workspaceSlug, issue.project_id, cycleId, [issue.id]);
+    fetchCycleDetails(workspaceSlug, activeProjectId, cycleId);
+  };
+
+  const addIssueToModule = async (issue: TIssue, moduleId: string) => {
+    if (!workspaceSlug || !activeProjectId) return;
+
+    await moduleIssues.addIssueToModule(workspaceSlug, activeProjectId, moduleId, [issue.id]);
+    fetchModuleDetails(workspaceSlug, activeProjectId, moduleId);
+  };
 
   const handleCreateMoreToggleChange = (value: boolean) => {
     setCreateMore(value);
@@ -55,19 +131,41 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
       const draftIssue = JSON.stringify(changesMade);
       setLocalStorageDraftIssue(draftIssue);
     }
+    setActiveProjectId(null);
     onClose();
   };
 
   const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
-    if (!workspaceSlug || !payload.project_id) return undefined;
+    if (!workspaceSlug || !dataIdToUpdate) return;
 
     try {
-      const response = await createIssue(workspaceSlug.toString(), payload.project_id, payload);
+      const response = await currentIssueStore.createIssue(workspaceSlug, dataIdToUpdate, payload, viewId);
+      if (!response) throw new Error();
+
+      currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
+
+      if (payload.cycle_id && payload.cycle_id !== "" && storeType !== EIssuesStoreType.CYCLE)
+        await addIssueToCycle(response, payload.cycle_id);
+      if (payload.module_id && payload.module_id !== "" && storeType !== EIssuesStoreType.MODULE)
+        await addIssueToModule(response, payload.module_id);
+
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
+      postHogEventTracker(
+        "ISSUE_CREATED",
+        {
+          ...response,
+          state: "SUCCESS",
+        },
+        {
+          isGrouping: true,
+          groupType: "Workspace_metrics",
+          groupId: currentWorkspace?.id!,
+        }
+      );
       !createMore && handleClose();
       return response;
     } catch (error) {
@@ -76,19 +174,42 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         title: "Error!",
         message: "Issue could not be created. Please try again.",
       });
+      postHogEventTracker(
+        "ISSUE_CREATED",
+        {
+          state: "FAILED",
+        },
+        {
+          isGrouping: true,
+          groupType: "Workspace_metrics",
+          groupId: currentWorkspace?.id!,
+        }
+      );
     }
   };
 
   const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
-    if (!workspaceSlug || !payload.project_id || !data?.id) return undefined;
+    if (!workspaceSlug || !dataIdToUpdate || !data?.id) return;
 
     try {
-      const response = await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload);
+      const response = await currentIssueStore.updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId);
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue updated successfully.",
       });
+      postHogEventTracker(
+        "ISSUE_UPDATED",
+        {
+          ...response,
+          state: "SUCCESS",
+        },
+        {
+          isGrouping: true,
+          groupType: "Workspace_metrics",
+          groupId: currentWorkspace?.id!,
+        }
+      );
       handleClose();
       return response;
     } catch (error) {
@@ -97,39 +218,39 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         title: "Error!",
         message: "Issue could not be created. Please try again.",
       });
+      postHogEventTracker(
+        "ISSUE_UPDATED",
+        {
+          state: "FAILED",
+        },
+        {
+          isGrouping: true,
+          groupType: "Workspace_metrics",
+          groupId: currentWorkspace?.id!,
+        }
+      );
     }
   };
 
   const handleFormSubmit = async (formData: Partial<TIssue>) => {
-    if (!workspaceSlug || !formData.project_id) return;
+    if (!workspaceSlug || !dataIdToUpdate || !storeType) return;
 
     const payload: Partial<TIssue> = {
       ...formData,
       description_html: formData.description_html ?? "<p></p>",
     };
 
-    let res: TIssue | undefined = undefined;
+    let response: TIssue | undefined = undefined;
-    if (!data?.id) res = await handleCreateIssue(payload);
+    if (!data?.id) response = await handleCreateIssue(payload);
-    else res = await handleUpdateIssue(payload);
+    else response = await handleUpdateIssue(payload);
 
-    // add issue to cycle if cycle is selected, and cycle is different from current cycle
+    if (response != undefined && onSubmit) await onSubmit(response);
-    if (formData.cycle_id && res && (!data?.id || formData.cycle_id !== data?.cycle_id))
-      await addIssueToCycle(workspaceSlug.toString(), formData.project_id, formData.cycle_id, [res.id]);
-
-    // add issue to module if module is selected, and module is different from current module
-    if (formData.module_id && res && (!data?.id || formData.module_id !== data?.module_id))
-      await addIssueToModule(workspaceSlug.toString(), formData.project_id, formData.module_id, [res.id]);
-
-    if (res != undefined && onSubmit) await onSubmit(res);
   };
 
   const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);
 
   // don't open the modal if there are no projects
-  if (!workspaceProjectIds || workspaceProjectIds.length === 0) return null;
+  if (!workspaceProjectIds || workspaceProjectIds.length === 0 || !activeProjectId) return null;
-
-  // if project id is present in the router query, use that as the selected project id, otherwise use the first project id
-  const selectedProjectId = projectId ? projectId.toString() : workspaceProjectIds[0];
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -161,22 +282,30 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                 {withDraftIssueWrapper ? (
                   <DraftIssueLayout
                     changesMade={changesMade}
-                    data={data}
+                    data={{
+                      ...data,
+                      cycle_id: cycleId ?? null,
+                      module_id: moduleId ?? null,
+                    }}
                     onChange={handleFormChange}
                     onClose={handleClose}
                     onSubmit={handleFormSubmit}
-                    projectId={selectedProjectId}
+                    projectId={activeProjectId}
                     isCreateMoreToggleEnabled={createMore}
                     onCreateMoreToggleChange={handleCreateMoreToggleChange}
                   />
                 ) : (
                   <IssueFormRoot
-                    data={data}
+                    data={{
+                      ...data,
+                      cycle_id: cycleId ?? null,
+                      module_id: moduleId ?? null,
+                    }}
                     onClose={() => handleClose(false)}
                     isCreateMoreToggleEnabled={createMore}
                     onCreateMoreToggleChange={handleCreateMoreToggleChange}
                     onSubmit={handleFormSubmit}
-                    projectId={selectedProjectId}
+                    projectId={activeProjectId}
                   />
                 )}
               </Dialog.Panel>

web/store/issue/cycle/issue.store.ts

@@ -180,9 +180,16 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       if (!cycleId) throw new Error("Cycle Id is required");
 
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
-      const issueToCycle = await this.addIssueToCycle(workspaceSlug, projectId, cycleId, [response.id]);
+      await this.addIssueToCycle(workspaceSlug, projectId, cycleId, [response.id]);
 
-      return issueToCycle;
+      runInAction(() => {
+        update(this.issues, cycleId, (cycleIssueIds) => {
+          if (!cycleIssueIds) return [response.id];
+          else return concat(cycleIssueIds, [response.id]);
+        });
+      });
+
+      return response;
     } catch (error) {
       throw error;
     }
@@ -261,15 +268,6 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
   addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
     try {
-      runInAction(() => {
-        update(this.issues, cycleId, (cycleIssueIds) => {
-          if (!cycleIssueIds) return issueIds;
-          else return concat(cycleIssueIds, issueIds);
-        });
-      });
-
-      issueIds.map((issueId) => this.rootStore.issues.updateIssue(issueId, { cycle_id: cycleId }));
-
       const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
         issues: issueIds,
       });

web/store/issue/module/issue.store.ts

@@ -173,7 +173,15 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       if (!moduleId) throw new Error("Module Id is required");
 
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
-      const issueToModule = await this.addIssueToModule(workspaceSlug, projectId, moduleId, [response.id]);
+      await this.addIssueToModule(workspaceSlug, projectId, moduleId, [response.id]);
+
+      runInAction(() => {
+        update(this.issues, moduleId, (moduleIssueIds) => {
+          if (!moduleIssueIds) return [response.id];
+          else return concat(moduleIssueIds, [response.id]);
+        });
+      });
+
       return response;
     } catch (error) {
       throw error;
@@ -252,15 +260,6 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
 
   addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
     try {
-      runInAction(() => {
-        update(this.issues, moduleId, (moduleIssueIds) => {
-          if (!moduleIssueIds) return issueIds;
-          else return concat(moduleIssueIds, issueIds);
-        });
-      });
-
-      issueIds.map((issueId) => this.rootStore.issues.updateIssue(issueId, { module_id: moduleId }));
-
       const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectId, moduleId, {
         issues: issueIds,
       });