diff options
author | eug-vs <eug-vs@keemail.me> | 2020-03-21 16:04:26 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-03-21 16:04:26 +0300 |
commit | 9e2132cd54e5f5e6b85c7d949ac982cb95566027 (patch) | |
tree | 662da2d31d9716d09cde9754a359be47227da41e /src/pages/Timer/Timer.js | |
parent | 146947a665dbc1d2960d2062a22a106de0c71062 (diff) | |
download | chrono-cube-ui-9e2132cd54e5f5e6b85c7d949ac982cb95566027.tar.gz |
chore: migrate Timer page to Typescript :label:
Diffstat (limited to 'src/pages/Timer/Timer.js')
-rw-r--r-- | src/pages/Timer/Timer.js | 92 |
1 files changed, 0 insertions, 92 deletions
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 ( - <div style={style} className={classes.cell}> - <SolutionCard data={solution} removeThisCard={removeSolution} /> - </div> - ); - }; - - return ( - <> - <Window type="primary"> - <div className={classes.primary}> - <ContentSection sectionName="Welcome to ChronoCube!"> - <p> - 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! - </p> - <Button variant="contained" color="primary" onClick={handleLearnMore}> Learn more </Button> - </ContentSection> - {user.id === null && - <ContentSection sectionName="Log into an account"> - <p> Tell us your name so we can track your progress</p> - <Button variant="contained" color="primary" onClick={handleLogin} size="large"> Login </Button> - </ContentSection> - } - <TimerButton registerResult={registerResult} /> - </div> - </Window> - <Window type="secondary" name="Recent solutions"> - <SmartList - itemSize={270} - itemCount={recentSolutions.length} - renderItem={renderItem} - /> - </Window> - </> - ); -}; - - -export default Timer; |