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 --- package-lock.json | 44 ++++++------- package.json | 2 +- 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 +- 16 files changed, 86 insertions(+), 289 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 diff --git a/package-lock.json b/package-lock.json index 761dc9f..ac02e0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11343,9 +11343,9 @@ } }, "react-benzin-test": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/react-benzin-test/-/react-benzin-test-2.0.3.tgz", - "integrity": "sha512-PXET2RGxPWW9qbWiUYtjbeJt+x7s/ewsXAaPD/70zo5U3HipGiRDhIFAjoOWu0AGxyUFu2oVmNByTt6bM75c8Q==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-benzin-test/-/react-benzin-test-2.0.4.tgz", + "integrity": "sha512-7cMk82c9eSTHuGhdjHXtmY0FXohgjHUZftns7wipumiTIE1uHI25Kme6cTSZUTkOyZyuXb73smC/rfeMx86b1w==", "requires": { "@material-ui/core": "^4.9.0", "@material-ui/icons": "^4.5.1", @@ -11355,29 +11355,6 @@ "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.5", "typeface-roboto": "0.0.75" - }, - "dependencies": { - "@material-ui/core": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.0.tgz", - "integrity": "sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.9.0", - "@material-ui/system": "^4.7.1", - "@material-ui/types": "^5.0.0", - "@material-ui/utils": "^4.7.1", - "@types/react-transition-group": "^4.2.0", - "clsx": "^1.0.2", - "convert-css-length": "^2.0.1", - "hoist-non-react-statics": "^3.2.1", - "normalize-scroll-left": "^0.2.0", - "popper.js": "^1.14.1", - "prop-types": "^15.7.2", - "react-is": "^16.8.0", - "react-transition-group": "^4.3.0" - } - } } }, "react-dev-utils": { @@ -11563,9 +11540,11 @@ "eslint": "^6.6.0", "eslint-config-react-app": "^5.1.0", "eslint-loader": "3.0.2", + "eslint-plugin-flowtype": "3.13.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.16.0", + "eslint-plugin-react-hooks": "^1.6.1", "file-loader": "4.3.0", "fs-extra": "^8.1.0", "fsevents": "2.1.2", @@ -11616,6 +11595,14 @@ "isarray": "^1.0.0" } }, + "eslint-plugin-flowtype": { + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.13.0.tgz", + "integrity": "sha512-bhewp36P+t7cEV0b6OdmoRWJCBYRiHFlqPZAG1oS3SF+Y0LQkeDvFSM4oxoxvczD1OdONCXMlJfQFiWLcV9urw==", + "requires": { + "lodash": "^4.17.15" + } + }, "eslint-plugin-import": { "version": "2.18.2", "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz", @@ -11660,6 +11647,11 @@ } } }, + "eslint-plugin-react-hooks": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz", + "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==" + }, "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", diff --git a/package.json b/package.json index b8bac16..321ddf4 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "axios": "^0.19.2", "gh-pages": "^2.2.0", "react": "^16.12.0", - "react-benzin-test": "^2.0.3", + "react-benzin-test": "^2.0.4", "react-dom": "^16.12.0", "react-scripts": "3.3.0", "react-virtualized-auto-sizer": "^1.0.2", 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