src/components/fileUploadDrawer.tsx - master - durovcode/Frontend

src/components/fileUploadDrawer.tsx
118 строк5 KB
Alch3m1st
Correction placeholder, add text verification.
22 сен 2024, 06:38
22 сен 2024, 06:38a548aca
"use client"

import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
} from "@/components/ui/drawer"
import { Bolt, FileText, HardDriveDownload } from "lucide-react"
import { ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Label } from "./ui/label"
import { Input } from "./ui/input"
import { Textarea } from "./ui/textarea"
import { SelectLecturer } from "./selectLecturer"
import React from "react"
import { toast } from "sonner"


export const FileUploadDrawer = ({ triggerComponent }) => {
    const [file, setFile] = React.useState(null);
    const [wishes, setWishes] = React.useState("");

    function sendFile() {
        if (!file) return;

        const formData = new FormData();
        formData.append('file', file);

        if (wishes.length > 0) {
            formData.append('wishes', wishes);
        }

        fetch(`${import.meta.env.VITE_API_BASE_URL}${import.meta.env.VITE_API_PATH}/ai/query`, {
            method: "POST",
            mode: "cors",
            headers: {
                'Authorization': `Bearer ${localStorage.getItem("jwt")}`
            },
            body: formData,
        })
            .then(response => response.json())
            .then(result => {
                if (result["ok"]) {
                    let uri = `http://localhost:8000${result["report_docx"]}`
                    window.location.href = uri;

                    toast.success("Отчёт был загружен!", {
                        description: result["detail"],
                        action: {
                            label: "Скрыть"
                        },
                    });
                } else {
                    toast.error("Ошибочка!", {
                        description: result["detail"],
                        action: {
                            label: "Скрыть"
                        },
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    return (
        <>
            <Drawer>
                <DrawerTrigger>
                    {triggerComponent}
                </DrawerTrigger>
                <DrawerContent>
                    <DrawerHeader>
                        <div className="flex flex-col items-center justify-center pr-10 pl-10 gap-4">
                            <div className=" max-w-sm text-center">
                                <div className="flex flex-col gap-3">
                                    <div className="flex items-center justify-center">
                                        <FileText className="w-10 h-10" />
                                    </div>
                                    <DrawerTitle>Загрузите файл для проверки</DrawerTitle>
                                    <DrawerDescription>Вы можете оставить пожелания к проверке в поле ниже</DrawerDescription>
                                </div>
                            </div>
                        </div>
                    </DrawerHeader>
                    <div className="flex flex-col items-center justify-center gap-6 p-10">
                        <div className="grid w-full max-w-sm items-center gap-1.5">
                            <Label htmlFor="picture">.docx файл для проверки</Label>
                            <Input onChange={(e) => { setFile(e.target.files[0]) }} id="picture" type="file" />
                        </div>
                        <div className="grid w-full max-w-sm items-center gap-1.5">
                            <Label htmlFor="message">Ваши пожелания к проверке</Label>
                            <Textarea onChange={(e) => { setWishes(e.target.value) }} placeholder="Будь добр, сделай правки в более понятном формате" id="message" />
                        </div>
                        <div className="grid w-full max-w-sm items-center gap-1.5">
                            <SelectLecturer></SelectLecturer>
                        </div>
                        <DrawerClose>
                            <Button onClick={() => { sendFile() }}>Отправить на проверку</Button>
                        </DrawerClose>

                    </div>
                    <DrawerFooter>
                        <DrawerClose>
                            <Button variant="outline">Закрыть</Button>
                        </DrawerClose>
                    </DrawerFooter>
                </DrawerContent>
            </Drawer>
        </>
    )
}