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

Update examples, and use device-agnostic-ui.

Browse Source
This commit is contained in:
Jayden Seric 2019-10-09 20:26:37 +11:00
parent 5bea2ddf51
commit acfe8de26f
13 changed files with 122 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/Field.js
View File

@ -1,13 +0,0 @@
const Field = ({ children }) => (
<label>
{children}
<style jsx>{`
label {
display: block;
margin-bottom: 0.5em;
}
`}</style>
</label>
)
export default Field

10
app/components/Inset.js Normal file
View File

@ -0,0 +1,10 @@
export const Inset = ({ children }) => (
<div>
{children}
<style jsx>{`
div {
margin: 1.5rem;
}
`}</style>
</div>
)

19
app/components/Page.js
View File

@ -1,27 +1,10 @@
import Head from 'next/head'
const Page = ({ title, children }) => (
export const Page = ({ title, children }) => (
<div>
<Head>
<title>{title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" sizes="192x192" href="/icon.png" />
<link rel="apple-touch-icon" href="/launcher-icon.png" />
</Head>
{children}
<style jsx global>{`
html {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
background-color: white;
}
body {
margin: 2em;
}
`}</style>
</div>
)
export default Page

16
app/components/Section.js
View File

@ -1,15 +1,15 @@
const Section = ({ heading, children }) => (
export const Section = ({ intro, children }) => (
<section>
<h1>{heading}</h1>
<header>{intro}</header>
{children}
<style jsx>{`
h1 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-size: 120%;
section {
margin-top: 3rem;
margin-bottom: 1.5rem;
}
header {
margin: 1.5rem;
}
`}</style>
</section>
)
export default Section

44
app/components/Table.js
View File

@ -1,44 +0,0 @@
export const Table = ({ thead, tbody }) => (
<div>
<table>
<thead>{thead}</thead>
<tbody>{tbody}</tbody>
</table>
<style jsx>{`
div {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
table {
border-spacing: 0;
padding: 1em 0;
text-align: left;
}
`}</style>
</div>
)
export const Head = ({ children }) => (
<th>
{children}
<style jsx>{`
th {
padding: 0.3em 0.5em;
}
`}</style>
</th>
)
export const Cell = ({ children }) => (
<td>
{children}
<style jsx>{`
td {
padding: 0.3em 0.5em;
vertical-align: top;
white-space: nowrap;
}
`}</style>
</td>
)

30
app/components/UploadBlob.js
View File

@ -1,7 +1,7 @@
import { useApolloClient, useMutation } from '@apollo/react-hooks'
import { Button, Code, Fieldset, Textbox } from 'device-agnostic-ui'
import gql from 'graphql-tag'
import React from 'react'
import Field from './Field'
const SINGLE_UPLOAD_MUTATION = gql`
mutation singleUpload($file: Upload!) {
@ -14,7 +14,9 @@ const SINGLE_UPLOAD_MUTATION = gql`
export const UploadBlob = () => {
const [name, setName] = React.useState('')
const [content, setContent] = React.useState('')
const [singleUploadMutation] = useMutation(SINGLE_UPLOAD_MUTATION)
const [singleUploadMutation, { loading }] = useMutation(
SINGLE_UPLOAD_MUTATION
)
const apolloClient = useApolloClient()
const onNameChange = ({ target: { value } }) => setName(value)
@ -32,24 +34,30 @@ export const UploadBlob = () => {
return (
<form onSubmit={onSubmit}>
<Field>
<input
<Fieldset
legend={
<>
File name (without <Code>.txt</Code>)
</>
}
>
<Textbox
placeholder="Name"
required
value={name}
onChange={onNameChange}
/>{' '}
.txt
</Field>
<Field>
<textarea
/>
</Fieldset>
<Fieldset legend="File content">
<Textbox
type="textarea"
placeholder="Content"
required
value={content}
onChange={onContentChange}
/>
</Field>
<button>Upload</button>
</Fieldset>
<Button disabled={loading}>Upload</Button>
</form>
)
}

2
app/components/UploadFile.js
View File

@ -2,7 +2,7 @@ import { useApolloClient, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
const SINGLE_UPLOAD_MUTATION = gql`
mutation($file: Upload!) {
mutation singleUpload($file: Upload!) {
singleUpload(file: $file) {
id
}

38
app/components/Uploads.js
View File

@ -1,6 +1,6 @@
import { useQuery } from '@apollo/react-hooks'
import { Scroll, Table } from 'device-agnostic-ui'
import gql from 'graphql-tag'
import { Cell, Head, Table } from './Table'
const UPLOADS_QUERY = gql`
query uploads {
@ -17,21 +17,25 @@ export const Uploads = () => {
const { data: { uploads = [] } = {} } = useQuery(UPLOADS_QUERY)
return (
<Table
thead={
<tr>
<Head>Filename</Head>
<Head>MIME type</Head>
<Head>Path</Head>
</tr>
}
tbody={uploads.map(({ id, filename, mimetype, path }) => (
<tr key={id}>
<Cell>{filename}</Cell>
<Cell>{mimetype}</Cell>
<Cell>{path}</Cell>
</tr>
))}
/>
<Scroll>
<Table>
<thead>
<tr>
<th>Filename</th>
<th>MIME type</th>
<th>Path</th>
</tr>
</thead>
<tbody>
{uploads.map(({ id, filename, mimetype, path }) => (
<tr key={id}>
<td>{filename}</td>
<td>{mimetype}</td>
<td>{path}</td>
</tr>
))}
</tbody>
</Table>
</Scroll>
)
}

10
app/package-lock.json generated
View File

@ -2628,6 +2628,16 @@
"resolved": "https://registry.npmjs.org/devalue/-/devalue-2.0.0.tgz",
"integrity": "sha512-6H2FBD5DPnQS75UWJtQjoVeKZlmXoa765UgYS5RQnx6Ay9LUhUld0w1/D6cYdrY+wnu6XQNlpEBfnJUZK0YyPQ=="
},
"device-agnostic-ui": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/device-agnostic-ui/-/device-agnostic-ui-1.0.1.tgz",
"integrity": "sha512-Dn2o6pTDeO7wAgtzdEBZFZCQO5I3n82hpcvr7ezBcYhoVN+vin/mz711AlydExtxKZS8hTUd/JOB7EfQnnXMjA==",
"requires": {
"@babel/runtime": "^7.6.2",
"object-assign": "^4.1.1",
"prop-types": "^15.7.2"
}
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",

1
app/package.json
View File

@ -20,6 +20,7 @@
"babel-plugin-graphql-tag": "^2.5.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"cross-fetch": "^3.0.4",
"device-agnostic-ui": "^1.0.1",
"dotenv-cli": "^2.0.1",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",

14
app/pages/_app.js
View File

@ -3,6 +3,7 @@ import { ApolloProvider } from '@apollo/react-hooks'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client'
import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui'
import App from 'next/app'
import Head from 'next/head'
@ -50,7 +51,20 @@ export default class CustomApp extends App {
const { Component, pageProps = {} } = this.props
return (
<ApolloProvider client={this.apolloClient}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="white" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" sizes="192x192" href="/icon.png" />
</Head>
<Component {...pageProps} />
<style jsx global>
{stylesGlobalTheme}
</style>
<style jsx global>
{stylesGlobal}
</style>
</ApolloProvider>
)
}

44
app/pages/index.js
View File

@ -1,5 +1,7 @@
import Page from '../components/Page'
import Section from '../components/Section'
import { Code, Heading } from 'device-agnostic-ui'
import { Inset } from '../components/Inset'
import { Page } from '../components/Page'
import { Section } from '../components/Section'
import { UploadBlob } from '../components/UploadBlob'
import { UploadFile } from '../components/UploadFile'
import { UploadFileList } from '../components/UploadFileList'
@ -7,16 +9,40 @@ import { Uploads } from '../components/Uploads'
const IndexPage = () => (
<Page title="Apollo upload examples">
<Section heading="Upload FileList">
<UploadFileList />
<Section
intro={
<Heading>
Upload <Code>FileList</Code>
</Heading>
}
>
<Inset>
<UploadFileList />
</Inset>
</Section>
<Section heading="Upload File">
<UploadFile />
<Section
intro={
<Heading>
Upload <Code>File</Code>
</Heading>
}
>
<Inset>
<UploadFile />
</Inset>
</Section>
<Section heading="Upload Blob">
<UploadBlob />
<Section
intro={
<Heading>
Upload <Code>Blob</Code>
</Heading>
}
>
<Inset>
<UploadBlob />
</Inset>
</Section>
<Section heading="Uploads">
<Section intro={<Heading>Uploads</Heading>}>
<Uploads />
</Section>
</Page>

4
app/public/manifest.webmanifest
View File

@ -3,8 +3,8 @@
"short_name": "Uploads",
"start_url": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"theme_color": "white",
"background_color": "white",
"icons": [
{
"src": "launcher-icon.png",