85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { LightButton } from "@/components/ui/buttons";
|
|
import Container from "@/components/ui/Container";
|
|
import { TranslationHistorySchema } from "@/lib/interfaces";
|
|
import { Dispatch, useEffect, useState } from "react";
|
|
import z from "zod";
|
|
import { Folder } from "../../../../generated/prisma/browser";
|
|
import { getFoldersByUserId } from "@/lib/server/services/folderService";
|
|
import { Folder as Fd } from "lucide-react";
|
|
import { createPair } from "@/lib/server/services/pairService";
|
|
import { toast } from "sonner";
|
|
import { useTranslations } from "next-intl";
|
|
import { authClient } from "@/lib/auth-client";
|
|
|
|
interface AddToFolderProps {
|
|
item: z.infer<typeof TranslationHistorySchema>;
|
|
setShow: Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
const AddToFolder: React.FC<AddToFolderProps> = ({ item, setShow }) => {
|
|
const { data: session } = authClient.useSession();
|
|
const [folders, setFolders] = useState<Folder[]>([]);
|
|
const t = useTranslations("translator.add_to_folder");
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!session) return;
|
|
const userId = session.user.id;
|
|
getFoldersByUserId(userId)
|
|
.then(setFolders)
|
|
.then(() => setLoading(false));
|
|
}, [session]);
|
|
|
|
|
|
if (!session) {
|
|
return (
|
|
<div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
|
|
<Container className="p-6">
|
|
<div>{t("notAuthenticated")}</div>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
|
|
<Container className="p-6">
|
|
<h1>{t("chooseFolder")}</h1>
|
|
<div className="border border-gray-200 rounded-2xl">
|
|
{(loading && <span>...</span>) ||
|
|
(folders.length > 0 &&
|
|
folders.map((folder) => (
|
|
<button
|
|
key={folder.id}
|
|
className="p-2 flex items-center justify-start hover:bg-gray-50 gap-2 hover:cursor-pointer w-full border-b border-gray-200"
|
|
onClick={() => {
|
|
createPair({
|
|
text1: item.text1,
|
|
text2: item.text2,
|
|
language1: item.language1,
|
|
language2: item.language2,
|
|
folderId: folder.id,
|
|
})
|
|
.then(() => {
|
|
toast.success(t("success"));
|
|
setShow(false);
|
|
})
|
|
.catch(() => {
|
|
toast.error(t("error"));
|
|
});
|
|
}}
|
|
>
|
|
<Fd />
|
|
{t("folderInfo", { id: folder.id, name: folder.name })}
|
|
</button>
|
|
))) || <div>{t("noFolders")}</div>}
|
|
</div>
|
|
<LightButton onClick={() => setShow(false)}>{t("close")}</LightButton>
|
|
</Container>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddToFolder;
|