plane/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
Aaryan Khandelwal 88e5a05253
chore: subscribed by me tab on my issues page (#1800)
* chore: add subscribed by me tab in my issues

* chore: update tab titles

* fix: build error
2023-08-08 13:15:25 +05:30

128 lines
3.4 KiB
TypeScript

import React, { useEffect } from "react";
import { useRouter } from "next/router";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
// hooks
import useProjects from "hooks/use-projects";
import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
// components
import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
// ui
import { PrimaryButton } from "components/ui";
import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
// types
import type { NextPage } from "next";
import useUser from "hooks/use-user";
const MyIssuesPage: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { user } = useUser();
const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
const tabsList = [
{
key: "assigned",
label: "Assigned",
selected: (filters?.assignees ?? []).length > 0,
onClick: () => {
setFilters({
assignees: [user?.id ?? ""],
created_by: null,
subscriber: null,
});
},
},
{
key: "created",
label: "Created",
selected: (filters?.created_by ?? []).length > 0,
onClick: () => {
setFilters({
assignees: null,
created_by: [user?.id ?? ""],
subscriber: null,
});
},
},
{
key: "subscribed",
label: "Subscribed",
selected: (filters?.subscriber ?? []).length > 0,
onClick: () => {
setFilters({
assignees: null,
created_by: null,
subscriber: [user?.id ?? ""],
});
},
},
];
useEffect(() => {
if (!filters || !user) return;
if (!filters.assignees && !filters.created_by && !filters.subscriber) {
setFilters({
assignees: [user.id],
});
return;
}
}, [filters, setFilters, user]);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="My Issues" />
</Breadcrumbs>
}
right={
<div className="flex items-center gap-2">
<MyIssuesViewOptions />
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
<div className="h-full w-full flex flex-col overflow-hidden">
<div className="px-4 sm:px-5 border-b border-custom-border-300">
<div className="flex items-center overflow-x-scroll">
{tabsList.map((tab) => (
<button
key={tab.key}
type="button"
onClick={tab.onClick}
className={`border-b-2 p-4 text-sm font-medium outline-none whitespace-nowrap ${
tab.selected
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent"
}`}
>
{tab.label}
</button>
))}
</div>
</div>
<MyIssuesView />
</div>
</WorkspaceAuthorizationLayout>
);
};
export default MyIssuesPage;