binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: inbox issue restructure the components and store (#3456)

Browse source 
* chore: inbox-issues store and type updates

* chore: issue inbox payload change for GET and POST

* chore: issue inbox payload change for PATCH

* chore: inbox-issue new hooks and store updates

* chore: update inbox issue template.

* chore: UI root

* chore: sidebar issues render

* chore: inbox issue details page layout.

* chore: inbox issue filters

* chore: inbox issue status card.

* chore: add loader.

* chore: active inbox issue styles.

* chore: inbox filters

* chore: inbox applied filters UI

* chore: inbox issue approval header

* chore: inbox issue approval header operations

* chore: issue reaction and activity fetch in issue_inbox store

* chore: posthog enabled

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
This commit is contained in:
guru_sainath 2024-01-24 20:33:54 +05:30 • committed by GitHub
parent 911211cf3d
commit b66f07845a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
52 changed files with 1998 additions and 1457 deletions
Download patch file Download diff file Expand all files Collapse all files

106
web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
View file

@ -1,41 +1,109 @@
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react";
import { Inbox } from "lucide-react";
// hooks
import { useInboxFilters } from "hooks/store/";
import { useProject, useInboxIssues } from "hooks/store";
// layouts
import { AppLayout } from "layouts/app-layout";
// ui
import { Spinner } from "@plane/ui";
// components
import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox";
import { ProjectInboxHeader } from "components/headers";
import { InboxSidebarRoot, InboxIssueActionsHeader } from "components/inbox";
import { InboxIssueDetailRoot } from "components/issues/issue-detail/inbox";
// types
import { NextPageWithLayout } from "lib/types";
const ProjectInboxPage: NextPageWithLayout = () => {
const ProjectInboxPage: NextPageWithLayout = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, inboxId } = router.query;
const { fetchInboxFilters } = useInboxFilters();
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
// store hooks
const {
issues: { getInboxIssuesByInboxId },
} = useInboxIssues();
const { currentProjectDetails } = useProject();
const {
filters: { fetchInboxFilters },
issues: { loader, fetchInboxIssues },
} = useInboxIssues();
useSWR(
workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null,
workspaceSlug && projectId && inboxId
? () => fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
: null
workspaceSlug && projectId && currentProjectDetails && currentProjectDetails?.inbox_view
? `INBOX_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}`
: null,
async () => {
if (workspaceSlug && projectId && inboxId && currentProjectDetails && currentProjectDetails?.inbox_view) {
await fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
await fetchInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
}
}
);
// inbox issues list
const inboxIssuesList = inboxId ? getInboxIssuesByInboxId(inboxId?.toString()) : undefined;
if (!workspaceSlug || !projectId || !inboxId) return <></>;
return (
<div className="flex h-full flex-col">
<InboxActionsHeader />
<div className="grid flex-1 grid-cols-4 divide-x divide-custom-border-200 overflow-hidden">
<InboxIssuesListSidebar />
<div className="col-span-3 h-full overflow-auto">
<InboxMainContent />
<>
{loader === "fetch" ? (
<div className="relative flex w-full h-full items-center justify-center">
<Spinner />
</div>
</div>
</div>
) : (
<div className="relative flex h-full overflow-hidden">
<div className="flex-shrink-0 w-[340px] h-full border-r border-custom-border-100">
{workspaceSlug && projectId && inboxId && (
<InboxSidebarRoot
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
inboxId={inboxId.toString()}
/>
)}
</div>
<div className="w-full">
{workspaceSlug && projectId && inboxId && inboxIssueId ? (
<div className="w-full h-full overflow-hidden relative flex flex-col">
<div className="flex-shrink-0 min-h-[50px] border-b border-custom-border-100">
<InboxIssueActionsHeader
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
inboxId={inboxId.toString()}
inboxIssueId={inboxIssueId?.toString() || undefined}
/>
</div>
<div className="w-full h-full">
<InboxIssueDetailRoot
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
inboxId={inboxId.toString()}
issueId={inboxIssueId.toString()}
/>
</div>
</div>
) : (
<div className="grid h-full place-items-center p-4 text-custom-text-200">
<div className="grid h-full place-items-center">
<div className="my-5 flex flex-col items-center gap-4">
<Inbox size={60} strokeWidth={1.5} />
{inboxIssuesList && inboxIssuesList.length > 0 ? (
<span className="text-custom-text-200">
{inboxIssuesList?.length} issues found. Select an issue from the sidebar to view its details.
</span>
) : (
<span className="text-custom-text-200">No issues found</span>
)}
</div>
</div>
</div>
)}
</div>
</div>
)}
</>
);
};
});
ProjectInboxPage.getLayout = function getLayout(page: ReactElement) {
return (

49
web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx Normal file
View file

@ -0,0 +1,49 @@
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react";
// hooks
import { useInbox, useProject } from "hooks/store";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
import { ProjectInboxHeader } from "components/headers";
// types
import { NextPageWithLayout } from "lib/types";
const ProjectInboxPage: NextPageWithLayout = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { currentProjectDetails } = useProject();
const { fetchInboxes } = useInbox();
useSWR(
workspaceSlug && projectId && currentProjectDetails && currentProjectDetails?.inbox_view
? `INBOX_${workspaceSlug.toString()}_${projectId.toString()}`
: null,
async () => {
if (workspaceSlug && projectId && currentProjectDetails && currentProjectDetails?.inbox_view) {
const inboxes = await fetchInboxes(workspaceSlug.toString(), projectId.toString());
if (inboxes && inboxes.length > 0)
router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxes[0].id}`);
}
}
);
return (
<div className="flex h-full flex-col">
{currentProjectDetails?.inbox_view ? <div>Loading...</div> : <div>You don{"'"}t have access to inbox</div>}
</div>
);
});
ProjectInboxPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectInboxHeader />} withProjectWrapper>
{page}
</AppLayout>
);
};
export default ProjectInboxPage;