import React, { useState } from "react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // next-themes import { useTheme } from "next-themes"; // services import workspaceService from "services/workspace.service"; // hooks import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // layouts import DefaultLayout from "layouts/default-layout"; import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper"; // ui import { SecondaryButton, PrimaryButton, EmptyState } from "components/ui"; // icons import { CheckCircleIcon } from "@heroicons/react/24/outline"; // images import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; import emptyInvitation from "public/empty-state/invitation.svg"; // helpers import { truncateText } from "helpers/string.helper"; // types import type { NextPage } from "next"; import type { IWorkspaceMemberInvitation } from "types"; // fetch-keys import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys"; // constants import { ROLE } from "constants/workspace"; import userService from "services/user.service"; const OnBoard: NextPage = () => { const [invitationsRespond, setInvitationsRespond] = useState([]); const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); const router = useRouter(); const { theme } = useTheme(); const { user } = useUser(); const { setToastAlert } = useToast(); const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations() ); const handleInvitation = ( workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw" ) => { if (action === "accepted") { setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]); } else if (action === "withdraw") { setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id) ); } }; const submitInvitations = () => { if (invitationsRespond.length === 0) { setToastAlert({ type: "error", title: "Error!", message: "Please select at least one invitation.", }); return; } setIsJoiningWorkspaces(true); workspaceService .joinWorkspaces({ invitations: invitationsRespond }) .then(() => { mutate("USER_WORKSPACES"); const firstInviteId = invitationsRespond[0]; const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace; userService .updateUser({ last_workspace_id: redirectWorkspace?.id }) .then(() => { setIsJoiningWorkspaces(false); router.push(`/${redirectWorkspace?.slug}`); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong, Please try again.", }); setIsJoiningWorkspaces(false); }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong, Please try again.", }); setIsJoiningWorkspaces(false); }); }; return (
{theme === "light" ? ( Plane black logo ) : ( Plane white logo )}
{user?.email}
{invitations ? ( invitations.length > 0 ? (
We see that someone has invited you to

Join a workspace

{invitations.map((invitation) => { const isSelected = invitationsRespond.includes(invitation.id); return (
handleInvitation(invitation, isSelected ? "withdraw" : "accepted") } >
{invitation.workspace.logo && invitation.workspace.logo !== "" ? ( {invitation.workspace.name} ) : ( {invitation.workspace.name[0]} )}
{truncateText(invitation.workspace.name, 30)}

{ROLE[invitation.role]}

); })}
Accept & Join Go Home
) : (
router.push("/"), }} />
) ) : null}
); }; export default OnBoard;