124 lines
4.0 KiB
JavaScript
124 lines
4.0 KiB
JavaScript
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 (
|
|
<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
|