[demo] Support local browser storage (#49)

Resolves #39
microsoft · Nov 28, 2019 · f341d8d · f341d8d
1 parent b35f510
commit f341d8d
Show file tree

Hide file tree

Showing 19 changed files with 798 additions and 982 deletions.
diff --git a/demo/client/package.json b/demo/client/package.json
@@ -12,6 +12,10 @@
     "@tensorflow-models/universal-sentence-encoder": "^1.0.1",
     "@tensorflow/tfjs": "^1.0.4",
     "@tensorflow/tfjs-node": "^1.2.8",
+    "@types/jest": "^24.0.23",
+    "@types/node": "^12.12.12",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
     "axios": "^0.18.0",
     "blueimp-load-image": "^2.23.0",
     "canvas": "^2.6.0",
@@ -27,6 +31,7 @@
     "react-spinners": "^0.6.1",
     "serve": "^11.2.0",
     "truffle": "^5.0.29",
+    "typescript": "^3.7.2",
     "web3": "^1.2.0"
   },
   "scripts": {
@@ -43,5 +48,8 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "fake-indexeddb": "^3.0.0"
+  }
 }
diff --git a/demo/client/src/App.js b/demo/client/src/App.js
@@ -2,7 +2,6 @@ import { CssBaseline } from '@material-ui/core';
 import blue from '@material-ui/core/colors/blue';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
-import axios from 'axios';
 import { SnackbarProvider } from 'notistack';
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from "react-router-dom";
@@ -11,10 +10,6 @@ import AppBar from './components/appBar';
 import Model from './components/model';
 import ModelList from './containers/modelList';
 
-if (axios.defaults.baseURL === undefined && process.env.NODE_ENV === 'production' && process.env.BACKEND_URL) {
-  axios.defaults.baseURL = process.env.BACKEND_URL;
-}
-
 const theme = createMuiTheme({
   palette: {
     primary: blue,

diff --git a/demo/client/src/components/addModel.js b/demo/client/src/components/addModel.js
@@ -6,7 +6,6 @@ import Paper from '@material-ui/core/Paper';
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
-import axios from 'axios';
 import update from 'immutability-helper';
 import { withSnackbar } from 'notistack';
 import PropTypes from 'prop-types';
@@ -19,6 +18,8 @@ import DensePerceptron from '../contracts/DensePerceptron.json';
 import SparsePerceptron from '../contracts/SparsePerceptron.json';
 import Stakeable64 from '../contracts/Stakeable64.json';
 import { convertToHex, convertToHexData } from '../float-utils';
+import { DataStoreFactory } from '../storage/data-store-factory';
+import { renderStorageSelector } from './storageSelector';
 
 const styles = theme => ({
   root: {
@@ -43,6 +44,7 @@ const styles = theme => ({
     marginTop: 8,
   },
   selector: {
+    paddingTop: theme.spacing(1),
     marginBottom: 8,
   },
   numberTextField: {
@@ -64,6 +66,12 @@ class AddModel extends React.Component {
 
   constructor(props) {
     super(props);
+
+    this.storageFactory = new DataStoreFactory();
+
+    // Default to local storage for storing original data.
+    const storageType = localStorage.getItem('storageType') || 'local';
+
     this.state = {
       name: "",
       description: "",
@@ -93,8 +101,10 @@ class AddModel extends React.Component {
           transactionHash: undefined,
           address: undefined,
         },
-      }
+      },
+      storageType,
     };
+
     this.modelTypes = {
       'dense perceptron': DensePerceptron,
       'sparse perceptron': SparsePerceptron,
@@ -108,6 +118,9 @@ class AddModel extends React.Component {
 
   componentDidMount = async () => {
     try {
+      // Get rid of a warning about network refreshing.
+      window.ethereum.autoRefreshOnNetworkChange = false;
+
       const fallbackProvider = new Web3.providers.HttpProvider("http://127.0.0.1:7545");
       this.web3 = await getWeb3({ fallbackProvider, requestPermission: true });
     } catch (error) {
@@ -138,6 +151,10 @@ class AddModel extends React.Component {
     const name = target.name;
     this.setState({
       [name]: value
+    }, _ => {
+      if (name === 'storageType') {
+        localStorage.setItem(name, value);
+      }
     });
   }
 
@@ -228,10 +245,16 @@ class AddModel extends React.Component {
               {this.state.incentiveMechanism === "Stakeable64" &&
                 this.renderStakeableOptions()
               }
+              <div className={this.classes.selector}>
+                {renderStorageSelector("where to store the supplied meta-data about this model like its address",
+                  this.state.storageType, this.handleInputChange)}
+              </div>
             </div>
           </form>
           <Button className={this.classes.button} variant="outlined" color="primary" onClick={this.save}
-            disabled={this.state.deploymentInfo.main.address !== undefined}
+            disabled={this.state.deploymentInfo.main.address !== undefined
+              || !(this.state.refundTimeWaitTimeS <= this.state.ownerClaimWaitTimeS)
+              || !(this.state.ownerClaimWaitTimeS <= this.state.anyAddressClaimWaitTimeS)}
           >
             Save
           </Button>
@@ -284,6 +307,7 @@ class AddModel extends React.Component {
           onChange={this.handleInputChange} />
       </Grid>
       <Grid item xs={12} sm={6}>
+        {/* TODO Show error if it is too low. */}
         <TextField name="ownerClaimWaitTimeS" label="Owner claim wait time (seconds)"
           className={this.classes.numberTextField}
           value={this.state.ownerClaimWaitTimeS}
@@ -292,6 +316,7 @@ class AddModel extends React.Component {
           onChange={this.handleInputChange} />
       </Grid>
       <Grid item xs={12} sm={6}>
+        {/* TODO Show error if it is too low. */}
         <TextField name="anyAddressClaimWaitTimeS" label="Any address claim wait time (seconds)"
           className={this.classes.numberTextField}
           value={this.state.anyAddressClaimWaitTimeS}
@@ -343,14 +368,18 @@ class AddModel extends React.Component {
 
       modelInfo.address = mainContract.options.address;
 
-      // Save to the database.
-      axios.post('/api/models', modelInfo).then(() => {
-        this.notify("Saved", { variant: 'success' });
-        // TODO Redirect.
-      }).catch(err => {
-        console.error(err);
-        console.error(err.response.data.message);
-      });
+
+      if (this.state.storageType !== 'none') {
+        // Save to a database.
+        const storage = this.storageFactory.create(this.state.storageType);
+        storage.saveModelInformation(modelInfo).then(() => {
+          this.notify("Saved", { variant: 'success' });
+          // TODO Redirect.
+        }).catch(err => {
+          console.error(err);
+          console.error(err.response.data.message);
+        });
+      }
     });
   }