feat(circular-progress-bar): improve after code review

packages/circular-progress-bar/src/Component.tsx

@@ -188,16 +188,6 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 }) => {
     const [timerValue, setTimerValue] = useState<number>(0);
 
-    const updateProgress = (secondsRemaining: number) => {
-        if (directionType === 'asc') {
-            setTimerValue(MAX_PROGRESS_VALUE * (1 - secondsRemaining / value));
-
-            return;
-        }
-
-        setTimerValue((MAX_PROGRESS_VALUE / value) * secondsRemaining);
-    };
-
     const progressValue = timer ? timerValue : value;
 
     const memorized = useMemo(() => {
@@ -298,6 +288,16 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
             </Text>
         );
 
+    const updateProgress = (secondsRemaining: number) => {
+        if (directionType === 'asc') {
+            setTimerValue(MAX_PROGRESS_VALUE * (1 - secondsRemaining / value));
+
+            return;
+        }
+
+        setTimerValue((MAX_PROGRESS_VALUE / value) * secondsRemaining);
+    };
+
     const renderTitle = () => {
         if (timer) {
             return (

packages/circular-progress-bar/src/components/timer/hooks/useTimer.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import {
+    COUNTER_STEP,
+    INTERVAL_STEP,
+    MAX_COUNTER_VALUE,
+    MIN_COUNTER_VALUE,
+} from '../constants/constants';
+
+type Props = {
+    totalSeconds: number;
+    onTick: (secondsRemaining: number) => void;
+};
+
+export const useTimer = (props: Props) => {
+    const { totalSeconds, onTick } = props;
+
+    const [secondsRemaining, updateSecondsRemaining] = useState<number>(
+        Math.max(MIN_COUNTER_VALUE, Math.min(MAX_COUNTER_VALUE, totalSeconds)), // min 0, max 3599
+    );
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (!secondsRemaining) {
+                clearInterval(interval);
+
+                return;
+            }
+
+            updateSecondsRemaining((prev) => prev - COUNTER_STEP);
+        }, INTERVAL_STEP);
+
+        onTick(secondsRemaining);
+
+        return () => {
+            clearInterval(interval);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [secondsRemaining]);
+
+    return { secondsRemaining };
+};

packages/circular-progress-bar/src/components/timer/timer.tsx

@@ -1,16 +1,15 @@
-import React, { CSSProperties, FC, useEffect, useState } from 'react';
+import React, { CSSProperties, FC } from 'react';
 
-import { getDataTestId, isClient } from '@alfalab/core-components-shared';
+import { getDataTestId } from '@alfalab/core-components-shared';
 import { Text, TitleMobile } from '@alfalab/core-components-typography';
 
 import { SIZES, VIEW_TEXT, VIEW_TITLE } from '../../consts';
 import { ComponentSize } from '../../types/component-size';
 import { TimerProps } from '../../types/timer-props';
 import { TypographyColor } from '../../types/typography-color';
 
-import { COUNTER_STEP, INTERVAL_STEP, MAX_COUNTER_VALUE, MIN_COUNTER_VALUE } from './constants';
-
 import styles from './timer.module.css';
+import { useTimer } from './hooks/useTimer';
 
 type Props = {
     totalSeconds: number;
@@ -25,11 +24,9 @@ type Props = {
 export const Timer: FC<Props> = (props) => {
     const { totalSeconds, counting, size, dataTestId, color, style, updateProgress } = props;
 
-    const [secondsRemaining, updateSecondsRemaining] = useState<number>(
-        Math.max(MIN_COUNTER_VALUE, Math.min(MAX_COUNTER_VALUE, totalSeconds)), // min 0, max 3599
-    );
-    const secondsPassed = totalSeconds - secondsRemaining;
+    const { secondsRemaining } = useTimer({ totalSeconds, onTick: updateProgress });
 
+    const secondsPassed = totalSeconds - secondsRemaining;
     const currentSeconds = counting === 'backward' ? secondsRemaining : secondsPassed;
     const minutes = Math.floor(currentSeconds / 60);
     const seconds = String(currentSeconds % 60).padStart(2, '0');
@@ -38,31 +35,6 @@ export const Timer: FC<Props> = (props) => {
 
     const getTimerText = () => `${minutes}:${seconds}`;
 
-    useEffect(() => {
-        let interval: number;
-
-        if (isClient()) {
-            interval = window.setInterval(() => {
-                if (!secondsRemaining) {
-                    window.clearInterval(interval);
-
-                    return;
-                }
-
-                updateSecondsRemaining((prev) => prev - COUNTER_STEP);
-            }, INTERVAL_STEP);
-
-            updateProgress(secondsRemaining);
-        }
-
-        return () => {
-            if (isClient()) {
-                window.clearInterval(interval);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [secondsRemaining]);
-
     if (isMobileTitle) {
         return (
             <TitleMobile