Never before had a small typo like this one caused so much damage.

2022-05-12 15:23:44 +02:00
parent 9baca0e6a2
commit e0d822adc8
2 changed files with 160 additions and 3 deletions
--- a/components/templates/nav.js
+++ b/components/templates/nav.js
@@ -9,10 +9,10 @@ export default function Nav() {
 					<img src="logo.png" className="h-12" />
 				</h2>
 			</Link>
-			{/*<Link href="/onas">
-				<h3 className="px-3 py-2 place-self-end">O nas</h3>
+			<Link href="/pdf">
+				<h3 className="px-3 py-2 place-self-end">PDF</h3>
 			</Link>
-			<Link href="/kontakt">
+			{/*<Link href="/kontakt">
 				<h3 className="px-3 py-2 place-self-end">Kontakt</h3>
 	</Link>*/}
 		</Pane>
--- a/pages/pdf.js
+++ b/pages/pdf.js
@@ -0,0 +1,157 @@
+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>
+	);
+}