new feature version dropdown

Author: Swolfeyes

src/client/App.js

@@ -9,6 +9,8 @@ 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 Dropdown from './components/Dropdown/Dropdown';
+import Version from './components/Version/Version';
 
 import styles from './styles/App.scss';
 import fade from './styles/transitions/fade.scss';
@@ -40,11 +42,11 @@ 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('http://localhost:9090/solc/list');
   }
 
   handleMenuItemIconClick(index) {
@@ -74,13 +76,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 
@@ -96,10 +99,18 @@ class App extends React.Component {
   }
 
   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();
   }
@@ -110,50 +121,16 @@ class App extends React.Component {
     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,
-    });
-  }
-
   render() {
 
-    const { fetchRequestStatus, contracts, settingsVisible, configPlaceholder } = this.state;
+    const { fetchRequestStatus, contracts, versions } = this.state;
     const { children, showLoadingMessage, showErrorMessage, errorMessage } = 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,12 +140,6 @@ 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}
@@ -202,7 +173,7 @@ class App extends React.Component {
             trnasitionEnterTimeout={300}
             transitionLeaveTimeout={300}
             >
-          {fetchRequestStatus === 'success' && 
+          {fetchRequestStatus === 'success' && contracts.length &&
           <Tab data={contracts} onMenuItemIconClick={this.handleMenuItemIconClick}>
             {children}
           </Tab>        

src/client/components/Dropdown/Dropdown.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.scss

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

src/client/components/Icon/Icon.js

@@ -11,12 +11,12 @@ import Cogs from './SVG/cogs.svg';
 
 import styles from './Icon.scss';
 
-const Icon = ({ iconName }) => {
+const Icon = ({ iconName, onClick }) => {
 
   const icons = { CircleLeft, CircleRight, Menu, Cross, Spinner, Cogs };
 
   return (
-    <div className={styles['icon']}>
+    <div onClick={onClick} className={styles['icon']}>
       <SVGInline svg={icons[iconName]} />
     </div>
   );

src/client/components/SettingsBar/SettingsBar.scss

@@ -1,16 +1,7 @@
 .settings-bar {
-  width: 50%;
+  width: 100%;
   background: $color-dark-grey;
-  position: absolute;
   padding: 0 5px 10px 5px;
-  top: -262px;
-  right: 0;
-  transition: top 0.3s;
-  z-index: 2;
-
-  &--active {
-    top: 29px;
-  }
 
   &__buttons {
     padding: 5px 10px;

src/client/components/Store/Actions.js

@@ -1,7 +1,7 @@
 import { SELECT_EDITOR_LINES, SHOW_EVM_STATE, 
   SHOW_LOADING_MESSAGE, HIDE_LOADING_MESSAGE, 
   SHOW_ERROR_MESSAGE, HIDE_ERROR_MESSAGE, 
-  HIDE_EVM_STATE, GET_ERROR_MESSAGE } from './Constants.js';
+  HIDE_EVM_STATE, GET_ERROR_MESSAGE, GET_VERSION_NUM } from './Constants.js';
 
 export function selectEditorLines(lines) {
   return {
@@ -58,3 +58,10 @@ export function getErrorMessage(message) {
     message,
   }
 }
+
+export function getVersionNumber(version) {
+  return {
+    type: GET_VERSION_NUM,
+    version,
+  }
+}

src/client/components/Store/Constants.js

@@ -9,4 +9,5 @@ export const GET_ERROR_MESSAGE = 'GET_ERROR_MESSAGE';
 export const GET_HOST = 'GET_HOST';
 export const GET_PROTOCOL = 'GET_PROTOCOL';
 export const GET_USERNAME = 'GET_USERNAME';
-export const GET_PASSWORD = 'GET_PASSWORD';
+export const GET_PASSWORD = 'GET_PASSWORD';
+export const GET_VERSION_NUM = 'GET_VERSION_NUM'; 

src/client/components/Store/Reducers/Reducers.js

@@ -1,6 +1,6 @@
 import { SELECT_EDITOR_LINES, SHOW_EVM_STATE, SHOW_LOADING_MESSAGE, 
   HIDE_LOADING_MESSAGE, SHOW_ERROR_MESSAGE, HIDE_ERROR_MESSAGE, 
-  HIDE_EVM_STATE, GET_ERROR_MESSAGE } from '../Constants.js';
+  HIDE_EVM_STATE, GET_ERROR_MESSAGE, GET_VERSION_NUM } from '../Constants.js';
 
 
 export function selectLines(state = [0, 0], action) {
@@ -33,4 +33,11 @@ export function toggleErrorMessage(state = false, action) {
     case GET_ERROR_MESSAGE: return action.message;
     default: return state;
   }
+}
+
+export function displayVersionNumber(state = '', action) {
+  switch(action.type) {
+    case GET_VERSION_NUM: return action.version;
+    default: return state;
+  }
 }

src/client/components/Store/Reducers/index.js

@@ -1,10 +1,11 @@
 import { combineReducers } from 'redux';
 
-import { selectLines, selectEVMState, toggleLoadingMessage, toggleErrorMessage } from './Reducers.js';
+import { selectLines, selectEVMState, toggleLoadingMessage, toggleErrorMessage, displayVersionNumber } from './Reducers.js';
 
 export default combineReducers({
   selectLines,
   selectEVMState,
   toggleLoadingMessage,
   toggleErrorMessage,
+  displayVersionNumber
 });