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' import Head from 'next/head'
const Page = ({ title, children }) => ( export const Page = ({ title, children }) => (
<div> <div>
<Head> <Head>
<title>{title}</title> <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> </Head>
{children} {children}
<style jsx global>{`
html {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
background-color: white;
}
body {
margin: 2em;
}
`}</style>
</div> </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> <section>
<h1>{heading}</h1> <header>{intro}</header>
{children} {children}
<style jsx>{` <style jsx>{`
h1 { section {
margin-top: 1.5em; margin-top: 3rem;
margin-bottom: 0.5em; margin-bottom: 1.5rem;
font-size: 120%; }
header {
margin: 1.5rem;
} }
`}</style> `}</style>
</section> </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 { useApolloClient, useMutation } from '@apollo/react-hooks'
import { Button, Code, Fieldset, Textbox } from 'device-agnostic-ui'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import React from 'react' import React from 'react'
import Field from './Field'
const SINGLE_UPLOAD_MUTATION = gql` const SINGLE_UPLOAD_MUTATION = gql`
mutation singleUpload($file: Upload!) { mutation singleUpload($file: Upload!) {
@ -14,7 +14,9 @@ const SINGLE_UPLOAD_MUTATION = gql`
export const UploadBlob = () => { export const UploadBlob = () => {
const [name, setName] = React.useState('') const [name, setName] = React.useState('')
const [content, setContent] = React.useState('') const [content, setContent] = React.useState('')
const [singleUploadMutation] = useMutation(SINGLE_UPLOAD_MUTATION) const [singleUploadMutation, { loading }] = useMutation(
SINGLE_UPLOAD_MUTATION
)
const apolloClient = useApolloClient() const apolloClient = useApolloClient()
const onNameChange = ({ target: { value } }) => setName(value) const onNameChange = ({ target: { value } }) => setName(value)
@ -32,24 +34,30 @@ export const UploadBlob = () => {
return ( return (
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<Field> <Fieldset
<input legend={
<>
File name (without <Code>.txt</Code>)
</>
}
>
<Textbox
placeholder="Name" placeholder="Name"
required required
value={name} value={name}
onChange={onNameChange} onChange={onNameChange}
/>{' '} />
.txt </Fieldset>
</Field> <Fieldset legend="File content">
<Field> <Textbox
<textarea type="textarea"
placeholder="Content" placeholder="Content"
required required
value={content} value={content}
onChange={onContentChange} onChange={onContentChange}
/> />
</Field> </Fieldset>
<button>Upload</button> <Button disabled={loading}>Upload</Button>
</form> </form>
) )
} }

2
app/components/UploadFile.js
View File

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

38
app/components/Uploads.js
View File

@ -1,6 +1,6 @@
import { useQuery } from '@apollo/react-hooks' import { useQuery } from '@apollo/react-hooks'
import { Scroll, Table } from 'device-agnostic-ui'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { Cell, Head, Table } from './Table'
const UPLOADS_QUERY = gql` const UPLOADS_QUERY = gql`
query uploads { query uploads {
@ -17,21 +17,25 @@ export const Uploads = () => {
const { data: { uploads = [] } = {} } = useQuery(UPLOADS_QUERY) const { data: { uploads = [] } = {} } = useQuery(UPLOADS_QUERY)
return ( return (
<Table <Scroll>
thead={ <Table>
<tr> <thead>
<Head>Filename</Head> <tr>
<Head>MIME type</Head> <th>Filename</th>
<Head>Path</Head> <th>MIME type</th>
</tr> <th>Path</th>
} </tr>
tbody={uploads.map(({ id, filename, mimetype, path }) => ( </thead>
<tr key={id}> <tbody>
<Cell>{filename}</Cell> {uploads.map(({ id, filename, mimetype, path }) => (
<Cell>{mimetype}</Cell> <tr key={id}>
<Cell>{path}</Cell> <td>{filename}</td>
</tr> <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", "resolved": "https://registry.npmjs.org/devalue/-/devalue-2.0.0.tgz",
"integrity": "sha512-6H2FBD5DPnQS75UWJtQjoVeKZlmXoa765UgYS5RQnx6Ay9LUhUld0w1/D6cYdrY+wnu6XQNlpEBfnJUZK0YyPQ==" "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": { "diffie-hellman": {
"version": "5.0.3", "version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "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-graphql-tag": "^2.5.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3", "babel-plugin-transform-inline-environment-variables": "^0.4.3",
"cross-fetch": "^3.0.4", "cross-fetch": "^3.0.4",
"device-agnostic-ui": "^1.0.1",
"dotenv-cli": "^2.0.1", "dotenv-cli": "^2.0.1",
"graphql": "^14.5.8", "graphql": "^14.5.8",
"graphql-tag": "^2.10.1", "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 { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client' import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client' import { createUploadLink } from 'apollo-upload-client'
import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui'
import App from 'next/app' import App from 'next/app'
import Head from 'next/head' import Head from 'next/head'
@ -50,7 +51,20 @@ export default class CustomApp extends App {
const { Component, pageProps = {} } = this.props const { Component, pageProps = {} } = this.props
return ( return (
<ApolloProvider client={this.apolloClient}> <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} /> <Component {...pageProps} />
<style jsx global>
{stylesGlobalTheme}
</style>
<style jsx global>
{stylesGlobal}
</style>
</ApolloProvider> </ApolloProvider>
) )
} }

44
app/pages/index.js
View File

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

4
app/public/manifest.webmanifest
View File

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