diff options
| -rw-r--r-- | .eslintrc.json | 1 | ||||
| -rw-r--r-- | src/Feed/Feed.tsx | 8 | ||||
| -rw-r--r-- | src/Form/SignInForm.tsx | 54 | ||||
| -rw-r--r-- | src/ProfileInfo/ProfileInfo.tsx | 10 | ||||
| -rw-r--r-- | src/index.tsx | 31 | ||||
| -rw-r--r-- | src/types.d.ts | 2 |
6 files changed, 94 insertions, 12 deletions
diff --git a/.eslintrc.json b/.eslintrc.json index 7b16771..75a787c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -19,6 +19,7 @@ "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, diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index 21bda5e..d7bfce1 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -20,19 +20,19 @@ const Feed: React.FC<PropTypes> = ({ page }) => { const [polls, setPolls] = useState<Poll[]>([]); 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 => { setPolls(response.data); }); - }, []); + }, [endpoint]); return ( <div className={classes.root}> - {polls.map(poll => <PollCard poll={poll} />)} + {polls.map(poll => <PollCard poll={poll} key={poll._id} />)} </div> ); }; diff --git a/src/Form/SignInForm.tsx b/src/Form/SignInForm.tsx new file mode 100644 index 0000000..efe85ed --- /dev/null +++ b/src/Form/SignInForm.tsx @@ -0,0 +1,54 @@ +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<PropTypes> = ({ setUser }) => { + const classes = useStyles(); + const inputRef = useRef<HTMLInputElement>(); + + const onClick = () => { + 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); + }); + } + }; + + return ( + <form className={classes.root} noValidate autoComplete="off"> + <h1>Sign In</h1> + <TextField inputRef={inputRef} id="standard-basic" label="Login" /> + <TextField + id="standard-password-input" + label="Password" + type="password" + /> + <Button variant="contained" onClick={onClick}>submit</Button> + </form> + ); +}; + +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<PropTypes> = ({ id }) => { +const ProfileInfo: React.FC<PropTypes> = ({ id, setUser }) => { const [userInfo, setUserInfo] = useState<User>(); get(`/users/${id}`).then(response => { @@ -43,6 +45,11 @@ const ProfileInfo: React.FC<PropTypes> = ({ id }) => { const classes = useStyles(); + const LogOut = () => { + localStorage.clear(); + setUser(undefined); + }; + return ( <div> <Avatar className={classes.avatar} src={userInfo?.avatarUrl} /> @@ -60,6 +67,7 @@ const ProfileInfo: React.FC<PropTypes> = ({ id }) => { Following </div> </div> + <Button variant="contained" onClick={LogOut}>Log Out</Button> </div> ); }; diff --git a/src/index.tsx b/src/index.tsx index adf44a5..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, @@ -13,6 +13,8 @@ import Header from './Header/Header'; import Feed from './Feed/Feed'; import ProfileInfo from './ProfileInfo/ProfileInfo'; +import SignInForm from './Form/SignInForm'; +import { User } from './types'; import { get } from './requests'; const theme = createMuiTheme({ @@ -33,12 +35,17 @@ const useStyles = makeStyles({ const App: React.FC = () => { const [page, setPage] = useState('feed'); - const [id, setId] = useState<string>(''); + const [user, setUser] = React.useState<User | undefined>(); const classes = useStyles(); - get('/users').then(response => { - setId(response.data[0]._id); - }); + useEffect(() => { + const userId = localStorage.getItem('userId'); + if (userId) { + get(`/users/${userId}`).then(response => { + setUser(response.data); + }); + } + }, []); return ( <ThemeProvider theme={theme}> @@ -46,9 +53,19 @@ const App: React.FC = () => { <Header setPage={setPage} /> <div className={classes.root}> { - page === 'profile' && <ProfileInfo id={id} /> + page === 'profile' + ? ( + user + ? ( + <> + <ProfileInfo id={user?._id || ''} setUser={setUser} /> + <Feed page={page} /> + </> + ) + : <SignInForm setUser={setUser} /> + ) + : <Feed page={page} /> } - <Feed page={page} /> </div> </ThemeProvider> ); diff --git a/src/types.d.ts b/src/types.d.ts index 6cf4fdd..31c2c74 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; @@ -8,6 +9,7 @@ interface ImageData { } export interface Poll { + _id: string; author: { name: string; avatarUrl: string; |