From 6ffd9ba4fdb459eb2e425ba1bf873baf7576c3f9 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 28 Jan 2020 12:41:35 +0300 Subject: feat!: migrate to BENZIN library --- src/components/ContentSection/ContentSection.js | 42 ------------- src/components/Header/Header.js | 72 ---------------------- src/components/Loading/Loading.js | 3 +- src/components/SmartList/SmartList.js | 28 --------- src/components/SolutionCard/SolutionCard.js | 18 ++++-- src/components/Window/Window.js | 55 ----------------- .../Window/WindowSurface/WindowSurface.js | 33 ---------- src/index.js | 27 ++++++-- src/pages/Contribute/Contribute.js | 11 ++-- src/pages/Profile/Profile.js | 11 ++-- src/pages/Profile/Registration/Registration.js | 6 +- src/pages/Scoreboard/Scoreboard.js | 6 +- src/pages/Timer/Timer.js | 13 ++-- src/pages/Timer/TimerButton/TimerButton.js | 4 +- 14 files changed, 67 insertions(+), 262 deletions(-) delete mode 100644 src/components/ContentSection/ContentSection.js delete mode 100644 src/components/Header/Header.js delete mode 100644 src/components/SmartList/SmartList.js delete mode 100644 src/components/Window/Window.js delete mode 100644 src/components/Window/WindowSurface/WindowSurface.js (limited to 'src') diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js deleted file mode 100644 index 5108ce0..0000000 --- a/src/components/ContentSection/ContentSection.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -import { - Typography, - Divider, - makeStyles -} from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - content: { - 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(1, 2, 2, 0), - fontWeight: 'bold', - }, - }, -})); - -const ContentSection = ({ sectionName, children }) => { - const classes = useStyles(); - - return ( - <> - {sectionName} - - - {children} - - - ); - -}; - - -export default ContentSection; diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js deleted file mode 100644 index 1595141..0000000 --- a/src/components/Header/Header.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; - -import { - AppBar, - Tabs, - Tab, - Typography, - Toolbar, -} from '@material-ui/core'; - -import { makeStyles } from '@material-ui/core/styles'; -import TimerIcon from '@material-ui/icons/Timer'; -import AccountCircleIcon from '@material-ui/icons/AccountCircle'; -import AssignmentIcon from '@material-ui/icons/Assignment'; -import GitHubIcon from '@material-ui/icons/GitHub'; - - -const useStyles = makeStyles(theme => ({ - logo: { - color: theme.palette.secondary.main, - margin: theme.spacing(0, 3, 0, 3), - }, - tab: { - '& .MuiTab-wrapper': { - padding: theme.spacing(2), - flexDirection: 'row', - '& svg': { - marginRight: theme.spacing(1), - marginBottom: '0 !important', - } - } - } -})); - - -const Header = ({ page, setPage }) => { - const classes = useStyles(); - - const handleChange = (event, newPage) => { - setPage(newPage); - }; - - const icons = { - app: (), - profile: (), - scoreboard: (), - contribute: (), - }; - - return ( - - - - ChronoCube - - - { Object.keys(icons).map(item => ( - - ))} - - - - ); -}; - -export default Header; diff --git a/src/components/Loading/Loading.js b/src/components/Loading/Loading.js index e8b9701..e8793cc 100644 --- a/src/components/Loading/Loading.js +++ b/src/components/Loading/Loading.js @@ -12,6 +12,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; const useStyles = makeStyles(theme => ({ root: { padding: theme.spacing(1), + background: theme.palette.background.elevation2, }, })); @@ -19,7 +20,7 @@ const Loading = () => { const classes = useStyles(); return ( - + )} title="Loading" diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js deleted file mode 100644 index b462c47..0000000 --- a/src/components/SmartList/SmartList.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; - -import { FixedSizeList } from 'react-window'; -import AutoSizer from 'react-virtualized-auto-sizer'; - - -const SmartList = ({ itemSize, itemCount, renderItem }) => { - - return ( -
- - {({ width, height }) => ( - - {renderItem} - - )} - -
- ); -}; - - -export default SmartList; diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js index 8252347..fdd4bdf 100644 --- a/src/components/SolutionCard/SolutionCard.js +++ b/src/components/SolutionCard/SolutionCard.js @@ -15,6 +15,7 @@ import { import { makeStyles } from '@material-ui/core/styles'; import TimerIcon from '@material-ui/icons/Timer'; import MoreVertIcon from '@material-ui/icons/MoreVert'; +import DeleteIcon from '@material-ui/icons/Delete'; import { del } from '../../requests'; @@ -30,12 +31,17 @@ const DATE_FORMAT = { const useStyles = makeStyles(theme => ({ root: { padding: theme.spacing(1), + background: theme.palette.background.elevation2, '& .MuiTypography-h3': { - color: theme.palette.secondary.main, margin: theme.spacing(2), }, }, + menu: { + '& ul': { + background: theme.palette.background.elevation3, + } + }, })); const SolutionCard = ({ data, removeThisCard }) => { @@ -61,7 +67,7 @@ const SolutionCard = ({ data, removeThisCard }) => { }; return ( - + { open={Boolean(anchorEl)} keepMounted onClose={handleClose} + className={classes.menu} > - Delete + + + Delete + @@ -91,7 +101,7 @@ const SolutionCard = ({ data, removeThisCard }) => { - + { data.result } diff --git a/src/components/Window/Window.js b/src/components/Window/Window.js deleted file mode 100644 index 0ba2454..0000000 --- a/src/components/Window/Window.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import { Typography, Divider, makeStyles } from '@material-ui/core'; - -import WindowSurface from './WindowSurface/WindowSurface'; - - -const useStyles = makeStyles(theme => ({ - header: { - padding: theme.spacing(1, 0, 1, 2), - background: theme.palette.background.elevation, - }, -})); - - -const Window = ({ type, name, children }) => { - const classes = useStyles(); - - const size = { - height: '85vh', - }; - - const position = { - bottom: '3vh', - }; - - if (type === 'primary') { - size.width = '63vw'; - position.left = '2vw'; - } else if (type === 'secondary') { - size.width = '31vw'; - position.right = '2vw'; - } else if (type === 'mono') { - position.left = '2vw'; - position.right = '2vw'; - } - - return ( - - {name && -
- {name} - -
- } - {children} - - ); -}; - - -export default Window; diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js deleted file mode 100644 index 26fea01..0000000 --- a/src/components/Window/WindowSurface/WindowSurface.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; - -import { Paper, makeStyles } from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - surface: { - position: 'absolute', - display: 'flex', - flexDirection: 'column', - background: theme.palette.background.elevation, - overflowY: 'auto', - scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, - } -})); - - -const WindowSurface = ({ size, position, children }) => { - const classes = useStyles(); - - return ( - - {children} - - ) -}; - - -export default WindowSurface; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 2da3b2e..399a6bb 100644 --- a/src/index.js +++ b/src/index.js @@ -2,16 +2,22 @@ import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; -import { BenzinThemeProvider } from 'react-benzin-test'; +import { + BenzinThemeProvider, + Header, +} from 'react-benzin-test'; import 'typeface-roboto'; -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'; import Profile from './pages/Profile/Profile'; +import TimerIcon from '@material-ui/icons/Timer'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import GitHubIcon from '@material-ui/icons/GitHub'; + import { get } from './requests'; @@ -21,6 +27,13 @@ const App = () => { const [user, setUser] = useState({ username: 'anonymous', id: null }); const [recentSolutions, setRecentSolutions] = useState([]); + const headerContents = { + app: (), + profile: (), + scoreboard: (), + contribute: (), + }; + useEffect(() => { const userId = +localStorage.getItem('userId'); if (userId) { @@ -59,7 +72,13 @@ const App = () => { return ( -
+
); diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js index d94cc80..70003ba 100644 --- a/src/pages/Contribute/Contribute.js +++ b/src/pages/Contribute/Contribute.js @@ -15,8 +15,7 @@ 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'; +import { Window, ContentSection } from 'react-benzin-test'; const useStyles = makeStyles(theme => ({ @@ -47,7 +46,7 @@ const Contribute = () => {

diff --git a/src/pages/Scoreboard/Scoreboard.js b/src/pages/Scoreboard/Scoreboard.js index 335c06b..7385f3a 100644 --- a/src/pages/Scoreboard/Scoreboard.js +++ b/src/pages/Scoreboard/Scoreboard.js @@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { get } from '../../requests'; +import { Window, SmartList } from 'react-benzin-test'; -import SmartList from '../../components/SmartList/SmartList'; import SolutionCard from '../../components/SolutionCard/SolutionCard'; import Loading from '../../components/Loading/Loading'; -import Window from '../../components/Window/Window'; + +import { get } from '../../requests'; const useStyles = makeStyles(theme => ({ diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js index 1323d97..e42e318 100644 --- a/src/pages/Timer/Timer.js +++ b/src/pages/Timer/Timer.js @@ -2,10 +2,13 @@ import React from 'react'; import { post } from '../../requests'; -import Window from '../../components/Window/Window'; -import ContentSection from '../../components/ContentSection/ContentSection'; +import { + Window, + ContentSection, + SmartList, +} from 'react-benzin-test'; + import TimerButton from './TimerButton/TimerButton'; -import SmartList from '../../components/SmartList/SmartList'; import SolutionCard from '../../components/SolutionCard/SolutionCard'; import { Button, makeStyles } from '@material-ui/core'; @@ -63,12 +66,12 @@ const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => { Every speedcuber will benefit from using it - both amateur and professional!

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

Tell us your name so we can track your progress

- + } diff --git a/src/pages/Timer/TimerButton/TimerButton.js b/src/pages/Timer/TimerButton/TimerButton.js index 0f43c5a..254f73c 100644 --- a/src/pages/Timer/TimerButton/TimerButton.js +++ b/src/pages/Timer/TimerButton/TimerButton.js @@ -7,7 +7,7 @@ const useStyles = makeStyles(theme => ({ root: { textAlign: 'center', padding: theme.spacing(5), - background: theme.palette.primary.main, + background: theme.palette.background.elevation3, marginTop: theme.spacing(10), }, })); @@ -90,7 +90,7 @@ const TimerButton = ({ registerResult }) => { }; return ( - + {time} {composeHelperText()} -- cgit v1.2.3