From 6492ba8fef5eb1943a87274466ff007f2e269bac Mon Sep 17 00:00:00 2001 From: Jayden Seric Date: Sun, 9 Apr 2017 13:13:39 +1000 Subject: [PATCH] Componentization improvements. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Using a new component for sections. - Renamed “multi” to “multiple” in the uploader name, to match the input attribute “multiple”. --- api/resolvers.js | 8 +++--- api/schema.graphql | 2 +- ...multi-uploader.js => multiple-uploader.js} | 8 +++--- app/components/section.js | 11 ++++++++ app/pages/index.js | 26 ++++++++----------- 5 files changed, 31 insertions(+), 24 deletions(-) rename app/components/{multi-uploader.js => multiple-uploader.js} (78%) create mode 100644 app/components/section.js diff --git a/api/resolvers.js b/api/resolvers.js index d335296..5cafcb1 100644 --- a/api/resolvers.js +++ b/api/resolvers.js @@ -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) } } } diff --git a/api/schema.graphql b/api/schema.graphql index deab78d..1ecf5e6 100644 --- a/api/schema.graphql +++ b/api/schema.graphql @@ -18,5 +18,5 @@ type Query { type Mutation { singleUpload (file: Upload!): File! - multiUpload (files: [Upload!]!): [File!]! + multipleUpload (files: [Upload!]!): [File!]! } diff --git a/app/components/multi-uploader.js b/app/components/multiple-uploader.js similarity index 78% rename from app/components/multi-uploader.js rename to app/components/multiple-uploader.js index de9b45b..dfaed22 100644 --- a/app/components/multi-uploader.js +++ b/app/components/multiple-uploader.js @@ -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) diff --git a/app/components/section.js b/app/components/section.js new file mode 100644 index 0000000..7fc4e1c --- /dev/null +++ b/app/components/section.js @@ -0,0 +1,11 @@ +export default ({heading, children}) => ( +
+

{heading}

+ {children} + +
+) diff --git a/app/pages/index.js b/app/pages/index.js index 5876c16..19a5ee7 100644 --- a/app/pages/index.js +++ b/app/pages/index.js @@ -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 => (
- Apollo upload example + Apollo upload examples -

Apollo upload example

-
-

Single file upload

+

Apollo upload examples

+

Select an image to upload and view the response in the console.

-
-
-

Multiple file upload

+
+

Select multiple images to upload and view the response in the console.

- -
-
+ +
+
-
+
))