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/pages/Profile/Profile.js | 45 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/pages/Profile/Profile.js (limited to 'src/pages') 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/pages/Profile/Profile.js | 26 +++++----- src/pages/Profile/Registration/Registration.js | 66 ++++++++++++++++++++++++++ src/pages/Timer/Timer.js | 9 +--- 3 files changed, 80 insertions(+), 21 deletions(-) create mode 100644 src/pages/Profile/Registration/Registration.js (limited to 'src/pages') 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/pages/Profile/Profile.js | 11 ++++++++++- src/pages/Profile/Registration/Registration.js | 20 ++++++++++++++++---- 2 files changed, 26 insertions(+), 5 deletions(-) (limited to 'src/pages') 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(-) (limited to 'src/pages') 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