From b246e825bc77866cf99ff5bd76dd0321f94c7d27 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Thu, 22 Sep 2022 12:52:17 +0400 Subject: [PATCH 1/4] refactor: :art: migrated linear-progress to TSx --- .../linear-progress/{index.js => index.ts} | 2 +- ...iner.jsx => linear-progress-container.tsx} | 31 +++++++++---------- ...inear-progress.jsx => linear-progress.tsx} | 8 ++++- 3 files changed, 23 insertions(+), 18 deletions(-) rename packages/components/src/components/linear-progress/{index.js => index.ts} (95%) rename packages/components/src/components/linear-progress/{linear-progress-container.jsx => linear-progress-container.tsx} (78%) rename packages/components/src/components/linear-progress/{linear-progress.jsx => linear-progress.tsx} (57%) diff --git a/packages/components/src/components/linear-progress/index.js b/packages/components/src/components/linear-progress/index.ts similarity index 95% rename from packages/components/src/components/linear-progress/index.js rename to packages/components/src/components/linear-progress/index.ts index daf3561acd7c..3c3aae6621f4 100644 --- a/packages/components/src/components/linear-progress/index.js +++ b/packages/components/src/components/linear-progress/index.ts @@ -1,4 +1,4 @@ import './linear-progress.scss'; -import LinearProgressContainer from './linear-progress-container.jsx'; +import LinearProgressContainer from './linear-progress-container'; export default LinearProgressContainer; diff --git a/packages/components/src/components/linear-progress/linear-progress-container.jsx b/packages/components/src/components/linear-progress/linear-progress-container.tsx similarity index 78% rename from packages/components/src/components/linear-progress/linear-progress-container.jsx rename to packages/components/src/components/linear-progress/linear-progress-container.tsx index 79a3307c28b5..df1d2775687f 100644 --- a/packages/components/src/components/linear-progress/linear-progress-container.jsx +++ b/packages/components/src/components/linear-progress/linear-progress-container.tsx @@ -1,12 +1,20 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { LinearProgress } from './linear-progress.jsx'; +import { LinearProgress } from './linear-progress'; + +type TLinearProgressContainer = { + timeout: number; + action: () => void; + render: (prop: number) => number; + className?: string; + should_store_in_session?: boolean; + session_id: string; +}; const LinearProgressContainer = React.forwardRef( - ({ timeout, action, render, className, should_store_in_session, session_id }, ref) => { - const current_progress_timeout = sessionStorage.getItem(`linear_progress_timeout_${session_id}`); + ({ timeout, action, render, className, should_store_in_session, session_id }: TLinearProgressContainer, ref) => { + const current_progress_timeout = Number(sessionStorage.getItem(`linear_progress_timeout_${session_id}`)); - const popup_timeout = !current_progress_timeout ? timeout / 1000 : current_progress_timeout; + const popup_timeout = !current_progress_timeout ? timeout / 1000 : Number(current_progress_timeout); const [timeout_state, setTimeoutState] = React.useState(popup_timeout); const time_past = 100 - (timeout_state / (timeout / 1000)) * 100; @@ -26,7 +34,7 @@ const LinearProgressContainer = React.forwardRef( React.useEffect(() => { if (should_store_in_session) { - sessionStorage.setItem(`linear_progress_timeout_${session_id}`, timeout_state); + sessionStorage.setItem(`linear_progress_timeout_${session_id}`, String(timeout_state)); } }, [timeout_state, should_store_in_session, session_id]); @@ -46,7 +54,7 @@ const LinearProgressContainer = React.forwardRef( if (current_progress_timeout <= 0) { sessionStorage.removeItem(`linear_progress_timeout_${session_id}`); } else if (current_progress_timeout > 0) { - sessionStorage.setItem(`linear_progress_timeout_${session_id}`, timeout_state); + sessionStorage.setItem(`linear_progress_timeout_${session_id}`, String(timeout_state)); } else { return null; } @@ -62,15 +70,6 @@ const LinearProgressContainer = React.forwardRef( } ); -LinearProgressContainer.propTypes = { - timeout: PropTypes.number, - action: PropTypes.func, - render: PropTypes.func.isRequired, - className: PropTypes.string, - should_store_in_session: PropTypes.bool, - session_id: PropTypes.string, -}; - LinearProgressContainer.displayName = 'LinearProgressContainer'; export default LinearProgressContainer; diff --git a/packages/components/src/components/linear-progress/linear-progress.jsx b/packages/components/src/components/linear-progress/linear-progress.tsx similarity index 57% rename from packages/components/src/components/linear-progress/linear-progress.jsx rename to packages/components/src/components/linear-progress/linear-progress.tsx index 2c782dedf8aa..9e87c0f7ea94 100644 --- a/packages/components/src/components/linear-progress/linear-progress.jsx +++ b/packages/components/src/components/linear-progress/linear-progress.tsx @@ -1,7 +1,13 @@ import classNames from 'classnames'; import React from 'react'; -export const LinearProgress = ({ progress }) => ( +type TLinearProgress = { + progress: number; + className: string; + height: number; +}; + +export const LinearProgress = ({ progress }: Partial) => (
From 83c577f3065cb5ebf715646795b5195408775f65 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Tue, 4 Oct 2022 15:44:00 +0400 Subject: [PATCH 2/4] refactor: :art: removed unused prop values --- .../src/components/linear-progress/linear-progress.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/components/src/components/linear-progress/linear-progress.tsx b/packages/components/src/components/linear-progress/linear-progress.tsx index 9e87c0f7ea94..245f8371760a 100644 --- a/packages/components/src/components/linear-progress/linear-progress.tsx +++ b/packages/components/src/components/linear-progress/linear-progress.tsx @@ -1,13 +1,7 @@ import classNames from 'classnames'; import React from 'react'; -type TLinearProgress = { - progress: number; - className: string; - height: number; -}; - -export const LinearProgress = ({ progress }: Partial) => ( +export const LinearProgress = ({ progress }: { progress: number }) => (
From 24f9a316470c62be10857237f772a921cb94c778 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Tue, 4 Oct 2022 16:18:59 +0400 Subject: [PATCH 3/4] refactor: :recycle: fixed prop list --- .../linear-progress/linear-progress-container.tsx | 2 +- .../src/components/linear-progress/linear-progress.tsx | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/linear-progress/linear-progress-container.tsx b/packages/components/src/components/linear-progress/linear-progress-container.tsx index df1d2775687f..37ca616b664b 100644 --- a/packages/components/src/components/linear-progress/linear-progress-container.tsx +++ b/packages/components/src/components/linear-progress/linear-progress-container.tsx @@ -64,7 +64,7 @@ const LinearProgressContainer = React.forwardRef( return (
{render(getRemaining())}
- +
); } diff --git a/packages/components/src/components/linear-progress/linear-progress.tsx b/packages/components/src/components/linear-progress/linear-progress.tsx index 245f8371760a..8297451ef65d 100644 --- a/packages/components/src/components/linear-progress/linear-progress.tsx +++ b/packages/components/src/components/linear-progress/linear-progress.tsx @@ -1,8 +1,13 @@ import classNames from 'classnames'; import React from 'react'; -export const LinearProgress = ({ progress }: { progress: number }) => ( -
+type TLinearProgress = { + progress: number; + className?: string; +}; + +export const LinearProgress = ({ progress, className }: TLinearProgress) => ( +
); From 39be93adc7564d5da0cc1c784e3bde622af3e6d2 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Thu, 6 Oct 2022 15:14:46 +0400 Subject: [PATCH 4/4] refactor: :recycle: incorporated review comment --- .../src/components/linear-progress/linear-progress.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/linear-progress/linear-progress.tsx b/packages/components/src/components/linear-progress/linear-progress.tsx index 8297451ef65d..8d8a3006188a 100644 --- a/packages/components/src/components/linear-progress/linear-progress.tsx +++ b/packages/components/src/components/linear-progress/linear-progress.tsx @@ -8,6 +8,6 @@ type TLinearProgress = { export const LinearProgress = ({ progress, className }: TLinearProgress) => (
-
+
);