diff --git a/app/components/UploadBlob.mjs b/app/components/UploadBlob.mjs deleted file mode 100644 index 9b8524d..0000000 --- a/app/components/UploadBlob.mjs +++ /dev/null @@ -1,94 +0,0 @@ -// @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} */ - 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"), - ); -} diff --git a/app/components/UploadFile.mjs b/app/components/UploadFile.mjs deleted file mode 100644 index 1ab7ab7..0000000 --- a/app/components/UploadFile.mjs +++ /dev/null @@ -1,30 +0,0 @@ -// @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 { createElement as h } from "react"; - -const SINGLE_UPLOAD_MUTATION = gql` - mutation singleUpload($file: Upload!) { - singleUpload(file: $file) { - id - } - } -`; - -/** React component for a uploading a single file. */ -export default function UploadFile() { - const [uploadFileMutation] = useMutation(SINGLE_UPLOAD_MUTATION); - const apolloClient = useApolloClient(); - - /** @type {import("react").ChangeEventHandler} */ - function onChange({ target: { validity, files } }) { - if (validity.valid && files && files[0]) - uploadFileMutation({ variables: { file: files[0] } }).then(() => { - apolloClient.resetStore(); - }); - } - - return h("input", { type: "file", required: true, onChange }); -} diff --git a/app/components/UploadFileList.mjs b/app/components/UploadFileList.mjs deleted file mode 100644 index ce10337..0000000 --- a/app/components/UploadFileList.mjs +++ /dev/null @@ -1,45 +0,0 @@ -// @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 { createElement as h } from "react"; - -const MULTIPLE_UPLOAD_MUTATION = gql` - mutation multipleUpload($files: [Upload!]!) { - multipleUpload(files: $files) { - id - } - } -`; - -/** - * @typedef {{ - * multipleUpload: { - * id: string, - * }, - * }} MultipleUploadMutationData - */ - -/** React component for a uploading a file list. */ -export default function UploadFileList() { - const [multipleUploadMutation] = - /** - * @type {import("@apollo/client/react/types/types.js").MutationTuple< - * MultipleUploadMutationData, - * { files: FileList } - * >} - */ - (useMutation(MULTIPLE_UPLOAD_MUTATION)); - const apolloClient = useApolloClient(); - - /** @type {import("react").ChangeEventHandler} */ - function onChange({ target: { validity, files } }) { - if (validity.valid && files && files[0]) - multipleUploadMutation({ variables: { files } }).then(() => { - apolloClient.resetStore(); - }); - } - - return h("input", { type: "file", multiple: true, required: true, onChange }); -} diff --git a/app/components/Uploads.mjs b/app/components/Uploads.mjs deleted file mode 100644 index 5451061..0000000 --- a/app/components/Uploads.mjs +++ /dev/null @@ -1,51 +0,0 @@ -// @ts-check - -import { gql } from "@apollo/client/core"; -import { useQuery } from "@apollo/client/react/hooks/useQuery.js"; -import Scroll from "device-agnostic-ui/Scroll.mjs"; -import Table from "device-agnostic-ui/Table.mjs"; -import { createElement as h } from "react"; - -const UPLOADS_QUERY = gql` - query uploads { - uploads { - id - url - } - } -`; - -/** - * @typedef {{ - * uploads: Array<{ - * id: string, - * url: string - * }>, - * }} UploadsQueryData - */ - -/** React component for displaying uploads. */ -export default function Uploads() { - const { data: { uploads = [] } = {} } = - /** - * @type {import("@apollo/client/react/types/types.js").QueryResult< - * UploadsQueryData - * >} - */ - (useQuery(UPLOADS_QUERY)); - - return h( - Scroll, - null, - h( - Table, - null, - h("thead", null, h("tr", null, h("th", null, "Stored file URL"))), - h( - "tbody", - null, - uploads.map(({ id, url }) => h("tr", { key: id }, h("td", null, url))), - ), - ), - ); -}