Implement login request

package.json

@@ -29,8 +29,8 @@
     "rsuite": "^4.8.0"
   },
   "scripts": {
-    "start": "PORT=8000 react-app-rewired start",
+    "start": "react-app-rewired start",
-    "dev": "BROWSER=firefox-developer-edition react-app-rewired start",
+    "dev": "PORT=8000 BROWSER=firefox-developer-edition react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject"

src/constants.js

@@ -0,0 +1 @@
+export const API_URL = 'http://localhost:3000/api';

src/http-common.js

@@ -1,10 +0,0 @@
-import axios from 'axios';
-
-export const API_URL = 'https://meeting-planner-backend.herokuapp.com';
-
-export const my_app = axios.create({
-	baseURL: API_URL,
-	headers: {
-		'Content-type': 'application/json',
-	},
-});

src/screens/Login.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import axios from 'axios';
+import { backend } from '../utils/http-common';
 import {
 	Panel,
 	Form,
@@ -8,55 +8,38 @@ import {
 	FormControl,
 	ControlLabel,
 	Button,
+	Message,
 } from 'rsuite';
 
 import { setUserSession } from '../utils/common';
 import NavBar from './../components/Navbar/NavBar';
 
 export default function Login({ title }) {
-	const [loading, setLoading] = useState(false);
+	const history = useHistory();
-	const [error, setError] = useState(null);
+
+	const [error, setError] = useState(false);
 	const [credentials, setCredentials] = useState({
 		email: '',
 		password: '',
 	});
 
-	const history = useHistory();
-
-	// handle input fields
 	const handleChange = (value, evt) => {
-		console.log(value, evt.target.name);
 		setCredentials({
 			...credentials,
 			[evt.target.name]: value,
 		});
 	};
 
-	// handle button click of login form
 	const handleLogin = () => {
-		setError(null);
+		backend
-		setLoading(true);
+			.post('/auth/login', credentials)
-		console.log(credentials.email, credentials.password);
-		axios
-			.post('http://localhost:3000/api/auth/login', credentials)
 			.then((response) => {
-				setLoading(false);
+				setUserSession(response.data.token, response.data.user);
-				console.log('RESPONSE', response);
+				history.push('/dashboard');
-				localStorage.setItem(
-					'data',
-					JSON.stringify({
-						token: response.data.token,
-						user: response.data.user,
-					}),
-				);
-				// TODO: Working redirection
-				history.push('');
 			})
 			.catch((error) => {
-				console.log('ERROR', error);
-				setLoading(false);
 				if (error.response.status === 401)
-					setError(error.response.data.message);
+					setError('Incorrect credentials. Please try again.');
 				else setError('Something went wrong. Please try again later.');
 			});
 	};
@@ -65,6 +48,7 @@ export default function Login({ title }) {
 		<>
 			<NavBar title={title} />
 			<Panel bordered style={boxStyle}>
+				{error && <Message type='error' description={error} />}
 				<Form>
 					<FormGroup>
 						<ControlLabel>Email</ControlLabel>

src/utils/common.js

@@ -1,23 +1,27 @@
-// return the user data from the session storage
+// return the user data from the local storage
 export const getUser = () => {
-	const userStr = sessionStorage.getItem('user');
+	const user = JSON.parse(localStorage.getItem('user'));
-	if (userStr) return JSON.parse(userStr);
+
+	if (user) return user;
 	else return null;
 };
 
-// return the token from the session storage
+// return the token from the local storage
 export const getToken = () => {
-	return sessionStorage.getItem('token') || null;
+	const token = JSON.parse(localStorage.getItem('token'));
+
+	if (token) return token;
+	else return null;
 };
 
-// remove the token and user from the session storage
+// remove the token and user from the local storage
 export const removeUserSession = () => {
-	sessionStorage.removeItem('token');
+	localStorage.removeItem('token');
-	sessionStorage.removeItem('user');
+	localStorage.removeItem('user');
 };
 
-// set the token and user from the session storage
+// set the token and user from the local storage
 export const setUserSession = (token, user) => {
-	sessionStorage.setItem('token', token);
+	localStorage.setItem('token', token);
-	sessionStorage.setItem('user', JSON.stringify(user));
+	localStorage.setItem('user', JSON.stringify(user));
 };

src/utils/http-common.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { API_URL } from '../constants';
+
+export const backend = axios.create({
+	baseURL: API_URL,
+	headers: {
+		'Content-type': 'application/json',
+	},
+});