From 9e2132cd54e5f5e6b85c7d949ac982cb95566027 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 21 Mar 2020 16:04:26 +0300 Subject: chore: migrate Timer page to Typescript :label: --- src/pages/Timer/Timer.js | 92 -------------------- src/pages/Timer/Timer.tsx | 102 ++++++++++++++++++++++ src/pages/Timer/TimerButton.tsx | 130 +++++++++++++++++++++++++++++ src/pages/Timer/TimerButton/TimerButton.js | 122 --------------------------- 4 files changed, 232 insertions(+), 214 deletions(-) delete mode 100644 src/pages/Timer/Timer.js create mode 100644 src/pages/Timer/Timer.tsx create mode 100644 src/pages/Timer/TimerButton.tsx delete mode 100644 src/pages/Timer/TimerButton/TimerButton.js (limited to 'src/pages/Timer') diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js deleted file mode 100644 index 6020c1b..0000000 --- a/src/pages/Timer/Timer.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; - -import { post } from '../../requests'; - -import { - Window, - ContentSection, - SmartList, -} from 'react-benzin'; - -import TimerButton from './TimerButton/TimerButton'; -import SolutionCard from '../../components/SolutionCard/SolutionCard'; - -import { Button, makeStyles } from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - primary: { - padding: theme.spacing(4), - }, - cell: { - padding: theme.spacing(5), - }, -})); - -const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => { - const classes = useStyles(); - - const registerResult = result => { - const solution = { author_id: user.id, result }; - post('solutions/', solution).then(response => { - setRecentSolutions([response.data].concat(recentSolutions)); - }); - }; - - const handleLearnMore = () => { - setPage('contribute'); - }; - - const handleLogin = () => { - setPage('profile'); - }; - - const removeSolution = (id) => { - setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); - }; - - const renderItem = ({ index, style }) => { - const solution = recentSolutions[index]; - return ( -
- -
- ); - }; - - return ( - <> - -
- -

- ChronoCube is a professional speedcubing timer. - Share your results publicly - let everyone see your progress and - achievements! - Every speedcuber will benefit - from using it - both amateur and professional! -

- - - {user.id === null && - -

Tell us your name so we can track your progress

- - - } - -
- - - - - - ); -}; - - -export default Timer; diff --git a/src/pages/Timer/Timer.tsx b/src/pages/Timer/Timer.tsx new file mode 100644 index 0000000..3ceb674 --- /dev/null +++ b/src/pages/Timer/Timer.tsx @@ -0,0 +1,102 @@ +import React from 'react'; + +import { post } from '../../requests'; + +import { + Window, + ContentSection, + SmartList, +} from 'react-benzin'; +import { User, Solution, RenderPropTypes } from '../../types'; + +import TimerButton from './TimerButton'; +import SolutionCard from '../../components/SolutionCard/SolutionCard'; + +import { Button, makeStyles } from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + primary: { + padding: theme.spacing(4), + }, + cell: { + padding: theme.spacing(5), + }, +})); + + +interface PropTypes { + user: User; + recentSolutions: Solution[]; + setRecentSolutions: (newRecentSolutions: Solution[]) => void; + setPage: (newPage: string) => void; +} + + +const Timer: React.FC = ({ user, recentSolutions, setRecentSolutions, setPage }) => { + const classes = useStyles(); + + const registerResult = (result: string): void => { + const solution = { author_id: user.id, result }; + post('solutions/', solution).then(response => { + setRecentSolutions([response.data].concat(recentSolutions)); + }); + }; + + const handleLearnMore = (): void => { + setPage('contribute'); + }; + + const handleLogin = (): void => { + setPage('profile'); + }; + + const removeSolution = (id: number): void => { + setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); + }; + + const renderItem: React.FC = ({ index, style }) => { + const solution = recentSolutions[index]; + return ( +
+ +
+ ); + }; + + return ( + <> + +
+ +

+ ChronoCube is a professional speedcubing timer. + Share your results publicly - let everyone see your progress and + achievements! + Every speedcuber will benefit + from using it - both amateur and professional! +

+ + + {user.id === null && + +

Tell us your name so we can track your progress

+ + + } + +
+ + + + + + ); +}; + + +export default Timer; diff --git a/src/pages/Timer/TimerButton.tsx b/src/pages/Timer/TimerButton.tsx new file mode 100644 index 0000000..86bbf76 --- /dev/null +++ b/src/pages/Timer/TimerButton.tsx @@ -0,0 +1,130 @@ +import React, { useState, useEffect } from 'react'; + +import { Paper, Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles(theme => ({ + root: { + textAlign: 'center', + padding: theme.spacing(5), + background: theme.palette.background.elevation3, + marginTop: theme.spacing(10), + }, +})); + + +interface PropTypes { + registerResult: (result: string) => void; +} + +type Mode = 'idle' | 'countdown' | 'running' | 'over'; + + +const TimerButton: React.FC = ({ registerResult }) => { + const classes = useStyles(); + + const SPACE = 32; + const maxCountdown = 15000; + const [time, setTime] = useState('00:00:00'); + const [mode, setMode] = useState('idle'); + + useEffect(()=> { + const timestamp = Date.now(); + + if (mode === 'countdown') { + const repeater = setInterval(() => { + const timeDelta = maxCountdown - (Date.now() - timestamp); + if (timeDelta <= 0) setMode('over'); + setTime(convertTimeToString(timeDelta)); + }, 10); + return () => clearInterval(repeater); + } + + if (mode === 'running') { + const repeater = setInterval(() => { + setTime(convertTimeToString(Date.now() - timestamp)); + }, 10); + return () => clearInterval(repeater); + } + + if (mode === 'over') { + setTime('00:00:00'); + } + }, [mode]); + + const handleKeyPress = (event: KeyboardEvent): void => { + event.preventDefault(); + if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); + }; + + const handleKeyUp = (event: KeyboardEvent): void => { + if (event.keyCode === SPACE) { + if (mode === 'running') { + registerResult(time); + setMode('idle'); + } else if (mode === 'over') { + setMode('idle'); + } else { + setMode('running'); + } + } + }; + + useEffect(() => { + window.addEventListener('keyup', handleKeyUp); + window.addEventListener('keypress', handleKeyPress); + + return () => { + window.removeEventListener('keyup', handleKeyUp); + window.removeEventListener('keypress', handleKeyPress); + }; + }); + + const composeHelperText = () => { + switch (mode) { + case 'running': return 'Go fast!'; + case 'countdown': return 'Release SPACE to begin'; + case 'over': return 'You are too late!'; + default: return 'Hold SPACE to start countdown'; + } + }; + + const helperColor = () => { + switch (mode) { + case 'running': return 'primary'; + case 'over': return 'secondary'; + default: return 'textSecondary'; + } + }; + + return ( + + {time} + + {composeHelperText()} + + + ); +}; + +const convertTimeToString = (timeDelta: number): string => { + let resultTime = ''; + + const minute = Math.floor(timeDelta / 60000); + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; + + let second = Math.floor(timeDelta / 1000); + if (second > 59) second %= 60; + if (second < 10) resultTime += '0'; + resultTime += second + ':'; + + const mill = Math.floor((timeDelta % 1000) / 10); + if (mill < 10) resultTime += '0'; + resultTime += mill; + + return resultTime; +}; + + +export default TimerButton; diff --git a/src/pages/Timer/TimerButton/TimerButton.js b/src/pages/Timer/TimerButton/TimerButton.js deleted file mode 100644 index fdb6b7c..0000000 --- a/src/pages/Timer/TimerButton/TimerButton.js +++ /dev/null @@ -1,122 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import { Paper, Typography } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(theme => ({ - root: { - textAlign: 'center', - padding: theme.spacing(5), - background: theme.palette.background.elevation3, - marginTop: theme.spacing(10), - }, -})); - -const TimerButton = ({ registerResult }) => { - const classes = useStyles(); - - const SPACE = 32; - const maxCountdown = 15000; - const [time, setTime] = useState('00:00:00'); - const [mode, setMode] = useState('idle'); - - useEffect(()=> { - const timestamp = Date.now(); - - if (mode === 'countdown') { - const repeater = setInterval(() => { - const timeDelta = maxCountdown - (Date.now() - timestamp); - if (timeDelta <= 0) setMode('over'); - setTime(convertTimeToString(timeDelta)); - }, 10); - return () => clearInterval(repeater); - } - - if (mode === 'running') { - const repeater = setInterval(() => { - setTime(convertTimeToString(Date.now() - timestamp)); - }, 10); - return () => clearInterval(repeater); - } - - if (mode === 'over') { - setTime('00:00:00'); - } - }, [mode]); - - const handleKeyPress = event => { - event.preventDefault(); - if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); - }; - - const handleKeyUp = event => { - if (event.keyCode === SPACE) { - if (mode === 'running') { - registerResult(time); - setMode('idle'); - } else if (mode === 'over') { - setMode('idle'); - } else { - setMode('running'); - } - } - }; - - useEffect(() => { - window.addEventListener('keyup', handleKeyUp); - window.addEventListener('keypress', handleKeyPress); - - return () => { - window.removeEventListener('keyup', handleKeyUp); - window.removeEventListener('keypress', handleKeyPress); - }; - }); - - const composeHelperText = () => { - switch (mode) { - case 'running': return 'Go fast!'; - case 'countdown': return 'Release SPACE to begin'; - case 'over': return 'You are too late!'; - default: return 'Hold SPACE to start countdown'; - } - }; - - const helperColor = () => { - switch (mode) { - case 'running': return 'primary'; - case 'over': return 'secondary'; - default: return 'textSecondary'; - } - }; - - return ( - - {time} - - {composeHelperText()} - - - ); -}; - -const convertTimeToString = timeDelta => { - let resultTime = ''; - - const minute = Math.floor(timeDelta / 60000); - if (minute < 10) resultTime += '0'; - resultTime += minute + ':'; - - let second = Math.floor(timeDelta / 1000); - if (second > 59) second %= 60; - if (second < 10) resultTime += '0'; - resultTime += second + ':'; - - const mill = Math.floor((timeDelta % 1000) / 10); - if (mill < 10) resultTime += '0'; - resultTime += mill; - - return resultTime; -}; - - -export default TimerButton; -- cgit v1.2.3 From 0f6c4e7e4d44314707535e2d7e3aba7b638cd2dd Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 21 Mar 2020 16:11:31 +0300 Subject: fix: add more missing types :ok_hand: --- src/pages/Timer/Timer.tsx | 2 +- src/pages/Timer/TimerButton.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'src/pages/Timer') diff --git a/src/pages/Timer/Timer.tsx b/src/pages/Timer/Timer.tsx index 3ceb674..a890815 100644 --- a/src/pages/Timer/Timer.tsx +++ b/src/pages/Timer/Timer.tsx @@ -37,7 +37,7 @@ const Timer: React.FC = ({ user, recentSolutions, setRecentSolutions, const classes = useStyles(); const registerResult = (result: string): void => { - const solution = { author_id: user.id, result }; + const solution = { 'author_id': user.id, result }; post('solutions/', solution).then(response => { setRecentSolutions([response.data].concat(recentSolutions)); }); diff --git a/src/pages/Timer/TimerButton.tsx b/src/pages/Timer/TimerButton.tsx index 86bbf76..0a3bf38 100644 --- a/src/pages/Timer/TimerButton.tsx +++ b/src/pages/Timer/TimerButton.tsx @@ -37,14 +37,14 @@ const TimerButton: React.FC = ({ registerResult }) => { if (timeDelta <= 0) setMode('over'); setTime(convertTimeToString(timeDelta)); }, 10); - return () => clearInterval(repeater); + return (): void => clearInterval(repeater); } if (mode === 'running') { const repeater = setInterval(() => { setTime(convertTimeToString(Date.now() - timestamp)); }, 10); - return () => clearInterval(repeater); + return (): void => clearInterval(repeater); } if (mode === 'over') { @@ -74,13 +74,13 @@ const TimerButton: React.FC = ({ registerResult }) => { window.addEventListener('keyup', handleKeyUp); window.addEventListener('keypress', handleKeyPress); - return () => { + return (): void => { window.removeEventListener('keyup', handleKeyUp); window.removeEventListener('keypress', handleKeyPress); }; }); - const composeHelperText = () => { + const composeHelperText = (): string => { switch (mode) { case 'running': return 'Go fast!'; case 'countdown': return 'Release SPACE to begin'; @@ -89,7 +89,7 @@ const TimerButton: React.FC = ({ registerResult }) => { } }; - const helperColor = () => { + const helperColor = (): 'primary' | 'secondary' | 'textSecondary' => { switch (mode) { case 'running': return 'primary'; case 'over': return 'secondary'; -- cgit v1.2.3