8000 Refactor to new file · SavvyShah/coderoad-vscode@696b27f · GitHub
[go: up one dir, main page]
Skip to content

Commit 696b27f

Browse files
SavvyShahSavvyShah
committed
Refactor to new file
Signed-off-by: Shubham <shubhamshahrising@gmail.com>
1 parent de37051 commit 696b27f

File tree

2 files changed

+33
-17
lines changed
  • services/hooks

    • 2 files changed

    +33
    -17
    lines changed

    ‎web-app/src/containers/Tutorial/components/ProgressPie.tsx

    Lines changed: 2 additions & 17 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,29 +1,14 @@
    11
    import * as React from 'react'
    22
    import { Progress, Icon } from '@alifd/next'
    3+
    import useNaturalProgress from 'services/hooks/useNaturalProgress'
    34

    45
    interface Props {
    56
    current: number
    67
    max: number
    78
    }
    89

    910
    const ProgressPie = (props: Props) => {
    10-
    const [progress, setProgress] = React.useState(0)
    11-
    React.useEffect(() => {
    12-
    let timeout: any
    13-
    let difference = (props.current - progress) / 4
    14-
    // for difference>0.01 update progress or make it stop
    15-
    let newProgress = difference > 0.01 ? progress + difference : props.current
    16-
    if (progress < props.current) {
    17-
    timeout = setTimeout(() => {
    18-
    setProgress(newProgress)
    19-
    }, 100)
    20-
    }
    21-
    return () => {
    22-
    if (timeout) {
    23-
    clearTimeout(timeout)
    24-
    }
    25-
    }
    26-
    }, [progress])
    11+
    const progress = useNaturalProgress({ stop: props.current })
    2712

    2813
    const progressPercent = Math.floor((progress / props.max) * 100)
    2914

    ‎web-app/src/services/hooks/useNaturalProgress.ts

    Lines changed: 31 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,31 @@
    1+
    import { useEffect, useState } from 'react'
    2+
    3+
    interface ProgressConfig {
    4+
    start?: number
    5+
    stop: number
    6+
    updateDuration?: number
    7+
    }
    8+
    9+
    const useNaturalProgress = (config: ProgressConfig): number => {
    10+
    const { start, stop, updateDuration } = config
    11+
    const [progress, setProgress] = useState(start || 0)
    12+
    useEffect(() => {
    13+
    let timeout: any
    14+
    let difference = (stop - progress) / 4
    15+
    // for difference>0.01 update progress or make it stop
    16+
    let newProgress = difference > 0.01 ? progress + difference : stop
    17+
    if (progress < stop) {
    18+
    timeout = setTimeout(() => {
    19+
    setProgress(newProgress)
    20+
    }, updateDuration || 100)
    21+
    }
    22+
    return () => {
    23+
    if (timeout) {
    24+
    clearTimeout(timeout)
    25+
    }
    26+
    }
    27+
    }, [progress, stop, updateDuration])
    28+
    return progress
    29+
    }
    30+
    31+
    export default useNaturalProgress

    0 commit comments

    Comments
     (0)
    0