jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove file upload component files

Browse Source
This commit is contained in:
Jose Eduardo 2025-08-28 02:37:26 -04:00
parent 1ed805d979
commit b2befb71de
4 changed files with 0 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
app/components/UploadBlob.mjs
View File

@ -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<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"),
);
}

30
app/components/UploadFile.mjs
View File

@ -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<HTMLInputElement>} */
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 });
}

45
app/components/UploadFileList.mjs
View File

@ -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<HTMLInputElement>} */
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 });
}

51
app/components/Uploads.mjs
View File

@ -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))),
),
),
);
}