From 14d941fad2118df5343801e872996d0e381c00f1 Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Sun, 9 Apr 2017 13:10:15 +1000
Subject: [PATCH] Upload list now displays as a table.

---
 app/components/upload-list.js | 36 +++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/components/upload-list.js b/app/components/upload-list.js
index c25ec41..80e4dd8 100644
--- a/app/components/upload-list.js
+++ b/app/components/upload-list.js
@@ -1,12 +1,36 @@
 import {graphql, gql} from 'react-apollo'
 
-const UploadList = ({data: {allUploads, loading}}) => {
+const UploadList = ({data: {allUploads}}) => {
   return (
-    <ul>
-      {allUploads.map((file, i) => {
-        return <li key={i}>{file.name}</li>
-      })}
-    </ul>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Size</th>
+          <th>Path</th>
+        </tr>
+      </thead>
+      <tbody>
+        {allUploads.map(({name, type, size, path}) => (
+          <tr key={path}>
+            <td>{name}</td>
+            <td>{type}</td>
+            <td>{size}</td>
+            <td>{path}</td>
+          </tr>
+        ))}
+      </tbody>
+      <style jsx>{`
+        table {
+          text-align: left;
+          border-spacing: 0.75em;
+        }
+        td {
+          vertical-align: top;
+        }
+      `}</style>
+    </table>
   )
 }