Merge pull request #1 from binary-hamedanchi/zaki_react_trading

Updates
zaki-hanafiah · Feb 9, 2018 · a58d0bd · a58d0bd
2 parents 3e2b7f8 + bb09462
commit a58d0bd
Show file tree

Hide file tree

Showing 21 changed files with 204 additions and 269 deletions.
diff --git a/src/images/trading_app/close.svg b/src/images/trading_app/close.svg
diff --git a/src/images/trading_app/menu.svg b/src/images/trading_app/menu.svg
diff --git a/src/images/trading_app/notify_none.svg b/src/images/trading_app/notify_none.svg
diff --git a/src/javascript/app_2/pages/trading/components/amount.jsx b/src/javascript/app_2/pages/trading/components/amount.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { InputField } from './form/text_field.jsx';
-import Dropdown from './form/selectbox.jsx';
+import InputField from './form/input_field.jsx';
+import Dropdown from './form/dropdown.jsx';
 import { connect } from '../store/connect';
 import Client from '../../../../app/base/client';
 import { localize } from '../../../../_common/localize';
 
 const Currencies = ({ list }) => (
     Object.keys(list).map((type, idx) => (
         <React.Fragment key={idx}>
-            <optgroup key={idx} label={type}></optgroup>
+            <optgroup key={idx} label={type} />
             {list[type].map(cur => (
                 <option key={cur} value={cur}>{cur}</option>
             ))}
@@ -22,20 +22,20 @@ const Amount = ({
     currencies_list,
     amount,
     onChange,
-    onSelectChange,
 }) => (
         <fieldset>
             <Dropdown
-                list={[{name: localize('Payout'), value: 'payout'},
-                       {name: localize('Stake'),  value: 'stake'}]}
-                selected={basis}
+                list={[
+                    { name: localize('Payout'), value: 'payout' },
+                    { name: localize('Stake'),  value: 'stake' },
+                ]}
                 value={basis}
                 name='basis'
-                on_change={onSelectChange}
+                onChange={onChange}
             />
 
             {Client.get('currency') ?
-                <span className={`symbols ${currency.toLowerCase()}`}></span> :
+                <span className={`symbols ${currency.toLowerCase()}`} /> :
                 <select name='currency' value={currency} onChange={onChange}>
                     <Currencies list={currencies_list} />
                 </select>
@@ -59,6 +59,5 @@ export default connect(
         currencies_list: trade.currencies_list,
         amount         : trade.amount,
         onChange       : trade.handleChange,
-        onSelectChange : trade.handleDropDownChange,
     })
 )(Amount);
diff --git a/src/javascript/app_2/pages/trading/components/barrier.jsx b/src/javascript/app_2/pages/trading/components/barrier.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { InputField } from './form/text_field.jsx';
+import InputField from './form/input_field.jsx';
 import { connect } from '../store/connect';
 import { localize } from '../../../../_common/localize';
 
@@ -16,7 +16,7 @@ const Barrier = ({
                 type='number'
                 name='barrier_1'
                 value={barrier_1}
-                o_change={onChange}
+                onChange={onChange}
                 is_currency
             />
 
@@ -26,7 +26,7 @@ const Barrier = ({
                         type='number'
                         name='barrier_2'
                         value={barrier_2}
-                        on_change={onChange}
+                        onChange={onChange}
                         is_currency
                     />
                 </React.Fragment>

diff --git a/src/javascript/app_2/pages/trading/components/contract_type.jsx b/src/javascript/app_2/pages/trading/components/contract_type.jsx
@@ -4,7 +4,7 @@ import { connect } from '../store/connect';
 const Contracts = ({ list }) => (
     Object.keys(list).map((category, idx) => (
         <React.Fragment key={idx}>
-            <optgroup key={idx} label={category}></optgroup>
+            <optgroup key={idx} label={category} />
             {list[category].map(type => (
                 <option key={type.name} value={type.name}>{type.title}</option>
             ))}

diff --git a/src/javascript/app_2/pages/trading/components/duration.jsx b/src/javascript/app_2/pages/trading/components/duration.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { InputField } from './form/text_field.jsx';
-import Dropdown from './form/selectbox.jsx';
+import InputField from './form/input_field.jsx';
+import Dropdown from './form/dropdown.jsx';
 import ClockHeader from './elements/clock_header.jsx';
 import { connect } from '../store/connect';
 import { localize } from '../../../../_common/localize';
@@ -10,18 +10,19 @@ const Duration = ({
     duration,
     duration_unit,
     duration_units_list,
+    server_time,
     onChange,
-    onSelectChange,
 }) => (
         <fieldset>
-            <ClockHeader header={localize('Trade Duration')} />
+            <ClockHeader time={server_time} header={localize('Trade Duration')} />
             <Dropdown
-                list={[{name: localize('Duration'), value: 'duration'},
-                       {name: localize('End Time'),  value: 'endtime'}]}
-                selected={expiry_type}
+                list={[
+                    { name: localize('Duration'), value: 'duration' },
+                    { name: localize('End Time'), value: 'endtime' },
+                ]}
                 value={expiry_type}
                 name='expiry_type'
-                on_change={onSelectChange}
+                onChange={onChange}
             />
 
             {expiry_type === 'duration' ?
@@ -30,7 +31,7 @@ const Duration = ({
                         type='number'
                         name='duration'
                         value={duration}
-                        on_change={onChange}
+                        onChange={onChange}
                     />
                     <select name='duration_unit' value={duration_unit} onChange={onChange}>
                         {Object.keys(duration_units_list).map((u) => (
@@ -52,7 +53,7 @@ export default connect(
         duration           : trade.duration,
         duration_unit      : trade.duration_unit,
         duration_units_list: trade.duration_units_list,
+        server_time        : trade.server_time,
         onChange           : trade.handleChange,
-        onSelectChange     : trade.handleDropDownChange,
     })
 )(Duration);
diff --git a/src/javascript/app_2/pages/trading/components/elements/clock_header.jsx b/src/javascript/app_2/pages/trading/components/elements/clock_header.jsx
@@ -2,29 +2,11 @@ import React from 'react';
 import moment from 'moment';
 
 class ClockHeader extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            time: '',
-        };
-    }
-
-    componentDidMount() {
-        this.interval = setInterval(() => {
-            this.setState({ time: moment().toDate().toGMTString() });
-        }, 1000);
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.interval);
-        this.setState({ time: '' });
-    }
-
     render() {
         return (
             <div className='clock-header'>
                 <span className='field-info left'>{this.props.header}</span>
-                <span className='field-info right'>{this.state.time}</span>
+                <span className='field-info right'>{moment(this.props.time || undefined).utc().format('YYYY-MM-DD HH:mm:ss')} GMT</span>
             </div>
         );
     }

diff --git a/src/javascript/app_2/pages/trading/components/elements/drawer.jsx b/src/javascript/app_2/pages/trading/components/elements/drawer.jsx
@@ -1,25 +1,24 @@
 import React from 'react';
 import Url from '../../../../../_common/url';
 
-class ToggleDrawer extends React.Component {
-
+class ToggleDrawer extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.setRef = this.setRef.bind(this);
-        this.showDrawer = this.showDrawer.bind(this);
+        this.setRef      = this.setRef.bind(this);
+        this.showDrawer  = this.showDrawer.bind(this);
         this.closeDrawer = this.closeDrawer.bind(this);
     }
 
     setRef(node) {
-        this.Ref = node;
+        this.ref = node;
     }
 
     showDrawer() {
-        this.Ref.show();
+        this.ref.show();
     }
 
     closeDrawer() {
-        this.Ref.hide();
+        this.ref.hide();
     }
 
     render() {
@@ -37,17 +36,16 @@ class ToggleDrawer extends React.Component {
     }
 }
 
-class Drawer extends React.Component {
-
+class Drawer extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            drawerVisible: false,
+            is_drawer_visible: false,
         };
         this.setRef = this.setRef.bind(this);
-        this.show = this.show.bind(this);
-        this.hide = this.hide.bind(this);
-        this.scrollToggle = this.scrollToggle.bind(this);
+        this.show   = this.show.bind(this);
+        this.hide   = this.hide.bind(this);
+        this.scrollToggle       = this.scrollToggle.bind(this);
         this.handleClickOutside = this.handleClickOutside.bind(this);
     }
 
@@ -60,47 +58,46 @@ class Drawer extends React.Component {
     }
 
     setRef(node) {
-        this.Ref = node;
+        this.ref = node;
     }
 
     scrollToggle(state) {
-        this.isOpen = state;
-        if (this.isOpen) {
-            document.body.classList.add('noScroll');
-        }
-        else {
-            document.body.classList.remove('noScroll');
-        }
+        this.is_open = state;
+        document.body.classList.toggle('no-scroll', this.is_open);
     }
 
     show() {
-        this.setState({ drawerVisible: true });
+        this.setState({ is_drawer_visible: true });
     }
 
     hide() {
-        this.setState({ drawerVisible: false });
+        this.setState({ is_drawer_visible: false });
     }
 
     handleClickOutside(event) {
         event.stopPropagation();
-        if (this.Ref && !this.Ref.contains(event.target)) {
+        if (this.ref && !this.ref.contains(event.target)) {
             this.hide();
         }
     }
 
     render() {
         return (
             <aside className='drawer-container'>
-                <div className={`drawer-bg ${this.state.drawerVisible ? 'show' : 'hide'}`}>
-                    <div ref={this.setRef} className={`drawer ${this.state.drawerVisible ? 'visible' : ''} ${this.props.alignment}`}>{this.props.children}</div>
+                <div className={`drawer-bg ${this.state.is_drawer_visible ? 'show' : 'hide'}`}>
+                    <div
+                        ref={this.setRef}
+                        className={`drawer ${this.state.is_drawer_visible ? 'visible' : ''} ${this.props.alignment}`}
+                    >
+                        {this.props.children}
+                    </div>
                 </div>
             </aside>
         );
     }
 }
 
-class DrawerHeader extends React.Component {
-
+class DrawerHeader extends React.PureComponent {
     render() {
         return (
             <React.Fragment>
@@ -125,8 +122,7 @@ class DrawerHeader extends React.Component {
     }
 }
 
-class DrawerItem extends React.Component {
-
+class DrawerItem extends React.PureComponent {
     render() {
         return (
             <div className='drawer-item'>
@@ -140,7 +136,6 @@ class DrawerItem extends React.Component {
 
 module.exports = {
     Drawer,
-    DrawerHeader,
     DrawerItem,
     ToggleDrawer,
 };
diff --git a/src/javascript/app_2/pages/trading/components/elements/header.jsx b/src/javascript/app_2/pages/trading/components/elements/header.jsx
@@ -3,7 +3,6 @@ import { ToggleDrawer, DrawerItem } from './drawer.jsx';
 import Url from '../../../../../_common/url';
 
 class TradingHeader extends React.Component {
-
     render() {
         return (
             <React.Fragment>
@@ -18,16 +17,14 @@ class TradingHeader extends React.Component {
                             <div className='navbar-icons binary-logo'>
                                 <img className='logo-img' src={Url.urlForStatic('images/trading_app/symbol.svg')} alt='Binary.com' />
                             </div>
-                            { this.props.items.length ?
-                              <div className='menu-links'>
-                                  {this.props.items.map((item, idx) => (
-                                      <a key={idx} href={item.href || 'javascript:;'} >
-                                          <span className={item.icon}>{item.text}</span>
-                                      </a>
-                                  ))}
-                              </div>
-                              :
-                              undefined
+                            {!!this.props.items.length &&
+                                <div className='menu-links'>
+                                    {this.props.items.map((item, idx) => (
+                                        <a key={idx} href={item.href || 'javascript:;'} >
+                                            <span className={item.icon}>{item.text}</span>
+                                        </a>
+                                    ))}
+                                </div>
                             }
                         </div>
                         <ToggleDrawer alignment='right'>

diff --git a/src/javascript/app_2/pages/trading/components/form/button.jsx b/src/javascript/app_2/pages/trading/components/form/button.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-export const Button = ({
+const Button = ({
     id,
-    className='',
+    className = '',
     text,
     has_effect,
     is_disabled,