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 '../../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 (
{getFormattedValue()}
) } const Pomodoro = () => { return (
} />
) } const FunctionTabManager = (props) => { return (
) } const chronometerTimer = (props) => ( ) export async function getServerSideProps (context) { return api.get('/functions/chronometerTimer') .then((response) => ({ props: response.data })) .catch(() => redirect(context, '/404')) } export default chronometerTimer