From 3969face39ecc933b1cb9c7625be921d148552cb Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 14 Jun 2020 01:31:05 +0300 Subject: feat: add sing in form --- .eslintrc.json | 3 ++- src/Form/SignInForm.tsx | 59 +++++++++++++++++++++++++++++++++++++++++ src/ProfileInfo/ProfileInfo.tsx | 10 ++++++- src/index.tsx | 12 ++++----- src/types.d.ts | 1 + tsconfig.json | 3 ++- 6 files changed, 78 insertions(+), 10 deletions(-) create mode 100644 src/Form/SignInForm.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 7b16771..77aae50 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -23,6 +23,7 @@ "react/prop-types": 0, "react/no-children-prop": 0, "react/no-danger": 0, - "react/jsx-one-expression-per-line": 0 + "react/jsx-one-expression-per-line": 0, + "prefer-destructuring": ["error", {"object": false, "array": true}] } } diff --git a/src/Form/SignInForm.tsx b/src/Form/SignInForm.tsx new file mode 100644 index 0000000..07e8f02 --- /dev/null +++ b/src/Form/SignInForm.tsx @@ -0,0 +1,59 @@ +import React, { useRef } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Button from '@material-ui/core/Button'; +import { User } from '../types'; +import { get } from '../requests'; + +interface PropTypes { + setUser: (newUser: User) => void; +} + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + width: '25ch' + }, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center' + } +})); + +const SignInForm: React.FC = ({ setUser }) => { + const classes = useStyles(); + const inputRef = useRef(); + + const getUserProfile = name => { + get(`/users?name=${name}`).then(response => { + setUser(response.data[0]); + }); + }; + + const onClick = () => { + const value = inputRef.current.value; + localStorage.setItem('user', value); + getUserProfile(value); + }; + + if (localStorage.getItem('user') !== null) { + getUserProfile(localStorage.getItem('user')); + } + + return ( +
+

Sign In

+ + + + + ); +}; + +export default SignInForm; diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx index a7289df..693f550 100644 --- a/src/ProfileInfo/ProfileInfo.tsx +++ b/src/ProfileInfo/ProfileInfo.tsx @@ -1,11 +1,13 @@ import React, { useState } from 'react'; import { Avatar } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button/Button'; import { User } from '../types'; import { get } from '../requests'; interface PropTypes { id: string; + setUser: (newUser: User | undefined) => void; } const useStyles = makeStyles({ @@ -34,7 +36,7 @@ const useStyles = makeStyles({ } }); -const ProfileInfo: React.FC = ({ id }) => { +const ProfileInfo: React.FC = ({ id, setUser }) => { const [userInfo, setUserInfo] = useState(); get(`/users/${id}`).then(response => { @@ -43,6 +45,11 @@ const ProfileInfo: React.FC = ({ id }) => { const classes = useStyles(); + const LogOut = () => { + localStorage.clear(); + setUser(undefined); + }; + return (
@@ -60,6 +67,7 @@ const ProfileInfo: React.FC = ({ id }) => { Following
+ ); }; diff --git a/src/index.tsx b/src/index.tsx index adf44a5..98be8a7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,7 +13,8 @@ import Header from './Header/Header'; import Feed from './Feed/Feed'; import ProfileInfo from './ProfileInfo/ProfileInfo'; -import { get } from './requests'; +import SignInForm from './Form/SignInForm'; +import { User } from './types'; const theme = createMuiTheme({ palette: { @@ -33,20 +34,17 @@ const useStyles = makeStyles({ const App: React.FC = () => { const [page, setPage] = useState('feed'); - const [id, setId] = useState(''); + const [user, setUser] = React.useState(); const classes = useStyles(); - get('/users').then(response => { - setId(response.data[0]._id); - }); - return (
{ - page === 'profile' && + // eslint-disable-next-line + page === 'profile' && (!user ? : ) }
diff --git a/src/types.d.ts b/src/types.d.ts index 6cf4fdd..c9eaec5 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -1,6 +1,7 @@ export interface User { name: string; avatarUrl: string; + _id: string; } interface ImageData { url: string; diff --git a/tsconfig.json b/tsconfig.json index f2850b7..4dc65a1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react" + "jsx": "react", + "noImplicitAny": false }, "include": [ "src" -- cgit v1.2.3 From f338f879a08945056dc6d35d3bb333e7d6cb0840 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 03:04:38 +0300 Subject: style: resolve eslint errors --- .eslintrc.json | 4 ++-- src/Form/SignInForm.tsx | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 77aae50..75a787c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -19,11 +19,11 @@ "arrow-body-style": 0, "no-underscore-dangle": 0, "no-cond-assign": 0, + "no-nested-ternary": 0, "linebreak-style": 0, "react/prop-types": 0, "react/no-children-prop": 0, "react/no-danger": 0, - "react/jsx-one-expression-per-line": 0, - "prefer-destructuring": ["error", {"object": false, "array": true}] + "react/jsx-one-expression-per-line": 0 } } diff --git a/src/Form/SignInForm.tsx b/src/Form/SignInForm.tsx index 07e8f02..40352fe 100644 --- a/src/Form/SignInForm.tsx +++ b/src/Form/SignInForm.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({ const SignInForm: React.FC = ({ setUser }) => { const classes = useStyles(); - const inputRef = useRef(); + const inputRef = useRef(); const getUserProfile = name => { get(`/users?name=${name}`).then(response => { @@ -33,9 +33,11 @@ const SignInForm: React.FC = ({ setUser }) => { }; const onClick = () => { - const value = inputRef.current.value; - localStorage.setItem('user', value); - getUserProfile(value); + const value = inputRef.current?.value; + if (value) { + localStorage.setItem('user', value); + getUserProfile(value); + } }; if (localStorage.getItem('user') !== null) { -- cgit v1.2.3 From 4a8924b3d214b8f5b78f8e31f2a16a0d2d461b1a Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 03:05:04 +0300 Subject: feat: do not render feed under login form --- src/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 98be8a7..1362544 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -43,10 +43,19 @@ const App: React.FC = () => {
{ - // eslint-disable-next-line - page === 'profile' && (!user ? : ) + page === 'profile' + ? ( + user + ? ( + <> + + + + ) + : + ) + : } -
); -- cgit v1.2.3 From faab9a2cbc06e82f2ef09c1dadce6a94b34d1802 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 03:08:40 +0300 Subject: fix: always render same feed, add TODO --- src/Feed/Feed.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index 21bda5e..1b2a81e 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -20,9 +20,9 @@ const Feed: React.FC = ({ page }) => { const [polls, setPolls] = useState([]); const classes = useStyles(); - let endpoint: string; + let endpoint = '/polls'; + // TODO: Make this work if (page === 'feed') endpoint = '/polls'; - else if (page === 'profiles') endpoint = '/profiles'; useEffect(() => { get(endpoint).then(response => { -- cgit v1.2.3 From f13adb846e96d6a4b7f4edc00438253fd26aa031 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 03:13:51 +0300 Subject: fix: activate noImpicitAny rule --- tsconfig.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 4dc65a1..f2850b7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,8 +17,7 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react", - "noImplicitAny": false + "jsx": "react" }, "include": [ "src" -- cgit v1.2.3 From 3cff0821a8989afca1effb5420d8d0d55d513dbf Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 15:35:04 +0300 Subject: fix: fetch user correctly --- src/Form/SignInForm.tsx | 21 +++++++-------------- src/index.tsx | 12 +++++++++++- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/Form/SignInForm.tsx b/src/Form/SignInForm.tsx index 40352fe..efe85ed 100644 --- a/src/Form/SignInForm.tsx +++ b/src/Form/SignInForm.tsx @@ -26,24 +26,17 @@ const SignInForm: React.FC = ({ setUser }) => { const classes = useStyles(); const inputRef = useRef(); - const getUserProfile = name => { - get(`/users?name=${name}`).then(response => { - setUser(response.data[0]); - }); - }; - const onClick = () => { - const value = inputRef.current?.value; - if (value) { - localStorage.setItem('user', value); - getUserProfile(value); + const username = inputRef.current?.value; + if (username) { + get(`/users?name=${username}`).then(response => { + const user = response.data[0]; + setUser(user); + localStorage.setItem('userId', user._id); + }); } }; - if (localStorage.getItem('user') !== null) { - getUserProfile(localStorage.getItem('user')); - } - return (

Sign In

diff --git a/src/index.tsx b/src/index.tsx index 1362544..0855038 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { createMuiTheme, @@ -15,6 +15,7 @@ import ProfileInfo from './ProfileInfo/ProfileInfo'; import SignInForm from './Form/SignInForm'; import { User } from './types'; +import { get } from './requests'; const theme = createMuiTheme({ palette: { @@ -37,6 +38,15 @@ const App: React.FC = () => { const [user, setUser] = React.useState(); const classes = useStyles(); + useEffect(() => { + const userId = localStorage.getItem('userId'); + if (userId) { + get(`/users/${userId}`).then(response => { + setUser(response.data); + }); + } + }, []); + return ( -- cgit v1.2.3 From 0308460d896966a9fe5e510926f44bac112923bb Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 15:38:55 +0300 Subject: fix: add unique key prop to polls --- src/Feed/Feed.tsx | 4 ++-- src/types.d.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index 1b2a81e..d7bfce1 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -28,11 +28,11 @@ const Feed: React.FC = ({ page }) => { get(endpoint).then(response => { setPolls(response.data); }); - }, []); + }, [endpoint]); return (
- {polls.map(poll => )} + {polls.map(poll => )}
); }; diff --git a/src/types.d.ts b/src/types.d.ts index c9eaec5..31c2c74 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -9,6 +9,7 @@ interface ImageData { } export interface Poll { + _id: string; author: { name: string; avatarUrl: string; -- cgit v1.2.3