From 6a163846f8a855efb86d04edc8de5f718ded23e8 Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Mon, 21 Aug 2017 14:08:39 +1000
Subject: [PATCH] Simpler design, better componentization.

---
 app/components/file-input.js        | 11 ++++
 app/components/multiple-uploader.js |  3 +-
 app/components/section.js           | 14 -----
 app/components/single-uploader.js   |  3 +-
 app/components/table.js             | 45 ++++++++++++++++
 app/components/upload-list.js       | 83 ++++++++++-------------------
 app/pages/index.js                  | 15 ++----
 7 files changed, 91 insertions(+), 83 deletions(-)
 create mode 100644 app/components/file-input.js
 delete mode 100644 app/components/section.js
 create mode 100644 app/components/table.js

diff --git a/app/components/file-input.js b/app/components/file-input.js
new file mode 100644
index 0000000..5ed0b56
--- /dev/null
+++ b/app/components/file-input.js
@@ -0,0 +1,11 @@
+const FileInput = props =>
+  <div>
+    <input type="file" {...props} />
+    <style jsx>{`
+      div {
+        padding: 0.5em;
+      }
+    `}</style>
+  </div>
+
+export default FileInput
diff --git a/app/components/multiple-uploader.js b/app/components/multiple-uploader.js
index 595bc98..1aafbbf 100644
--- a/app/components/multiple-uploader.js
+++ b/app/components/multiple-uploader.js
@@ -1,4 +1,5 @@
 import { graphql, gql } from 'react-apollo'
+import FileInput from './file-input'
 import uploadsQuery from '../queries/uploads'
 
 const MultipleUploader = ({ mutate }) => {
@@ -15,7 +16,7 @@ const MultipleUploader = ({ mutate }) => {
       ]
     })
 
-  return <input type="file" multiple required onChange={handleChange} />
+  return <FileInput multiple required onChange={handleChange} />
 }
 
 export default graphql(gql`
diff --git a/app/components/section.js b/app/components/section.js
deleted file mode 100644
index 9d61dcb..0000000
--- a/app/components/section.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const Section = ({ heading, children }) =>
-  <section>
-    <h2>
-      {heading}
-    </h2>
-    {children}
-    <style jsx>{`
-      section {
-        padding: 1em 0;
-      }
-    `}</style>
-  </section>
-
-export default Section
diff --git a/app/components/single-uploader.js b/app/components/single-uploader.js
index 7924be4..862b01a 100644
--- a/app/components/single-uploader.js
+++ b/app/components/single-uploader.js
@@ -1,4 +1,5 @@
 import { graphql, gql } from 'react-apollo'
+import FileInput from './file-input'
 import uploadsQuery from '../queries/uploads'
 
 const SingleUploader = ({ mutate }) => {
@@ -15,7 +16,7 @@ const SingleUploader = ({ mutate }) => {
       ]
     })
 
-  return <input type="file" required onChange={handleChange} />
+  return <FileInput required onChange={handleChange} />
 }
 
 export default graphql(gql`
diff --git a/app/components/table.js b/app/components/table.js
new file mode 100644
index 0000000..29a8caa
--- /dev/null
+++ b/app/components/table.js
@@ -0,0 +1,45 @@
+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>
diff --git a/app/components/upload-list.js b/app/components/upload-list.js
index 30151fd..58c0ef3 100644
--- a/app/components/upload-list.js
+++ b/app/components/upload-list.js
@@ -1,60 +1,33 @@
 import { graphql } from 'react-apollo'
+import { Table, Head, Cell } from './table'
 import uploadsQuery from '../queries/uploads'
 
-const UploadList = ({ data: { uploads = [] } }) => {
-  return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Size</th>
-            <th>Path</th>
-          </tr>
-        </thead>
-        <tbody>
-          {uploads.map(({ id, name, type, size, path }) =>
-            <tr key={id}>
-              <td>
-                {name}
-              </td>
-              <td>
-                {type}
-              </td>
-              <td>
-                {size}
-              </td>
-              <td>
-                {path}
-              </td>
-            </tr>
-          )}
-        </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;
-          font-size: 90%;
-        }
-        th,
-        td {
-          padding: 0.3em 0.5em;
-        }
-        td {
-          vertical-align: top;
-          white-space: nowrap;
-        }
-      `}</style>
-    </div>
-  )
-}
+const UploadList = ({ data: { uploads = [] } }) =>
+  <Table
+    thead={
+      <tr>
+        <Head>Name</Head>
+        <Head>Type</Head>
+        <Head>Size</Head>
+        <Head>Path</Head>
+      </tr>
+    }
+    tbody={uploads.map(({ id, name, type, size, path }) =>
+      <tr key={id}>
+        <Cell>
+          {name}
+        </Cell>
+        <Cell>
+          {type}
+        </Cell>
+        <Cell>
+          {size}
+        </Cell>
+        <Cell>
+          {path}
+        </Cell>
+      </tr>
+    )}
+  />
 
 export default graphql(uploadsQuery)(UploadList)
diff --git a/app/pages/index.js b/app/pages/index.js
index 009ab0a..ef3469d 100644
--- a/app/pages/index.js
+++ b/app/pages/index.js
@@ -1,6 +1,5 @@
 import Head from 'next/head'
 import withData from '../helpers/with-data'
-import Section from '../components/section'
 import SingleUploader from '../components/single-uploader'
 import MultipleUploader from '../components/multiple-uploader'
 import UploadList from '../components/upload-list'
@@ -22,17 +21,9 @@ const HomePage = () =>
         `}
       </style>
     </Head>
-    <h1>Apollo upload examples</h1>
-    <p>Select files to upload and view the responses in the console.</p>
-    <Section heading="Single file">
-      <SingleUploader />
-    </Section>
-    <Section heading="Multiple files">
-      <MultipleUploader />
-    </Section>
-    <Section heading="Uploaded files">
-      <UploadList />
-    </Section>
+    <SingleUploader />
+    <MultipleUploader />
+    <UploadList />
   </div>
 
 export default withData(HomePage)