From 0a4befc8542e95741b7c4ab7b6972431c28032e9 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 4 Jan 2023 17:05:39 +0800 Subject: [PATCH 1/3] refactor: migrate component to typescript --- .../{index.js => index.ts} | 0 ...-mobile.jsx => progress-slider-mobile.tsx} | 26 +++++++++---------- ...s-mobile.jsx => progress-ticks-mobile.tsx} | 15 +++++------ .../src/components/types/common.types.ts | 2 ++ .../components/src/components/types/index.ts | 2 ++ 5 files changed, 24 insertions(+), 21 deletions(-) rename packages/components/src/components/progress-slider-mobile/{index.js => index.ts} (100%) rename packages/components/src/components/progress-slider-mobile/{progress-slider-mobile.jsx => progress-slider-mobile.tsx} (81%) rename packages/components/src/components/progress-slider-mobile/{progress-ticks-mobile.jsx => progress-ticks-mobile.tsx} (71%) diff --git a/packages/components/src/components/progress-slider-mobile/index.js b/packages/components/src/components/progress-slider-mobile/index.ts similarity index 100% rename from packages/components/src/components/progress-slider-mobile/index.js rename to packages/components/src/components/progress-slider-mobile/index.ts diff --git a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.jsx b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx similarity index 81% rename from packages/components/src/components/progress-slider-mobile/progress-slider-mobile.jsx rename to packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx index 87b8e79af358..253fffa11d7b 100644 --- a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.jsx +++ b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx @@ -1,11 +1,22 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import { getTimePercentage } from '@deriv/shared'; import ProgressTicksMobile from './progress-ticks-mobile.jsx'; import CircularProgress from '../circular-progress'; import RemainingTime from '../remaining-time'; import Text from '../text'; +import { TGetCardLables } from '../types'; + +type TProgressSliderMobileProps = { + className?: string; + current_tick: number; + expiry_time: number & string; + is_loading: boolean; + server_time: moment.Moment; + start_time: number & string; + ticks_count: number; + getCardLabels: TGetCardLables; +}; const ProgressSliderMobile = ({ className, @@ -16,7 +27,7 @@ const ProgressSliderMobile = ({ expiry_time, server_time, ticks_count, -}) => { +}: TProgressSliderMobileProps) => { const percentage = getTimePercentage(server_time, start_time, expiry_time); return (
@@ -51,15 +62,4 @@ const ProgressSliderMobile = ({ ); }; -ProgressSliderMobile.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 ProgressSliderMobile; diff --git a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.jsx b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx similarity index 71% rename from packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.jsx rename to packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx index 304de4dae309..176854e23b79 100644 --- a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.jsx +++ b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx @@ -1,9 +1,14 @@ -import PropTypes from 'prop-types'; import React from 'react'; import TickProgress from '../tick-progress'; import Text from '../text'; -const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }) => { +type TProgressTicksMobileProps = { + current_tick: number; + ticks_count: number; + getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration +}; + +const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }: TProgressTicksMobileProps) => { return (
@@ -14,10 +19,4 @@ const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }) => { ); }; -ProgressTicksMobile.propTypes = { - current_tick: PropTypes.number, - ticks_count: PropTypes.number, - getCardLabels: PropTypes.func, -}; - export default ProgressTicksMobile; diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts index c10c3c36f60f..169248792204 100644 --- a/packages/components/src/components/types/common.types.ts +++ b/packages/components/src/components/types/common.types.ts @@ -1,5 +1,7 @@ import React from 'react'; +import { getCardLabels } from '@deriv/shared'; export type TGenericObjectType = { [key: string]: React.ReactNode; }; +export type TGetCardLables = () => ReturnType; diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts index d0f93eb0b357..d334be4fdda7 100644 --- a/packages/components/src/components/types/index.ts +++ b/packages/components/src/components/types/index.ts @@ -2,6 +2,7 @@ import { TIconsManifest, TIconProps } from './icons.types'; import { TAccordionProps, TAccordionItem } from './accordion.types'; import { TMultiStepProps, TMultiStepRefProps } from './multi-step.types'; import { TPopoverProps } from './popover.types'; +import { TGetCardLables } from './common.types'; export type { TAccordionItem, @@ -11,4 +12,5 @@ export type { TMultiStepProps, TMultiStepRefProps, TPopoverProps, + TGetCardLables, }; From 602af27f3f053b17dd9812669bd4d5141f1a9db7 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 4 Jan 2023 17:23:06 +0800 Subject: [PATCH 2/3] chore: remove jsx extensions --- .../components/src/components/progress-slider-mobile/index.ts | 2 +- .../progress-slider-mobile/progress-slider-mobile.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/progress-slider-mobile/index.ts b/packages/components/src/components/progress-slider-mobile/index.ts index 974bbbbfdb4f..849f73bc0234 100644 --- a/packages/components/src/components/progress-slider-mobile/index.ts +++ b/packages/components/src/components/progress-slider-mobile/index.ts @@ -1,4 +1,4 @@ -import ProgressSliderMobile from './progress-slider-mobile.jsx'; +import ProgressSliderMobile from './progress-slider-mobile'; import './progress-slider-mobile.scss'; export default ProgressSliderMobile; diff --git a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx index 253fffa11d7b..fb92634e983c 100644 --- a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx +++ b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import { getTimePercentage } from '@deriv/shared'; -import ProgressTicksMobile from './progress-ticks-mobile.jsx'; +import ProgressTicksMobile from './progress-ticks-mobile'; import CircularProgress from '../circular-progress'; import RemainingTime from '../remaining-time'; import Text from '../text'; From 56babaf12c8819168d66c041383f8c53d051e472 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 5 Jan 2023 10:14:37 +0800 Subject: [PATCH 3/3] chore: give getlabels function, expiry_time and start_time proper types --- .../progress-slider-mobile/progress-slider-mobile.tsx | 4 ++-- .../progress-slider-mobile/progress-ticks-mobile.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx index fb92634e983c..7f03f35436d5 100644 --- a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx +++ b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx @@ -10,10 +10,10 @@ import { TGetCardLables } from '../types'; type TProgressSliderMobileProps = { className?: string; current_tick: number; - expiry_time: number & string; + expiry_time: number; is_loading: boolean; server_time: moment.Moment; - start_time: number & string; + start_time: number; ticks_count: number; getCardLabels: TGetCardLables; }; diff --git a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx index 176854e23b79..d4371af716dd 100644 --- a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx +++ b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx @@ -1,11 +1,12 @@ import React from 'react'; import TickProgress from '../tick-progress'; import Text from '../text'; +import { TGetCardLables } from '../types'; type TProgressTicksMobileProps = { current_tick: number; ticks_count: number; - getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration + getCardLabels: TGetCardLables; }; const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }: TProgressTicksMobileProps) => {