From 0a1876b25397a8888eaec64a4a6d26f7ca7568fe Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Wed, 26 Apr 2017 01:38:45 +1000
Subject: [PATCH] Using functional components instead of classes.

---
 app/components/multiple-uploader.js | 11 ++++-------
 app/components/single-uploader.js   | 11 ++++-------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/components/multiple-uploader.js b/app/components/multiple-uploader.js
index 9b5b5e5..dc6ab85 100644
--- a/app/components/multiple-uploader.js
+++ b/app/components/multiple-uploader.js
@@ -1,11 +1,10 @@
-import {Component} from 'react'
 import {graphql, gql} from 'react-apollo'
 import uploadsQuery from '../queries/uploads'
 
-class MultipleUploader extends Component {
-  handleChange = ({target}) => {
+const MultipleUploader = ({mutate}) => {
+  const handleChange = ({target}) => {
     if (target.validity.valid) {
-      this.props.mutate({
+      mutate({
         variables: {
           files: target.files
         },
@@ -16,9 +15,7 @@ class MultipleUploader extends Component {
     }
   }
 
-  render () {
-    return <input type='file' accept={'image/jpeg,image/png'} multiple required onChange={this.handleChange} />
-  }
+  return <input type='file' accept={'image/jpeg,image/png'} multiple required onChange={handleChange} />
 }
 
 export default graphql(gql`
diff --git a/app/components/single-uploader.js b/app/components/single-uploader.js
index 0929078..2986d20 100644
--- a/app/components/single-uploader.js
+++ b/app/components/single-uploader.js
@@ -1,11 +1,10 @@
-import {Component} from 'react'
 import {graphql, gql} from 'react-apollo'
 import uploadsQuery from '../queries/uploads'
 
-class SingleUploader extends Component {
-  handleChange = ({target}) => {
+const SingleUploader = ({mutate}) => {
+  const handleChange = ({target}) => {
     if (target.validity.valid) {
-      this.props.mutate({
+      mutate({
         variables: {
           file: target.files[0]
         },
@@ -16,9 +15,7 @@ class SingleUploader extends Component {
     }
   }
 
-  render () {
-    return <input type='file' accept={'image/jpeg,image/png'} required onChange={this.handleChange} />
-  }
+  return <input type='file' accept={'image/jpeg,image/png'} required onChange={handleChange} />
 }
 
 export default graphql(gql`