From 31da3a746ce7d86ade32b60acb68365670d97726 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 17:44:46 +0300 Subject: Move all pages to separate folder --- src/components/Scoreboard/Scoreboard.js | 70 ------------------- src/components/TimerPage/Timer/Timer.js | 119 -------------------------------- src/components/TimerPage/TimerPage.js | 76 -------------------- src/index.js | 4 +- src/pages/Scoreboard/Scoreboard.js | 70 +++++++++++++++++++ src/pages/TimerPage/Timer/Timer.js | 119 ++++++++++++++++++++++++++++++++ src/pages/TimerPage/TimerPage.js | 76 ++++++++++++++++++++ 7 files changed, 267 insertions(+), 267 deletions(-) delete mode 100644 src/components/Scoreboard/Scoreboard.js delete mode 100644 src/components/TimerPage/Timer/Timer.js delete mode 100644 src/components/TimerPage/TimerPage.js create mode 100644 src/pages/Scoreboard/Scoreboard.js create mode 100644 src/pages/TimerPage/Timer/Timer.js create mode 100644 src/pages/TimerPage/TimerPage.js (limited to 'src') diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js deleted file mode 100644 index 2d9bb80..0000000 --- a/src/components/Scoreboard/Scoreboard.js +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import { makeStyles } from "@material-ui/core/styles"; - -import { get } from "../../requests"; - -import SmartList from "../SmartList/SmartList"; -import SolutionCard from "../SolutionCard/SolutionCard"; -import Loading from "../Loading/Loading"; -import Window from "../Window/Window"; - - -const useStyles = makeStyles(theme => ({ - cell: { - display: 'flex', - justifyContent: 'center', - padding: theme.spacing(4), - - '& .MuiCard-root': { - width: '30%', - } - } -})); - -const Scoreboard = () => { - const classes = useStyles(); - const [solutions, setSolutions] = useState([]); - - const updateSolutions = () => { - get('scoreboard/').then(response => { - setTimeout(() => { - setSolutions(response.data); - }, 300); - }); - }; - - const removeSolution = (id) => { - setSolutions(solutions.filter((solution => solution.id !== id))); - }; - - useEffect(() => { - updateSolutions(); - }, []); - - const renderItem = ({ index, style }) => { - return ( -
- -
- ) - }; - - return ( - - { solutions.length === 0 && -
- -
- } - - - ) -}; - - -export default Scoreboard; diff --git a/src/components/TimerPage/Timer/Timer.js b/src/components/TimerPage/Timer/Timer.js deleted file mode 100644 index 92b153d..0000000 --- a/src/components/TimerPage/Timer/Timer.js +++ /dev/null @@ -1,119 +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.primary.main, - marginTop: theme.spacing(20), - }, -})); - -const Timer = ({ registerResult }) => { - const classes = useStyles(); - - const SPACE = 32; - const maxCountdown = 15000; - const [time, setTime] = useState('00:00:00'); - const [mode, setMode] = useState('idle'); - const [repeater, setRepeater] = useState(0); - - useEffect(()=> { - clearInterval(repeater); - const timestamp = Date.now(); - - if (mode === 'countdown') setRepeater(setInterval(() => { - const timeDelta = maxCountdown - (Date.now() - timestamp); - if (timeDelta <= 0) setMode('over'); - setTime(convertTimeToString(timeDelta)); - }, 10)); - - if (mode === 'running') setRepeater(setInterval(() => { - setTime(convertTimeToString(Date.now() - timestamp)); - }, 10)); - - if (mode === 'over') { - setTime('00:00:00'); - } - }, [mode]); - - const handleKeyPress = event => { - event.preventDefault(); - if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); - }; - - const handleKeyUp = event => { - clearInterval(repeater); - 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 '_'; - 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 < 10) resultTime += '0'; - if (second > 59) second %= 60; - resultTime += second + ':'; - - const mill = Math.floor((timeDelta % 1000) / 10); - if (mill < 10) resultTime += '0'; - resultTime += mill; - - return resultTime; -}; - - -export default Timer; diff --git a/src/components/TimerPage/TimerPage.js b/src/components/TimerPage/TimerPage.js deleted file mode 100644 index 22781bc..0000000 --- a/src/components/TimerPage/TimerPage.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; - -import { post } from '../../requests'; - -import Window from "../Window/Window"; -import ContentSection from "../ContentSection/ContentSection"; -import Timer from "./Timer/Timer"; -import SmartList from "../SmartList/SmartList"; -import SolutionCard from "../SolutionCard/SolutionCard"; - -import { Typography, makeStyles } from "@material-ui/core"; - - -const useStyles = makeStyles(theme => ({ - primary: { - padding: theme.spacing(4), - }, - cell: { - padding: theme.spacing(5), - }, -})); - -const TimerPage = ({ recentSolutions, setRecentSolutions }) => { - const classes = useStyles(); - - const user = { - id: null, - username: 'anonymous', - }; - - const registerResult = result => { - const solution = { author_id: user.id, result }; - post('solutions/', solution).then(response => { - setRecentSolutions([response.data].concat(recentSolutions)); - }); - }; - - const removeSolution = (id) => { - setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); - }; - - const renderItem = ({ index, style }) => { - const solution = recentSolutions[index]; - return ( -
- -
- ); - }; - - return ( - <> - -
- - - Here is some text about how cool this application is, why you should use it - and how to make it better! - - - -
- - - - - - ); -}; - - -export default TimerPage; diff --git a/src/index.js b/src/index.js index 431e139..ed053a6 100644 --- a/src/index.js +++ b/src/index.js @@ -7,8 +7,8 @@ import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; import theme from "./theme"; import Header from './components/Header/Header'; -import TimerPage from "./components/TimerPage/TimerPage"; -import Scoreboard from "./components/Scoreboard/Scoreboard"; +import TimerPage from "./pages/TimerPage/TimerPage"; +import Scoreboard from "./pages/Scoreboard/Scoreboard"; const useStyles = makeStyles(theme => ({ diff --git a/src/pages/Scoreboard/Scoreboard.js b/src/pages/Scoreboard/Scoreboard.js new file mode 100644 index 0000000..61275c1 --- /dev/null +++ b/src/pages/Scoreboard/Scoreboard.js @@ -0,0 +1,70 @@ +import React, { useEffect, useState } from 'react'; + +import { makeStyles } from "@material-ui/core/styles"; + +import { get } from "../../requests"; + +import SmartList from "../../components/SmartList/SmartList"; +import SolutionCard from "../../components/SolutionCard/SolutionCard"; +import Loading from "../../components/Loading/Loading"; +import Window from "../../components/Window/Window"; + + +const useStyles = makeStyles(theme => ({ + cell: { + display: 'flex', + justifyContent: 'center', + padding: theme.spacing(4), + + '& .MuiCard-root': { + width: '30%', + } + } +})); + +const Scoreboard = () => { + const classes = useStyles(); + const [solutions, setSolutions] = useState([]); + + const updateSolutions = () => { + get('scoreboard/').then(response => { + setTimeout(() => { + setSolutions(response.data); + }, 300); + }); + }; + + const removeSolution = (id) => { + setSolutions(solutions.filter((solution => solution.id !== id))); + }; + + useEffect(() => { + updateSolutions(); + }, []); + + const renderItem = ({ index, style }) => { + return ( +
+ +
+ ) + }; + + return ( + + { solutions.length === 0 && +
+ +
+ } + + + ) +}; + + +export default Scoreboard; diff --git a/src/pages/TimerPage/Timer/Timer.js b/src/pages/TimerPage/Timer/Timer.js new file mode 100644 index 0000000..92b153d --- /dev/null +++ b/src/pages/TimerPage/Timer/Timer.js @@ -0,0 +1,119 @@ +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.primary.main, + marginTop: theme.spacing(20), + }, +})); + +const Timer = ({ registerResult }) => { + const classes = useStyles(); + + const SPACE = 32; + const maxCountdown = 15000; + const [time, setTime] = useState('00:00:00'); + const [mode, setMode] = useState('idle'); + const [repeater, setRepeater] = useState(0); + + useEffect(()=> { + clearInterval(repeater); + const timestamp = Date.now(); + + if (mode === 'countdown') setRepeater(setInterval(() => { + const timeDelta = maxCountdown - (Date.now() - timestamp); + if (timeDelta <= 0) setMode('over'); + setTime(convertTimeToString(timeDelta)); + }, 10)); + + if (mode === 'running') setRepeater(setInterval(() => { + setTime(convertTimeToString(Date.now() - timestamp)); + }, 10)); + + if (mode === 'over') { + setTime('00:00:00'); + } + }, [mode]); + + const handleKeyPress = event => { + event.preventDefault(); + if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); + }; + + const handleKeyUp = event => { + clearInterval(repeater); + 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 '_'; + 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 < 10) resultTime += '0'; + if (second > 59) second %= 60; + resultTime += second + ':'; + + const mill = Math.floor((timeDelta % 1000) / 10); + if (mill < 10) resultTime += '0'; + resultTime += mill; + + return resultTime; +}; + + +export default Timer; diff --git a/src/pages/TimerPage/TimerPage.js b/src/pages/TimerPage/TimerPage.js new file mode 100644 index 0000000..591eb7b --- /dev/null +++ b/src/pages/TimerPage/TimerPage.js @@ -0,0 +1,76 @@ +import React from 'react'; + +import { post } from '../../requests'; + +import Window from "../../components/Window/Window"; +import ContentSection from "../../components/ContentSection/ContentSection"; +import Timer from "./Timer/Timer"; +import SmartList from "../../components/SmartList/SmartList"; +import SolutionCard from "../../components/SolutionCard/SolutionCard"; + +import { Typography, makeStyles } from "@material-ui/core"; + + +const useStyles = makeStyles(theme => ({ + primary: { + padding: theme.spacing(4), + }, + cell: { + padding: theme.spacing(5), + }, +})); + +const TimerPage = ({ recentSolutions, setRecentSolutions }) => { + const classes = useStyles(); + + const user = { + id: null, + username: 'anonymous', + }; + + const registerResult = result => { + const solution = { author_id: user.id, result }; + post('solutions/', solution).then(response => { + setRecentSolutions([response.data].concat(recentSolutions)); + }); + }; + + const removeSolution = (id) => { + setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); + }; + + const renderItem = ({ index, style }) => { + const solution = recentSolutions[index]; + return ( +
+ +
+ ); + }; + + return ( + <> + +
+ + + Here is some text about how cool this application is, why you should use it + and how to make it better! + + + +
+ + + + + + ); +}; + + +export default TimerPage; -- cgit v1.2.3 From d517398707f74c670d47ed0a277ba328e531579e Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 17:47:22 +0300 Subject: Cleanup index.js --- src/index.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/index.js b/src/index.js index ed053a6..3ec39c3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,8 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom'; -import { Box } from "@material-ui/core"; import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; import theme from "./theme"; import Header from './components/Header/Header'; @@ -11,19 +10,11 @@ import TimerPage from "./pages/TimerPage/TimerPage"; import Scoreboard from "./pages/Scoreboard/Scoreboard"; -const useStyles = makeStyles(theme => ({ - root: { - }, -})); - - const App = () => { const [page, setPage] = useState('app'); const [recentSolutions, setRecentSolutions] = useState([]); - const classes = useStyles(); - const getPageComponent = page => { switch (page) { case 'app': @@ -49,9 +40,7 @@ const App = () => {
- - { getPageComponent(page) } - + { getPageComponent(page) } ); }; -- cgit v1.2.3 From b2fe1b816044b8630f570c04c884c8ffcf3e3e61 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 17:56:38 +0300 Subject: Improve names, getPageComponent() --> Remove 'Page' word from page-components, since they are all now located in the pages/ folder. --- src/index.js | 8 +- src/pages/Timer/Timer.js | 76 ++++++++++++++++++ src/pages/Timer/TimerButton/TimerButton.js | 119 +++++++++++++++++++++++++++++ src/pages/TimerPage/Timer/Timer.js | 119 ----------------------------- src/pages/TimerPage/TimerPage.js | 76 ------------------ 5 files changed, 199 insertions(+), 199 deletions(-) create mode 100644 src/pages/Timer/Timer.js create mode 100644 src/pages/Timer/TimerButton/TimerButton.js delete mode 100644 src/pages/TimerPage/Timer/Timer.js delete mode 100644 src/pages/TimerPage/TimerPage.js (limited to 'src') diff --git a/src/index.js b/src/index.js index 3ec39c3..b14708e 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ import { ThemeProvider } from '@material-ui/core/styles'; import theme from "./theme"; import Header from './components/Header/Header'; -import TimerPage from "./pages/TimerPage/TimerPage"; +import Timer from "./pages/Timer/Timer"; import Scoreboard from "./pages/Scoreboard/Scoreboard"; @@ -15,11 +15,11 @@ const App = () => { const [page, setPage] = useState('app'); const [recentSolutions, setRecentSolutions] = useState([]); - const getPageComponent = page => { + const Page = ({ page }) => { switch (page) { case 'app': return ( - @@ -40,7 +40,7 @@ const App = () => {
- { getPageComponent(page) } + ); }; diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js new file mode 100644 index 0000000..4b5925f --- /dev/null +++ b/src/pages/Timer/Timer.js @@ -0,0 +1,76 @@ +import React from 'react'; + +import { post } from '../../requests'; + +import Window from "../../components/Window/Window"; +import ContentSection from "../../components/ContentSection/ContentSection"; +import TimerButton from "./TimerButton/TimerButton"; +import SmartList from "../../components/SmartList/SmartList"; +import SolutionCard from "../../components/SolutionCard/SolutionCard"; + +import { Typography, makeStyles } from "@material-ui/core"; + + +const useStyles = makeStyles(theme => ({ + primary: { + padding: theme.spacing(4), + }, + cell: { + padding: theme.spacing(5), + }, +})); + +const Timer = ({ recentSolutions, setRecentSolutions }) => { + const classes = useStyles(); + + const user = { + id: null, + username: 'anonymous', + }; + + const registerResult = result => { + const solution = { author_id: user.id, result }; + post('solutions/', solution).then(response => { + setRecentSolutions([response.data].concat(recentSolutions)); + }); + }; + + const removeSolution = (id) => { + setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); + }; + + const renderItem = ({ index, style }) => { + const solution = recentSolutions[index]; + return ( +
+ +
+ ); + }; + + return ( + <> + +
+ + + Here is some text about how cool this application is, why you should use it + and how to make it better! + + + +
+ + + + + + ); +}; + + +export default Timer; diff --git a/src/pages/Timer/TimerButton/TimerButton.js b/src/pages/Timer/TimerButton/TimerButton.js new file mode 100644 index 0000000..56d3084 --- /dev/null +++ b/src/pages/Timer/TimerButton/TimerButton.js @@ -0,0 +1,119 @@ +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.primary.main, + marginTop: theme.spacing(20), + }, +})); + +const TimerButton = ({ registerResult }) => { + const classes = useStyles(); + + const SPACE = 32; + const maxCountdown = 15000; + const [time, setTime] = useState('00:00:00'); + const [mode, setMode] = useState('idle'); + const [repeater, setRepeater] = useState(0); + + useEffect(()=> { + clearInterval(repeater); + const timestamp = Date.now(); + + if (mode === 'countdown') setRepeater(setInterval(() => { + const timeDelta = maxCountdown - (Date.now() - timestamp); + if (timeDelta <= 0) setMode('over'); + setTime(convertTimeToString(timeDelta)); + }, 10)); + + if (mode === 'running') setRepeater(setInterval(() => { + setTime(convertTimeToString(Date.now() - timestamp)); + }, 10)); + + if (mode === 'over') { + setTime('00:00:00'); + } + }, [mode]); + + const handleKeyPress = event => { + event.preventDefault(); + if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); + }; + + const handleKeyUp = event => { + clearInterval(repeater); + 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 '_'; + 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 < 10) resultTime += '0'; + if (second > 59) second %= 60; + 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/TimerPage/Timer/Timer.js b/src/pages/TimerPage/Timer/Timer.js deleted file mode 100644 index 92b153d..0000000 --- a/src/pages/TimerPage/Timer/Timer.js +++ /dev/null @@ -1,119 +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.primary.main, - marginTop: theme.spacing(20), - }, -})); - -const Timer = ({ registerResult }) => { - const classes = useStyles(); - - const SPACE = 32; - const maxCountdown = 15000; - const [time, setTime] = useState('00:00:00'); - const [mode, setMode] = useState('idle'); - const [repeater, setRepeater] = useState(0); - - useEffect(()=> { - clearInterval(repeater); - const timestamp = Date.now(); - - if (mode === 'countdown') setRepeater(setInterval(() => { - const timeDelta = maxCountdown - (Date.now() - timestamp); - if (timeDelta <= 0) setMode('over'); - setTime(convertTimeToString(timeDelta)); - }, 10)); - - if (mode === 'running') setRepeater(setInterval(() => { - setTime(convertTimeToString(Date.now() - timestamp)); - }, 10)); - - if (mode === 'over') { - setTime('00:00:00'); - } - }, [mode]); - - const handleKeyPress = event => { - event.preventDefault(); - if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); - }; - - const handleKeyUp = event => { - clearInterval(repeater); - 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 '_'; - 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 < 10) resultTime += '0'; - if (second > 59) second %= 60; - resultTime += second + ':'; - - const mill = Math.floor((timeDelta % 1000) / 10); - if (mill < 10) resultTime += '0'; - resultTime += mill; - - return resultTime; -}; - - -export default Timer; diff --git a/src/pages/TimerPage/TimerPage.js b/src/pages/TimerPage/TimerPage.js deleted file mode 100644 index 591eb7b..0000000 --- a/src/pages/TimerPage/TimerPage.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; - -import { post } from '../../requests'; - -import Window from "../../components/Window/Window"; -import ContentSection from "../../components/ContentSection/ContentSection"; -import Timer from "./Timer/Timer"; -import SmartList from "../../components/SmartList/SmartList"; -import SolutionCard from "../../components/SolutionCard/SolutionCard"; - -import { Typography, makeStyles } from "@material-ui/core"; - - -const useStyles = makeStyles(theme => ({ - primary: { - padding: theme.spacing(4), - }, - cell: { - padding: theme.spacing(5), - }, -})); - -const TimerPage = ({ recentSolutions, setRecentSolutions }) => { - const classes = useStyles(); - - const user = { - id: null, - username: 'anonymous', - }; - - const registerResult = result => { - const solution = { author_id: user.id, result }; - post('solutions/', solution).then(response => { - setRecentSolutions([response.data].concat(recentSolutions)); - }); - }; - - const removeSolution = (id) => { - setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); - }; - - const renderItem = ({ index, style }) => { - const solution = recentSolutions[index]; - return ( -
- -
- ); - }; - - return ( - <> - -
- - - Here is some text about how cool this application is, why you should use it - and how to make it better! - - - -
- - - - - - ); -}; - - -export default TimerPage; -- cgit v1.2.3 From 31a205016f9e811ece59f3f1101a06ebcd846cd2 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 19:42:47 +0300 Subject: Markup initial Contribute page --- src/components/ContentSection/ContentSection.js | 14 +++- src/index.js | 8 ++- src/pages/Contribute/Contribute.js | 95 +++++++++++++++++++++++++ 3 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 src/pages/Contribute/Contribute.js (limited to 'src') diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js index d5b9340..fc431f3 100644 --- a/src/components/ContentSection/ContentSection.js +++ b/src/components/ContentSection/ContentSection.js @@ -9,8 +9,18 @@ import { const useStyles = makeStyles(theme => ({ content: { - padding: theme.spacing(2), - } + padding: theme.spacing(0, 2, 1, 2), + marginBottom: theme.spacing(1), + + '& a': { + color: theme.palette.secondary.light, + }, + '& .MuiButton-root': { + color: theme.palette.background.paper, + margin: theme.spacing(2, 2, 2, 0), + fontWeight: 'bold', + }, + }, })); const ContentSection = ({ sectionName, children }) => { diff --git a/src/index.js b/src/index.js index b14708e..f9d7e32 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import theme from "./theme"; import Header from './components/Header/Header'; import Timer from "./pages/Timer/Timer"; import Scoreboard from "./pages/Scoreboard/Scoreboard"; +import Contribute from "./pages/Contribute/Contribute"; const App = () => { @@ -24,8 +25,13 @@ const App = () => { setRecentSolutions={setRecentSolutions} /> ); + case 'scoreboard': - return (); + return (); + + case 'contribute': + return (); + default: return (

diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js new file mode 100644 index 0000000..b837021 --- /dev/null +++ b/src/pages/Contribute/Contribute.js @@ -0,0 +1,95 @@ +import React from 'react'; + +import { + Typography, + Link, + Button, + makeStyles, +} from "@material-ui/core"; + +import Window from "../../components/Window/Window"; +import ContentSection from "../../components/ContentSection/ContentSection"; + + +const useStyles = makeStyles(theme => ({ + mono: { + padding: theme.spacing(4), + } +})); + + +const Contribute = () => { + const classes = useStyles(); + + return ( + +

+ + +

+ ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project! +

+ + + + +

We only use modern and most relevant technologies to achieve the best results!

+

+

+ Special thanks to other Open-Source projects which made ChronoCube possible: + +

+ + + + +

Thank You for considering helping our project!

+

+ All the development process is being tracked on + the KanBan board. + You can always check it to see what is the current state of the project. + To contribute your code, fork our repository and then open + a + Pull Request. We will carefully review and, hopefully, accept it! + If you are unfamiliar with this kind of workflow, we recommend + reading GitHub guidelines. +

+

+ We always welcome newcomers! If you are unfamiliar with certain technologies or even with the + development in general, it is great time to start learning something new! + Our community will kindly assist every your step, and with us you can easily become + highly-evaluated developer! +

+ + + + +
+ + ); + +}; + + +export default Contribute; -- cgit v1.2.3 From 7211ac852ea3620755d37b2e3a8345540069ee0c Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 19:44:36 +0300 Subject: Install Roboto font --- src/index.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/index.js b/src/index.js index f9d7e32..48d7eb8 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-ui/core/styles'; +import 'typeface-roboto'; import theme from "./theme"; import Header from './components/Header/Header'; -- cgit v1.2.3 From 02ddc8f3ed6858521480a3c3928f50ff40f34501 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 20:04:34 +0300 Subject: Edit description on Timer page, add 'Lean More' --- src/components/ContentSection/ContentSection.js | 2 +- src/index.js | 1 + src/pages/Timer/Timer.js | 18 ++++++++++++++---- 3 files changed, 16 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js index fc431f3..918c400 100644 --- a/src/components/ContentSection/ContentSection.js +++ b/src/components/ContentSection/ContentSection.js @@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({ }, '& .MuiButton-root': { color: theme.palette.background.paper, - margin: theme.spacing(2, 2, 2, 0), + margin: theme.spacing(1, 2, 2, 0), fontWeight: 'bold', }, }, diff --git a/src/index.js b/src/index.js index 48d7eb8..0c3d415 100644 --- a/src/index.js +++ b/src/index.js @@ -24,6 +24,7 @@ const App = () => { ); diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js index 4b5925f..66e1b8f 100644 --- a/src/pages/Timer/Timer.js +++ b/src/pages/Timer/Timer.js @@ -8,7 +8,7 @@ import TimerButton from "./TimerButton/TimerButton"; import SmartList from "../../components/SmartList/SmartList"; import SolutionCard from "../../components/SolutionCard/SolutionCard"; -import { Typography, makeStyles } from "@material-ui/core"; +import { Typography, Button, makeStyles } from "@material-ui/core"; const useStyles = makeStyles(theme => ({ @@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({ }, })); -const Timer = ({ recentSolutions, setRecentSolutions }) => { +const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => { const classes = useStyles(); const user = { @@ -35,6 +35,10 @@ const Timer = ({ recentSolutions, setRecentSolutions }) => { }); }; + const handleLearnMore = () => { + setPage('contribute'); + }; + const removeSolution = (id) => { setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); }; @@ -54,8 +58,14 @@ const Timer = ({ recentSolutions, setRecentSolutions }) => {
- Here is some text about how cool this application is, why you should use it - and how to make it better! +

+ 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! +

+ -- cgit v1.2.3 From 0328a41d0fbb76fbb805610376b1c607faf60730 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 20:11:29 +0300 Subject: Add overflow and scrollbar color to WindowSurface --- src/components/SmartList/SmartList.js | 11 ----------- src/components/Window/WindowSurface/WindowSurface.js | 2 ++ 2 files changed, 2 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js index 975cbbd..68235a2 100644 --- a/src/components/SmartList/SmartList.js +++ b/src/components/SmartList/SmartList.js @@ -3,18 +3,8 @@ import React from 'react'; import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; -import { makeStyles } from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - root: { - scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, - } -})); - const SmartList = ({ itemSize, itemCount, renderItem }) => { - const classes = useStyles(); return (
@@ -25,7 +15,6 @@ const SmartList = ({ itemSize, itemCount, renderItem }) => { width={width} itemSize={itemSize} itemCount={itemCount} - className={classes.root} > {renderItem} diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js index d1d1510..c4e6b3d 100644 --- a/src/components/Window/WindowSurface/WindowSurface.js +++ b/src/components/Window/WindowSurface/WindowSurface.js @@ -9,6 +9,8 @@ const useStyles = makeStyles(theme => ({ display: 'flex', flexDirection: 'column', background: theme.palette.background.elevation, + overflowY: 'auto', + scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, } })); -- cgit v1.2.3 From 871581e3a7338387e14c9ea8744abad4b83e9f2c Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 20:19:43 +0300 Subject: Replace stub URLs --- src/pages/Contribute/Contribute.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js index b837021..d584bfc 100644 --- a/src/pages/Contribute/Contribute.js +++ b/src/pages/Contribute/Contribute.js @@ -2,7 +2,6 @@ import React from 'react'; import { Typography, - Link, Button, makeStyles, } from "@material-ui/core"; @@ -29,6 +28,9 @@ const Contribute = () => {

ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project!

+ @@ -36,24 +38,21 @@ const Contribute = () => {

We only use modern and most relevant technologies to achieve the best results!

Special thanks to other Open-Source projects which made ChronoCube possible:

-- cgit v1.2.3 From a68198837b193369bfcc03f320c012d8568836d8 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 03:35:39 +0300 Subject: Add Developers section to Contribute page --- src/developers.json | 10 +++++++ src/pages/Contribute/Contribute.js | 60 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 src/developers.json (limited to 'src') diff --git a/src/developers.json b/src/developers.json new file mode 100644 index 0000000..f3e5357 --- /dev/null +++ b/src/developers.json @@ -0,0 +1,10 @@ +[ + { + "username": "eug-vs", + "role": "Back-end, front-end, management" + }, + { + "username": "asketonim", + "role": "Front-end, management" + } +] \ No newline at end of file diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js index d584bfc..f601f3a 100644 --- a/src/pages/Contribute/Contribute.js +++ b/src/pages/Contribute/Contribute.js @@ -3,6 +3,11 @@ import React from 'react'; import { Typography, Button, + List, + ListItem, + Link, + Avatar, + Divider, makeStyles, } from "@material-ui/core"; @@ -13,10 +18,19 @@ import ContentSection from "../../components/ContentSection/ContentSection"; const useStyles = makeStyles(theme => ({ mono: { padding: theme.spacing(4), - } + + '& .MuiAvatar-root': { + marginRight: theme.spacing(2), + width: theme.spacing(6), + height: theme.spacing(6), + } + }, })); +const developers = require('../../developers.json'); + + const Contribute = () => { const classes = useStyles(); @@ -84,10 +98,52 @@ const Contribute = () => { Report a bug + + + { + developers.map(developer => { + const githubUrl = `https://github.com/${developer.username}`; + const avatarUrl = `${githubUrl}.png`; + + return ( + <> + + + + +
+ + + {developer.username} + + + + {developer.role} + +
+ + + + ) + }) + } + + + You can be here! + + + +
); - }; -- cgit v1.2.3 From 106d489a53e9069a74ed6b90984c15cc48a8823f Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 03:47:59 +0300 Subject: Perform cleanup, resolve warnings --- src/components/ContentSection/ContentSection.js | 4 +- src/pages/Contribute/Contribute.js | 100 +++++++++++------------- src/pages/Timer/Timer.js | 18 ++--- 3 files changed, 55 insertions(+), 67 deletions(-) (limited to 'src') diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js index 918c400..99e76aa 100644 --- a/src/components/ContentSection/ContentSection.js +++ b/src/components/ContentSection/ContentSection.js @@ -30,9 +30,9 @@ const ContentSection = ({ sectionName, children }) => { <> {sectionName} -
+ {children} -
+ ); diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js index f601f3a..8bb3fb5 100644 --- a/src/pages/Contribute/Contribute.js +++ b/src/pages/Contribute/Contribute.js @@ -38,59 +38,51 @@ const Contribute = () => {
- -

- ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project! -

- - +

+ ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project! +

+ - -

We only use modern and most relevant technologies to achieve the best results!

-

-

- Special thanks to other Open-Source projects which made ChronoCube possible: - -

- +

We only use modern and most relevant technologies to achieve the best results!

+
    +
  • + Django REST Framework +
    • +
  • + React.js +
    • +
  • + Material UI components +
    • +
+

Special thanks to other Open-Source projects which made ChronoCube possible:

+
    +
  • + react-window +
    • +
- -

Thank You for considering helping our project!

-

- All the development process is being tracked on - the KanBan board. - You can always check it to see what is the current state of the project. - To contribute your code, fork our repository and then open - a - Pull Request. We will carefully review and, hopefully, accept it! - If you are unfamiliar with this kind of workflow, we recommend - reading GitHub guidelines. -

-

- We always welcome newcomers! If you are unfamiliar with certain technologies or even with the - development in general, it is great time to start learning something new! - Our community will kindly assist every your step, and with us you can easily become - highly-evaluated developer! -

- +

Thank You for considering helping our project!

+

+ All the development process is being tracked on + the KanBan board. + You can always check it to see what is the current state of the project. + To contribute your code, fork our repository and then open + a + Pull Request. We will carefully review and, hopefully, accept it! + If you are unfamiliar with this kind of workflow, we recommend + reading GitHub guidelines. +

+

+ We always welcome newcomers! If you are unfamiliar with certain technologies or even with the + development in general, it is great time to start learning something new! + Our community will kindly assist every your step, and with us you can easily become + highly-evaluated developer! +

@@ -107,17 +99,15 @@ const Contribute = () => { return ( <> - +
- - {developer.username} - + {developer.username} - + {developer.role}
@@ -129,7 +119,7 @@ const Contribute = () => { } - You can be here! + You can be here! - +

+ 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! +

+
-- cgit v1.2.3 From fabb2a38f36a94a14219a40130eadda959b091eb Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 04:08:20 +0300 Subject: Add icons to some buttons --- src/pages/Contribute/Contribute.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js index 8bb3fb5..0540742 100644 --- a/src/pages/Contribute/Contribute.js +++ b/src/pages/Contribute/Contribute.js @@ -11,6 +11,10 @@ import { makeStyles, } from "@material-ui/core"; +import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import BugReportIcon from '@material-ui/icons/BugReport'; +import NewReleasesIcon from '@material-ui/icons/NewReleases'; + import Window from "../../components/Window/Window"; import ContentSection from "../../components/ContentSection/ContentSection"; @@ -41,7 +45,12 @@ const Contribute = () => {

ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project!

- @@ -83,10 +92,20 @@ const Contribute = () => { Our community will kindly assist every your step, and with us you can easily become highly-evaluated developer!

- - -- cgit v1.2.3 From c2d7aa43ab54726b4741bc426d63093ef6392a91 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 18:06:32 +0300 Subject: Resolve 'key' warning --- src/pages/Contribute/Contribute.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js index 0540742..6837f59 100644 --- a/src/pages/Contribute/Contribute.js +++ b/src/pages/Contribute/Contribute.js @@ -114,13 +114,12 @@ const Contribute = () => { { developers.map(developer => { const githubUrl = `https://github.com/${developer.username}`; - const avatarUrl = `${githubUrl}.png`; return ( - <> - +
+ - +
@@ -131,8 +130,8 @@ const Contribute = () => {
- - + +
) }) } -- cgit v1.2.3