refactor: issues folder structure

apps/app/components/common/list-view/single-issue.tsx

@@ -5,16 +5,16 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issues.service";
 import workspaceService from "services/workspace.service";
 import stateService from "services/state.service";
-// headless ui
+// components
-import { Listbox, Transition } from "@headlessui/react";
+import { DeleteIssueModal } from "components/issues";
 // ui
 import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
-// components
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 // helpers
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -152,7 +152,7 @@ const SingleListIssue: React.FC<Props> = ({
 
   return (
     <>
-      <ConfirmIssueDeletion
+      <DeleteIssueModal
         handleClose={() => setDeleteIssue(undefined)}
         isOpen={!!deleteIssue}
         data={deleteIssue}

apps/app/components/issues/activity.tsx

@@ -14,7 +14,7 @@ import {
 // services
 import issuesServices from "services/issues.service";
 // components
-import CommentCard from "components/project/issues/issue-detail/comment/issue-comment-card";
+import { CommentCard } from "components/issues/comment";
 // ui
 import { Loader } from "components/ui";
 // icons
@@ -76,7 +76,7 @@ const activityDetails: {
   },
 };
 
-const IssueActivitySection: React.FC<{
+export const IssueActivitySection: React.FC<{
   issueActivities: IIssueActivity[];
   mutate: KeyedMutator<IIssueActivity[]>;
 }> = ({ issueActivities, mutate }) => {
@@ -216,7 +216,7 @@ const IssueActivitySection: React.FC<{
                   </div>
                 </div>
               );
-            } else if ("comment_json" in activity) {
+            } else if ("comment_json" in activity)
               return (
                 <CommentCard
                   key={activity.id}
@@ -225,7 +225,6 @@ const IssueActivitySection: React.FC<{
                   handleCommentDeletion={onCommentDelete}
                 />
               );
-            }
           })}
         </div>
       ) : (
@@ -247,5 +246,3 @@ const IssueActivitySection: React.FC<{
     </>
   );
 };
-
-export default IssueActivitySection;

apps/app/components/issues/board-view/index.tsx

@@ -14,10 +14,9 @@ import stateServices from "services/state.service";
 import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
 // components
-import SingleBoard from "components/project/issues/BoardView/single-board";
+import SingleBoard from "components/issues/board-view/single-board";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { CreateUpdateIssueModal } from "components/issues/modal";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 // ui
 import { Spinner } from "components/ui";
 // types
@@ -185,7 +184,7 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
 
   return (
     <>
-      <ConfirmIssueDeletion
+      <DeleteIssueModal
         isOpen={isIssueDeletionOpen}
         handleClose={() => setIsIssueDeletionOpen(false)}
         data={issueDeletionData}

apps/app/components/issues/comment/add-comment.tsx

@@ -28,7 +28,8 @@ const defaultValues: Partial<IIssueComment> = {
   comment_html: "",
   comment_json: "",
 };
-const AddIssueComment: React.FC<{
+
+export const AddComment: React.FC<{
   mutate: KeyedMutator<IIssueActivity[]>;
 }> = ({ mutate }) => {
   const {
@@ -111,5 +112,3 @@ const AddIssueComment: React.FC<{
     </div>
   );
 };
-
-export default AddIssueComment;

apps/app/components/issues/comment/comment-card.tsx

@@ -24,7 +24,7 @@ type Props = {
   handleCommentDeletion: (comment: string) => void;
 };
 
-const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
+export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
   const { user } = useUser();
 
   const [isEditing, setIsEditing] = useState(false);
@@ -130,5 +130,3 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
     </div>
   );
 };
-
-export default CommentCard;

apps/app/components/issues/comment/index.ts

@@ -0,0 +1,2 @@
+export * from "./add-comment";
+export * from "./comment-card";

apps/app/components/issues/delete-issue-modal.tsx

@@ -25,7 +25,7 @@ type Props = {
   data?: IIssue;
 };
 
-const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
   const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -43,8 +43,6 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
     handleClose();
   };
 
-  console.log(data);
-
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
     if (!data || !workspaceSlug) return;
@@ -173,5 +171,3 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
     </Transition.Root>
   );
 };
-
-export default ConfirmIssueDeletion;

apps/app/components/issues/form.tsx

@@ -16,7 +16,7 @@ import {
   IssueStateSelect,
 } from "components/issues/select";
 import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
+import { CreateUpdateStateModal } from "components/states";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
 import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";

apps/app/components/issues/index.ts

@@ -1,5 +1,13 @@
-export * from "./list-item";
+export * from "./board-view";
+export * from "./comment";
+export * from "./activity";
+export * from "./delete-issue-modal";
 export * from "./description-form";
-export * from "./sub-issue-list";
 export * from "./form";
+export * from "./list-view";
 export * from "./modal";
+export * from "./my-issues-list-item";
+export * from "./parent-issues-list-modal";
+export * from "./sidebar";
+export * from "./sub-issues-list";
+export * from "./sub-issues-list-modal";

apps/app/components/issues/list-view.tsx

@@ -31,7 +31,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
+export const IssuesListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
   const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
@@ -180,5 +180,3 @@ const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
     </>
   );
 };
-
-export default ListView;

apps/app/components/issues/modal.tsx

@@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // components
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
+import { CreateUpdateStateModal } from "components/states";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 import { IssueForm } from "components/issues";
 // common

apps/app/components/issues/my-issues-list-item.tsx

@@ -24,10 +24,7 @@ type Props = {
   removeIssue?: () => void;
 };
 
-export const IssueListItem: React.FC<Props> = (props) => {
+export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
-  // const { type, issue, properties, editIssue, handleDeleteIssue, removeIssue } = props;
-  const { issue, properties } = props;
-  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 

apps/app/components/issues/parent-issues-list-modal.tsx

@@ -21,7 +21,7 @@ type Props = {
   customDisplay?: JSX.Element;
 };
 
-const IssuesListModal: React.FC<Props> = ({
+export const ParentIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
   value,
@@ -227,5 +227,3 @@ const IssuesListModal: React.FC<Props> = ({
     </>
   );
 };
-
-export default IssuesListModal;

apps/app/components/issues/select/index.ts

@@ -1,6 +1,6 @@
 export * from "./assignee";
 export * from "./label";
-export * from "./parent-issue";
+export * from "./parent";
 export * from "./priority";
 export * from "./project";
 export * from "./state";

apps/app/components/issues/select/parent.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Controller, Control } from "react-hook-form";
 // components
-import IssuesListModal from "components/project/issues/issues-list-modal";
+import { ParentIssuesListModal } from "components/issues";
 // types
 import type { IIssue } from "types";
 
@@ -17,7 +17,7 @@ export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen,
     control={control}
     name="parent"
     render={({ field: { onChange } }) => (
-      <IssuesListModal
+      <ParentIssuesListModal
         isOpen={isOpen}
         handleClose={() => setIsOpen(false)}
         onChange={onChange}

apps/app/components/issues/sidebar-select/assignee.tsx

@@ -27,7 +27,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -143,5 +143,3 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) =
     </div>
   );
 };
-
-export default SelectAssignee;

apps/app/components/issues/sidebar-select/blocked.tsx

@@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
 // ui
 import { Button } from "components/ui";
 // icons
-import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue, UserAuth } from "types";
@@ -34,7 +34,12 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
+export const SidebarBlockedSelect: React.FC<Props> = ({
+  submitChanges,
+  issuesList,
+  watch,
+  userAuth,
+}) => {
   const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
@@ -301,5 +306,3 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
     </div>
   );
 };
-
-export default SelectBlocked;

apps/app/components/issues/sidebar-select/blocker.tsx

@@ -34,7 +34,12 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
+export const SidebarBlockerSelect: React.FC<Props> = ({
+  submitChanges,
+  issuesList,
+  watch,
+  userAuth,
+}) => {
   const [query, setQuery] = useState("");
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
@@ -299,5 +304,3 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, user
     </div>
   );
 };
-
-export default SelectBlocker;

apps/app/components/issues/sidebar-select/cycle.tsx

@@ -22,7 +22,11 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
+export const SidebarCycleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleCycleChange,
+  userAuth,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
@@ -98,5 +102,3 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth
     </div>
   );
 };
-
-export default SelectCycle;

apps/app/components/issues/sidebar-select/index.ts

@@ -0,0 +1,8 @@
+export * from "./assignee";
+export * from "./blocked";
+export * from "./blocker";
+export * from "./cycle";
+export * from "./module";
+export * from "./parent";
+export * from "./priority";
+export * from "./state";

apps/app/components/issues/sidebar-select/module.tsx

@@ -21,7 +21,7 @@ type Props = {
   handleModuleChange: (module: IModule) => void;
 };
 
-const SelectModule: React.FC<Props> = ({ control, handleModuleChange }) => {
+export const SidebarModuleSelect: React.FC<Props> = ({ control, handleModuleChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -76,5 +76,3 @@ const SelectModule: React.FC<Props> = ({ control, handleModuleChange }) => {
     </div>
   );
 };
-
-export default SelectModule;

apps/app/components/issues/sidebar-select/parent.tsx

@@ -10,7 +10,7 @@ import { UserIcon } from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
 // components
-import IssuesListModal from "components/project/issues/issues-list-modal";
+import { ParentIssuesListModal } from "components/issues";
 // icons
 // types
 import { IIssue, UserAuth } from "types";
@@ -26,7 +26,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectParent: React.FC<Props> = ({
+export const SidebarParentSelect: React.FC<Props> = ({
   control,
   submitChanges,
   issuesList,
@@ -61,7 +61,7 @@ const SelectParent: React.FC<Props> = ({
           control={control}
           name="parent"
           render={({ field: { value, onChange } }) => (
-            <IssuesListModal
+            <ParentIssuesListModal
               isOpen={isParentModalOpen}
               handleClose={() => setIsParentModalOpen(false)}
               onChange={(val) => {
@@ -93,5 +93,3 @@ const SelectParent: React.FC<Props> = ({
     </div>
   );
 };
-
-export default SelectParent;

apps/app/components/issues/sidebar-select/priority.tsx

@@ -19,7 +19,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -65,5 +65,3 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) =
     </div>
   );
 };
-
-export default SelectPriority;

apps/app/components/issues/sidebar-select/state.tsx

@@ -22,7 +22,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -100,5 +100,3 @@ const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
     </div>
   );
 };
-
-export default SelectState;

apps/app/components/issues/sidebar.tsx

@@ -15,17 +15,18 @@ import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issues.service";
 // components
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
+import {
-import SelectState from "components/project/issues/issue-detail/issue-detail-sidebar/select-state";
+  SidebarAssigneeSelect,
-import SelectPriority from "components/project/issues/issue-detail/issue-detail-sidebar/select-priority";
+  SidebarBlockedSelect,
-import SelectParent from "components/project/issues/issue-detail/issue-detail-sidebar/select-parent";
+  SidebarBlockerSelect,
-import SelectCycle from "components/project/issues/issue-detail/issue-detail-sidebar/select-cycle";
+  SidebarCycleSelect,
-import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee";
+  SidebarParentSelect,
-import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker";
+  SidebarPrioritySelect,
-import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked";
+  SidebarStateSelect,
+} from "components/issues/sidebar-select";
+import { DeleteIssueModal } from "components/issues";
 // ui
 import { Input, Button, Spinner, CustomDatePicker } from "components/ui";
-import DatePicker from "react-datepicker";
 // icons
 import {
   TagIcon,
@@ -43,8 +44,6 @@ import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
-import "react-datepicker/dist/react-datepicker.css";
-
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
@@ -58,7 +57,7 @@ const defaultValues: Partial<IIssueLabels> = {
   colour: "#ff0000",
 };
 
-const IssueDetailSidebar: React.FC<Props> = ({
+export const IssueDetailsSidebar: React.FC<Props> = ({
   control,
   submitChanges,
   issueDetail,
@@ -128,7 +127,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
 
   return (
     <>
-      <ConfirmIssueDeletion
+      <DeleteIssueModal
         handleClose={() => setDeleteIssueModal(false)}
         isOpen={deleteIssueModal}
         data={issueDetail}
@@ -175,12 +174,24 @@ const IssueDetailSidebar: React.FC<Props> = ({
         </div>
         <div className="divide-y-2 divide-gray-100">
           <div className="py-1">
-            <SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
+            <SidebarStateSelect
-            <SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
+              control={control}
-            <SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
+              submitChanges={submitChanges}
+              userAuth={userAuth}
+            />
+            <SidebarAssigneeSelect
+              control={control}
+              submitChanges={submitChanges}
+              userAuth={userAuth}
+            />
+            <SidebarPrioritySelect
+              control={control}
+              submitChanges={submitChanges}
+              userAuth={userAuth}
+            />
           </div>
           <div className="py-1">
-            <SelectParent
+            <SidebarParentSelect
               control={control}
               submitChanges={submitChanges}
               issuesList={
@@ -210,13 +221,13 @@ const IssueDetailSidebar: React.FC<Props> = ({
               watch={watchIssue}
               userAuth={userAuth}
             />
-            <SelectBlocker
+            <SidebarBlockerSelect
               submitChanges={submitChanges}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
               userAuth={userAuth}
             />
-            <SelectBlocked
+            <SidebarBlockedSelect
               submitChanges={submitChanges}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
@@ -247,7 +258,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
             </div>
           </div>
           <div className="py-1">
-            <SelectCycle
+            <SidebarCycleSelect
               issueDetail={issueDetail}
               handleCycleChange={handleCycleChange}
               userAuth={userAuth}
@@ -446,5 +457,3 @@ const IssueDetailSidebar: React.FC<Props> = ({
     </>
   );
 };
-
-export default IssueDetailSidebar;

apps/app/components/issues/sub-issues-list-modal.tsx

@@ -17,11 +17,11 @@ import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleClose: () => void;
   parent: IIssue | undefined;
 };
 
-const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
+export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
   const [query, setQuery] = useState("");
 
   const router = useRouter();
@@ -43,7 +43,7 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
         [];
 
   const handleCommandPaletteClose = () => {
-    setIsOpen(false);
+    handleClose();
     setQuery("");
   };
 
@@ -147,7 +147,7 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
                                   }
                                   onClick={() => {
                                     addAsSubIssue(issue.id);
-                                    setIsOpen(false);
+                                    handleClose();
                                   }}
                                 >
                                   <span
@@ -188,5 +188,3 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
     </Transition.Root>
   );
 };
-
-export default AddAsSubIssue;

apps/app/components/issues/sub-issues-list.tsx

@@ -4,8 +4,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
 // components
 import { CustomMenu } from "components/ui";
-import { CreateUpdateIssueModal } from "components/issues";
+import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
-import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
 // types
 import { IIssue, UserAuth } from "types";
 
@@ -18,7 +17,7 @@ export interface SubIssueListProps {
   userAuth: UserAuth;
 }
 
-export const SubIssueList: FC<SubIssueListProps> = ({
+export const SubIssuesList: FC<SubIssueListProps> = ({
   issues = [],
   handleSubIssueRemove,
   parentIssue,
@@ -28,7 +27,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
 }) => {
   // states
   const [isIssueModalActive, setIssueModalActive] = useState(false);
-  const [isSubIssueModalActive, setSubIssueModalActive] = useState(false);
+  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
   const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
 
   const openIssueModal = () => {
@@ -40,11 +39,11 @@ export const SubIssueList: FC<SubIssueListProps> = ({
   };
 
   const openSubIssueModal = () => {
-    setSubIssueModalActive(true);
+    setSubIssuesListModal(true);
   };
 
   const closeSubIssueModal = () => {
-    setSubIssueModalActive(false);
+    setSubIssuesListModal(false);
   };
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
@@ -56,9 +55,9 @@ export const SubIssueList: FC<SubIssueListProps> = ({
         prePopulateData={{ ...preloadedData }}
         handleClose={closeIssueModal}
       />
-      <AddAsSubIssue
+      <SubIssuesListModal
-        isOpen={isSubIssueModalActive}
+        isOpen={subIssuesListModal}
-        setIsOpen={setSubIssueModalActive}
+        handleClose={() => setSubIssuesListModal(false)}
         parent={parentIssue}
       />
       <Disclosure defaultOpen={true}>
@@ -88,7 +87,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
                   <CustomMenu ellipsis>
                     <CustomMenu.MenuItem
                       onClick={() => {
-                        setSubIssueModalActive(true);
+                        setSubIssuesListModal(true);
                       }}
                     >
                       Add an existing issue

apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx

@@ -15,7 +15,7 @@ import cyclesService from "services/cycles.service";
 import useToast from "hooks/use-toast";
 // ui
 import { Loader, CustomDatePicker } from "components/ui";
-//progress-bar
+// progress-bar
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
 // helpers
@@ -24,7 +24,7 @@ import { groupBy } from "helpers/array.helper";
 // types
 import { CycleIssueResponse, ICycle } from "types";
 // fetch-keys
-import { CYCLE_LIST } from "constants/fetch-keys";
+import { CYCLE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   cycle: ICycle | undefined;
@@ -57,23 +57,19 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
   };
 
   const submitChanges = (data: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId || !cycleId) return;
 
-    mutate<ICycle[]>(
+    mutate<ICycle>(
-      projectId && CYCLE_LIST(projectId as string),
+      CYCLE_DETAILS(cycleId as string),
-      (prevData) =>
+      (prevData) => ({ ...(prevData as ICycle), ...data }),
-        (prevData ?? []).map((tempCycle) => {
-          if (tempCycle.id === cycleId) return { ...tempCycle, ...data };
-          return tempCycle;
-        }),
       false
     );
 
     cyclesService
-      .patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data)
+      .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
       .then((res) => {
         console.log(res);
-        mutate(CYCLE_LIST(projectId as string));
+        mutate(CYCLE_DETAILS(cycleId as string));
       })
       .catch((e) => {
         console.log(e);

apps/app/components/project/issues/my-issues/change-state-dropdown.tsx

@@ -1,101 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// services
-import stateServices from "services/state.service";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { IIssue, IState } from "types";
-// fetch-keys
-import { STATE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  issue: IIssue;
-  updateIssues: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    issue: Partial<IIssue>
-  ) => void;
-};
-
-const ChangeStateDropdown: React.FC<Props> = ({ issue, updateIssues }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: states } = useSWR<IState[]>(
-    workspaceSlug ? STATE_LIST(issue.project) : null,
-    workspaceSlug ? () => stateServices.getStates(workspaceSlug as string, issue.project) : null
-  );
-
-  return (
-    <>
-      <Listbox
-        as="div"
-        value={issue.state}
-        onChange={(data: string) => {
-          if (!workspaceSlug) return;
-          updateIssues(workspaceSlug as string, issue.project, issue.id, {
-            state: data,
-            state_detail: states?.find((state) => state.id === data),
-          });
-        }}
-        className="flex-shrink-0"
-      >
-        {({ open }) => (
-          <>
-            <div>
-              <Listbox.Button
-                className="inline-flex items-center whitespace-nowrap rounded-full border bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100"
-                style={{
-                  border: `2px solid ${issue.state_detail.color}`,
-                  backgroundColor: `${issue.state_detail.color}20`,
-                }}
-              >
-                <span
-                  className={`hidden w-16 capitalize sm:block ${
-                    issue.state ? "" : "text-gray-900"
-                  }`}
-                >
-                  {addSpaceIfCamelCase(issue.state_detail.name)}
-                </span>
-              </Listbox.Button>
-
-              <Transition
-                show={open}
-                as={React.Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Listbox.Options className="fixed z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  {states?.map((state) => (
-                    <Listbox.Option
-                      key={state.id}
-                      className={({ active }) =>
-                        `cursor-pointer select-none px-3 py-2 ${
-                          active ? "bg-indigo-50" : "bg-white"
-                        }`
-                      }
-                      value={state.id}
-                    >
-                      {addSpaceIfCamelCase(state.name)}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Listbox>
-    </>
-  );
-};
-
-export default ChangeStateDropdown;

apps/app/components/project/modules/module-detail-sidebar/index.tsx

@@ -8,13 +8,6 @@ import { mutate } from "swr";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
-import {
-  CalendarDaysIcon,
-  ChartPieIcon,
-  LinkIcon,
-  PlusIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
 import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
@@ -23,12 +16,19 @@ import SelectLead from "components/project/modules/module-detail-sidebar/select-
 import SelectMembers from "components/project/modules/module-detail-sidebar/select-members";
 import SelectStatus from "components/project/modules/module-detail-sidebar/select-status";
 import ModuleLinkModal from "components/project/modules/module-link-modal";
-//progress-bar
+// progress-bar
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
 // ui
 import { CustomDatePicker, Loader } from "components/ui";
 // icons
+import {
+  CalendarDaysIcon,
+  ChartPieIcon,
+  LinkIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -36,9 +36,10 @@ import { groupBy } from "helpers/array.helper";
 // types
 import { IModule, ModuleIssueResponse } from "types";
 // fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
+import { MODULE_DETAILS } from "constants/fetch-keys";
 
 const defaultValues: Partial<IModule> = {
+  lead: "",
   members_list: [],
   start_date: null,
   target_date: null,
@@ -69,14 +70,6 @@ const ModuleDetailSidebar: React.FC<Props> = ({
     defaultValues,
   });
 
-  useEffect(() => {
-    if (module)
-      reset({
-        ...module,
-        members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
-      });
-  }, [module, reset]);
-
   const groupedIssues = {
     backlog: [],
     unstarted: [],
@@ -87,29 +80,36 @@ const ModuleDetailSidebar: React.FC<Props> = ({
   };
 
   const submitChanges = (data: Partial<IModule>) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId || !moduleId) return;
 
-    mutate<IModule[]>(
+    mutate<IModule>(
-      projectId && MODULE_LIST(projectId as string),
+      MODULE_DETAILS(moduleId as string),
-      (prevData) =>
+      (prevData) => ({
-        (prevData ?? []).map((module) => {
+        ...(prevData as IModule),
-          if (module.id === moduleId) return { ...module, ...data };
+        ...data,
-          return module;
       }),
       false
     );
 
     modulesService
-      .patchModule(workspaceSlug as string, projectId as string, module.id, data)
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, data)
       .then((res) => {
         console.log(res);
-        mutate(MODULE_LIST(projectId as string));
+        mutate(MODULE_DETAILS(moduleId as string));
       })
       .catch((e) => {
         console.log(e);
       });
   };
 
+  useEffect(() => {
+    if (module)
+      reset({
+        ...module,
+        members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
+      });
+  }, [module, reset]);
+
   return (
     <>
       <ModuleLinkModal

apps/app/components/project/modules/module-link-modal.tsx

@@ -4,18 +4,18 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { useForm } from "react-hook-form";
-
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// hooks
-// types
-import type { IModule, ModuleLink } from "types";
 // services
 import modulesService from "services/modules.service";
 // ui
 import { Button, Input } from "components/ui";
+// types
+import type { IModule, ModuleLink } from "types";
 // fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
+import { MODULE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -43,23 +43,18 @@ const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
   });
 
   const onSubmit = async (formData: ModuleLink) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId || !moduleId) return;
 
-    const previousLinks = module.link_module.map((l) => ({ title: l.title, url: l.url }));
+    const previousLinks = module?.link_module.map((l) => ({ title: l.title, url: l.url }));
 
     const payload: Partial<IModule> = {
-      links_list: [...previousLinks, formData],
+      links_list: [...(previousLinks ?? []), formData],
     };
 
     await modulesService
-      .patchModule(workspaceSlug as string, projectId as string, module.id, payload)
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
-      .then(() => {
+      .then((res) => {
-        mutate<IModule[]>(projectId && MODULE_LIST(projectId as string), (prevData) =>
+        mutate(MODULE_DETAILS(moduleId as string));
-          (prevData ?? []).map((module) => {
-            if (module.id === moduleId) return { ...module, ...payload };
-            return module;
-          })
-        );
         onClose();
       })
       .catch((err) => {

apps/app/components/states/create-update-state-modal.tsx

@@ -4,22 +4,24 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-
+// react-color
 import { TwitterPicker } from "react-color";
-
+// headless ui
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import type { IState } from "types";
 import stateService from "services/state.service";
+// ui
+import { Button, Input, Select, TextArea } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import type { IState } from "types";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
 // constants
 import { GROUP_CHOICES } from "constants/";
-// ui
-import { Button, Input, Select, TextArea } from "components/ui";
-// icons
 
 // types
 type Props = {
@@ -36,7 +38,12 @@ const defaultValues: Partial<IState> = {
   group: "backlog",
 };
 
-const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
+export const CreateUpdateStateModal: React.FC<Props> = ({
+  isOpen,
+  data,
+  projectId,
+  handleClose,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -266,5 +273,3 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
     </Transition.Root>
   );
 };
-
-export default CreateUpdateStateModal;

apps/app/components/states/delete-state-modal.tsx

@@ -28,7 +28,7 @@ type Props = {
   data: IState | null;
 };
 
-const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
+export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
 
@@ -175,5 +175,3 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
     </Transition.Root>
   );
 };
-
-export default ConfirmStateDeletion;

apps/app/components/states/index.ts

@@ -0,0 +1,3 @@
+export * from "./create-update-state-inline";
+export * from "./create-update-state-modal";
+export * from "./delete-state-modal";

apps/app/constants/fetch-keys.ts

@@ -29,7 +29,7 @@ export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS
 
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
-export const CYCLE_DETAIL = "CYCLE_DETAIL";
+export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
 
 export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
@@ -39,7 +39,7 @@ export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${pro
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
 export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
-export const MODULE_DETAIL = "MODULE_DETAIL";
+export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAIL_${moduleId}`;
 
 // Issues
 export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -17,7 +17,7 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // types
 import { IIssue, Properties } from "types";
 // components
-import { IssueListItem } from "components/issues";
+import { MyIssuesListItem } from "components/issues";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
@@ -142,7 +142,11 @@ const MyIssuesPage: NextPage = () => {
                         <Disclosure.Panel>
                           <div className="divide-y-2">
                             {myIssues.map((issue: IIssue) => (
-                              <IssueListItem key={issue.id} issue={issue} properties={properties} />
+                              <MyIssuesListItem
+                                key={issue.id}
+                                issue={issue}
+                                properties={properties}
+                              />
                             ))}
                           </div>
                         </Disclosure.Panel>

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -13,8 +13,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import CyclesListView from "components/project/cycles/list-view";
 import CyclesBoardView from "components/project/cycles/board-view";
-import { CreateUpdateIssueModal } from "components/issues";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
 import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
 import View from "components/core/view";
@@ -38,6 +37,7 @@ import {
   PROJECT_ISSUES_LIST,
   PROJECT_MEMBERS,
   PROJECT_DETAILS,
+  CYCLE_DETAILS,
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
@@ -77,6 +77,18 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
+  const { data: cycleDetails } = useSWR(
+    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cycleServices.getCycleDetails(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string
+          )
+      : null
+  );
+
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
@@ -181,7 +193,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
         issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
         handleOnSubmit={handleAddIssuesToCycle}
       />
-      <ConfirmIssueDeletion
+      <DeleteIssueModal
         handleClose={() => setDeleteIssue(undefined)}
         isOpen={!!deleteIssue}
         data={issues?.results.find((issue) => issue.id === deleteIssue)}
@@ -200,7 +212,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
             label={
               <>
                 <CyclesIcon className="h-3 w-3" />
-                {cycles?.find((c) => c.id === cycleId)?.name}
+                {cycleDetails?.name}
               </>
             }
             className="ml-1.5"
@@ -287,7 +299,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <CycleDetailSidebar
-          cycle={cycles?.find((c) => c.id === (cycleId as string))}
+          cycle={cycleDetails}
           isOpen={cycleSidebar}
           cycleIssues={cycleIssues ?? []}
         />

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -14,11 +14,15 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
+import {
-import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
+  IssueDescriptionForm,
-import AddIssueComment from "components/project/issues/issue-detail/comment/issue-comment-section";
+  SubIssuesList,
-import IssueActivitySection from "components/project/issues/issue-detail/activity";
+  CreateUpdateIssueModal,
-import { IssueDescriptionForm, SubIssueList, CreateUpdateIssueModal } from "components/issues";
+  IssueDetailsSidebar,
+  IssueActivitySection,
+  AddComment,
+  SubIssuesListModal,
+} from "components/issues";
 // ui
 import { Loader, CustomMenu } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
@@ -52,7 +56,7 @@ const defaultValues = {
 const IssueDetailsPage: NextPage<UserAuth> = (props) => {
   // states
   const [isOpen, setIsOpen] = useState(false);
-  const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
+  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
   >(undefined);
@@ -211,10 +215,10 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
           }}
         />
       )}
-      {isAddAsSubIssueOpen && (
+      {subIssuesListModal && (
-        <AddAsSubIssue
+        <SubIssuesListModal
-          isOpen={isAddAsSubIssueOpen}
+          isOpen={subIssuesListModal}
-          setIsOpen={setIsAddAsSubIssueOpen}
+          handleClose={() => setSubIssuesListModal(false)}
           parent={issueDetails}
         />
       )}
@@ -276,7 +280,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
               />
               <div className="mt-2">
                 {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
-                  <SubIssueList
+                  <SubIssuesList
                     issues={subIssues}
                     parentIssue={issueDetails}
                     projectId={projectId?.toString()}
@@ -309,7 +313,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                       </CustomMenu.MenuItem>
                       <CustomMenu.MenuItem
                         onClick={() => {
-                          setIsAddAsSubIssueOpen(true);
+                          setSubIssuesListModal(true);
                           setPreloadedData({
                             parent: issueDetails.id,
                             actionType: "createIssue",
@@ -329,11 +333,11 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                 issueActivities={issueActivities || []}
                 mutate={mutateIssueActivities}
               />
-              <AddIssueComment mutate={mutateIssueActivities} />
+              <AddComment mutate={mutateIssueActivities} />
             </div>
           </div>
           <div className="basis-1/3 space-y-5 border-l p-5">
-            <IssueDetailSidebar
+            <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
               submitChanges={submitChanges}

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx

@@ -13,10 +13,8 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import ListView from "components/project/issues/list-view";
+import BoardView from "components/issues/board-view";
-import BoardView from "components/project/issues/BoardView";
+import { CreateUpdateIssueModal, DeleteIssueModal, IssuesListView } from "components/issues";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import { CreateUpdateIssueModal } from "components/issues";
 import View from "components/core/view";
 // ui
 import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
@@ -99,7 +97,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
           handleClose={() => setIsOpen(false)}
           data={selectedIssue}
         />
-        <ConfirmIssueDeletion
+        <DeleteIssueModal
           handleClose={() => setDeleteIssue(undefined)}
           isOpen={!!deleteIssue}
           data={projectIssues?.results.find((issue) => issue.id === deleteIssue)}
@@ -110,7 +108,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
           </div>
         ) : projectIssues.count > 0 ? (
           <>
-            <ListView
+            <IssuesListView
               issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
               handleEditIssue={handleEditIssue}
               userAuth={props}

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -18,10 +18,9 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
 import ModulesBoardView from "components/project/modules/board-view";
 import ModulesListView from "components/project/modules/list-view";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 import ModuleDetailSidebar from "components/project/modules/module-detail-sidebar";
 import ConfirmModuleDeletion from "components/project/modules/confirm-module-deletion";
-import { CreateUpdateIssueModal } from "components/issues";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import View from "components/core/view";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
@@ -46,7 +45,7 @@ import {
 import { NextPageContext } from "next";
 // fetch-keys
 import {
-  MODULE_DETAIL,
+  MODULE_DETAILS,
   MODULE_ISSUES,
   MODULE_LIST,
   PROJECT_ISSUES_LIST,
@@ -96,8 +95,8 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const { data: moduleDetail } = useSWR<IModule>(
+  const { data: moduleDetails } = useSWR<IModule>(
-    MODULE_DETAIL,
+    moduleId ? MODULE_DETAILS(moduleId as string) : null,
     workspaceSlug && projectId
       ? () =>
           modulesService.getModuleDetails(
@@ -181,9 +180,9 @@ const SingleModule: React.FC<UserAuth> = (props) => {
   };
 
   const handleDeleteModule = () => {
-    if (!moduleDetail) return;
+    if (!moduleDetails) return;
 
-    setSelectedModuleForDelete({ ...moduleDetail, actionType: "delete" });
+    setSelectedModuleForDelete({ ...moduleDetails, actionType: "delete" });
     setModuleDeleteModal(true);
   };
 
@@ -208,7 +207,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
         issues={issues?.results.filter((i) => !i.issue_module) ?? []}
         handleOnSubmit={handleAddIssuesToModule}
       />
-      <ConfirmIssueDeletion
+      <DeleteIssueModal
         handleClose={() => setDeleteIssue(undefined)}
         isOpen={!!deleteIssue}
         data={moduleIssuesArray?.find((issue) => issue.id === deleteIssue)}
@@ -226,7 +225,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${moduleDetail?.project_detail.name ?? "Project"} Modules`}
+              title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
               link={`/${workspaceSlug}/projects/${projectId}/modules`}
             />
           </Breadcrumbs>
@@ -236,7 +235,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
             label={
               <>
                 <RectangleGroupIcon className="h-3 w-3" />
-                {modules?.find((c) => c.id === moduleId)?.name}
+                {moduleDetails?.name}
               </>
             }
             className="ml-1.5"
@@ -323,7 +322,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <ModuleDetailSidebar
-          module={modules?.find((m) => m.id === moduleId)}
+          module={moduleDetails}
           isOpen={moduleSidebar}
           moduleIssues={moduleIssues}
           handleDeleteModule={handleDeleteModule}

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -13,11 +13,7 @@ import { requiredAdmin } from "lib/auth";
 // layouts
 import SettingsLayout from "layouts/settings-layout";
 // components
-import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
+import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "components/states";
-import {
-  CreateUpdateStateInline,
-  StateGroup,
-} from "components/project/issues/BoardView/state/create-update-state-inline";
 // ui
 import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -67,7 +63,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
 
   return (
     <>
-      <ConfirmStateDeletion
+      <DeleteStateModal
         isOpen={!!selectDeleteState}
         data={states?.find((state) => state.id === selectDeleteState) ?? null}
         onClose={() => setSelectDeleteState(null)}

apps/app/services/cycles.service.ts

@@ -26,6 +26,18 @@ class ProjectCycleServices extends APIService {
       });
   }
 
+  async getCycleDetails(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
   async getCycleIssues(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`