plane/pages/invitations.tsx
2022-11-19 19:51:26 +05:30

203 lines
7.7 KiB
TypeScript

import React, { useEffect, useState } from "react";
// next
import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
// swr
import useSWR from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import workspaceService from "lib/services/workspace.service";
import userService from "lib/services/user.service";
// hooks
import useUser from "lib/hooks/useUser";
// constants
import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
// hoc
import withAuthWrapper from "lib/hoc/withAuthWrapper";
// layouts
import DefaultLayout from "layouts/DefaultLayout";
// ui
import { Button, Spinner } from "ui";
// types
import type { IWorkspaceInvitation } from "types";
import { ChartBarIcon, ChevronRightIcon, CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
const OnBoard: NextPage = () => {
const [canRedirect, setCanRedirect] = useState(true);
const router = useRouter();
const { workspaces, mutateWorkspaces, user } = useUser();
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
const { data: invitations, mutate } = useSWR<IWorkspaceInvitation[]>(
USER_WORKSPACE_INVITATIONS,
() => workspaceService.userWorkspaceInvitations()
);
const handleInvitation = (
workspace_invitation: IWorkspaceInvitation,
action: "accepted" | "withdraw"
) => {
if (action === "accepted") {
setInvitationsRespond((prevData) => {
return [...prevData, workspace_invitation.id];
});
} else if (action === "withdraw") {
setInvitationsRespond((prevData) => {
return prevData.filter((item: string) => item !== workspace_invitation.id);
});
}
};
const submitInvitations = () => {
userService.updateUserOnBoard().then((response) => {
console.log(response);
});
workspaceService
.joinWorkspaces({ invitations: invitationsRespond })
.then(async (res: any) => {
console.log(res);
await mutate();
await mutateWorkspaces();
})
.catch((err) => {
console.log(err);
});
};
// useEffect(() => {
// if (!invitations) return;
// else
// invitations.forEach((invite) => {
// if (invite.accepted)
// setInvitationsRespond((prevData) => {
// return [...prevData, invite.workspace.id];
// });
// });
// }, [invitations, router, workspaces]);
useEffect(() => {
if (workspaces && workspaces.length === 0) {
setCanRedirect(false);
}
}, [workspaces]);
return (
<DefaultLayout
meta={{
title: "Plane - Welcome to Plane",
description:
"Please fasten your seatbelts because we are about to take your productivity to the next level.",
}}
>
<div className="flex min-h-full flex-col items-center justify-center p-4 sm:p-0">
{user && (
<div className="w-96 p-2 rounded-lg bg-indigo-100 text-indigo-600 mb-10">
<p className="text-sm text-center">logged in as {user.email}</p>
</div>
)}
<div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
{invitations ? (
invitations.length > 0 ? (
<div className="mt-3 sm:mt-5">
<div className="mt-2">
<h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
<div className="space-y-2 mb-12">
{invitations.map((item) => (
<div
className="relative flex items-center border px-4 py-2 rounded"
key={item.id}
>
<div className="ml-3 text-sm flex flex-col items-start w-full">
<h3 className="font-medium text-xl text-gray-700">
{item.workspace.name}
</h3>
<p className="text-sm">invited by {item.workspace.owner.first_name}</p>
</div>
<div className="flex gap-x-2 h-5 items-center">
<div className="h-full flex items-center gap-x-1">
<input
id={`${item.id}`}
aria-describedby="workspaces"
name={`${item.id}`}
checked={invitationsRespond.includes(item.id)}
value={item.workspace.name}
onChange={() => {
handleInvitation(
item,
invitationsRespond.includes(item.id) ? "withdraw" : "accepted"
);
}}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<label htmlFor={item.id} className="text-sm">
Accept
</label>
</div>
{/* <div className="h-full flex items-center gap-x-1">
<input
id={`${item.id}`}
aria-describedby="workspaces"
name={`${item.id}`}
checked={invitationsRespond.includes(item.workspace.id)}
value={item.workspace.name}
onChange={() => {
handleInvitation(item, invitationsRespond.includes(item.workspace.id) ? "withdraw" : "accepted");
}}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<label htmlFor={item.id} className="text-sm">
Reject
</label>
</div> */}
</div>
</div>
))}
</div>
</div>
<div className="flex justify-between mt-4">
<Button className="w-full" onClick={submitInvitations}>
Continue to Dashboard
</Button>
</div>
</div>
) : (
<EmptySpace
title={`${
canRedirect
? `You haven't been invited to any workspace yet.`
: "You don't have any workspaces, Start by creating one."
}`}
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
>
<EmptySpaceItem
Icon={canRedirect ? CubeIcon : PlusIcon}
title={canRedirect ? "Continue to Dashboard" : "Create your Workspace"}
action={() => {
userService.updateUserOnBoard().then((response) => {
console.log(response);
});
router.push(canRedirect ? "/" : "/create-workspace");
}}
/>
</EmptySpace>
)
) : (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
)}
</div>
</div>
</DefaultLayout>
);
};
export default withAuthWrapper(OnBoard);