plane/apps/app/pages/workspace/index.tsx
2022-12-08 04:57:10 +05:30

175 lines
6.3 KiB
TypeScript

// next
import type { NextPage } from "next";
import Link from "next/link";
// react
import React from "react";
// layouts
import AppLayout from "layouts/AppLayout";
// swr
import useSWR from "swr";
// hooks
import useUser from "lib/hooks/useUser";
// hoc
import withAuthWrapper from "lib/hoc/withAuthWrapper";
// fetch keys
import { USER_ISSUE } from "constants/fetch-keys";
// services
import userService from "lib/services/user.service";
// ui
import { Spinner } from "ui";
// icons
import { ArrowRightIcon } from "@heroicons/react/24/outline";
// types
import type { IIssue } from "types";
const Workspace: NextPage = () => {
const { user, activeWorkspace, projects } = useUser();
const { data: myIssues } = useSWR<IIssue[]>(
user ? USER_ISSUE : null,
user ? () => userService.userIssues() : null
);
const cards = [
{
id: 1,
numbers: projects?.length ?? 0,
title: "Projects",
},
{
id: 3,
numbers: myIssues?.length ?? 0,
title: "Issues",
},
];
const hours = new Date().getHours();
return (
<AppLayout>
<div className="h-full w-full space-y-5">
{user ? (
<div className="font-medium text-2xl">
Good{" "}
{hours >= 4 && hours < 12
? "Morning"
: hours >= 12 && hours < 17
? "Afternoon"
: "Evening"}
, {user.first_name}!!
</div>
) : (
<div className="animate-pulse" role="status">
<div className="font-semibold text-2xl h-8 bg-gray-200 rounded dark:bg-gray-700 w-60"></div>
</div>
)}
{/* dashboard */}
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-5">
{cards.map(({ id, title, numbers }) => (
<div className="py-6 px-6 min-w-[150px] flex-1 bg-white rounded-lg shadow" key={id}>
<p className="text-gray-500 mt-2 uppercase">#{title}</p>
<h2 className="text-2xl font-semibold">{numbers}</h2>
</div>
))}
</div>
<div className="grid grid-cols-3 gap-5">
<div className="max-h-[30rem] overflow-y-auto w-full border border-gray-200 bg-white rounded-lg shadow-sm col-span-2">
{myIssues ? (
myIssues.length > 0 ? (
<table className="h-full w-full overflow-y-auto">
<thead className="border-b bg-gray-50 text-sm">
<tr>
<th scope="col" className="px-3 py-4 text-left">
ISSUE
</th>
<th scope="col" className="px-3 py-4 text-left">
KEY
</th>
<th scope="col" className="px-3 py-4 text-left">
STATUS
</th>
</tr>
</thead>
<tbody>
{myIssues?.map((issue, index) => (
<tr
className="border-t transition duration-300 ease-in-out hover:bg-gray-100 text-gray-900 gap-3 text-sm"
key={index}
>
<td className="px-3 py-4 font-medium">
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
<a className="hover:text-theme duration-300">{issue.name}</a>
</Link>
</td>
<td className="px-3 py-4">
{issue.project_detail?.identifier}-{issue.sequence_id}
</td>
<td className="px-3 py-4">
<span
className="rounded px-2 py-1 text-xs font-medium"
style={{
border: `2px solid ${issue.state_detail.color}`,
backgroundColor: `${issue.state_detail.color}20`,
}}
>
{issue.state_detail.name ?? "None"}
</span>
</td>
</tr>
))}
</tbody>
</table>
) : (
<div className="m-10">
<p className="text-gray-500 text-center">No Issues Found</p>
</div>
)
) : (
<div className="flex justify-center items-center p-10">
<Spinner />
</div>
)}
</div>
<div className="py-6 px-6 min-w-[150px] flex-1 bg-white rounded-lg shadow">
<h3 className="text-lg font-semibold mb-5">PROJECTS</h3>
<div className="space-y-3">
{projects && activeWorkspace ? (
projects.length > 0 ? (
projects
.sort((a, b) => Date.parse(`${a.updated_at}`) - Date.parse(`${b.updated_at}`))
.map(
(project, index) =>
index < 3 && (
<Link href={`/projects/${project.id}/issues`} key={project.id}>
<a className="flex justify-between">
<div>
<h3>{project.name}</h3>
</div>
<div className="text-gray-400">
<ArrowRightIcon className="w-5" />
</div>
</a>
</Link>
)
)
) : (
<p className="text-gray-500">No projects has been create for this workspace.</p>
)
) : (
<div className="w-full h-full flex items-center justify-center">
<Spinner />
</div>
)}
</div>
</div>
</div>
</div>
</div>
</AppLayout>
);
};
export default withAuthWrapper(Workspace);