95 lines
2.2 KiB
JavaScript
95 lines
2.2 KiB
JavaScript
// @ts-check
|
|
|
|
import { gql } from "@apollo/client/core";
|
|
import { useApolloClient } from "@apollo/client/react/hooks/useApolloClient.js";
|
|
import { useMutation } from "@apollo/client/react/hooks/useMutation.js";
|
|
import ButtonSubmit from "device-agnostic-ui/ButtonSubmit.mjs";
|
|
import Code from "device-agnostic-ui/Code.mjs";
|
|
import Fieldset from "device-agnostic-ui/Fieldset.mjs";
|
|
import Textbox from "device-agnostic-ui/Textbox.mjs";
|
|
import { createElement as h, Fragment, useState } from "react";
|
|
|
|
const SINGLE_UPLOAD_MUTATION = gql`
|
|
mutation singleUpload($file: Upload!) {
|
|
singleUpload(file: $file) {
|
|
id
|
|
}
|
|
}
|
|
`;
|
|
|
|
/** React component for a uploading a blob. */
|
|
export default function UploadBlob() {
|
|
const [name, setName] = useState("");
|
|
const [content, setContent] = useState("");
|
|
const [singleUploadMutation, { loading }] = useMutation(
|
|
SINGLE_UPLOAD_MUTATION
|
|
);
|
|
const apolloClient = useApolloClient();
|
|
|
|
/**
|
|
* @type {import("react").ChangeEventHandler<
|
|
* HTMLInputElement | HTMLTextAreaElement
|
|
* >}
|
|
*/
|
|
function onNameChange({ target: { value } }) {
|
|
setName(value);
|
|
}
|
|
|
|
/**
|
|
* @type {import("react").ChangeEventHandler<
|
|
* HTMLInputElement | HTMLTextAreaElement
|
|
* >}
|
|
*/
|
|
function onContentChange({ target: { value } }) {
|
|
setContent(value);
|
|
}
|
|
|
|
/** @type {import("react").FormEventHandler<HTMLFormElement>} */
|
|
function onSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
singleUploadMutation({
|
|
variables: {
|
|
file: new File([content], `${name}.txt`, { type: "text/plain" }),
|
|
},
|
|
}).then(() => {
|
|
apolloClient.resetStore();
|
|
});
|
|
}
|
|
|
|
return h(
|
|
"form",
|
|
{ onSubmit },
|
|
h(
|
|
Fieldset,
|
|
{
|
|
legend: h(
|
|
Fragment,
|
|
null,
|
|
"File name (without ",
|
|
h(Code, null, ".txt"),
|
|
")"
|
|
),
|
|
},
|
|
h(Textbox, {
|
|
placeholder: "Name",
|
|
required: true,
|
|
value: name,
|
|
onChange: onNameChange,
|
|
})
|
|
),
|
|
h(
|
|
Fieldset,
|
|
{ legend: "File content" },
|
|
h(Textbox, {
|
|
type: "textarea",
|
|
placeholder: "Content",
|
|
required: true,
|
|
value: content,
|
|
onChange: onContentChange,
|
|
})
|
|
),
|
|
h(ButtonSubmit, { loading }, "Upload")
|
|
);
|
|
}
|