{"size": 2830, "ext": "js", "max_stars_repo_path": "client/src/pages/landingPage/components/sections/partials/Countdown.js", "max_stars_repo_name": "tysonstar912913/defi-react-staking-app", "max_stars_repo_stars_event_min_datetime": "2021-05-16T03:26:33.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-24T12:26:13.000Z", "max_issues_repo_path": "client/src/pages/landingPage/components/sections/partials/Countdown.js", "max_issues_repo_name": "metodi96/defi-react-staking-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/pages/landingPage/components/sections/partials/Countdown.js", "max_forks_repo_name": "metodi96/defi-react-staking-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 36.2820512821, "max_line_length": 81, "alphanum_fraction": 0.4766784452}
import React, { useState, useEffect } from 'react';
import moment from 'moment'
import { mapNumber, SVGCircle } from '../../../../../utils/countdown'

//https://www.florin-pop.com/blog/2019/05/countdown-built-with-react/
const Countdown = (props) => {
    const [time, setTime] = useState({
        days: undefined,
        hours: undefined,
        minutes: undefined,
        seconds: undefined
    })

    useEffect(() => {
        const interval = setInterval(() => {
            const { timeTillDate, timeFormat } = props
            const then = moment(timeTillDate, timeFormat)
            const now = moment()
            const countdown = moment.duration((then.diff(now)))
            const days = Math.floor(countdown.asDays())
            countdown.subtract(moment.duration(days, 'days'))
            const hours = Math.floor(countdown.hours())
            countdown.subtract(moment.duration(hours, 'hours'))
            const minutes = Math.floor(countdown.minutes())
            const seconds = Math.floor(countdown.seconds())
            setTime({ days, hours, minutes, seconds });
        }, 1000);
        return () => clearInterval(interval);
    }, [props])

    const { days, hours, minutes, seconds } = time;
    const daysRadius = mapNumber(days, 30, 0, 0, 360);
    const hoursRadius = mapNumber(hours, 24, 0, 0, 360);
    const minutesRadius = mapNumber(minutes, 60, 0, 0, 360);
    const secondsRadius = mapNumber(seconds, 60, 0, 0, 360);

    if (!seconds) {
        return null;
    }

    return (
        <div style={{marginTop: '2em'}}>
            <h3 style={{ color: '#a333c8'}}>You can withdraw your funds in: </h3>
            <div className='countdown-wrapper'>
                {!!days && (
                    <div className='countdown-item'>
                        <SVGCircle radius={daysRadius} /> 
                        {days}
                        <span>days</span>
                    </div>
                )}
                {!!hours && (
                    <div className='countdown-item'>
                        <SVGCircle radius={hoursRadius} />
                        {hours}
                        <span>hours</span>
                    </div>
                )}
                {!!minutes && (
                    <div className='countdown-item'>
                        <SVGCircle radius={minutesRadius} />
                        {minutes}
                        <span>minutes</span>
                    </div>
                )}
                {!!seconds && (
                    <div className='countdown-item'>
                        <SVGCircle radius={secondsRadius} />
                        {seconds}
                        <span>seconds</span>
                    </div>
                )}
            </div>
        </div>
    );
}

export default Countdown;