diff --git a/app/components/Field.js b/app/components/Field.js
deleted file mode 100644
index 17f3c90..0000000
--- a/app/components/Field.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const Field = ({ children }) => (
-
-)
-
-export default Field
diff --git a/app/components/Inset.js b/app/components/Inset.js
new file mode 100644
index 0000000..475d7ba
--- /dev/null
+++ b/app/components/Inset.js
@@ -0,0 +1,10 @@
+export const Inset = ({ children }) => (
+
+ {children}
+
+
+)
diff --git a/app/components/Page.js b/app/components/Page.js
index da3796b..c26e10b 100644
--- a/app/components/Page.js
+++ b/app/components/Page.js
@@ -1,27 +1,10 @@
import Head from 'next/head'
-const Page = ({ title, children }) => (
+export const Page = ({ title, children }) => (
{title}
-
-
-
-
-
{children}
-
)
-
-export default Page
diff --git a/app/components/Section.js b/app/components/Section.js
index fb85e50..93ebdeb 100644
--- a/app/components/Section.js
+++ b/app/components/Section.js
@@ -1,15 +1,15 @@
-const Section = ({ heading, children }) => (
+export const Section = ({ intro, children }) => (
)
-
-export default Section
diff --git a/app/components/Table.js b/app/components/Table.js
deleted file mode 100644
index 9634a04..0000000
--- a/app/components/Table.js
+++ /dev/null
@@ -1,44 +0,0 @@
-export const Table = ({ thead, tbody }) => (
-
-)
-
-export const Head = ({ children }) => (
-
- {children}
-
- |
-)
-
-export const Cell = ({ children }) => (
-
- {children}
-
- |
-)
diff --git a/app/components/UploadBlob.js b/app/components/UploadBlob.js
index f75898d..1b09c8a 100644
--- a/app/components/UploadBlob.js
+++ b/app/components/UploadBlob.js
@@ -1,7 +1,7 @@
import { useApolloClient, useMutation } from '@apollo/react-hooks'
+import { Button, Code, Fieldset, Textbox } from 'device-agnostic-ui'
import gql from 'graphql-tag'
import React from 'react'
-import Field from './Field'
const SINGLE_UPLOAD_MUTATION = gql`
mutation singleUpload($file: Upload!) {
@@ -14,7 +14,9 @@ const SINGLE_UPLOAD_MUTATION = gql`
export const UploadBlob = () => {
const [name, setName] = React.useState('')
const [content, setContent] = React.useState('')
- const [singleUploadMutation] = useMutation(SINGLE_UPLOAD_MUTATION)
+ const [singleUploadMutation, { loading }] = useMutation(
+ SINGLE_UPLOAD_MUTATION
+ )
const apolloClient = useApolloClient()
const onNameChange = ({ target: { value } }) => setName(value)
@@ -32,24 +34,30 @@ export const UploadBlob = () => {
return (
)
}
diff --git a/app/components/UploadFile.js b/app/components/UploadFile.js
index 735e6d8..4ef6f4f 100644
--- a/app/components/UploadFile.js
+++ b/app/components/UploadFile.js
@@ -2,7 +2,7 @@ import { useApolloClient, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
const SINGLE_UPLOAD_MUTATION = gql`
- mutation($file: Upload!) {
+ mutation singleUpload($file: Upload!) {
singleUpload(file: $file) {
id
}
diff --git a/app/components/Uploads.js b/app/components/Uploads.js
index 534c10c..f61ac1f 100644
--- a/app/components/Uploads.js
+++ b/app/components/Uploads.js
@@ -1,6 +1,6 @@
import { useQuery } from '@apollo/react-hooks'
+import { Scroll, Table } from 'device-agnostic-ui'
import gql from 'graphql-tag'
-import { Cell, Head, Table } from './Table'
const UPLOADS_QUERY = gql`
query uploads {
@@ -17,21 +17,25 @@ export const Uploads = () => {
const { data: { uploads = [] } = {} } = useQuery(UPLOADS_QUERY)
return (
-
- Filename
- MIME type
- Path
-
- }
- tbody={uploads.map(({ id, filename, mimetype, path }) => (
-
- | {filename} |
- {mimetype} |
- {path} |
-
- ))}
- />
+
+
+
+
+ | Filename |
+ MIME type |
+ Path |
+
+
+
+ {uploads.map(({ id, filename, mimetype, path }) => (
+
+ | {filename} |
+ {mimetype} |
+ {path} |
+
+ ))}
+
+
+
)
}
diff --git a/app/package-lock.json b/app/package-lock.json
index 7a0c201..5b48324 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -2628,6 +2628,16 @@
"resolved": "https://registry.npmjs.org/devalue/-/devalue-2.0.0.tgz",
"integrity": "sha512-6H2FBD5DPnQS75UWJtQjoVeKZlmXoa765UgYS5RQnx6Ay9LUhUld0w1/D6cYdrY+wnu6XQNlpEBfnJUZK0YyPQ=="
},
+ "device-agnostic-ui": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/device-agnostic-ui/-/device-agnostic-ui-1.0.1.tgz",
+ "integrity": "sha512-Dn2o6pTDeO7wAgtzdEBZFZCQO5I3n82hpcvr7ezBcYhoVN+vin/mz711AlydExtxKZS8hTUd/JOB7EfQnnXMjA==",
+ "requires": {
+ "@babel/runtime": "^7.6.2",
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.7.2"
+ }
+ },
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
diff --git a/app/package.json b/app/package.json
index a8f3b37..fe6cc46 100644
--- a/app/package.json
+++ b/app/package.json
@@ -20,6 +20,7 @@
"babel-plugin-graphql-tag": "^2.5.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"cross-fetch": "^3.0.4",
+ "device-agnostic-ui": "^1.0.1",
"dotenv-cli": "^2.0.1",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
diff --git a/app/pages/_app.js b/app/pages/_app.js
index e086ced..974a634 100644
--- a/app/pages/_app.js
+++ b/app/pages/_app.js
@@ -3,6 +3,7 @@ import { ApolloProvider } from '@apollo/react-hooks'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client'
+import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui'
import App from 'next/app'
import Head from 'next/head'
@@ -50,7 +51,20 @@ export default class CustomApp extends App {
const { Component, pageProps = {} } = this.props
return (
+
+
+
+
+
+
+
+
+
)
}
diff --git a/app/pages/index.js b/app/pages/index.js
index e374e8f..763c0c1 100644
--- a/app/pages/index.js
+++ b/app/pages/index.js
@@ -1,5 +1,7 @@
-import Page from '../components/Page'
-import Section from '../components/Section'
+import { Code, Heading } from 'device-agnostic-ui'
+import { Inset } from '../components/Inset'
+import { Page } from '../components/Page'
+import { Section } from '../components/Section'
import { UploadBlob } from '../components/UploadBlob'
import { UploadFile } from '../components/UploadFile'
import { UploadFileList } from '../components/UploadFileList'
@@ -7,16 +9,40 @@ import { Uploads } from '../components/Uploads'
const IndexPage = () => (
-
-
+
+ Upload FileList
+
+ }
+ >
+
+
+
-
-
+
+ Upload File
+
+ }
+ >
+
+
+
-
-
+
+ Upload Blob
+
+ }
+ >
+
+
+
-
diff --git a/app/public/manifest.webmanifest b/app/public/manifest.webmanifest
index 8165b50..c44a0c6 100644
--- a/app/public/manifest.webmanifest
+++ b/app/public/manifest.webmanifest
@@ -3,8 +3,8 @@
"short_name": "Uploads",
"start_url": "/",
"display": "standalone",
- "theme_color": "#ffffff",
- "background_color": "#ffffff",
+ "theme_color": "white",
+ "background_color": "white",
"icons": [
{
"src": "launcher-icon.png",