78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { Invite } from "@/interfaces/invite";
|
|
import { User } from "@/interfaces/user";
|
|
import axios from "axios";
|
|
import { useState } from "react";
|
|
import { BsArrowRepeat } from "react-icons/bs";
|
|
import { toast } from "react-toastify";
|
|
|
|
interface Props {
|
|
invite: Invite;
|
|
users: User[];
|
|
reload: () => void;
|
|
}
|
|
|
|
export default function InviteCard({ invite, users, reload }: Props) {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const inviter = users.find((u) => u.id === invite.from);
|
|
const name = !inviter
|
|
? null
|
|
: inviter.type === "corporate"
|
|
? inviter.corporateInformation?.companyInformation?.name || inviter.name
|
|
: inviter.name;
|
|
|
|
const decide = (decision: "accept" | "decline") => {
|
|
if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
|
|
|
|
setIsLoading(true);
|
|
axios
|
|
.get(`/api/invites/${decision}/${invite.id}`)
|
|
.then(() => {
|
|
toast.success(
|
|
`Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
|
|
{ toastId: "success" },
|
|
);
|
|
reload();
|
|
})
|
|
.catch((e) => {
|
|
toast.success(`Something went wrong, please try again later!`, {
|
|
toastId: "error",
|
|
});
|
|
reload();
|
|
})
|
|
.finally(() => setIsLoading(false));
|
|
};
|
|
|
|
return (
|
|
<div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
|
|
<span>Invited by {name}</span>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => decide("accept")}
|
|
disabled={isLoading}
|
|
className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
|
|
>
|
|
{!isLoading && "Accept"}
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center">
|
|
<BsArrowRepeat className="animate-spin text-white" size={25} />
|
|
</div>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => decide("decline")}
|
|
disabled={isLoading}
|
|
className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
|
|
>
|
|
{!isLoading && "Decline"}
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center">
|
|
<BsArrowRepeat className="animate-spin text-white" size={25} />
|
|
</div>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|