feat: add sing in form

6 files changed, 78 insertions, 10 deletions

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<PropTypes> = ({ setUser }) => {
+  const classes = useStyles();
+  const inputRef = useRef<any>();
+
+  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 (
+    <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..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<string>('');
+  const [user, setUser] = React.useState<User | undefined>();
   const classes = useStyles();
 
-  get('/users').then(response => {
-    setId(response.data[0]._id);
-  });
-
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header setPage={setPage} />
       <div className={classes.root}>
         {
-          page === 'profile' && <ProfileInfo id={id} />
+          // eslint-disable-next-line
+          page === 'profile' && (!user ? <SignInForm setUser={setUser} /> : <ProfileInfo id={user?._id || ''} setUser={setUser} />)
         }
         <Feed page={page} />
       </div>
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"