Merge pull request #10 from fergarrui/create-versions-dropdown

Create versions dropdown

Author: fergarrui

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,32 +2,35 @@ 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';
 import Tab from './components/Tab/Tab';
 import MessageComp from './components/MessageComp/MessageComp';
-import SettingsBar from './components/SettingsBar/SettingsBar';
+import TabPanel from './components/Tab/TabPanel/TabPanel';
+import Main from './components/Main/Main';
 
 import styles from './styles/App.scss';
 import fade from './styles/transitions/fade.scss';
 import scale from './styles/transitions/scale.scss';
 
 const mapStateToProps = state => {
   return {
-    showLoadingMessage: state.toggleLoadingMessage,
-    showErrorMessage: state.toggleErrorMessage,
-    errorMessage: state.toggleErrorMessage,
+    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)),
   }
 }
 
@@ -40,11 +43,13 @@ class App extends React.Component {
       parameter: '',
       fetchRequestStatus: undefined,
       contracts: [],
-      settingsVisible: false,
     }
 
     this.handleMenuItemIconClick = this.handleMenuItemIconClick.bind(this);
-    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchData(baseUrl + 'solc/list');
   }
 
   handleMenuItemIconClick(index) {
@@ -74,13 +79,14 @@ class App extends React.Component {
       settingsVisible: false,
     });
 
-    this.fetchData(parameter);
+    const url = `http://localhost:9090/files/${encodeURIComponent(parameter) || ' '}?extension=sol`;
+    this.fetchData(url);
   }
 
-  fetchData(parameter) {
+  fetchData(url) {
     this.handleRequestPending();
 
-    fetch(`http://localhost:9090/files/${encodeURIComponent(parameter) || ' '}?extension=sol`)
+    fetch(url)
       .then(res => res.json())
       .then(data => {
         data.error 
@@ -92,68 +98,41 @@ class App extends React.Component {
   }
 
   handleRequestPending() {
-    this.props.loadingMessageOn();
+    this.props.loadingMessageOn('Loading...');
   }
 
   handleRequestSuccess(response) {
-    this.setState({
-      fetchRequestStatus: 'success',
-      contracts: response,
-    });
+
+    if(response.some(item => item.version)) {
+      this.setState({
+        fetchRequestStatus: 'success',
+        versions: response,
+      });
+    } else {
+      this.setState({
+        fetchRequestStatus: 'success',
+        contracts: response,
+      });
+    }
 
     this.props.loadingMessageOff();
   }
 
   handleRequestFail(message) {
     this.props.loadingMessageOff();
-    this.props.errorMessageOn();
-    this.props.getErrorMessage(message);
-  }
-
-  handleSettingsiconClick() {
-    this.toggleOutsideClick();
-
-    this.setState(prevState => ({
-      settingsVisible: !prevState.settingsVisible,
-    }))
-  }
-
-  handleSettingsSaveButtonClick() {
-    this.toggleOutsideClick();
-
-    this.setState({
-      settingsVisible: false,
-    });
-  }
-
-  toggleOutsideClick() {
-    if (!this.state.settingsVisible) {
-      document.addEventListener('click', this.handleOutsideClick);
-    } else {
-      document.removeEventListener('click', this.handleOutsideClick);
-    }
-  }
-
-  handleOutsideClick(e) {
-    if (this.node.contains(e.target)) {
-      return;
-    }
-
-    document.removeEventListener('click', this.handleOutsideClick);
-  
-    this.setState({
-      settingsVisible: false,
-    });
+    this.props.errorMessageOn(message);
   }
 
   render() {
 
-    const { fetchRequestStatus, contracts, settingsVisible, configPlaceholder } = this.state;
-    const { children, showLoadingMessage, showErrorMessage, errorMessage } = this.props;
+    const { fetchRequestStatus, contracts, versions } = this.state;
+    const { showLoadingMessage, showErrorMessage, errorMessage, loadingMessage } = this.props;
 
     return (
       <div className={styles['app']}>
-        <TopNavBar onIconClick={() => this.handleSettingsiconClick()}>
+        <TopNavBar
+          fetchRequestStatus={fetchRequestStatus}
+          versions={versions}>
           <Form 
             submitButton={true}
             inputTypes={[{ name: 'contractsPath', placeholder: 'Insert contracts path'}]}
@@ -163,28 +142,22 @@ class App extends React.Component {
             onInputKeyUp={() => this.handleInputSubmit()}
             />
         </TopNavBar>
-        <div ref={node => { this.node = node; }}>
-          <SettingsBar 
-            active={!!settingsVisible}
-            onSaveButtonClick={() => this.handleSettingsSaveButtonClick()}
-          />
-        </div>
         <CSSTransitionGroup
           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 &&
@@ -199,12 +172,26 @@ class App extends React.Component {
             transitionName={scale}
             transitionAppear={true}
             transitionAppearTimeout={300}
-            trnasitionEnterTimeout={300}
+            transitionEnterTimeout={300}
             transitionLeaveTimeout={300}
             >
-          {fetchRequestStatus === 'success' && 
-          <Tab data={contracts} onMenuItemIconClick={this.handleMenuItemIconClick}>
-            {children}
+          {fetchRequestStatus === 'success' && contracts.length &&
+          <Tab onMenuItemIconClick={this.handleMenuItemIconClick}>
+            {contracts.map((item, i) => {
+              return (
+                <TabPanel
+                  key={`id--${item.name}--${i}`}
+                  name={item.name}
+                  >
+                  <Main 
+                    name={item.name}
+                    code={item.code}
+                    path={item.path}
+                    index={i}
+                    />
+                </TabPanel>
+              )
+            })}    
           </Tab>        
           }
           </CSSTransitionGroup>

src/client/App.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import classnames from 'classnames/bind';
+
+import styles from './Dropdown.scss';
+
+const cx = classnames.bind(styles);
+
+const Dropdown = ({ active, children, versions, settings, onClick }) => {
+
+  const dropdownClasses = cx({
+    'dropdown': true,
+    'dropdown--active': !!active,
+    'dropdown--versions': !!versions,
+    'dropdown--settings': !!settings
+  });
+
+  return (
+    <div className={dropdownClasses} onClick={onClick}>
+      { children }
+    </div>
+  )
+}
+
+export default Dropdown;

src/client/components/Dropdown/Dropdown.js

@@ -0,0 +1,20 @@
+.dropdown {
+  width: 100%;
+  position: absolute;
+  right: 0;    
+  top: -262px;
+  background: $color-dark-grey;
+  z-index: -3;
+  opacity: 0;
+  padding: 10px 10px 20px 10px;
+  transition: top 0.3s, opacity 0.4s;
+
+  &--settings {
+    width: 330px;
+  }
+
+  &--active {
+    opacity: 1;
+    top: 100%;
+  }
+}