fix: breadcrumb loading state for the issue details page (#3892)

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Aaryan Khandelwal 2024-03-06 20:38:21 +05:30 committed by GitHub
parent b4adb82d40
commit cb5198c883
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 24 deletions

View File

@ -13,7 +13,6 @@ import { ProjectLogo } from "components/project";
// ui
// types
import { IssueArchiveService } from "services/issue";
import { TIssue } from "@plane/types";
// constants
// services
// helpers
@ -26,9 +25,9 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, archivedIssueId } = router.query;
// store hooks
const { currentProjectDetails, getProjectById } = useProject();
const { currentProjectDetails } = useProject();
const { data: issueDetails } = useSWR<TIssue | undefined>(
const { data: issueDetails } = useSWR(
workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
workspaceSlug && projectId && archivedIssueId
? () =>
@ -79,8 +78,9 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
link={
<BreadcrumbLink
label={
`${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
"..."
currentProjectDetails && issueDetails
? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
: ""
}
/>
}

View File

@ -1,41 +1,32 @@
import { FC } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import useSWR from "swr";
// hooks
import { PanelRight } from "lucide-react";
import { Breadcrumbs, LayersIcon } from "@plane/ui";
import { BreadcrumbLink } from "components/common";
import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
import { ISSUE_DETAILS } from "constants/fetch-keys";
import { cn } from "helpers/common.helper";
import { useApplication, useProject } from "hooks/store";
import { useApplication, useIssueDetail, useProject } from "hooks/store";
// ui
// helpers
// services
import { IssueService } from "services/issue";
import { ProjectLogo } from "components/project";
// constants
// components
// services
const issueService = new IssueService();
export const ProjectIssueDetailsHeader: FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
// store hooks
const { currentProjectDetails, getProjectById } = useProject();
const { currentProjectDetails } = useProject();
const { theme: themeStore } = useApplication();
const { data: issueDetails } = useSWR(
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
workspaceSlug && projectId && issueId
? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
: null
);
const {
issue: { getIssueById },
} = useIssueDetail();
// derived values
const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
const isSidebarCollapsed = themeStore.issueDetailSidebarCollapsed;
return (
@ -77,8 +68,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
link={
<BreadcrumbLink
label={
`${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
"..."
currentProjectDetails && issueDetails
? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
: ""
}
/>
}

View File

@ -13,7 +13,6 @@ import GithubLogo from "public/logos/github-square.png";
import SlackLogo from "public/services/slack.png";
// types
import { IWorkspaceIntegration } from "@plane/types";
// services
import { ProjectService } from "services/project";
type Props = {