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 --- src/Form/SignInForm.tsx | 59 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/Form/SignInForm.tsx (limited to 'src/Form/SignInForm.tsx') 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; -- 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 --- src/Form/SignInForm.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'src/Form/SignInForm.tsx') 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 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 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) (limited to 'src/Form/SignInForm.tsx') 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

-- cgit v1.2.3