From 146947a665dbc1d2960d2062a22a106de0c71062 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 21 Mar 2020 15:44:40 +0300
Subject: chore: migrate profile page to Typescript :label:
---
src/pages/Profile/Profile.js | 88 ------------------------
src/pages/Profile/Profile.tsx | 95 ++++++++++++++++++++++++++
src/pages/Profile/Registration.tsx | 85 +++++++++++++++++++++++
src/pages/Profile/Registration/Registration.js | 80 ----------------------
4 files changed, 180 insertions(+), 168 deletions(-)
delete mode 100644 src/pages/Profile/Profile.js
create mode 100644 src/pages/Profile/Profile.tsx
create mode 100644 src/pages/Profile/Registration.tsx
delete mode 100644 src/pages/Profile/Registration/Registration.js
(limited to 'src/pages/Profile')
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
deleted file mode 100644
index 65c3734..0000000
--- a/src/pages/Profile/Profile.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import {
- Button,
- makeStyles,
-} from '@material-ui/core';
-
-import Registration from './Registration/Registration';
-import {
- Window,
- ContentSection,
- SmartList,
-} from 'react-benzin';
-
-import SolutionCard from '../../components/SolutionCard/SolutionCard';
-
-import { get } from '../../requests';
-
-
-const useStyles = makeStyles(theme => ({
- primary: {
- padding: theme.spacing(4),
- },
- cell: {
- padding: theme.spacing(5),
- },
-}));
-
-
-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 (
- <div style={style} className={classes.cell}>
- <SolutionCard data={profileSolutions[index]} removeThisCard={removeSolution} />
- </div>
- );
- };
-
- return (
- <>
- <Window type="primary">
- <div className={classes.primary}>
- { user.id? (
- <ContentSection sectionName={`Welcome back, ${user.username}!`}>
- <p> Total amount of solutions: {profileSolutions.length} </p>
- <p> You can always log out from your account! </p>
- <Button variant="contained" color="secondary" onClick={handleLogout}>
- Logout
- </Button>
- </ContentSection>
- ): (
- <Registration setUser={setUser} />
- )
- }
- </div>
- </Window>
- <Window type="secondary" name="History">
- <SmartList
- itemSize={270}
- itemCount={profileSolutions.length}
- renderItem={renderItem}
- />
- </Window>
- </>
- )
-};
-
-
-export default Profile;
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
new file mode 100644
index 0000000..bbf55f1
--- /dev/null
+++ b/src/pages/Profile/Profile.tsx
@@ -0,0 +1,95 @@
+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<PropTypes> = ({ user, setUser }) => {
+ const classes = useStyles();
+
+ const [profileSolutions, setProfileSolutions] = useState<Solution[]>([]);
+
+ 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: number): void => {
+ setProfileSolutions(profileSolutions.filter((solution => solution.id !== id)));
+ };
+
+ const renderItem: React.FC<RenderPropTypes> = ({ index, style }) => {
+ return (
+ <div style={style} className={classes.cell}>
+ <SolutionCard data={profileSolutions[index]} removeThisCard={removeSolution} />
+ </div>
+ );
+ };
+
+ return (
+ <>
+ <Window type="primary">
+ <div className={classes.primary}>
+ { user.id? (
+ <ContentSection sectionName={`Welcome back, ${user.username}!`}>
+ <p> Total amount of solutions: {profileSolutions.length} </p>
+ <p> You can always log out from your account! </p>
+ <Button variant="contained" color="secondary" onClick={handleLogout}>
+ Logout
+ </Button>
+ </ContentSection>
+ ): (
+ <Registration setUser={setUser} />
+ )
+ }
+ </div>
+ </Window>
+ <Window type="secondary" name="History">
+ <SmartList
+ itemSize={270}
+ itemCount={profileSolutions.length}
+ renderItem={renderItem}
+ />
+ </Window>
+ </>
+ )
+};
+
+
+export default Profile;
diff --git a/src/pages/Profile/Registration.tsx b/src/pages/Profile/Registration.tsx
new file mode 100644
index 0000000..30e357d
--- /dev/null
+++ b/src/pages/Profile/Registration.tsx
@@ -0,0 +1,85 @@
+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<PropTypes> = ({ setUser }) => {
+
+ const [username, setUsername] = useState<string>('');
+ const [isRememberMe, setIsRememberMe] = useState<boolean>(false);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+ setUsername(event.target.value);
+ };
+
+ const handleCheck = (event: React.ChangeEvent<HTMLInputElement>): void => {
+ setIsRememberMe(event.target.checked);
+ };
+
+ const handleSubmit = () => {
+ 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 (
+ <ContentSection sectionName="Tell us who you are">
+ <p> Choose yourself a username to track your progress and compete with others: </p>
+ <Grid container direction="column">
+ <Grid item>
+ <TextField
+ variant="outlined"
+ color="secondary"
+ label="Username"
+ value={username}
+ onChange={handleChange}
+ />
+ </Grid>
+ <Grid item>
+ <FormControlLabel
+ control={<Checkbox color="secondary" onChange={handleCheck} />}
+ label="Remember me"
+ />
+ </Grid>
+ <Grid item>
+ <Button variant="contained" color="secondary" onClick={handleSubmit}>
+ Submit!
+ </Button>
+ </Grid>
+ </Grid>
+ </ContentSection>
+ );
+};
+
+
+export default Registration;
diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js
deleted file mode 100644
index b2d5503..0000000
--- a/src/pages/Profile/Registration/Registration.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {useState} from 'react';
-
-import {
- TextField,
- Button,
- Checkbox,
- FormControlLabel,
- Grid,
-} from '@material-ui/core';
-
-import { ContentSection } from 'react-benzin';
-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 = () => {
- 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 (
- <ContentSection sectionName="Tell us who you are">
- <p> Choose yourself a username to track your progress and compete with others: </p>
- <Grid container direction="column">
- <Grid item>
- <TextField
- variant="outlined"
- color="secondary"
- label="Username"
- value={username}
- onChange={handleChange}
- />
- </Grid>
- <Grid item>
- <FormControlLabel
- control={<Checkbox color="secondary" onChange={handleCheck} />}
- label="Remember me"
- />
- </Grid>
- <Grid item>
- <Button variant="contained" color="secondary" onClick={handleSubmit}>
- Submit!
- </Button>
- </Grid>
- </Grid>
- </ContentSection>
- );
-};
-
-
-export default Registration;
--
cgit v1.2.3