chore: adding page titles using project title. (#3692)
* chore: adding page titles * chore: added title to remaining pages * fix: added observer at required places --------- Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
This commit is contained in:
parent
07a4cb1f7d
commit
cf3b888465
60 changed files with 1684 additions and 1215 deletions
|
|
@ -5,14 +5,15 @@ import { observer } from "mobx-react-lite";
|
|||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { PageHead } from "components/core";
|
||||
import { ProjectIssueDetailsHeader } from "components/headers";
|
||||
import { IssueDetailRoot } from "components/issues";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// types
|
||||
import { NextPageWithLayout } from "lib/types";
|
||||
// fetch-keys
|
||||
import { useApplication, useIssueDetail } from "hooks/store";
|
||||
// store hooks
|
||||
import { useApplication, useIssueDetail, useProject } from "hooks/store";
|
||||
|
||||
const IssueDetailsPage: NextPageWithLayout = observer(() => {
|
||||
// router
|
||||
|
|
@ -23,17 +24,20 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
|
|||
fetchIssue,
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
const { getProjectById } = useProject();
|
||||
const { theme: themeStore } = useApplication();
|
||||
|
||||
// fetching issue details
|
||||
const { isLoading } = useSWR(
|
||||
workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
|
||||
workspaceSlug && projectId && issueId
|
||||
? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
// derived values
|
||||
const issue = getIssueById(issueId?.toString() || "") || undefined;
|
||||
const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
|
||||
const issueLoader = !issue || isLoading ? true : false;
|
||||
const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
const handleToggleIssueDetailSidebar = () => {
|
||||
|
|
@ -52,6 +56,7 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<PageHead title={pageTitle} />
|
||||
{issueLoader ? (
|
||||
<Loader className="flex h-full gap-5 p-5">
|
||||
<div className="basis-2/3 space-y-2">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import { ReactElement } from "react";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react";
|
||||
// components
|
||||
import { ProjectLayoutRoot } from "components/issues";
|
||||
import { ProjectIssuesHeader } from "components/headers";
|
||||
|
|
@ -6,12 +9,36 @@ import { ProjectIssuesHeader } from "components/headers";
|
|||
import { NextPageWithLayout } from "lib/types";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// hooks
|
||||
import { useProject } from "hooks/store";
|
||||
import { PageHead } from "components/core";
|
||||
|
||||
const ProjectIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full w-full">
|
||||
<ProjectLayoutRoot />
|
||||
</div>
|
||||
);
|
||||
const ProjectIssuesPage: NextPageWithLayout = observer(() => {
|
||||
const router = useRouter();
|
||||
const { projectId } = router.query;
|
||||
// store
|
||||
const { getProjectById } = useProject();
|
||||
|
||||
if (!projectId) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
// derived values
|
||||
const project = getProjectById(projectId.toString());
|
||||
const pageTitle = project?.name ? `${project?.name} - Issues` : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead title={pageTitle} />
|
||||
<Head>
|
||||
<title>{project?.name} - Issues</title>
|
||||
</Head>
|
||||
<div className="h-full w-full">
|
||||
<ProjectLayoutRoot />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
ProjectIssuesPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue