From c06bce7fdab23e52d33636e3585c86d48c0bfa91 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 14:16:26 +0300 Subject: Markup initial Profile page with empty form --- src/index.js | 15 +++++++-------- src/pages/Profile/Profile.js | 45 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 src/pages/Profile/Profile.js diff --git a/src/index.js b/src/index.js index 0c3d415..f90c39a 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,7 @@ 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"; const App = () => { @@ -28,19 +29,17 @@ const App = () => { /> ); + case 'profile': + return ; + case 'scoreboard': - return (); + return ; case 'contribute': - return (); + return ; default: - return ( -

- This text is rendered outside of Header component, but - interacting with Header can influence content of this page! -

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

Here is some text about why you should register at ChronoCube:

+

+ +

+ + +
+ + + + + + ) +}; + + +export default Profile; -- cgit v1.2.3 From 3ef3cb7f0b25a448e81e5b81738758f4545337cc Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 15:35:46 +0300 Subject: Implement Registration component --- src/index.js | 4 +- src/pages/Profile/Profile.js | 26 +++++----- src/pages/Profile/Registration/Registration.js | 66 ++++++++++++++++++++++++++ src/pages/Timer/Timer.js | 9 +--- 4 files changed, 83 insertions(+), 22 deletions(-) create mode 100644 src/pages/Profile/Registration/Registration.js diff --git a/src/index.js b/src/index.js index f90c39a..4db99cf 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,7 @@ import Profile from "./pages/Profile/Profile"; const App = () => { const [page, setPage] = useState('app'); + const [user, setUser] = useState({ username: 'anonymous', id: null }); const [recentSolutions, setRecentSolutions] = useState([]); const Page = ({ page }) => { @@ -23,6 +24,7 @@ const App = () => { case 'app': return ( { ); case 'profile': - return ; + return ; case 'scoreboard': return ; diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index 3b0de1e..f2c44ef 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -1,13 +1,11 @@ import React from 'react'; import Window from "../../components/Window/Window"; -import ContentSection from "../../components/ContentSection/ContentSection"; import { - TextField, - Button, - Typography, makeStyles, } from "@material-ui/core"; +import Registration from "./Registration/Registration"; +import ContentSection from "../../components/ContentSection/ContentSection"; const useStyles = makeStyles(theme => ({ @@ -16,22 +14,22 @@ const useStyles = makeStyles(theme => ({ }, })); -const Profile = () => { + +const Profile = ({ user, setUser }) => { const classes = useStyles(); return ( <>
- -

Here is some text about why you should register at ChronoCube:

-

- -

- - + { user.id? ( + + + + ): ( + + ) + }
diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js new file mode 100644 index 0000000..8853a7a --- /dev/null +++ b/src/pages/Profile/Registration/Registration.js @@ -0,0 +1,66 @@ +import React, {useState} from 'react'; + +import { + TextField, + Button, + Checkbox, + FormControlLabel, + Grid, +} from "@material-ui/core"; + +import ContentSection from "../../../components/ContentSection/ContentSection"; +import {get, post} from "../../../requests"; + + +const Registration = ({ setUser }) => { + + const [username, setUsername] = useState(''); + + const handleChange = (event) => { + setUsername(event.target.value); + }; + + const handleSubmit = () => { + post('users/', { username }) + .then(response => { + setUser(response.data); + }) + .catch(err => { + get('users/').then(response => { + setUser(response.data.filter(user => user.username === username)[0]); + }); + }); + }; + + return ( + +

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

+ + + + + + } + label="Remember me" + /> + + + + + + + + ); +}; + + +export default Registration; diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js index d63c661..83ec0dc 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, Button, makeStyles } from "@material-ui/core"; +import { Button, makeStyles } from "@material-ui/core"; const useStyles = makeStyles(theme => ({ @@ -20,14 +20,9 @@ const useStyles = makeStyles(theme => ({ }, })); -const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => { +const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => { const classes = useStyles(); - const user = { - id: null, - username: 'anonymous', - }; - const registerResult = result => { const solution = { author_id: user.id, result }; post('solutions/', solution).then(response => { -- cgit v1.2.3 From 0de06228f4b5e482b6f73230210225b332f0a2ff Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 16:02:25 +0300 Subject: Store user data in localStorage (optionally) --- src/index.js | 13 ++++++++++++- src/pages/Profile/Profile.js | 11 ++++++++++- src/pages/Profile/Registration/Registration.js | 20 ++++++++++++++++---- 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 4db99cf..6563c60 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; @@ -12,6 +12,8 @@ import Scoreboard from "./pages/Scoreboard/Scoreboard"; import Contribute from "./pages/Contribute/Contribute"; import Profile from "./pages/Profile/Profile"; +import { get } from "./requests"; + const App = () => { @@ -19,6 +21,15 @@ const App = () => { const [user, setUser] = useState({ username: 'anonymous', id: null }); const [recentSolutions, setRecentSolutions] = useState([]); + useEffect(() => { + const userId = +localStorage.getItem('userId'); + if (userId) { + get('users/').then(response => { + setUser(response.data.filter(user => user.id === +userId)[0]); + }); + } + }, []); + const Page = ({ page }) => { switch (page) { case 'app': diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index f2c44ef..af90a56 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -2,6 +2,7 @@ import React from 'react'; import Window from "../../components/Window/Window"; import { + Button, makeStyles, } from "@material-ui/core"; import Registration from "./Registration/Registration"; @@ -18,13 +19,21 @@ const useStyles = makeStyles(theme => ({ const Profile = ({ user, setUser }) => { const classes = useStyles(); + const handleLogout = () => { + setUser({ username: 'anonymous', id: null }); + localStorage.clear(); + }; + return ( <>
{ user.id? ( - +

You can always log out from your account!

+ ): ( diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js index 8853a7a..ce8384f 100644 --- a/src/pages/Profile/Registration/Registration.js +++ b/src/pages/Profile/Registration/Registration.js @@ -15,19 +15,32 @@ import {get, post} from "../../../requests"; const Registration = ({ setUser }) => { const [username, setUsername] = useState(''); + const [isRememberMe, setIsRememberMe] = useState(false); const handleChange = (event) => { setUsername(event.target.value); }; + const handleCheck = (event) => { + setIsRememberMe(event.target.checked); + }; + const handleSubmit = () => { post('users/', { username }) .then(response => { - setUser(response.data); + const user = response.data; + setUser(user); + if (isRememberMe) { + localStorage.setItem('userId', user.id); + } }) .catch(err => { get('users/').then(response => { - setUser(response.data.filter(user => user.username === username)[0]); + const user = response.data.filter(user => user.username === username)[0]; + setUser(user); + if (isRememberMe) { + localStorage.setItem('userId', user.id); + } }); }); }; @@ -47,7 +60,7 @@ const Registration = ({ setUser }) => { } + control={} label="Remember me" /> @@ -57,7 +70,6 @@ const Registration = ({ setUser }) => { - ); }; -- cgit v1.2.3 From fff9eae8022e1e3bb88884a47bfd4153b089f444 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 18:04:57 +0300 Subject: Add Profile history, link Profile at Timer page --- src/pages/Profile/Profile.js | 41 +++++++++++++++++++++++--- src/pages/Profile/Registration/Registration.js | 26 ++++++++-------- src/pages/Timer/Timer.js | 10 +++++++ src/pages/Timer/TimerButton/TimerButton.js | 2 +- 4 files changed, 62 insertions(+), 17 deletions(-) diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index af90a56..861e58e 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -1,17 +1,25 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import Window from "../../components/Window/Window"; import { Button, makeStyles, } from "@material-ui/core"; + import Registration from "./Registration/Registration"; import ContentSection from "../../components/ContentSection/ContentSection"; +import SmartList from "../../components/SmartList/SmartList"; + +import { get } from "../../requests"; +import SolutionCard from "../../components/SolutionCard/SolutionCard"; const useStyles = makeStyles(theme => ({ primary: { - padding: theme.spacing(4) + padding: theme.spacing(4), + }, + cell: { + padding: theme.spacing(5), }, })); @@ -19,17 +27,38 @@ const useStyles = makeStyles(theme => ({ const Profile = ({ user, setUser }) => { const classes = useStyles(); + const [profileSolutions, setProfileSolutions] = useState([]); + const handleLogout = () => { setUser({ username: 'anonymous', id: null }); localStorage.clear(); }; + useEffect(() => { + get(`solutions/?author=${user.id}`).then(response => { + setProfileSolutions(response.data.reverse()); + }); + }, [user]); + + const removeSolution = (id) => { + setProfileSolutions(profileSolutions.filter((solution => solution.id !== id))); + }; + + const renderItem = ({ index, style }) => { + return ( +
+ +
+ ); + }; + return ( <>
{ user.id? ( - + +

Total amount of solutions: {profileSolutions.length}

You can always log out from your account!

- + ) diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js index ce8384f..45c83bc 100644 --- a/src/pages/Profile/Registration/Registration.js +++ b/src/pages/Profile/Registration/Registration.js @@ -26,23 +26,25 @@ const Registration = ({ setUser }) => { }; const handleSubmit = () => { - 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.username === username)[0]; + 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.username === username)[0]; + setUser(user); + if (isRememberMe) { + localStorage.setItem('userId', user.id); + } + }); }); - }); + } }; return ( diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js index 83ec0dc..a41c47b 100644 --- a/src/pages/Timer/Timer.js +++ b/src/pages/Timer/Timer.js @@ -34,6 +34,10 @@ const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => { setPage('contribute'); }; + const handleLogin = () => { + setPage('profile'); + }; + const removeSolution = (id) => { setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); }; @@ -61,6 +65,12 @@ const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => {

+ {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 56d3084..82af6ec 100644 --- a/src/pages/Timer/TimerButton/TimerButton.js +++ b/src/pages/Timer/TimerButton/TimerButton.js @@ -8,7 +8,7 @@ const useStyles = makeStyles(theme => ({ textAlign: 'center', padding: theme.spacing(5), background: theme.palette.primary.main, - marginTop: theme.spacing(20), + marginTop: theme.spacing(10), }, })); -- cgit v1.2.3