import React, { useState, FormEvent } from "react"; import { Form, Button, Alert } from "react-bootstrap"; import { navigate, RouteComponentProps } from "@reach/router"; import { GATEWAY_URL, MAX_FILE_SIZE } from "../config.json"; import { putObject } from "../libs"; import { HomeButton, ButtonSpinner, PageContainer } from "../components"; const CreateNote = (props: RouteComponentProps) => { const [isLoading, setIsLoading] = useState(false); const [errorMsg, setErrorMsg] = useState(""); const [noteContent, setNoteContent] = useState(""); const [file, setFile] = useState(); const handleSubmit = async (event: FormEvent<HTMLFormElement>) => { event.preventDefault(); // @ts-ignore Object is possibly 'undefined' if (file && file.size > MAX_FILE_SIZE) { setErrorMsg(`File can't be bigger than ${MAX_FILE_SIZE / 1000000} MB`); return; } setIsLoading(true); const createNoteURL = `${GATEWAY_URL}notes`; try { // @ts-ignore Argument of type 'undefined' is not assignable to parameter of type 'File' const attachment = file ? await putObject(file) : undefined; await fetch(createNoteURL, { method: "POST", body: JSON.stringify({ attachment, content: noteContent }), }); navigate("/"); } catch (error) { setErrorMsg(`${error.toString()} - ${createNoteURL} - ${noteContent}`); } finally { setIsLoading(false); } }; return ( <PageContainer header={<HomeButton />}> <form onSubmit={handleSubmit}> {errorMsg && <Alert variant="danger">{errorMsg}</Alert>} <Form.Group controlId="content"> <Form.Label>Note Content</Form.Label> <Form.Control as="textarea" placeholder="Enter Note content" onChange={(e) => { const content = e.currentTarget.value; if (content) { setNoteContent(content); } }} /> </Form.Group> <Form.Group controlId="file"> <Form.Label>Attachment</Form.Label> <Form.Control onChange={(e) => { // @ts-ignore Property 'files' does not exist on type setFile(e.target.files[0]); }} type="file" /> </Form.Group> <Button type="submit" disabled={!noteContent || isLoading} block> {isLoading ? <ButtonSpinner /> : ""} {isLoading ? "Creating..." : "Create"} </Button> </form> </PageContainer> ); }; export { CreateNote };