handle post version

Author: Swolfeyes

package-lock.json

@@ -82,6 +82,7 @@
     "react-svg-inline": "^2.1.1",
     "react-transition-group": "^1.2.1",
     "recursive-readdir": "^2.2.2",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "reflect-metadata": "^0.1.12",
     "solc": "^0.5.8",

package.json

@@ -2,7 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { CSSTransitionGroup } from 'react-transition-group';
 
-import { showLoadingMessage, showErrorMessage, hideLoadingMessage, getErrorMessage } from './components/Store/Actions.js';
+import { showLoadingMessage, showErrorMessage, hideLoadingMessage } from './components/Store/Actions.js';
+
+import { baseUrl } from './utils/baseUrl';
 
 import TopNavBar from './components/TopNavBar/TopNavBar';
 import Form from './components/Form/Form';
@@ -17,19 +19,18 @@ import scale from './styles/transitions/scale.scss';
 
 const mapStateToProps = state => {
   return {
-    showLoadingMessage: state.toggleLoadingMessage,
-    showErrorMessage: state.toggleErrorMessage,
-    errorMessage: state.toggleErrorMessage,
-    currentTabIndex: state.setActiveIndex
+    showLoadingMessage: state.loadingMessage.isLoading,
+    loadingMessage: state.loadingMessage.message,
+    showErrorMessage: state.errorMessage.hasError,
+    errorMessage: state.errorMessage.message
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    loadingMessageOn: () => dispatch(showLoadingMessage()),
+    loadingMessageOn: message => dispatch(showLoadingMessage(message)),
     loadingMessageOff: () => dispatch(hideLoadingMessage()),
-    errorMessageOn: () => dispatch(showErrorMessage()),
-    getErrorMessage: message => dispatch(getErrorMessage(message)),
+    errorMessageOn: message => dispatch(showErrorMessage(message)),
   }
 }
 
@@ -48,7 +49,7 @@ class App extends React.Component {
   }
 
   componentDidMount() {
-    this.fetchData('http://localhost:9090/solc/list');
+    this.fetchData(baseUrl + 'solc/list');
   }
 
   handleMenuItemIconClick(index) {
@@ -97,7 +98,7 @@ class App extends React.Component {
   }
 
   handleRequestPending() {
-    this.props.loadingMessageOn();
+    this.props.loadingMessageOn('Loading...');
   }
 
   handleRequestSuccess(response) {
@@ -119,14 +120,13 @@ class App extends React.Component {
 
   handleRequestFail(message) {
     this.props.loadingMessageOff();
-    this.props.errorMessageOn();
-    this.props.getErrorMessage(message);
+    this.props.errorMessageOn(message);
   }
 
   render() {
 
     const { fetchRequestStatus, contracts, versions } = this.state;
-    const { showLoadingMessage, showErrorMessage, errorMessage } = this.props;
+    const { showLoadingMessage, showErrorMessage, errorMessage, loadingMessage } = this.props;
 
     return (
       <div className={styles['app']}>
@@ -146,18 +146,18 @@ class App extends React.Component {
           transitionName={fade}
           transitionAppear={true}
           transitionAppearTimeout={300}
-          trnasitionEnterTimeout={300}
+          transitionEnterTimeout={300}
           transitionLeaveTimeout={300}
           >
           { showLoadingMessage &&
-            <MessageComp message='Loading...' />
+            <MessageComp message={loadingMessage} />
           }
         </CSSTransitionGroup>
         <CSSTransitionGroup
           transitionName={fade}
           transitionAppear={true}
           transitionAppearTimeout={300}
-          trnasitionEnterTimeout={300}
+          transitionEnterTimeout={300}
           transitionLeaveTimeout={300}
           >
           { showErrorMessage &&
@@ -172,7 +172,7 @@ class App extends React.Component {
             transitionName={scale}
             transitionAppear={true}
             transitionAppearTimeout={300}
-            trnasitionEnterTimeout={300}
+            transitionEnterTimeout={300}
             transitionLeaveTimeout={300}
             >
           {fetchRequestStatus === 'success' && contracts.length &&

src/client/App.js

@@ -10,7 +10,7 @@
   transition: top 0.3s, opacity 0.4s;
 
   &--settings {
-    width: 300px;
+    width: 330px;
   }
 
   &--active {

src/client/components/Dropdown/Dropdown.scss

@@ -3,7 +3,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import  { CSSTransitionGroup } from 'react-transition-group';
 
-import { showLoadingMessage, hideLoadingMessage, showErrorMessage, getErrorMessage } from '../Store/Actions.js';
+import { showLoadingMessage, hideLoadingMessage, showErrorMessage } from '../Store/Actions.js';
+
+import baseurl from '../../utils/baseUrl';
 
 import Editor from '../Editor/Editor';
 import SideBar from '../SideBar/SideBar';
@@ -33,8 +35,7 @@ const mapDispatchToProps = dispatch => {
   return {
     loadingMessageOn: () => dispatch(showLoadingMessage()),
     loadingMessageOff: () => dispatch(hideLoadingMessage()),
-    errorMessageOn: () => dispatch(showErrorMessage()),
-    getErrorMessage: message => dispatch(getErrorMessage(message)),
+    errorMessageOn: message => dispatch(showErrorMessage(message)),
   }
 }
 
@@ -62,7 +63,7 @@ class Main extends React.Component {
   }
 
   getUrl(endPoint, parameters) {
-    let url = `http://localhost:9090/${endPoint}`;
+    let url = baseurl + endPoint;
     const paramKeys = Object.keys(parameters);
 
     if (paramKeys.length) {
@@ -74,13 +75,13 @@ class Main extends React.Component {
 
  fetchData(url, type, body) {
    this.handleRequestPending();
-  fetch(url, body? {
+  fetch(url, body ? {
       body: JSON.stringify({request: body}),
       method: 'POST',
       headers:{
         'Content-Type': 'application/json'
       }
-    }: {})
+    } : {})
     .then(res => res.json())
     .then(data => {
       data.error
@@ -96,7 +97,7 @@ class Main extends React.Component {
       sideBarOpen: false,
     });
 
-    this.props.loadingMessageOn();
+    this.props.loadingMessageOn('Loading...');
   }
 
 
@@ -137,10 +138,8 @@ class Main extends React.Component {
   }
 
   handleRequestFail(data) {
-    const message = data.message;
     this.props.loadingMessageOff();
-    this.props.errorMessageOn();
-    this.props.getErrorMessage(message);
+    this.props.errorMessageOn(data.message);
   }
 
   handleTransactionFormSubmit() {

src/client/components/Main/Main.js

@@ -7,13 +7,15 @@ import Icon from '../Icon/Icon';
 
 import styles from './MessageComp.scss';
 
-const mapDispatchToProps = dispatch => {
-  return {
-    errorMessageOff: () => dispatch(hideErrorMessage()),
-  }
-}
+const mapDispatchToProps = dispatch => ({
+  errorMessageOff: () => dispatch(hideErrorMessage()),
+});
 
-class ConnectedMessageComp extends React.Component {
+const mapStateToProps = state => ({
+  errorMessage: state.errorMessage.message
+});
+
+class MessageComp extends React.Component {
   constructor(props) {
     super(props);
 
@@ -36,17 +38,17 @@ class ConnectedMessageComp extends React.Component {
   }
 
   render() {
-    const { message, errorMessageOff } = this.props;
+    const { message, errorMessageOff, errorMessage } = this.props;
 
     return (
       <div className={styles['message-comp']}>
         <div className={styles['message-comp__main']}>
           <div className={styles['message-comp__main__text']}>
-            <h1>{message}</h1>
+            <h1>{`${message}`}</h1>
           </div>
           <div className={styles['message-comp__main__button']}>
           {
-            message === 'Loading...' 
+            !errorMessage
             ?  <Icon iconName='Spinner' />
             :  <div className={styles['message-comp__main__button__item']}>
                   <button onClick={errorMessageOff}><span>Close</span></button>
@@ -60,8 +62,6 @@ class ConnectedMessageComp extends React.Component {
   }
 }
 
-const MessageComp = connect(null, mapDispatchToProps)(ConnectedMessageComp);
-
 MessageComp.displayName = 'MessageComp';
 
-export default MessageComp;
+export default connect(mapStateToProps, mapDispatchToProps)(MessageComp);

src/client/components/MessageComp/MessageComp.js

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import TransactionDebugger from '../../TransactionDebugger/TransactionDebugger';
-import Disassembler from '../../Disassembler/Disassembler';
-import ControlFlowGraphRuntime from '../../ControlFlowGraphRuntime/ControlFlowGraphRuntime';
-import StorageViewer from '../../StorageViewer/StorageViewer';
+import TransactionDebugger from '../TransactionDebugger/TransactionDebugger';
+import Disassembler from '../Disassembler/Disassembler';
+import ControlFlowGraphRuntime from '../ControlFlowGraphRuntime/ControlFlowGraphRuntime';
+import ControlFlowGraphConstructor from '../ControlFlowGraphConstructor/ControlFlowGraphConstructor';
+import StorageViewer from '../StorageViewer/StorageViewer';
 
 import styles from './Panel.scss';
 
 import classnames from 'classnames/bind';
-import ControlFlowGraphConstructor from '../../ControlFlowGraphConstructor/ControlFlowGraphConstructor';
 
 const cx = classnames.bind(styles);