jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simpler design, better componentization.

Browse Source
This commit is contained in:
Jayden Seric 2017-08-21 14:08:39 +10:00
parent 29751020f9
commit 6a163846f8
7 changed files with 91 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/file-input.js Normal file
View File

@ -0,0 +1,11 @@
const FileInput = props =>
<div>
<input type="file" {...props} />
<style jsx>{`
div {
padding: 0.5em;
}
`}</style>
</div>
export default FileInput

3
app/components/multiple-uploader.js
View File

@ -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`

14
app/components/section.js
View File

@ -1,14 +0,0 @@
const Section = ({ heading, children }) =>
<section>
<h2>
{heading}
</h2>
{children}
<style jsx>{`
section {
padding: 1em 0;
}
`}</style>
</section>
export default Section

3
app/components/single-uploader.js
View File

@ -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`

45
app/components/table.js Normal file
View File

@ -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>

83
app/components/upload-list.js
View File

@ -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)

15
app/pages/index.js
View File

@ -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)