diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx index f4698c5fe..b0fe60a23 100644 --- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx +++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx @@ -99,13 +99,15 @@ const IssueDetailSidebar: React.FC = ({ const handleCycleChange = (cycleId: string) => { if (activeWorkspace && activeProject && issueDetail) - issuesServices.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, { - issue: issueDetail.id, - }); + issuesServices + .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, { + issue: issueDetail.id, + }) + .then(() => { + submitChanges({}); + }); }; - console.log(issueDetail?.labels, issueDetail?.labels_list); - return ( <>
@@ -141,7 +143,7 @@ const IssueDetailSidebar: React.FC = ({ type="button" className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300" onClick={() => - copyTextToClipboard(`${issueDetail?.id}`) + copyTextToClipboard(issueDetail?.id ?? "") .then(() => { setToastAlert({ type: "success", @@ -249,7 +251,7 @@ const IssueDetailSidebar: React.FC = ({
- {issueDetail?.labels.map((label) => { + {watchIssue("labels_list")?.map((label) => { const singleLabel = issueLabels?.find((l) => l.id === label); if (!singleLabel) return null; @@ -259,11 +261,10 @@ const IssueDetailSidebar: React.FC = ({ key={singleLabel.id} className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer" onClick={() => { - const updatedLabels = issueDetail?.labels.filter((l) => l !== label); - // submitChanges({ - // labels_list: updatedLabels, - // }); - console.log(updatedLabels); + const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== label); + submitChanges({ + labels_list: updatedLabels, + }); }} > = ({ [selectedGroup]: singleGroup, actionType: "createIssue", }); + } else { + setPreloadedData({ + actionType: "createIssue", + }); } }} > diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx index ce444df53..e41d9734b 100644 --- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx +++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx @@ -1,16 +1,25 @@ +import React, { useCallback, useEffect, useState } from "react"; // next import Link from "next/link"; import type { NextPage } from "next"; import { useRouter } from "next/router"; import dynamic from "next/dynamic"; -// react -import React, { useCallback, useEffect, useState } from "react"; // swr import useSWR, { mutate } from "swr"; // react hook form import { useForm } from "react-hook-form"; +// headless ui +import { Disclosure, Menu, Tab, Transition } from "@headlessui/react"; +// fetch keys +import { + PROJECT_ISSUES_ACTIVITY, + PROJECT_ISSUES_COMMENTS, + PROJECT_ISSUES_LIST, +} from "constants/fetch-keys"; // services import issuesServices from "lib/services/issues.service"; +// common +import { debounce } from "constants/common"; // hooks import useUser from "lib/hooks/useUser"; // hoc @@ -24,12 +33,8 @@ import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-iss import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar"; import IssueActivitySection from "components/project/issues/issue-detail/activity"; -// headless ui -import { Disclosure, Menu, Tab, Transition } from "@headlessui/react"; // ui -import { Spinner, TextArea } from "ui"; -import HeaderButton from "ui/HeaderButton"; -import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs"; +import { Spinner, TextArea, HeaderButton, Breadcrumbs, BreadcrumbItem } from "ui"; // icons import { ChevronLeftIcon, @@ -39,14 +44,6 @@ import { } from "@heroicons/react/24/outline"; // types import { IIssue, IIssueComment, IssueResponse } from "types"; -// fetch keys -import { - PROJECT_ISSUES_ACTIVITY, - PROJECT_ISSUES_COMMENTS, - PROJECT_ISSUES_LIST, -} from "constants/fetch-keys"; -// common -import { debounce } from "constants/common"; const RichTextEditor = dynamic(() => import("components/lexical/editor"), { ssr: false, @@ -148,7 +145,15 @@ const IssueDetail: NextPage = () => { issuesServices .patchIssue(activeWorkspace.slug, projectId as string, issueId as string, payload) .then((response) => { - console.log(response); + mutateIssues((prevData) => ({ + ...(prevData as IssueResponse), + results: (prevData?.results ?? []).map((issue) => { + if (issue.id === issueId) { + return { ...issue, ...response }; + } + return issue; + }), + })); }) .catch((error) => { console.log(error); @@ -170,25 +175,23 @@ const IssueDetail: NextPage = () => { issueDetail.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id), assignees_list: issueDetail.assignees_list ?? issueDetail.assignee_details?.map((user) => user.id), - labels_list: issueDetail.labels_list ?? issueDetail.labels?.map((label) => label), - labels: issueDetail.labels_list ?? issueDetail.labels?.map((label) => label), + labels_list: issueDetail.labels_list ?? issueDetail.labels, + labels: issueDetail.labels_list ?? issueDetail.labels, }); }, [issueDetail, reset]); useEffect(() => { - const issueIndex = issues?.results.findIndex((issue) => issue.id === issueId); - if (issueIndex === undefined) return; - const issueDetail = issues?.results[issueIndex]; + const issueDetail = issues?.results.find((issue) => issue.id === issueId); setIssueDetail(issueDetail); - }, [issues, issueId]); + }, [issueId, issues]); 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 === issueDetail?.id)) ?? []; + const subIssues = (issues && issues.results.filter((i) => i.parent === issueId)) ?? []; const siblingIssues = issueDetail && - issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueDetail.id); + issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueId); const handleSubIssueRemove = (issueId: string) => { if (activeWorkspace && activeProject) { @@ -212,8 +215,6 @@ const IssueDetail: NextPage = () => { } }; - console.log(issueDetail); - return ( { { if (!prevIssue) return; router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`); @@ -246,7 +247,7 @@ const IssueDetail: NextPage = () => { Icon={ChevronRightIcon} disabled={!nextIssue} label="Next" - className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`} + className={!nextIssue ? "cursor-not-allowed opacity-70" : ""} onClick={() => { if (!nextIssue) return; router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`); @@ -284,7 +285,7 @@ const IssueDetail: NextPage = () => { {
- {(active) => ( - - )} +
@@ -497,14 +496,12 @@ const IssueDetail: NextPage = () => {
- {(active) => ( - - )} +
@@ -537,38 +534,34 @@ const IssueDetail: NextPage = () => {
- {(active) => ( - - )} + - {(active) => ( - - )} +