Merge branch 'react' of https://github.com/IBM-Bluemix/health-blockchain into react

* 'react' of https://github.com/IBM-Bluemix/health-blockchain:
  #43 show and hide explorer
  linter
  #42 refactor css
  clean up API calls

Author: Frederic Lavigne

ui-react/.eslintrc

@@ -28,7 +28,7 @@
     "no-constant-condition": [2, {"checkLoops": false}],
     "react/jsx-filename-extension": [0],
     "func-names": [0],
-    "react/prefer-stateless-function": [1],
+    "react/prefer-stateless-function": "off",
     "no-use-before-define": ["error", { "functions": false, "classes": true }]
   }
 }

ui-react/src/App.css

@@ -33,7 +33,7 @@ sans-serif;*/
     width: 100%;
     /*    border-bottom: 2px solid #384b55;*/
     background: #24242c;
-    height: 100px;
+    height: 60px;
     flex-shrink: 0;
 }
 
@@ -283,7 +283,7 @@ a {
 
 .footer {
     width: 100%;
-    height: 80px;
+    height: 50px;
     background: #24242c;
     display: flex;
     flex-direction: row;

ui-react/src/App.js

@@ -4,6 +4,7 @@ import Login from './Login';
 import Profile from './Profile/Profile';
 import BlockExplorer from './BlockExplorer/BlockExplorer';
 import './App.css';
+import API from './callAPI';
 
 const Route = {
   LOGIN: 'login',
@@ -16,7 +17,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      route: Route.LOGIN,
+      route: Route.LOGIN
     };
     this.isLoggedIn = this.isLoggedIn.bind(this);
     this.isLoggedIn();
@@ -46,25 +47,13 @@ class App extends Component {
   }
 
   isLoggedIn() {
-    fetch('/api/users/isLoggedIn', { credentials: 'include' }).then((response) => {
-      if (response.ok) {
-        response.json().then(json => json.outcome === 'success' && this.setState({ route: Route.PROFILE }));
-        return response;
-      }
-      this.setState({ errorMessage: 'Error calling API.' });
-      return response;
-    });
+    API.getRequest('/api/users/isLoggedIn').then(json =>
+          json.outcome === 'success' && this.setState({ route: Route.PROFILE }));
   }
 
   logout() {
-    fetch('/api/users/logout', { method: 'POST' }).then(response => response.json())
-    .then((body) => {
-      if (body.ok) {
-        this.setState({ route: Route.LOGIN });
-      } else {
-        this.setState({ errorMessage: body.message });
-      }
-    });
+    API.postRequest('/api/users/logout')
+    .then(() => this.setState({ route: Route.LOGIN }));
   }
 
   render() {

ui-react/src/BlockExplorer/Block.css

@@ -1,4 +1,4 @@
-.blockExplorer {
+.BlockExplorerDetailView {
   padding-left: 30px;
   border-left-style: dotted;
   border-color: #4D4E56;
@@ -13,16 +13,12 @@
   display: flex;
   flex-direction: column;
   padding-top: 10px;
-
   animation-name: slideDown;
   -webkit-animation-name: slideDown;
-
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
-
   animation-timing-function: ease;
   -webkit-animation-timing-function: ease;
-
   visibility: visible !important;
 
 }
@@ -137,3 +133,42 @@
     width: 2px;
     background: white;
 }
+
+.blockSmall {
+  width: 21px;
+  height: 21px;
+  border-radius: 5px;
+  border: 1px solid #393941;
+  background: linear-gradient(135deg, #1c1c23 0%, #393941 50%, #1c1c23 100%);
+  cursor: pointer;
+  animation-name: slideDown;
+  -webkit-animation-name: slideDown;
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
+  visibility: visible !important;
+}
+
+.blockSmallLink {
+  height: 10px;
+  width: 2px;
+  background: white;
+  margin: auto;
+}
+
+.minimizeSign {
+  height: 2px;
+  width: 10px;
+  background: #393941;
+  cursor: pointer;
+}
+
+.minimizeButton {
+  cursor: pointer;
+  padding:10px;
+  border: solid;
+  border-width: 1px;
+  width: 12px;
+  border-color: #393941;
+}

ui-react/src/BlockExplorer/BlockExplorer.js

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import './Block.css';
-import Block from './Block';
+import BlockExplorerPreview from './BlockExplorerPreview';
+import BlockExplorerDetailView from './BlockExplorerDetailView';
 
 class BlockExplorer extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
       blocks: [],
+      preview: true
     };
     this.getBlocks = this.getBlocks.bind(this);
     this.getBlocks();
@@ -25,10 +27,18 @@ class BlockExplorer extends Component {
 
   render() {
     return (
-      <div className="blockExplorer">
-        {this.state.blocks.map((block, index) => (
-          <Block block={block} />
-        ))}
+      <div>
+        { this.state.preview ?
+          <BlockExplorerPreview
+            blocks={this.state.blocks}
+            onExpand={() => this.setState({ preview: false })}
+          />
+          :
+          <BlockExplorerDetailView
+            blocks={this.state.blocks}
+            onMin={() => this.setState({ preview: true })}
+          />
+        }
       </div>
     );
   }

ui-react/src/BlockExplorer/BlockExplorerDetailView.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Block.css';
+import Block from './Block';
+
+class BlockExplorerDetailView extends Component {
+
+
+  render() {
+    return (
+      <div className="BlockExplorerDetailView">
+        <div className="minimizeButton" role="presentation" onClick={this.props.onMin}>
+          <div className="minimizeSign" />
+        </div>
+        {this.props.blocks.map(block => (
+          <Block block={block} key={block.id} />
+        ))}
+      </div>
+    );
+  }
+}
+
+BlockExplorerDetailView.propTypes = {
+  blocks: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onMin: PropTypes.func.isRequired
+};
+
+export default BlockExplorerDetailView;

ui-react/src/BlockExplorer/BlockExplorerPreview.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Block.css';
+
+class BlockExplorerPreview extends Component {
+
+
+  render() {
+    return (
+      <div role="presentation" onClick={this.props.onExpand}>
+        {this.props.blocks.map(() => (
+          <div>
+            <div className="blockSmallLink" />
+            <div className="blockSmall" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+BlockExplorerPreview.propTypes = {
+  blocks: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onExpand: PropTypes.func.isRequired
+};
+
+export default BlockExplorerPreview;

ui-react/src/Login.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
-import './Phone/Phone.css';
+import PropTypes from 'prop-types';
+import './Profile/Profile.css';
+import API from './callAPI';
+
 
 class Login extends Component {
 
@@ -30,20 +33,9 @@ class Login extends Component {
   }
 
   handleSubmit(event) {
-    event.preventDefault();
-
+    event.preventDefault(); // Don't submit the form. We will call the API ourself.
     this.setState({ errorMessage: '' });
-    fetch(this.props.isLogin ? '/api/users/login' : '/api/users/signup', {
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      method: 'POST',
-      credentials: 'include',
-      body: JSON.stringify({
-        email: this.state.email, password: this.state.password
-      })
-    }).then(response => response.json())
+    API.loginOrSignup(this.props.isLogin ? 'login' : 'signup', this.state.email, this.state.password)
     .then((body) => {
       if (body.ok) {
         this.props.onSubmit();
@@ -63,7 +55,9 @@ class Login extends Component {
                 <img src="images/username.svg" className="icon" alt="user" />
                 <input
                   id="email"
-                  className="logininput" type="text" name="email"
+                  className="logininput"
+                  type="text"
+                  name="email"
                   placeholder="E-mail address"
                   onChange={this.handleInputChange}
                   value={this.state.email}
@@ -84,7 +78,11 @@ class Login extends Component {
               <button className="loginbutton" onClick={this.submit}>{ this.props.isLogin ? 'Login' : 'Sign Up' }</button>
             </div>
           </form>
-          <div className="loginnew" onClick={this.navigate}>
+          <div
+            className="loginnew"
+            onClick={this.navigate}
+            role="presentation"
+          >
             { this.props.isLogin ? 'Add a new account' : 'Existing account?' }
           </div>
           <div className="messagearea" id="messagearea">
@@ -97,4 +95,9 @@ class Login extends Component {
   }
 }
 
+Login.propTypes = {
+  isLogin: PropTypes.string.isRequired,
+  onNavigate: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired
+};
 export default Login;