158 lines
3.9 KiB
JavaScript
158 lines
3.9 KiB
JavaScript
import Head from "next/head";
|
|
import { useState, useCallback } from "react";
|
|
import styles from "../styles/Home.module.css";
|
|
import Header from "../components/templates/header";
|
|
import Nav from "../components/templates/nav";
|
|
import UserTop from "../components/templates/userTop";
|
|
import Content from "../components/templates/content";
|
|
import Footer from "../components/templates/footer";
|
|
import { useSession, signIn, signOut } from "next-auth/react";
|
|
import {
|
|
Pane,
|
|
TextInputField,
|
|
TextareaField,
|
|
Button,
|
|
BuildIcon,
|
|
toaster,
|
|
Alert,
|
|
FileUploader,
|
|
FileCard,
|
|
} from "evergreen-ui";
|
|
|
|
export default function Pdf() {
|
|
const { data: session } = useSession();
|
|
const [files, setFiles] = useState([]);
|
|
const [fileRejections, setFileRejections] = useState([]);
|
|
const handleChange = useCallback((files) => setFiles([files[0]]), []);
|
|
const handleRejected = useCallback(
|
|
(fileRejections) => setFileRejections([fileRejections[0]]),
|
|
[]
|
|
);
|
|
const handleRemove = useCallback(() => {
|
|
setFiles([]);
|
|
setFileRejections([]);
|
|
}, []);
|
|
|
|
if (session) {
|
|
return (
|
|
<div className="">
|
|
<Head>
|
|
<title>Wastpol</title>
|
|
</Head>
|
|
|
|
<div className="flex md:flex-row flex-col justify-between px-8 mt-2">
|
|
<Nav />
|
|
<UserTop session={session} />
|
|
</div>
|
|
|
|
<main className="flex flex-1 flex-col items-center">
|
|
<Pane maxWidth={654}>
|
|
<FileUploader
|
|
label="Upload File"
|
|
description="You can upload 1 file. File can be up to 50 MB."
|
|
maxSizeInBytes={50 * 1024 ** 2}
|
|
maxFiles={1}
|
|
onChange={handleChange}
|
|
onRejected={handleRejected}
|
|
renderFile={(file) => {
|
|
const { name, size, type } = file;
|
|
const fileRejection = fileRejections.find(
|
|
(fileRejection) => fileRejection.file === file
|
|
);
|
|
const { message } = fileRejection || {};
|
|
return (
|
|
<FileCard
|
|
key={name}
|
|
isInvalid={fileRejection != null}
|
|
name={name}
|
|
onRemove={handleRemove}
|
|
sizeInBytes={size}
|
|
type={type}
|
|
validationMessage={message}
|
|
/>
|
|
);
|
|
}}
|
|
values={files}
|
|
/>
|
|
</Pane>
|
|
|
|
<Button
|
|
marginY={8}
|
|
marginRight={12}
|
|
appearance="default"
|
|
iconAfter={BuildIcon}
|
|
onClick={(e) => {
|
|
console.log("louding begins");
|
|
}}
|
|
>
|
|
Przycisk
|
|
</Button>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="grid place-items-center h-screen">
|
|
<Head>
|
|
<title>Wastpol</title>
|
|
</Head>
|
|
<div className="flex flex-col justify-center">
|
|
<h2 className="p-2">Nie zalogowano</h2>
|
|
<br></br>
|
|
<Button
|
|
onClick={() => signIn()}
|
|
appearance="primary"
|
|
// className="p-2 bg-slate-200 rounded-md"
|
|
>
|
|
Zaloguj
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FileUploaderSingleUploadDemo() {
|
|
const [files, setFiles] = useState([]);
|
|
const [fileRejections, setFileRejections] = useState([]);
|
|
const handleChange = useCallback((files) => setFiles([files[0]]), []);
|
|
const handleRejected = useCallback(
|
|
(fileRejections) => setFileRejections([fileRejections[0]]),
|
|
[]
|
|
);
|
|
const handleRemove = useCallback(() => {
|
|
setFiles([]);
|
|
setFileRejections([]);
|
|
}, []);
|
|
return (
|
|
<Pane maxWidth={654}>
|
|
<FileUploader
|
|
label="Upload File"
|
|
description="You can upload 1 file. File can be up to 50 MB."
|
|
maxSizeInBytes={50 * 1024 ** 2}
|
|
maxFiles={1}
|
|
onChange={handleChange}
|
|
onRejected={handleRejected}
|
|
renderFile={(file) => {
|
|
const { name, size, type } = file;
|
|
const fileRejection = fileRejections.find(
|
|
(fileRejection) => fileRejection.file === file
|
|
);
|
|
const { message } = fileRejection || {};
|
|
return (
|
|
<FileCard
|
|
key={name}
|
|
isInvalid={fileRejection != null}
|
|
name={name}
|
|
onRemove={handleRemove}
|
|
sizeInBytes={size}
|
|
type={type}
|
|
validationMessage={message}
|
|
/>
|
|
);
|
|
}}
|
|
values={files}
|
|
/>
|
|
</Pane>
|
|
);
|
|
}
|