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 { graphql, gql } from 'react-apollo'
import FileInput from './file-input'
import uploadsQuery from '../queries/uploads' import uploadsQuery from '../queries/uploads'
const MultipleUploader = ({ mutate }) => { 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` 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 { graphql, gql } from 'react-apollo'
import FileInput from './file-input'
import uploadsQuery from '../queries/uploads' import uploadsQuery from '../queries/uploads'
const SingleUploader = ({ mutate }) => { 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` 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 { graphql } from 'react-apollo'
import { Table, Head, Cell } from './table'
import uploadsQuery from '../queries/uploads' import uploadsQuery from '../queries/uploads'
const UploadList = ({ data: { uploads = [] } }) => { const UploadList = ({ data: { uploads = [] } }) =>
return ( <Table
<div> thead={
<table> <tr>
<thead> <Head>Name</Head>
<tr> <Head>Type</Head>
<th>Name</th> <Head>Size</Head>
<th>Type</th> <Head>Path</Head>
<th>Size</th> </tr>
<th>Path</th> }
</tr> tbody={uploads.map(({ id, name, type, size, path }) =>
</thead> <tr key={id}>
<tbody> <Cell>
{uploads.map(({ id, name, type, size, path }) => {name}
<tr key={id}> </Cell>
<td> <Cell>
{name} {type}
</td> </Cell>
<td> <Cell>
{type} {size}
</td> </Cell>
<td> <Cell>
{size} {path}
</td> </Cell>
<td> </tr>
{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>
)
}
export default graphql(uploadsQuery)(UploadList) export default graphql(uploadsQuery)(UploadList)

15
app/pages/index.js
View File

@ -1,6 +1,5 @@
import Head from 'next/head' import Head from 'next/head'
import withData from '../helpers/with-data' import withData from '../helpers/with-data'
import Section from '../components/section'
import SingleUploader from '../components/single-uploader' import SingleUploader from '../components/single-uploader'
import MultipleUploader from '../components/multiple-uploader' import MultipleUploader from '../components/multiple-uploader'
import UploadList from '../components/upload-list' import UploadList from '../components/upload-list'
@ -22,17 +21,9 @@ const HomePage = () =>
`} `}
</style> </style>
</Head> </Head>
<h1>Apollo upload examples</h1> <SingleUploader />
<p>Select files to upload and view the responses in the console.</p> <MultipleUploader />
<Section heading="Single file"> <UploadList />
<SingleUploader />
</Section>
<Section heading="Multiple files">
<MultipleUploader />
</Section>
<Section heading="Uploaded files">
<UploadList />
</Section>
</div> </div>
export default withData(HomePage) export default withData(HomePage)