Merge pull request #137 from kellybinary/optimization

kelly/optimization

package.json

@@ -126,7 +126,7 @@
     "react-router-dom": "5.0.0",
     "react-transition-group": "2.4.0",
     "sinon": "7.2.2",
-    "smartcharts-beta": "0.4.35",
+    "smartcharts-beta": "0.4.36",
     "tt-react-custom-scrollbars": "4.2.1-tt2",
     "url-polyfill": "1.0.9",
     "web-push-notifications": "3.2.15"

src/javascript/app/App/Components/Animations/bounce.jsx

@@ -0,0 +1,51 @@
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import posed,
+{ PoseGroup }         from 'react-pose';
+
+const BounceUp = posed.div({
+    enter: {
+        y         : 0,
+        opacity   : 1,
+        transition: {
+            y: {
+                type     : 'spring',
+                stiffness: 500,
+                damping  : 15,
+            },
+            default: {
+                duration: 300,
+            },
+        },
+    },
+    exit: {
+        y         : 35,
+        opacity   : 0,
+        transition: {
+            duration: 0,
+        },
+    },
+});
+
+const Bounce = ({
+    children,
+    className,
+    is_visible,
+    keyname,
+}) => (
+    <PoseGroup>
+        {is_visible &&
+            <BounceUp className={className} key={keyname}>
+                {children}
+            </BounceUp>
+        }
+    </PoseGroup>
+);
+
+Bounce.propTypes = {
+    children  : PropTypes.node,
+    is_visible: PropTypes.bool,
+    keyname   : PropTypes.string,
+};
+
+export { Bounce };

src/javascript/app/App/Components/Animations/fade-wrapper.jsx

@@ -50,8 +50,8 @@ const FadeInOnlyDiv = posed.div({
 const FadeWrapper = ({
     children,
     className,
-    keyname,
     is_visible,
+    keyname,
     type,
 }) => {
     if (type === 'top') {

src/javascript/app/App/Components/Animations/index.js

@@ -1 +1,3 @@
+export * from './bounce.jsx';
 export * from './fade-wrapper.jsx';
+export * from './slide-in.jsx';

src/javascript/app/App/Components/Animations/slide-in.jsx

@@ -0,0 +1,76 @@
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import posed,
+{ PoseGroup }         from 'react-pose';
+
+const SlideInFromTop = posed.div({
+    enter: {
+        y         : 0,
+        opacity   : 1,
+        transition: {
+            duration: 200,
+        },
+    },
+    exit: {
+        y         : -20,
+        opacity   : 0,
+        transition: {
+            duration: 100,
+        },
+    },
+});
+
+const SlideInFromBottom = posed.div({
+    enter: {
+        y         : 0,
+        opacity   : 1,
+        transition: {
+            duration: 200,
+        },
+    },
+    exit: {
+        y         : 20,
+        opacity   : 0,
+        transition: {
+            duration: 100,
+        },
+    },
+});
+
+const SlideIn = ({
+    children,
+    className,
+    keyname,
+    is_visible,
+    type,
+}) => {
+    if (type === 'bottom') {
+        return (
+            <PoseGroup flipMove={false}>
+                {is_visible &&
+                    <SlideInFromBottom className={className} key={keyname}>
+                        {children}
+                    </SlideInFromBottom>
+                }
+            </PoseGroup>
+        );
+    }
+    return (
+        <PoseGroup flipMove={false}>
+            {is_visible &&
+                <SlideInFromTop className={className} key={keyname}>
+                    {children}
+                </SlideInFromTop>
+            }
+        </PoseGroup>
+    );
+};
+
+SlideIn.propTypes = {
+    children  : PropTypes.node,
+    is_visible: PropTypes.bool,
+    keyname   : PropTypes.string,
+    type      : PropTypes.string,
+};
+
+export { SlideIn };

src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js

@@ -9,11 +9,11 @@ describe('positions-helper', () => {
         });
     });
     describe('getTimePercentage', () => {
-        it('should work as expected with time of server, purchase and expiry being calculated leading to a percentage', () => {
+        it('should work as expected with time of server, date_start and expiry being calculated leading to a percentage', () => {
             const current_time  = 1544000005;
-            const purchase_time = 1544000000;
+            const date_start    = 1544000000;
             const expiry_time   = 1544005000;
-            expect(PositionsHelper.getTimePercentage(current_time, purchase_time, expiry_time)).to.eql(100);
+            expect(PositionsHelper.getTimePercentage(current_time, date_start, expiry_time)).to.eql(100);
         });
     });
     describe('getBarrierLabel', () => {

src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx

@@ -56,7 +56,7 @@ const PositionsDrawerCard = ({
                 :
                 <ProgressSlider
                     is_loading={is_loading}
-                    start_time={contract_info.purchase_time}
+                    start_time={contract_info.date_start}
                     expiry_time={contract_info.date_expiry}
                     current_tick={current_tick}
                     ticks_count={contract_info.tick_count}

src/javascript/app/App/Containers/ProgressSliderStream/progress-slider-stream.jsx

@@ -20,7 +20,7 @@ const ProgressSliderStream = ({
         expiry_time={contract_info.date_expiry}
         has_result={false}
         current_tick={position.current_tick}
-        start_time={contract_info.purchase_time}
+        start_time={contract_info.date_start}
         ticks_count={contract_info.ticks_count}
     />;
 };

src/javascript/app/Modules/Contract/Components/LastDigitPrediction/digit-display.jsx

@@ -2,6 +2,7 @@ import classNames   from 'classnames';
 import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
+import { Bounce }   from 'App/Components/Animations';
 import Digit        from './digit.jsx';
 import DigitSpot    from './digit-spot.jsx';
 
@@ -24,13 +25,18 @@ const DigitDisplay = ({
                 'digits__digit--loss': is_lost && is_latest,
             })}
         >
-            { is_latest && spot &&
+            <Bounce
+                is_visible={!!(is_latest && spot)}
+                className='digits__digit-spot'
+                keyname='digits__digit-spot'
+            >
                 <DigitSpot
                     current_spot={spot}
                     is_lost={is_lost}
+                    is_visible={!!(is_latest && spot)}
                     is_won={is_won}
                 />
-            }
+            </Bounce>
             <Digit
                 is_latest={is_latest}
                 is_lost={is_lost}

src/javascript/app/Modules/Contract/Components/LastDigitPrediction/digit-spot.jsx

@@ -1,13 +1,13 @@
-import classNames   from 'classnames';
-import PropTypes    from 'prop-types';
-import React        from 'react';
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
 
 const DigitSpot = ({
     current_spot,
     is_lost,
     is_won,
 }) => (
-    <div className='digits__digit-spot'>
+    <React.Fragment>
         <span className='digits__digit-spot-value'>
             {current_spot.slice(0, -1)}
         </span>
@@ -19,7 +19,7 @@ const DigitSpot = ({
         >
             {current_spot.slice(-1)}
         </span>
-    </div>
+    </React.Fragment>
 );
 
 DigitSpot.propTypes = {

src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-prediction.jsx

@@ -45,8 +45,7 @@ class LastDigitPrediction extends React.Component {
         // but we only need is_lost condition only once we have the 'won' or 'lost' status
         const is_lost = is_ended && status === 'lost';
 
-        // const digit = this.props.digits_info[Object.keys(this.props.digits_info)[0]].digit;
-        const position =  !isNaN(latest_digit.digit) ? (latest_digit.digit * 48) + 4 : 4;
+        const position = this.state[latest_digit.digit];
 
         return (
             <div

src/javascript/app/Modules/Contract/Containers/digits.jsx

@@ -1,6 +1,6 @@
 import PropTypes               from 'prop-types';
 import React                   from 'react';
-import { CSSTransition }       from 'react-transition-group';
+import { SlideIn }             from 'App/Components/Animations';
 import { connect }             from 'Stores/connect';
 import { LastDigitPrediction } from '../Components/LastDigitPrediction';
 
@@ -21,32 +21,27 @@ class Digits extends React.Component {
             is_digit_contract,
             is_ended,
             is_trade_page,
-            last_digit,
             replay_info,
         } = this.props;
         const barrier       = contract_info.barrier || replay_info.barrier;
         const contract_type = contract_info.contract_type || replay_info.contract_type;
 
         return (
-            <CSSTransition
-                in={is_digit_contract && this.state.mounted}
-                timeout={250}
-                classNames={{
-                    enter    : 'digits--enter',
-                    enterDone: 'digits--enter-done',
-                    exit     : 'digits--exit',
-                }}
-                unmountOnExit
+            <SlideIn
+                is_visible={is_digit_contract && this.state.mounted}
+                className='digits'
+                keyname='digits'
+                type='bottom'
             >
                 <LastDigitPrediction
-                    barrier={+barrier || +last_digit} // fallback to last_digit if barrier from contract_info is null
+                    barrier={+barrier}
                     contract_type={contract_type}
                     digits_info={digits_info}
                     is_ended={is_ended}
                     is_trade_page={is_trade_page}
                     status={display_status}
                 />
-            </CSSTransition>
+            </SlideIn>
         );
     }
 }
@@ -58,11 +53,7 @@ Digits.propTypes = {
     is_digit_contract: PropTypes.bool,
     is_ended         : PropTypes.bool,
     is_trade_page    : PropTypes.bool,
-    last_digit       : PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string,
-    ]),
-    replay_info: PropTypes.object,
+    replay_info      : PropTypes.object,
 };
 
 export default connect(
@@ -73,6 +64,5 @@ export default connect(
         is_digit_contract: modules.contract.is_digit_contract,
         is_ended         : modules.contract.is_ended,
         replay_info      : modules.contract.replay_info,
-        last_digit       : modules.trade.last_digit,
     })
 )(Digits);

src/javascript/app/Modules/Contract/Containers/info-box.jsx

@@ -1,6 +1,6 @@
 import PropTypes           from 'prop-types';
 import React               from 'react';
-import { CSSTransition }   from 'react-transition-group';
+import { SlideIn }         from 'App/Components/Animations';
 import { connect }         from 'Stores/connect';
 import ContractError       from '../Components/contract-error.jsx';
 import { InfoBoxLongcode } from '../Components/InfoBox';
@@ -19,36 +19,27 @@ const InfoBox = ({
     const info     = is_trade_page ? contract_info : replay_info;
     const is_ready = is_contract_mode && !!(info.longcode);
     return (
-        <CSSTransition
-            in={is_ready}
-            timeout={250}
-            classNames={{
-                enter    : 'info-box-container--enter',
-                enterDone: 'info-box-container--enter-done',
-                exit     : 'info-box-containert--exit',
-            }}
-            unmountOnExit
+        <SlideIn
+            is_visible={is_ready}
+            className='info-box-container'
+            keyname='info-box-container'
         >
-            <React.Fragment>
-                <div className='info-box-container'>
-                    { info.contract_type &&
-                        <div className='info-box'>
-                            <Contents
-                                contract_info={info}
-                            />
-                        </div>
-                    }
-                    <ContractError
-                        message={error_message}
-                        onClickClose={removeError}
-                    />
-                    <ChartCloseBtn
-                        is_contract_mode={is_contract_mode}
-                        onClose={onClose}
+            { info.contract_type &&
+                <div className='info-box'>
+                    <Contents
+                        contract_info={info}
                     />
                 </div>
-            </React.Fragment>
-        </CSSTransition>
+            }
+            <ContractError
+                message={error_message}
+                onClickClose={removeError}
+            />
+            <ChartCloseBtn
+                is_contract_mode={is_contract_mode}
+                onClose={onClose}
+            />
+        </SlideIn>
     );
 };