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: []})
.write()
const saveFile = (file) => {
const saveFile = file => {
return db.get('uploads')
.push(file)
.last()
.write()
.then((result) => result)
.then(result => result)
}
export default {
Query: {
@ -26,10 +26,10 @@ export default {
singleUpload (_, {file}) {
return saveFile(file)
},
multiUpload (_, {files}) {
multipleUpload (_, {files}) {
return Promise.all(files.map((file) => {
return saveFile(file)
})).then((results) => results)
})).then(results => results)
}
}
}

2
api/schema.graphql
View File

@ -18,5 +18,5 @@ type Query {
type Mutation {
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 {graphql, gql} from 'react-apollo'
class MultiUploader extends Component {
class MultipleUploader extends Component {
handleChange = ({target}) => {
if (target.validity.valid) {
this.props
@ -20,12 +20,12 @@ class MultiUploader extends Component {
}
export default graphql(gql`
mutation multiUpload ($files: [Upload!]!) {
multiUpload (files: $files) {
mutation multipleUpload ($files: [Upload!]!) {
multipleUpload (files: $files) {
name
type
size
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 withData from '../helpers/with-data'
import Section from '../components/section'
import SingleUploader from '../components/single-uploader'
import MultiUploader from '../components/multi-uploader'
import MultipleUploader from '../components/multiple-uploader'
import UploadList from '../components/upload-list'
export default withData(props => (
<div>
<Head>
<title>Apollo upload example</title>
<title>Apollo upload examples</title>
<style>{`
html {
font-family: sans-serif;
@ -15,24 +16,19 @@ export default withData(props => (
body {
margin: 2em;
}
section {
padding-top: 3em;
}
`}</style>
</Head>
<h1>Apollo upload example</h1>
<section>
<h2>Single file upload</h2>
<h1>Apollo upload examples</h1>
<Section heading='Single file upload'>
<p>Select an image to upload and view the response in the console.</p>
<SingleUploader />
</section>
<section>
<h2>Multiple file upload</h2>
</Section>
<Section heading='Multiple file upload'>
<p>Select multiple images to upload and view the response in the console.</p>
<MultiUploader />
</section>
<section>
<MultipleUploader />
</Section>
<Section heading='Uploaded files'>
<UploadList />
</section>
</Section>
</div>
))