refactored signin component to include ts types

Author: akbuma

src/components/login/SignIn.tsx

@@ -1,9 +1,8 @@
 import React, { Component, useState, useEffect } from 'react';
-//import { connect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import { setLoginState } from '../../actions/actionCreators';
 import { useSelector, useDispatch } from 'react-redux';
-import { Link as RouteLink, withRouter, useHistory } from 'react-router-dom';
+import { Link as RouteLink, withRouter, useHistory, RouteComponentProps } from 'react-router-dom';
 
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
@@ -18,28 +17,7 @@ import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
-import { render } from 'enzyme';
-
-import Cookies from 'js-cookie';
 import { sessionIsCreated } from '../../helperFunctions/auth';
-/*
-const mapStateToProps = (store: any) => ({
-  username: store.credentials.username,
-  password: store.credentials.password
-});
-
-const mapDispatchToProps = (dispatch: any) => ({
-  setUsername: (username: string) => dispatch(setUsername(username)),
-  setPassword: (password: string) => dispatch(setPassword(password))
-  // login: (username: string, password: string) => dispatch(login(username, password)),
-  // signup: (username: string, password: string) => dispatch(signup(username, password)),
-});
-
-interface LoginProps extends LoginInt {
-  setUsername(username: string): void;
-  setPassword(username: string): void;
-}
-*/
 
 function Copyright() {
   return (
@@ -74,25 +52,16 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SignIn: React.FC<LoginInt> = props => {
+const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const classes = useStyles();
   const s = useSelector(state => state);
-  const history = useHistory();
 
   const dispatch = useDispatch();
 
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-  console.log('state on load: ', s.auth)
-
-  /*
-  useEffect(() => {
-    console.log('triggered')
-    if(s.auth) history.push('/signup'); // push to the main app
-  }, []);
-  */
 
-  const handleChange = e => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
     switch (e.target.name) {
       case 'username':
@@ -104,47 +73,18 @@ const SignIn: React.FC<LoginInt> = props => {
     }
   };
 
-  const handleLogin = e => {
+  const handleLogin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     console.log('click fired on handleLogin');
     sessionIsCreated(username, password).then(isLoggedIn => {
       if(isLoggedIn) {
         console.log('session created')
         dispatch(setLoginState()); // changes login state to true
-        props.history.push('/signup');
+        props.history.push('/');
       } else {
         console.log('invalid login')
       }
     });
-    /*
-    const body = JSON.stringify({
-      username,
-      password
-    });
-    fetch('http://localhost:8080/login', {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body
-    })
-      .then(res => {
-        return res.json();
-      })
-      .then(data => {
-        console.log('the data', data);
-        if (data.sessionId && typeof data.sessionId === 'string') {
-          //alert(data); // these alerts cause the app to crash on mac
-          console.log('success')
-          dispatch(setLoginState()); // changes login state to true
-          props.history.push('/signup');
-        } else {
-          console.log('err');
-        }
-      })
-      .catch(err => console.log(err));
-      */
   };
 
   return (
@@ -193,7 +133,7 @@ const SignIn: React.FC<LoginInt> = props => {
           variant="contained"
           color="primary"
           className={classes.submit}
-          onClick={handleLogin}
+          onClick={e => handleLogin(e)}
         >
           Sign In
         </Button>

src/helperFunctions/auth.ts

@@ -1,10 +1,3 @@
-import Cookies from 'js-cookie';
-
-// check for a cookie when and redirect to main app when first loaded
-export const hasValidSession = () => {
-  // Cookies.get('ssid');
-}
-
 export const sessionIsCreated = (username: string, password: string): Promise<boolean> => {
   const body = JSON.stringify({
     username,

src/index.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './components/App.tsx';
 import store from './store';
+import Cookies from 'js-cookie';
 
 import SignIn from './components/login/SignIn.tsx';
 import SignUp from './components/login/SignUp.tsx';
@@ -13,24 +14,9 @@ import {
   Redirect, 
   Switch } from 'react-router-dom';
 
-/*
-ReactDOM.render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
-  document.getElementById('app'),
-);
-*/
-
-/*
-The first file that loads 
-If cookie is valid, send the user to app and set the login boolean to true
-If the cookie has expired, send the user back to login
-*/
-
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route {...rest} render={(props) => (
-    false
+    Cookies.get('ssid')
       ? <Component {...props} />
       : <Redirect to='/login' />
   )} />
@@ -40,10 +26,8 @@ ReactDOM.render(
   <Provider store={store}>
     <Router>
       <Switch>
-        {/* change route to signin later for official release */}
         <Route exact path="/login" component={SignIn} />
         <Route exact path="/signup" component={SignUp} />
-        {/* <Route exact path="/app" component={App} /> */}
         <PrivateRoute path="/" component={App} />
       </Switch>
     </Router>