FunctionProject/website/pages/functions/chronometerTimer.js

import { useState } from 'react';
import Codepen from "react-codepen-embed";
import redirect from '../../utils/redirect';
import FunctionPage from '../../components/FunctionPage/FunctionPage';
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
import Loader from '../../components/Loader';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons';
import api from '../../utils/api';
import '../../public/css/pages/FunctionComponent.css';
import '../../components/FunctionCard/FunctionCard.css';
import '../../public/css/pages/functions/chronometerTimer.css';

let interval;
function convertSeconds(seconds) {
    return {
        minutes: Math.floor(seconds / 60),
        seconds: seconds % 60 
    }
}

const Chronometer = () => {

    const [timeLength, setTimeLength] = useState(0);      // seconds
    const [isPlaying, setIsPlaying]   = useState(false);

    const handlePlayPause = () => {
        if (isPlaying) {
            clearInterval(interval);
        } else {
            if (interval) clearInterval(interval);
            interval = setInterval(() => {
                setTimeLength((time) => time + 1);
            }, 1000);
        }
        setIsPlaying(!isPlaying);
    }

    const handleReset = () => {
        if (interval) clearInterval(interval);
        setIsPlaying(false);
        setTimeLength(0);
    }

    const getFormattedValue = () => {
        const minutesAndSeconds = convertSeconds(timeLength);
        const minutes = (minutesAndSeconds.minutes < 100) ? (('0'+minutesAndSeconds.minutes).slice(-2)) : minutesAndSeconds.minutes;
        const seconds = ('0'+minutesAndSeconds.seconds).slice(-2);
        return `${minutes}:${seconds}`;
    }

    return(
        <div className="container-fluid">
            <div className="row justify-content-center">
                <div className="col-sm-24 col-md-12">
                    <div className="Chronometer__container">
                        <div className="Chronometer__item">
                            <div className="Chronomter__row">
                                <div className="Chronometer__time-left">
                                    {getFormattedValue()}
                                </div>
                            </div>
                        </div>

                        <div className="Chronometer__item Chronometer__buttons">
                            <div className="Chronomter__row Chronometer__row-button">
                                <button onClick={handlePlayPause} className="Chronometer-btn">
                                    <FontAwesomeIcon { ...(isPlaying) ? { icon: faPause } : { icon: faPlay } } />
                                </button>
                                <button onClick={handleReset} className="Chronometer-btn" title="Remettre à zéro ?">
                                    <FontAwesomeIcon icon={faSync} />
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const Pomodoro = () => {
    return (
        <div style={{ marginBottom: '50px' }} className="container-fluid">
            <Codepen hash="vYEbPoB" user="Divlo" height={800} defaultTab="result" preview={false} loader={() => <Loader />} />
        </div>
    );
}

const FunctionTabManager = (props) => {
    return (
        <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
            <div className="FunctionComponent__slide">
                <Chronometer />
            </div>
            <div className="FunctionComponent__slide">
                <Pomodoro />
            </div>
            <div className="FunctionComponent__slide">
                <FunctionArticle article={props.article} />
            </div>
            <div className="FunctionComponent__slide">
                <FunctionComments functionId={props.id} />
            </div>
        </FunctionTabs>
    );
}

const chronometerTimer = (props) => (
    <FunctionPage 
        FunctionTabManager={FunctionTabManager}
        { ...props }
        tabNames={["⏰ Chronomètre", "⌛ Pomodoro", "📝 Article", "📬 Commentaires"]} 
    />
);

export async function getServerSideProps(context) {
    return api.get(`/functions/chronometerTimer`)
        .then((response) => ({ props: response.data }))
        .catch(() => redirect(context, '/404'));
}

export default chronometerTimer;