[Frontend] Implement loadUser method to dynamically load home page

React-frontend/src/App.js

@@ -1,29 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import './App.css';
 import { Route, Switch } from 'react-router-dom';
 import LoginPage from './pages/LoginPage';
 import HomePage from './pages/HomePage';
 import AboutPage from './pages/AboutPage';
-import ContactPage from './pages/ContactPage'
-import Alert from './components/core/Alert'
+import ContactPage from './pages/ContactPage';
+import Alert from './components/core/Alert';
 
 import store from './store/store';
+import { loadUser } from './store/actions/auth';
+
+const App = () => {
+  useEffect(() => {
+    store.dispatch(loadUser());
+  }, []);
 
-function App() {
   return (
     <Provider store={store}>
-      <div className="containerBI">
+      <div className='containerBI'>
         <Alert />
         <Switch>
-          <Route path="/login" exact component={LoginPage} />
+          <Route path='/login' exact component={LoginPage} />
           <Route path='/' exact component={HomePage} />
           <Route path='/about' exact component={AboutPage} />
           <Route path='/contact' exact component={ContactPage} />
         </Switch>
       </div>
     </Provider>
   );
-}
+};
 
 export default App;

React-frontend/src/pages/HomePage.js

@@ -1,12 +1,20 @@
-import React from 'react'
-import Layout from '../components/core/Layout'
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+import Layout from '../components/core/Layout';
 
 const HomePage = () => {
-    return (
-        <Layout>
-            <h1>Home Page</h1>
-        </Layout>
-    )
-}
-
-export default HomePage
+  const { isAuthenticated, isLoading } = useSelector(state => state.auth);
+
+  if (!isLoading && !isAuthenticated) {
+    return <Redirect to='/login' />;
+  }
+
+  return (
+    <Layout>
+      <h1>Home Page</h1>
+    </Layout>
+  );
+};
+
+export default HomePage;

React-frontend/src/store/actions/auth.js

@@ -3,23 +3,54 @@ import { setAlert } from './alerts';
 
 export const LOGIN = 'LOGIN';
 export const LOGOUT = 'LOGOUT';
+export const AUTHENTICATE = 'AUTHENTICATE';
 export const TOGGLE_AUTH_LOADING = 'TOGGLE_AUTH_LOADING';
 
 export const login = loginData => async dispatch => {
   try {
     dispatch({ type: TOGGLE_AUTH_LOADING, payload: true });
-    await axios.post('/login', loginData, {
+    const res = await axios.post('/login', loginData, {
       headers: {
         'Content-Type': 'application/json',
       },
     });
-    dispatch({ type: LOGIN, payload: loginData });
+    const token = res.data.token;
+    localStorage.setItem('openmf-token', token);
+    const user = await fetchProfle(token);
+    dispatch({ type: LOGIN, payload: { user, token } });
   } catch (error) {
     dispatch({ type: TOGGLE_AUTH_LOADING, payload: false });
     dispatch(setAlert('Server error', 'danger'));
   }
 };
 
 export const logout = () => dispatch => {
+  localStorage.removeItem('openmf-token');
   dispatch({ type: LOGOUT });
 };
+
+export const loadUser = () => async dispatch => {
+  try {
+    dispatch({ type: TOGGLE_AUTH_LOADING, payload: true });
+    const token = localStorage.getItem('openmf-token');
+    if (!token) {
+      dispatch({ type: TOGGLE_AUTH_LOADING, payload: false });
+      return;
+    } else {
+      const profile = await fetchProfle(token);
+      dispatch({ type: AUTHENTICATE, payload: profile });
+    }
+  } catch (error) {
+    dispatch({ type: TOGGLE_AUTH_LOADING, payload: false });
+  }
+};
+
+const fetchProfle = async token => {
+  const res = await axios.get('/user/profile', {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  const profile = res.data;
+  return profile;
+};

React-frontend/src/store/reducers/auth.js

@@ -1,9 +1,15 @@
-import { LOGIN, LOGOUT, TOGGLE_AUTH_LOADING } from '../actions/auth';
+import {
+  LOGIN,
+  LOGOUT,
+  TOGGLE_AUTH_LOADING,
+  AUTHENTICATE,
+} from '../actions/auth';
 
 const initialState = {
   isAuthenticated: false,
   isLoading: false,
   user: null,
+  token: null,
 };
 
 const reducer = (state = initialState, action) => {
@@ -14,7 +20,7 @@ const reducer = (state = initialState, action) => {
         ...state,
         isAuthenticated: true,
         isLoading: false,
-        user: payload,
+        ...payload,
       };
     case LOGOUT:
       return {
@@ -23,6 +29,13 @@ const reducer = (state = initialState, action) => {
         isAuthenticated: false,
         isLoading: false,
       };
+    case AUTHENTICATE:
+      return {
+        ...state,
+        user: payload,
+        isAuthenticated: true,
+        isLoading: false,
+      };
     case TOGGLE_AUTH_LOADING:
       return {
         ...state,