<file_sep>import { API_BASE_URL } from './Constants';
import { authHeader } from '../Utilities';

export const employeeService = {
    getAllEmployees
};

function getAllEmployees() {
    const requestOptions = {
        method: 'GET',
        headers: authHeader()
    };

    return fetch(`${API_BASE_URL}/employees`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
    return response.text().then(text => {
        const data = text && JSON.parse(text);
        if (!response.ok) {
            const error = (data && data.message) || response.statusText;
            return Promise.reject(error);
        }

        return data;
    });
}<file_sep>import React from 'react';
import { Link } from 'react-router-dom';

export const Header = () => {
    return (
        <div className="row pt-4 pb-2 d-flex align-items-center header">
            <h1 className="col-6"><Link to="/">RS Solutions</Link></h1>
            <div className="col-6 text-right">
                <Link to="/login" className="logout">Logout</Link>
            </div>
        </div>
    )
}<file_sep>import { employeeConstants } from '../Constants';

export function employees(state = {}, action) {
  switch (action.type) {
    case employeeConstants.GET_ALL_EMPLOYEES_REQUEST:
      return { loading: true };
    case employeeConstants.GET_ALL_EMPLOYEES_SUCCESS:
      return {
        list: action.employees
      };
    case employeeConstants.GET_ALL_EMPLOYEES_FAILURE:
      return {
        error: action.error
      };
    default:
      return state
  }
}<file_sep>import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { Header } from '../../Components';
import { employeeActions } from '../../State/Actions';

class DashboardPage extends React.Component {
    componentDidMount() {
        this.props.getAllEmployees();
    }

    render() {
        const { employee, employees } = this.props;
        return (
            <>
                <Header/>
                <div className="mt-3">
                    <h3>Employee List</h3>
                    {employees.loading && <em>Loading employees...</em>}
                    {employees.error && <span className="text-danger">ERROR: {employees.error}</span>}
                    {employees.list &&
                        <div className="table-responsive mt-3">
                            <table className="table w-100">
                                <thead>
                                    <tr>
                                        <th>Full Name</th>
                                        <th>Age</th>
                                        <th>Gender</th>
                                        <th>Email Id</th>
                                        <th>Phone Number</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {employees.list.map((employee, index) =>
                                        <tr key={employee.id}>
                                            <td>{employee.name}</td>
                                            <td>{employee.age}</td>
                                            <td>{employee.gender}</td>
                                            <td>{employee.email}</td>
                                            <td>{employee.phoneNo}</td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    }
                </div>
            </>
        );
    }
}

function mapState(state) {
    const { employees } = state;
    return { employees };
}

const actionCreators = {
    getAllEmployees: employeeActions.getAllEmployees
}

const connectedDashboardPage = connect(mapState, actionCreators)(DashboardPage);
export { connectedDashboardPage as DashboardPage };<file_sep>import { combineReducers } from 'redux';

import { registration } from './RegistrationReducer';
import { login } from './LoginReducer';
import { employees } from './EmployeeReducer';

const rootReducer = combineReducers({
  registration,
  login,
  employees
});

export default rootReducer;<file_sep>import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

import './App.css';

import { PrivateRoute } from './Components';

import { RegisterPage } from './Pages/Register';
import { LoginPage } from './Pages/Login';
import { DashboardPage } from './Pages/Dashboard';

import { history } from './Utilities';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="container-fluid">
                <div className="container">
                    <div className="col-sm-12 col-sm-offset-2">
                        <Router history={history}>
                            <Switch>
                                <PrivateRoute exact path="/" component={DashboardPage} />
                                <Route path="/login" component={LoginPage} />
                                <Route path="/register" component={RegisterPage} />
                                <Redirect from="*" to="/" />
                            </Switch>
                        </Router>
                    </div>
                </div>
            </div>
        );
    }
}

const connectedApp = connect()(App);
export { connectedApp as App };
<file_sep>export const employeeConstants = {
    GET_ALL_EMPLOYEES_REQUEST: 'GET_ALL_EMPLOYEES',
    GET_ALL_EMPLOYEES_SUCCESS: 'GET_ALL_EMPLOYEES_SUCCESS',
    GET_ALL_EMPLOYEES_FAILURE: 'GET_ALL_EMPLOYEES_FAILURE',
};
