From f35c1cf5480f7506442ac4c9170c5e0a1a4a8b15 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Wed, 4 May 2022 12:52:25 +0300 Subject: feat: remove material UI and useless functionality --- src/pages/Contribute/Contribute.tsx | 149 ------------------------------------ src/pages/Profile/Profile.tsx | 95 ----------------------- src/pages/Profile/Registration.tsx | 85 -------------------- src/pages/Scoreboard/Scoreboard.tsx | 70 ----------------- src/pages/Timer/Timer.tsx | 102 ------------------------ src/pages/Timer/TimerButton.tsx | 130 ------------------------------- 6 files changed, 631 deletions(-) delete mode 100644 src/pages/Contribute/Contribute.tsx delete mode 100644 src/pages/Profile/Profile.tsx delete mode 100644 src/pages/Profile/Registration.tsx delete mode 100644 src/pages/Scoreboard/Scoreboard.tsx delete mode 100644 src/pages/Timer/Timer.tsx delete mode 100644 src/pages/Timer/TimerButton.tsx (limited to 'src/pages') diff --git a/src/pages/Contribute/Contribute.tsx b/src/pages/Contribute/Contribute.tsx deleted file mode 100644 index 67f2b8a..0000000 --- a/src/pages/Contribute/Contribute.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import React from 'react'; - -import { - Typography, - Button, - List, - ListItem, - Link, - Divider, - 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, ContentSection } from 'react-benzin'; -import GithubAvatar, { getUserGithubUrl } from '../../components/GithubAvatar/GithubAvatar'; - -import developers from '../../developers.json'; - -const useStyles = makeStyles(theme => ({ - mono: { - padding: theme.spacing(4), - - '& .MuiAvatar-root': { - marginRight: theme.spacing(2), - width: theme.spacing(6), - height: theme.spacing(6), - } - }, -})); - - - - -const Contribute: React.FC = () => { - 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!

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

- - - - - - { - developers.map(developer => ( -
- - -
- {developer.username} - - {developer.role} - -
- - -
- )) - } - - - You can be here! - - - - -
- - ); -}; - - -export default Contribute; diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx deleted file mode 100644 index 83acb30..0000000 --- a/src/pages/Profile/Profile.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import { - Button, - makeStyles, -} from '@material-ui/core'; - -import Registration from './Registration'; -import { - Window, - ContentSection, - SmartList, -} from 'react-benzin'; -import { User, Solution, RenderPropTypes } from '../../types'; - -import SolutionCard from '../../components/SolutionCard/SolutionCard'; - -import { get } from '../../requests'; - - -const useStyles = makeStyles(theme => ({ - primary: { - padding: theme.spacing(4), - }, - cell: { - padding: theme.spacing(5), - }, -})); - - -interface PropTypes { - user: User; - setUser: (user: User) => void; -} - - -const Profile: React.FC = ({ user, setUser }) => { - const classes = useStyles(); - - const [profileSolutions, setProfileSolutions] = useState([]); - - const handleLogout = (): void => { - setUser({ username: 'anonymous', id: null }); - localStorage.clear(); - }; - - useEffect(() => { - get(`solutions/?author=${user.id}`).then(response => { - setProfileSolutions(response.data.reverse()); - }); - }, [user]); - - const removeSolution = (id: number): void => { - setProfileSolutions(profileSolutions.filter((solution => solution.id !== id))); - }; - - const renderItem: React.FC = ({ index, style }) => { - return ( -
- -
- ); - }; - - return ( - <> - -
- { user.id? ( - -

Total amount of solutions: {profileSolutions.length}

-

You can always log out from your account!

- - - ): ( - - ) - } -
- - - - - - ) -}; - - -export default Profile; diff --git a/src/pages/Profile/Registration.tsx b/src/pages/Profile/Registration.tsx deleted file mode 100644 index a5e0f3e..0000000 --- a/src/pages/Profile/Registration.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, {useState} from 'react'; - -import { - TextField, - Button, - Checkbox, - FormControlLabel, - Grid, -} from '@material-ui/core'; -import { User } from '../../types'; - -import { ContentSection } from 'react-benzin'; -import { get, post } from '../../requests'; - - -interface PropTypes { - setUser: (user: User) => void; -} - -const Registration: React.FC = ({ setUser }) => { - - const [username, setUsername] = useState(''); - const [isRememberMe, setIsRememberMe] = useState(false); - - const handleChange = (event: React.ChangeEvent): void => { - setUsername(event.target.value); - }; - - const handleCheck = (event: React.ChangeEvent): void => { - setIsRememberMe(event.target.checked); - }; - - const handleSubmit = (): void => { - if (username !== '') { - post('users/', { username }) - .then(response => { - const user = response.data; - setUser(user); - if (isRememberMe) { - localStorage.setItem('userId', user.id); - } - }) - .catch(err => { - get('users/').then(response => { - const user = response.data.filter((user: User) => user.username === username)[0]; - setUser(user); - if (isRememberMe) { - localStorage.setItem('userId', user.id); - } - }); - }); - } - }; - - return ( - -

Choose yourself a username to track your progress and compete with others:

- - - - - - } - label="Remember me" - /> - - - - - - - ); -}; - - -export default Registration; diff --git a/src/pages/Scoreboard/Scoreboard.tsx b/src/pages/Scoreboard/Scoreboard.tsx deleted file mode 100644 index e4185bd..0000000 --- a/src/pages/Scoreboard/Scoreboard.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import { makeStyles } from '@material-ui/core/styles'; - -import { Window, SmartList } from 'react-benzin'; -import { Solution, RenderPropTypes } from '../../types'; - -import SolutionCard from '../../components/SolutionCard/SolutionCard'; -import Loading from '../../components/Loading/Loading'; - -import { get } from '../../requests'; - - -const useStyles = makeStyles(theme => ({ - cell: { - display: 'flex', - justifyContent: 'center', - padding: theme.spacing(4), - - '& .MuiCard-root': { - width: '30%', - } - } -})); - - -const Scoreboard: React.FC = () => { - const classes = useStyles(); - const [solutions, setSolutions] = useState([]); - - const updateSolutions = (): void => { - get('scoreboard/').then(response => { - setSolutions(response.data); - }); - }; - - const removeSolution = (id: number): void => { - updateSolutions(); - }; - - useEffect(() => { - setTimeout(updateSolutions, 300); - }, []); - - const renderItem: React.FC = ({ index, style }) => { - return ( -
- -
- ) - }; - - return ( - - { solutions.length === 0 && -
- -
- } - - - ) -}; - - -export default Scoreboard; diff --git a/src/pages/Timer/Timer.tsx b/src/pages/Timer/Timer.tsx deleted file mode 100644 index a890815..0000000 --- a/src/pages/Timer/Timer.tsx +++ /dev/null @@ -1,102 +0,0 @@ -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 deleted file mode 100644 index 0a3bf38..0000000 --- a/src/pages/Timer/TimerButton.tsx +++ /dev/null @@ -1,130 +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), - }, -})); - - -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 (): void => clearInterval(repeater); - } - - if (mode === 'running') { - const repeater = setInterval(() => { - setTime(convertTimeToString(Date.now() - timestamp)); - }, 10); - return (): void => 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 (): void => { - window.removeEventListener('keyup', handleKeyUp); - window.removeEventListener('keypress', handleKeyPress); - }; - }); - - const composeHelperText = (): string => { - 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 = (): 'primary' | 'secondary' | 'textSecondary' => { - 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; -- cgit v1.2.3