From b33eb05f91e53b2b4bd7d89737f60731bfefd86a Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 11 Oct 2022 11:26:35 +0800 Subject: [PATCH 1/3] refactor: migrate progress-slider to ts --- .../progress-slider/{index.js => index.ts} | 2 +- ...rogress-slider.jsx => progress-slider.tsx} | 26 +++++++++---------- ...{progress-ticks.jsx => progress-ticks.tsx} | 19 +++++++------- 3 files changed, 23 insertions(+), 24 deletions(-) rename packages/components/src/components/progress-slider/{index.js => index.ts} (55%) rename packages/components/src/components/progress-slider/{progress-slider.jsx => progress-slider.tsx} (84%) rename packages/components/src/components/progress-slider/{progress-ticks.jsx => progress-ticks.tsx} (73%) diff --git a/packages/components/src/components/progress-slider/index.js b/packages/components/src/components/progress-slider/index.ts similarity index 55% rename from packages/components/src/components/progress-slider/index.js rename to packages/components/src/components/progress-slider/index.ts index 7983c852f060..c204d4cb43bf 100644 --- a/packages/components/src/components/progress-slider/index.js +++ b/packages/components/src/components/progress-slider/index.ts @@ -1,4 +1,4 @@ -import ProgressSlider from './progress-slider.jsx'; +import ProgressSlider from './progress-slider'; import './progress-slider.scss'; export default ProgressSlider; diff --git a/packages/components/src/components/progress-slider/progress-slider.jsx b/packages/components/src/components/progress-slider/progress-slider.tsx similarity index 84% rename from packages/components/src/components/progress-slider/progress-slider.jsx rename to packages/components/src/components/progress-slider/progress-slider.tsx index 7e12c350f33d..e96c6dc3ec57 100644 --- a/packages/components/src/components/progress-slider/progress-slider.jsx +++ b/packages/components/src/components/progress-slider/progress-slider.tsx @@ -1,10 +1,21 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import { getTimePercentage } from '@deriv/shared'; import ProgressTicks from './progress-ticks.jsx'; import RemainingTime from '../remaining-time'; import Text from '../text'; +import moment from 'moment'; + +type TProgressSliderProps = { + className?: string; + current_tick: number; + expiry_time: number & string; + getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration + is_loading: boolean; + server_time: moment.Moment; + start_time: number & string; + ticks_count: number; +}; const ProgressSlider = ({ className, @@ -15,7 +26,7 @@ const ProgressSlider = ({ server_time, start_time, ticks_count, -}) => { +}: TProgressSliderProps) => { const percentage = getTimePercentage(server_time, start_time, expiry_time); return (
@@ -50,15 +61,4 @@ const ProgressSlider = ({ }; // Keypress events do not trigger on Safari due to the way it handles input type='range' elements, using focus on the input element also doesn't work for Safari. -ProgressSlider.propTypes = { - className: PropTypes.string, - current_tick: PropTypes.number, - expiry_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - is_loading: PropTypes.bool, - server_time: PropTypes.object, - start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - ticks_count: PropTypes.number, - getCardLabels: PropTypes.func, -}; - export default ProgressSlider; diff --git a/packages/components/src/components/progress-slider/progress-ticks.jsx b/packages/components/src/components/progress-slider/progress-ticks.tsx similarity index 73% rename from packages/components/src/components/progress-slider/progress-ticks.jsx rename to packages/components/src/components/progress-slider/progress-ticks.tsx index ba5b3fced861..f91ce4d013cd 100644 --- a/packages/components/src/components/progress-slider/progress-ticks.jsx +++ b/packages/components/src/components/progress-slider/progress-ticks.tsx @@ -1,10 +1,15 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import Text from '../text'; -const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => { - const arr_ticks = [...Array(ticks_count).keys()]; +type TProgressTicksProps = { + current_tick: number; + getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration + ticks_count: number; +}; + +const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }: TProgressTicksProps) => { + const arr_ticks = Array.from(Array(ticks_count).keys()); return (
@@ -15,7 +20,7 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
))} @@ -24,10 +29,4 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => { ); }; -ProgressTicks.propTypes = { - current_tick: PropTypes.number, - ticks_count: PropTypes.number, - getCardLabels: PropTypes.func, -}; - export default ProgressTicks; From ddc171dd0e4e9e95e4c8976a447a7b14a7ed83eb Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 14 Nov 2022 11:50:29 +0800 Subject: [PATCH 2/3] fix: fix failing tests --- .../src/components/progress-slider/progress-slider.tsx | 2 +- .../src/components/remaining-time/remaining-time.tsx | 6 +++--- packages/shared/src/utils/contract/contract.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/progress-slider/progress-slider.tsx b/packages/components/src/components/progress-slider/progress-slider.tsx index e96c6dc3ec57..716364ee4951 100644 --- a/packages/components/src/components/progress-slider/progress-slider.tsx +++ b/packages/components/src/components/progress-slider/progress-slider.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import { getTimePercentage } from '@deriv/shared'; -import ProgressTicks from './progress-ticks.jsx'; +import ProgressTicks from './progress-ticks'; import RemainingTime from '../remaining-time'; import Text from '../text'; import moment from 'moment'; diff --git a/packages/components/src/components/remaining-time/remaining-time.tsx b/packages/components/src/components/remaining-time/remaining-time.tsx index 6e51e00b5181..855b930e4e9a 100644 --- a/packages/components/src/components/remaining-time/remaining-time.tsx +++ b/packages/components/src/components/remaining-time/remaining-time.tsx @@ -5,13 +5,13 @@ import moment from 'moment'; type TRemainingTimeProps = { end_time?: number; start_time: moment.Moment; - format: string; + format?: string; getCardLabels: () => { [key: string]: string }; // TODO Use the one from common after contract-card migration }; const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => { if (!end_time || start_time.unix() > +end_time) { - return ''; + return ; } const { days, timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format); @@ -21,7 +21,7 @@ const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemaini } const is_zeroes = /^00:00$/.test(remaining_time); - return !is_zeroes &&
{remaining_time}
; + return {!is_zeroes &&
{remaining_time}
}; }; export default RemainingTime; diff --git a/packages/shared/src/utils/contract/contract.ts b/packages/shared/src/utils/contract/contract.ts index 365e4c915978..cfd178f1ab05 100644 --- a/packages/shared/src/utils/contract/contract.ts +++ b/packages/shared/src/utils/contract/contract.ts @@ -109,7 +109,7 @@ export const getLimitOrderAmount = (limit_order: TLimitOrder) => { }; }; -export const getTimePercentage = (server_time: number, start_time: number, expiry_time: number) => { +export const getTimePercentage = (server_time: moment.Moment, start_time: number, expiry_time: number) => { const duration_from_purchase = moment.duration(moment.unix(expiry_time).diff(moment.unix(start_time))); const duration_from_now = moment.duration(moment.unix(expiry_time).diff(server_time)); let percentage = (duration_from_now.asMilliseconds() / duration_from_purchase.asMilliseconds()) * 100; From 8e67482c707dcf060eed4b11d4d1651e4fc8c5f4 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 14 Nov 2022 16:20:09 +0800 Subject: [PATCH 3/3] chore: add empty string back to the remaining-time component --- .../components/src/components/remaining-time/remaining-time.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/remaining-time/remaining-time.tsx b/packages/components/src/components/remaining-time/remaining-time.tsx index 855b930e4e9a..3c173b09304b 100644 --- a/packages/components/src/components/remaining-time/remaining-time.tsx +++ b/packages/components/src/components/remaining-time/remaining-time.tsx @@ -11,7 +11,7 @@ type TRemainingTimeProps = { const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => { if (!end_time || start_time.unix() > +end_time) { - return ; + return {''}; } const { days, timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format);