fix: cycle mutation in issue details page

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

@@ -32,7 +32,7 @@ type Props = {
   issue: IIssue;
   properties: Properties;
   snapshot?: DraggableStateSnapshot;
-  assignees: IUserLite[] | (IUserLite | undefined)[];
+  assignees: Partial<IUserLite>[] | (Partial<IUserLite> | undefined)[];
   people: IWorkspaceMember[] | undefined;
   handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
   partialUpdateIssue: any;

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx

@@ -18,8 +18,6 @@ import {
   PlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-// types
-import type { ICycle, IIssue, IIssueLabels } from "types";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -39,8 +37,10 @@ import { Input, Button, Spinner } from "components/ui";
 // icons
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import type { ICycle, IIssue, IIssueLabels, IssueResponse } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -64,7 +64,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -110,11 +110,31 @@ const IssueDetailSidebar: React.FC<Props> = ({
   const handleCycleChange = (cycleDetail: ICycle) => {
     if (!workspaceSlug || !projectId || !issueDetail) return;
 
-    mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-
-    issuesServices.addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
-      issues: [issueDetail.id],
-    });
+    issuesServices
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
+        issues: [issueDetail.id],
+      })
+      .then((res) => {
+        mutate<IssueResponse>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData: any) => ({
+            ...prevData,
+            results: (prevData?.results ?? []).map((p: IIssue) => {
+              if (p.id === issueId)
+                return {
+                  ...p,
+                  issue_cycle: {
+                    ...p.issue_cycle,
+                    cycle: cycleDetail.id ?? "",
+                    cycle_detail: cycleDetail,
+                  },
+                };
+              else return p;
+            }),
+          }),
+          false
+        );
+      });
   };
 
   return (
@@ -236,7 +256,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
           <div className="py-1">
             <SelectCycle
               issueDetail={issueDetail}
-              control={control}
               handleCycleChange={handleCycleChange}
               watch={watchIssue}
             />

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
-import { Control, Controller, UseFormWatch } from "react-hook-form";
+import { UseFormWatch } from "react-hook-form";
 // constants
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // services
@@ -20,14 +20,13 @@ import { CYCLE_ISSUES, CYCLE_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-k
 
 type Props = {
   issueDetail: IIssue | undefined;
-  control: Control<IIssue, any>;
   handleCycleChange: (cycle: ICycle) => void;
   watch: UseFormWatch<IIssue>;
 };
 
-const SelectCycle: React.FC<Props> = ({ issueDetail, control, handleCycleChange }) => {
+const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { data: cycles } = useSWR(
     workspaceSlug && projectId ? CYCLE_LIST(projectId as string) : null,
@@ -39,72 +38,83 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, control, handleCycleChange
   const removeIssueFromCycle = (bridgeId: string, cycleId: string) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-
     issuesService
       .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId)
       .then((res) => {
         console.log(res);
 
+        mutate(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData: any) => ({
+            ...prevData,
+            results: (prevData?.results ?? []).map((p: IIssue) => {
+              if (p.id === issueId)
+                return {
+                  ...p,
+                  issue_cycle: {
+                    ...p.issue_cycle,
+                    cycle: null,
+                    cycle_detail: null,
+                  },
+                };
+              else return p;
+            }),
+          }),
+          false
+        );
         mutate(CYCLE_ISSUES(cycleId));
       })
       .catch((e) => {
         console.log(e);
       });
   };
 
+  const issueCycle = issueDetail?.issue_cycle?.cycle_detail;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
         <ArrowPathIcon className="h-4 w-4 flex-shrink-0" />
         <p>Cycle</p>
       </div>
       <div className="space-y-1 sm:basis-1/2">
-        <Controller
-          control={control}
-          name="issue_cycle"
-          render={({ field: { value } }) => (
-            <>
-              <CustomSelect
-                label={
-                  <span
-                    className={`hidden truncate text-left sm:block ${value ? "" : "text-gray-900"}`}
-                  >
-                    {value ? value?.cycle_detail?.name : "None"}
-                  </span>
-                }
-                value={value}
-                onChange={(value: any) => {
-                  value === null
-                    ? removeIssueFromCycle(
-                        issueDetail?.issue_cycle?.id ?? "",
-                        issueDetail?.issue_cycle?.cycle ?? ""
-                      )
-                    : handleCycleChange(cycles?.find((c) => c.id === value) as any);
-                }}
-              >
-                {cycles ? (
-                  cycles.length > 0 ? (
-                    <>
-                      <CustomSelect.Option value={null} className="capitalize">
-                        <>None</>
-                      </CustomSelect.Option>
-                      {cycles.map((option) => (
-                        <CustomSelect.Option key={option.id} value={option.id}>
-                          {option.name}
-                        </CustomSelect.Option>
-                      ))}
-                    </>
-                  ) : (
-                    <div className="text-center">No cycles found</div>
-                  )
-                ) : (
-                  <Spinner />
-                )}
-              </CustomSelect>
-            </>
+        <CustomSelect
+          label={
+            <span
+              className={`hidden truncate text-left sm:block ${issueCycle ? "" : "text-gray-900"}`}
+            >
+              {issueCycle ? issueCycle?.name : "None"}
+            </span>
+          }
+          value={issueCycle?.id}
+          onChange={(value: any) => {
+            value === null
+              ? removeIssueFromCycle(
+                  issueDetail?.issue_cycle?.id ?? "",
+                  issueDetail?.issue_cycle?.cycle ?? ""
+                )
+              : handleCycleChange(cycles?.find((c) => c.id === value) as any);
+          }}
+        >
+          {cycles ? (
+            cycles.length > 0 ? (
+              <>
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
+                {cycles.map((option) => (
+                  <CustomSelect.Option key={option.id} value={option.id}>
+                    {option.name}
+                  </CustomSelect.Option>
+                ))}
+              </>
+            ) : (
+              <div className="text-center">No cycles found</div>
+            )
+          ) : (
+            <Spinner />
           )}
-        />
+        </CustomSelect>
       </div>
     </div>
   );

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

@@ -257,7 +257,8 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                               <div>
                                 <h5>{link.title}</h5>
                                 <p className="mt-0.5 text-gray-500">
-                                  Added {timeAgo(link.created_at)} ago by {link.created_by_detail.email}
+                                  Added {timeAgo(link.created_at)} ago by{" "}
+                                  {link.created_by_detail.email}
                                 </p>
                               </div>
                             </a>

apps/app/components/ui/avatar/avatar.tsx

@@ -13,7 +13,7 @@ import { IUser, IUserLite } from "types";
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 type AvatarProps = {
-  user: IUser | IUserLite | undefined;
+  user: Partial<IUser> | Partial<IUserLite> | undefined;
   index?: number;
 };
 
@@ -44,7 +44,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
 );
 
 type AsigneesListProps = {
-  users?: IUser[] | (IUserLite | undefined)[] | IUserLite[];
+  users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
   userIds?: string[];
   length?: number;
 };

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

@@ -26,7 +26,7 @@ import {
 import { Loader, HeaderButton, CustomMenu } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
 // types
-import { IIssue, IssueResponse } from "types";
+import { IIssue } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import {
@@ -51,7 +51,7 @@ const defaultValues = {
   labels_list: [],
 };
 
-const IssueDetailPage: NextPage = () => {
+const IssueDetailsPage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
   // states
@@ -62,7 +62,7 @@ const IssueDetailPage: NextPage = () => {
   >(undefined);
   // Fetching API information
   const { data: issueDetails } = useSWR(
-    issueId && workspaceSlug && projectId ? ISSUE_DETAILS(issueId.toString()) : null,
+    issueId && workspaceSlug && projectId ? ISSUE_DETAILS(issueId as string) : null,
     issueId && workspaceSlug && projectId
       ? () =>
           issuesService.retrieve(
@@ -116,7 +116,7 @@ const IssueDetailPage: NextPage = () => {
   const issueDetail = issues?.results?.find((issue) => issue.id === issueId);
   const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
   const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
-  // const subIssues = (issues && issues.results.filter((i) => i.parent === issueId)) ?? [];
+
   const siblingIssues =
     issueDetail &&
     issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueId);
@@ -410,4 +410,4 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
   };
 };
 
-export default IssueDetailPage;
+export default IssueDetailsPage;