From c4c436adbd21715d511502b3740b0a2e41526f12 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Wed, 5 May 2021 19:57:01 +0200 Subject: [PATCH 1/8] Add file upload to home component --- package.json | 1 + pages/_app.tsx | 2 +- pages/index.tsx | 108 ++++++++++++++++++++++++++++++++++++++---- paths.ts | 3 ++ styles/home.style.tsx | 35 ++++++++++++++ yarn.lock | 26 ++++++++++ 6 files changed, 164 insertions(+), 11 deletions(-) create mode 100644 paths.ts create mode 100644 styles/home.style.tsx diff --git a/package.json b/package.json index 8e81f334..f65cdae7 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "next": "^10.2.0", "react": "17.0.1", "react-dom": "17.0.1", + "react-dropzone": "^11.3.2", "react-hook-form": "^6.15.1", "swr": "^0.4.2", "uuid": "^8.3.2" diff --git a/pages/_app.tsx b/pages/_app.tsx index e353c7ad..4bb9b4a6 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -25,7 +25,7 @@ function App({ Component, pageProps }: AppProps) { return ( - My page + BrownieBee diff --git a/pages/index.tsx b/pages/index.tsx index 8acf588f..8da13e4a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,16 +1,104 @@ -import Head from "next/head"; +import { Box, Card, CardContent, List, ListItem, ListItemText, Typography } from "@material-ui/core"; +import { useCallback, useState } from "react"; +import { useDropzone } from 'react-dropzone'; import Layout from "../components/layout"; +import useStyles from "../styles/home.style"; +import { NextRouter, useRouter } from 'next/router' +import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt'; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { paths } from "../paths"; export default function Home() { + const classes = useStyles() + const router: NextRouter = useRouter() + const [uploadMessage, setUploadMessage] = useState("Drag file here") + + const onDrop = useCallback(acceptedFiles => { + const reader = new FileReader() + reader.onabort = () => setUploadMessage('Upload aborted') + reader.onerror = () => setUploadMessage('Upload failed') + reader.onprogress = () => setUploadMessage('Loading file...') + reader.onload = () => { + const binaryResult: string | ArrayBuffer = reader.result + try { + const json: any = JSON.parse(binaryResult as string) + const id: string = json['id'] + if (id === undefined) { + setUploadMessage('Id not found') + } else { + router.push(`${paths.experiment}/${id}`) + } + } catch (e) { + console.error('File parsing failed', e) + setUploadMessage('Upload failed') + } + } + reader.readAsText(acceptedFiles[0]) + }, []) + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) + return ( -
- - Brownie Bee - - - -

Welcome!

- -
+ + + + + + + + Get started + + + + + + + + + + + + + + + Upload file with experiment + + + + +
+ + {uploadMessage} + +
+ + + + + + Experiments saved in browser + + + + + + + + + + + + + + + + + + + + + + + ); } \ No newline at end of file diff --git a/paths.ts b/paths.ts new file mode 100644 index 00000000..2757bc68 --- /dev/null +++ b/paths.ts @@ -0,0 +1,3 @@ +export const paths = { + experiment: 'experiment' +} \ No newline at end of file diff --git a/styles/home.style.tsx b/styles/home.style.tsx new file mode 100644 index 00000000..790bdc77 --- /dev/null +++ b/styles/home.style.tsx @@ -0,0 +1,35 @@ +import { makeStyles } from "@material-ui/core"; + +export const useStyles = makeStyles(theme => ({ + mainContainer: { + maxWidth: 500, + background: theme.palette.custom.background.main, + color: 'white', + }, + mainContent: { + padding: 0, + }, + box: { + backgroundColor: 'rgba(255,255,255,0.15)', + }, + uploadBox: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 200, + height: 180, + borderRadius: 4, + padding: theme.spacing(4), + }, + uploadBoxInner: { + marginTop: 108, + color: 'white', + }, + uploadIcon: { + position: 'absolute', + fontSize: '13rem', + opacity: .35 + } +})); + +export default useStyles \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 1272bd61..add63a97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1143,6 +1143,11 @@ atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== +attr-accept@^2.2.1: + version "2.2.2" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b" + integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg== + available-typed-arrays@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5" @@ -2485,6 +2490,13 @@ fd-slicer@~1.1.0: dependencies: pend "~1.2.0" +file-selector@^0.2.2: + version "0.2.4" + resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80" + integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA== + dependencies: + tslib "^2.0.3" + fill-range@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7" @@ -5010,6 +5022,15 @@ react-dom@17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" +react-dropzone@^11.3.2: + version "11.3.2" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.3.2.tgz#2efb6af800a4779a9daa1e7ba1f8d51d0ab862d7" + integrity sha512-Z0l/YHcrNK1r85o6RT77Z5XgTARmlZZGfEKBl3tqTXL9fZNQDuIdRx/J0QjvR60X+yYu26dnHeaG2pWU+1HHvw== + dependencies: + attr-accept "^2.2.1" + file-selector "^0.2.2" + prop-types "^15.7.2" + react-error-boundary@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.1.tgz#932c5ca5cbab8ec4fe37fd7b415aa5c3a47597e7" @@ -5980,6 +6001,11 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== +tslib@^2.0.3: + version "2.2.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c" + integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w== + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" From 95fcde8001fbad4a7bdfb7ae5233db037a5e8356 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Wed, 5 May 2021 20:02:30 +0200 Subject: [PATCH 2/8] Update texts --- pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 8da13e4a..df735324 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -61,7 +61,7 @@ export default function Home() { - Upload file with experiment + Upload experiment file @@ -76,7 +76,7 @@ export default function Home() { - Experiments saved in browser + Saved experiments From acee8b537200fb6874e43787539efb76d166f8d8 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 6 May 2021 14:36:50 +0200 Subject: [PATCH 3/8] Upload file using either localStorage or server, add component to show experiment loading --- components/experiment.tsx | 10 ++- components/layout.tsx | 6 +- components/loading-experiment.tsx | 19 +++++ hooks/useLocalStorageReducer.ts | 5 +- pages/experiment/[experimentid].tsx | 3 +- pages/index.tsx | 123 ++++++++++++++++------------ styles/experiment.style.tsx | 6 +- styles/layout.style.tsx | 3 - styles/loading-experiment.style.tsx | 20 +++++ theme/theme.ts | 23 +++++- 10 files changed, 144 insertions(+), 74 deletions(-) create mode 100644 components/loading-experiment.tsx create mode 100644 styles/loading-experiment.style.tsx diff --git a/components/experiment.tsx b/components/experiment.tsx index 4409243e..3c754ff5 100644 --- a/components/experiment.tsx +++ b/components/experiment.tsx @@ -1,4 +1,4 @@ -import { Button, Card, CardContent, Grid, Snackbar, Typography } from '@material-ui/core' +import { Box, Button, Card, CardContent, CircularProgress, Grid, Snackbar, Typography } from '@material-ui/core' import Layout from './layout' import OptimizerModel from './optimizer-model'; import OptimizerConfigurator from './optimizer-configurator'; @@ -9,9 +9,10 @@ import { useStyles } from '../styles/experiment.style'; import { useExperiment, saveExperiment, runExperiment } from '../context/experiment-context'; import React, { useState, useEffect } from 'react'; import { ValueVariableType, CategoricalVariableType, OptimizerConfig, DataPointType } from '../types/common'; +import LoadingExperiment from './loading-experiment'; export default function Experiment() { - const classes = useStyles(); + const classes = useStyles() const { state: { experiment }, dispatch, loading } = useExperiment() @@ -45,7 +46,6 @@ export default function Experiment() { } catch (error) { console.error('fetch error', error) } - } function handleCloseSnackbar() { @@ -54,9 +54,11 @@ export default function Experiment() { const valueVariables = experiment.valueVariables const categoricalVariables = experiment.categoricalVariables + if (loading) { - return <>Loading experiment... + return } + return ( diff --git a/components/layout.tsx b/components/layout.tsx index 93f36770..74c9f89f 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -1,4 +1,4 @@ -import { AppBar, Button, Switch, Toolbar, Typography } from '@material-ui/core' +import { AppBar, Box, Button, Switch, Toolbar, Typography } from '@material-ui/core' import Link from 'next/link' import useStyles from '../styles/layout.style' import Image from 'next/image' @@ -33,10 +33,10 @@ export default function Layout ( {children} ) { -
+ {state.debug && 
{JSON.stringify(state, null, 2)}
} {children} -
+ ) } \ No newline at end of file diff --git a/components/loading-experiment.tsx b/components/loading-experiment.tsx new file mode 100644 index 00000000..e76bc3f3 --- /dev/null +++ b/components/loading-experiment.tsx @@ -0,0 +1,19 @@ +import { Box, Card, CardContent, CircularProgress, Typography } from "@material-ui/core"; +import useStyles from "../styles/loading-experiment.style"; +import Layout from "./layout"; + +export default function LoadingExperiment() { + const classes = useStyles() + return + + + + + + Loading experiment... + + + + + +} \ No newline at end of file diff --git a/hooks/useLocalStorageReducer.ts b/hooks/useLocalStorageReducer.ts index 96c9fc2b..2213f8df 100644 --- a/hooks/useLocalStorageReducer.ts +++ b/hooks/useLocalStorageReducer.ts @@ -1,7 +1,4 @@ -import { useCallback, useReducer } from 'react' -import { ExperimentAction } from '../reducers/experiment-reducers' -import { Action } from '../reducers/reducers' -import { State } from '../store' +import { useReducer } from 'react' const init = (localStorageKey: string) => (initialState: S) => { try { diff --git a/pages/experiment/[experimentid].tsx b/pages/experiment/[experimentid].tsx index a1f2a0fb..b43e9658 100644 --- a/pages/experiment/[experimentid].tsx +++ b/pages/experiment/[experimentid].tsx @@ -3,6 +3,7 @@ import { ExperimentProvider } from "../../context/experiment-context"; import Experiment from "../../components/experiment"; import DebugExperiment from "../../components/debugexperiment"; import { useGlobal } from "../../context/global-context"; +import LoadingExperiment from "../../components/loading-experiment"; export default function ExperimentContainer() { const router = useRouter(); @@ -10,7 +11,7 @@ export default function ExperimentContainer() { const { state } = useGlobal() if (!experimentid) { - return
Loading experiment
; + return } return ( <> diff --git a/pages/index.tsx b/pages/index.tsx index df735324..c654a135 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,11 +7,15 @@ import { NextRouter, useRouter } from 'next/router' import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import { paths } from "../paths"; +import { ExperimentType } from "../types/common"; +import { useGlobal } from "../context/global-context"; +import { saveExperiment } from '../context/experiment-context'; export default function Home() { const classes = useStyles() const router: NextRouter = useRouter() const [uploadMessage, setUploadMessage] = useState("Drag file here") + const { state } = useGlobal() const onDrop = useCallback(acceptedFiles => { const reader = new FileReader() @@ -21,12 +25,11 @@ export default function Home() { reader.onload = () => { const binaryResult: string | ArrayBuffer = reader.result try { - const json: any = JSON.parse(binaryResult as string) - const id: string = json['id'] - if (id === undefined) { + const experiment: ExperimentType = JSON.parse(binaryResult as string) + if (experiment !== undefined && experiment.id === undefined) { setUploadMessage('Id not found') } else { - router.push(`${paths.experiment}/${id}`) + saveAndRedirect(experiment) } } catch (e) { console.error('File parsing failed', e) @@ -36,69 +39,83 @@ export default function Home() { reader.readAsText(acceptedFiles[0]) }, []) + const saveAndRedirect = async (experiment: ExperimentType) => { + const id: string = experiment.id + if (state.useLocalStorage) { + try { + localStorage.setItem(id, JSON.stringify({ experiment })) + } catch (e) { + console.error('Unable to use local storage') + setUploadMessage('Upload failed') + } + router.push(`${paths.experiment}/${id}`) + } else { + await saveExperiment(experiment) + router.push(`${paths.experiment}/${id}`) + } + } + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) return ( - - - + + + + + + Get started + + - - - Get started - + + + + + + + + + + + + Upload experiment file + + + + +
+ + {uploadMessage} + +
+ - + + + Saved experiments + + - + + + + + + + + + + - - - Upload experiment file - - - - -
- - {uploadMessage} - -
- - - - - - Saved experiments - - - - - - - - - - - - - - - - - - - - - - + + ); } \ No newline at end of file diff --git a/styles/experiment.style.tsx b/styles/experiment.style.tsx index e3320c4b..f5e06b32 100644 --- a/styles/experiment.style.tsx +++ b/styles/experiment.style.tsx @@ -3,8 +3,8 @@ import { makeStyles } from "@material-ui/core"; export const useStyles = makeStyles(theme => ({ experimentContainer: { marginTop: theme.spacing(4), - minWidth: 1200, - maxWidth: 1800, + minWidth: theme.sizes.mainWidthMin, + maxWidth: theme.sizes.mainWidthMax, background: theme.palette.custom.background.main, color: 'white', }, @@ -32,7 +32,7 @@ export const useStyles = makeStyles(theme => ({ '100%': { backgroundColor: theme.palette.primary.main, } - } + }, })); export default useStyles \ No newline at end of file diff --git a/styles/layout.style.tsx b/styles/layout.style.tsx index 642c4188..95d86447 100644 --- a/styles/layout.style.tsx +++ b/styles/layout.style.tsx @@ -7,9 +7,6 @@ export const useStyles = makeStyles(theme => ({ link: { color: "white", }, - mainContent: { - marginTop: 56, - }, logo: { marginRight: theme.spacing(1), } diff --git a/styles/loading-experiment.style.tsx b/styles/loading-experiment.style.tsx new file mode 100644 index 00000000..cf53da9b --- /dev/null +++ b/styles/loading-experiment.style.tsx @@ -0,0 +1,20 @@ +import { makeStyles } from "@material-ui/core"; + +export const useStyles = makeStyles(theme => ({ + experimentContainer: { + marginTop: theme.spacing(4), + minWidth: theme.sizes.mainWidthMin, + maxWidth: theme.sizes.mainWidthMax, + background: theme.palette.custom.background.main, + color: 'white', + }, + loadingContainer: { + textAlign: 'center', + height: '50vh', + }, + progress: { + color: 'white', + } +})); + +export default useStyles \ No newline at end of file diff --git a/theme/theme.ts b/theme/theme.ts index 798e9234..73f9c313 100644 --- a/theme/theme.ts +++ b/theme/theme.ts @@ -13,8 +13,6 @@ declare module '@material-ui/core/styles/createPalette' { } } -export const defaultTheme: Theme = createMuiTheme() - const overrides: Overrides = { MuiTableCell: { sizeSmall: { @@ -23,13 +21,32 @@ const overrides: Overrides = { }, MuiSelect: { select: { - paddingBottom: "4px", + paddingBottom: 4, + } + } +} +declare module '@material-ui/core/styles/createMuiTheme' { + interface Theme { + sizes: { + mainWidthMin: number + mainWidthMax: number + } + } + + interface ThemeOptions { + sizes?: { + mainWidthMin?: number + mainWidthMax?: number } } } export const theme: Theme = createMuiTheme({ overrides, + sizes: { + mainWidthMin: 1200, + mainWidthMax: 1800, + }, palette: { primary: { main: 'rgba(0,121,145,1)', From e96d4197b31a217f063c06f4758f117da1da3db4 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 6 May 2021 14:42:41 +0200 Subject: [PATCH 4/8] Move Home component to separate file --- components/home.tsx | 121 +++++++++++++++++++++++++++++++++++++++++++ pages/index.tsx | 122 ++------------------------------------------ 2 files changed, 124 insertions(+), 119 deletions(-) create mode 100644 components/home.tsx diff --git a/components/home.tsx b/components/home.tsx new file mode 100644 index 00000000..c654a135 --- /dev/null +++ b/components/home.tsx @@ -0,0 +1,121 @@ +import { Box, Card, CardContent, List, ListItem, ListItemText, Typography } from "@material-ui/core"; +import { useCallback, useState } from "react"; +import { useDropzone } from 'react-dropzone'; +import Layout from "../components/layout"; +import useStyles from "../styles/home.style"; +import { NextRouter, useRouter } from 'next/router' +import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt'; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { paths } from "../paths"; +import { ExperimentType } from "../types/common"; +import { useGlobal } from "../context/global-context"; +import { saveExperiment } from '../context/experiment-context'; + +export default function Home() { + const classes = useStyles() + const router: NextRouter = useRouter() + const [uploadMessage, setUploadMessage] = useState("Drag file here") + const { state } = useGlobal() + + const onDrop = useCallback(acceptedFiles => { + const reader = new FileReader() + reader.onabort = () => setUploadMessage('Upload aborted') + reader.onerror = () => setUploadMessage('Upload failed') + reader.onprogress = () => setUploadMessage('Loading file...') + reader.onload = () => { + const binaryResult: string | ArrayBuffer = reader.result + try { + const experiment: ExperimentType = JSON.parse(binaryResult as string) + if (experiment !== undefined && experiment.id === undefined) { + setUploadMessage('Id not found') + } else { + saveAndRedirect(experiment) + } + } catch (e) { + console.error('File parsing failed', e) + setUploadMessage('Upload failed') + } + } + reader.readAsText(acceptedFiles[0]) + }, []) + + const saveAndRedirect = async (experiment: ExperimentType) => { + const id: string = experiment.id + if (state.useLocalStorage) { + try { + localStorage.setItem(id, JSON.stringify({ experiment })) + } catch (e) { + console.error('Unable to use local storage') + setUploadMessage('Upload failed') + } + router.push(`${paths.experiment}/${id}`) + } else { + await saveExperiment(experiment) + router.push(`${paths.experiment}/${id}`) + } + } + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) + + return ( + + + + + + + Get started + + + + + + + + + + + + + + + Upload experiment file + + + + +
+ + {uploadMessage} + +
+ + + + + + Saved experiments + + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index c654a135..5f213000 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,121 +1,5 @@ -import { Box, Card, CardContent, List, ListItem, ListItemText, Typography } from "@material-ui/core"; -import { useCallback, useState } from "react"; -import { useDropzone } from 'react-dropzone'; -import Layout from "../components/layout"; -import useStyles from "../styles/home.style"; -import { NextRouter, useRouter } from 'next/router' -import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import { paths } from "../paths"; -import { ExperimentType } from "../types/common"; -import { useGlobal } from "../context/global-context"; -import { saveExperiment } from '../context/experiment-context'; +import Home from "../components/home"; -export default function Home() { - const classes = useStyles() - const router: NextRouter = useRouter() - const [uploadMessage, setUploadMessage] = useState("Drag file here") - const { state } = useGlobal() - - const onDrop = useCallback(acceptedFiles => { - const reader = new FileReader() - reader.onabort = () => setUploadMessage('Upload aborted') - reader.onerror = () => setUploadMessage('Upload failed') - reader.onprogress = () => setUploadMessage('Loading file...') - reader.onload = () => { - const binaryResult: string | ArrayBuffer = reader.result - try { - const experiment: ExperimentType = JSON.parse(binaryResult as string) - if (experiment !== undefined && experiment.id === undefined) { - setUploadMessage('Id not found') - } else { - saveAndRedirect(experiment) - } - } catch (e) { - console.error('File parsing failed', e) - setUploadMessage('Upload failed') - } - } - reader.readAsText(acceptedFiles[0]) - }, []) - - const saveAndRedirect = async (experiment: ExperimentType) => { - const id: string = experiment.id - if (state.useLocalStorage) { - try { - localStorage.setItem(id, JSON.stringify({ experiment })) - } catch (e) { - console.error('Unable to use local storage') - setUploadMessage('Upload failed') - } - router.push(`${paths.experiment}/${id}`) - } else { - await saveExperiment(experiment) - router.push(`${paths.experiment}/${id}`) - } - } - - const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) - - return ( - - - - - - - Get started - - - - - - - - - - - - - - - Upload experiment file - - - - -
- - {uploadMessage} - -
- - - - - - Saved experiments - - - - - - - - - - - - - - - - - - - - - - - ); +export default function Index() { + return } \ No newline at end of file From 816dc1c361c0be7972ccd53f19b2819d356a5bcc Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 6 May 2021 14:47:29 +0200 Subject: [PATCH 5/8] Merge styles in loading component --- components/loading-experiment.tsx | 2 +- styles/loading-experiment.style.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/loading-experiment.tsx b/components/loading-experiment.tsx index e76bc3f3..b048c37a 100644 --- a/components/loading-experiment.tsx +++ b/components/loading-experiment.tsx @@ -5,7 +5,7 @@ import Layout from "./layout"; export default function LoadingExperiment() { const classes = useStyles() return - + diff --git a/styles/loading-experiment.style.tsx b/styles/loading-experiment.style.tsx index cf53da9b..c49148ec 100644 --- a/styles/loading-experiment.style.tsx +++ b/styles/loading-experiment.style.tsx @@ -1,14 +1,12 @@ import { makeStyles } from "@material-ui/core"; export const useStyles = makeStyles(theme => ({ - experimentContainer: { + loadingContainer: { marginTop: theme.spacing(4), minWidth: theme.sizes.mainWidthMin, maxWidth: theme.sizes.mainWidthMax, background: theme.palette.custom.background.main, color: 'white', - }, - loadingContainer: { textAlign: 'center', height: '50vh', }, From fd902ebd411f9ba5debcb822839cba1593bac8f8 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 6 May 2021 14:53:47 +0200 Subject: [PATCH 6/8] Move onLoad to separate function --- components/home.tsx | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/components/home.tsx b/components/home.tsx index c654a135..cae18120 100644 --- a/components/home.tsx +++ b/components/home.tsx @@ -22,23 +22,27 @@ export default function Home() { reader.onabort = () => setUploadMessage('Upload aborted') reader.onerror = () => setUploadMessage('Upload failed') reader.onprogress = () => setUploadMessage('Loading file...') - reader.onload = () => { - const binaryResult: string | ArrayBuffer = reader.result - try { - const experiment: ExperimentType = JSON.parse(binaryResult as string) - if (experiment !== undefined && experiment.id === undefined) { - setUploadMessage('Id not found') - } else { - saveAndRedirect(experiment) - } - } catch (e) { - console.error('File parsing failed', e) - setUploadMessage('Upload failed') - } - } + reader.onload = () => load(reader) reader.readAsText(acceptedFiles[0]) }, []) + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) + + const load = (reader: FileReader) => { + const binaryResult: string | ArrayBuffer = reader.result + try { + const experiment: ExperimentType = JSON.parse(binaryResult as string) + if (experiment !== undefined && experiment.id === undefined) { + setUploadMessage('Id not found') + } else { + saveAndRedirect(experiment) + } + } catch (e) { + console.error('File parsing failed', e) + setUploadMessage('Upload failed') + } + } + const saveAndRedirect = async (experiment: ExperimentType) => { const id: string = experiment.id if (state.useLocalStorage) { @@ -55,8 +59,6 @@ export default function Home() { } } - const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) - return ( From 940cbeeed9bac3dd13281c101b0e04ced0e63740 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 6 May 2021 14:59:25 +0200 Subject: [PATCH 7/8] Remove unnecessary check when uploading --- components/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/home.tsx b/components/home.tsx index cae18120..09375a21 100644 --- a/components/home.tsx +++ b/components/home.tsx @@ -32,7 +32,7 @@ export default function Home() { const binaryResult: string | ArrayBuffer = reader.result try { const experiment: ExperimentType = JSON.parse(binaryResult as string) - if (experiment !== undefined && experiment.id === undefined) { + if (experiment.id === undefined) { setUploadMessage('Id not found') } else { saveAndRedirect(experiment) From 41cb689936ee56094a501a527f827aca27841800 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 6 May 2021 15:01:59 +0200 Subject: [PATCH 8/8] Refactor load function --- components/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/home.tsx b/components/home.tsx index 09375a21..dfc710ef 100644 --- a/components/home.tsx +++ b/components/home.tsx @@ -48,11 +48,11 @@ export default function Home() { if (state.useLocalStorage) { try { localStorage.setItem(id, JSON.stringify({ experiment })) + router.push(`${paths.experiment}/${id}`) } catch (e) { console.error('Unable to use local storage') setUploadMessage('Upload failed') } - router.push(`${paths.experiment}/${id}`) } else { await saveExperiment(experiment) router.push(`${paths.experiment}/${id}`)