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

Componentization improvements.

Browse Source 
- Using a new component for sections.
- Renamed “multi” to “multiple” in the uploader name, to match the input attribute “multiple”.
This commit is contained in:
Jayden Seric 2017-04-09 13:13:39 +10:00
parent 14d941fad2
commit 6492ba8fef
5 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/resolvers.js
View File

@ -9,12 +9,12 @@ const db = low('db.json', {
db.defaults({uploads: []}) db.defaults({uploads: []})
.write() .write()
const saveFile = (file) => { const saveFile = file => {
return db.get('uploads') return db.get('uploads')
.push(file) .push(file)
.last() .last()
.write() .write()
.then((result) => result) .then(result => result)
} }
export default { export default {
Query: { Query: {
@ -26,10 +26,10 @@ export default {
singleUpload (_, {file}) { singleUpload (_, {file}) {
return saveFile(file) return saveFile(file)
}, },
multiUpload (_, {files}) { multipleUpload (_, {files}) {
return Promise.all(files.map((file) => { return Promise.all(files.map((file) => {
return saveFile(file) return saveFile(file)
})).then((results) => results) })).then(results => results)
} }
} }
} }

2
api/schema.graphql
View File

@ -18,5 +18,5 @@ type Query {
type Mutation { type Mutation {
singleUpload (file: Upload!): File! singleUpload (file: Upload!): File!
multiUpload (files: [Upload!]!): [File!]! multipleUpload (files: [Upload!]!): [File!]!
} }

8
app/components/multi-uploader.js → app/components/multiple-uploader.js
View File

@ -1,7 +1,7 @@
import {Component} from 'react' import {Component} from 'react'
import {graphql, gql} from 'react-apollo' import {graphql, gql} from 'react-apollo'
class MultiUploader extends Component { class MultipleUploader extends Component {
handleChange = ({target}) => { handleChange = ({target}) => {
if (target.validity.valid) { if (target.validity.valid) {
this.props this.props
@ -20,12 +20,12 @@ class MultiUploader extends Component {
} }
export default graphql(gql` export default graphql(gql`
mutation multiUpload ($files: [Upload!]!) { mutation multipleUpload ($files: [Upload!]!) {
multiUpload (files: $files) { multipleUpload (files: $files) {
name name
type type
size size
path path
} }
} }
`)(MultiUploader) `)(MultipleUploader)

11
app/components/section.js Normal file
View File

@ -0,0 +1,11 @@
export default ({heading, children}) => (
<section>
<h2>{heading}</h2>
{children}
<style jsx>{`
section {
padding: 1em 0;
}
`}</style>
</section>
)

26
app/pages/index.js
View File

@ -1,13 +1,14 @@
import Head from 'next/head' import Head from 'next/head'
import withData from '../helpers/with-data' import withData from '../helpers/with-data'
import Section from '../components/section'
import SingleUploader from '../components/single-uploader' import SingleUploader from '../components/single-uploader'
import MultiUploader from '../components/multi-uploader' import MultipleUploader from '../components/multiple-uploader'
import UploadList from '../components/upload-list' import UploadList from '../components/upload-list'
export default withData(props => ( export default withData(props => (
<div> <div>
<Head> <Head>
<title>Apollo upload example</title> <title>Apollo upload examples</title>
<style>{` <style>{`
html { html {
font-family: sans-serif; font-family: sans-serif;
@ -15,24 +16,19 @@ export default withData(props => (
body { body {
margin: 2em; margin: 2em;
} }
section {
padding-top: 3em;
}
`}</style> `}</style>
</Head> </Head>
<h1>Apollo upload example</h1> <h1>Apollo upload examples</h1>
<section> <Section heading='Single file upload'>
<h2>Single file upload</h2>
<p>Select an image to upload and view the response in the console.</p> <p>Select an image to upload and view the response in the console.</p>
<SingleUploader /> <SingleUploader />
</section> </Section>
<section> <Section heading='Multiple file upload'>
<h2>Multiple file upload</h2>
<p>Select multiple images to upload and view the response in the console.</p> <p>Select multiple images to upload and view the response in the console.</p>
<MultiUploader /> <MultipleUploader />
</section> </Section>
<section> <Section heading='Uploaded files'>
<UploadList /> <UploadList />
</section> </Section>
</div> </div>
)) ))