feature(approvals-table): Approvals Table

[Start #168049950]

public/index.html

@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
     <link rel="apple-touch-icon" href="barefoot-logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/__tests__/redux/RequestsReducer.test.js

@@ -0,0 +1,61 @@
+import UserRequestsReducer from "../../redux/reducers/RequestsReducer";
+
+describe("UserRequestsReducer unit tests", () => {
+  it("should reduce user requests", () => {
+    const state = UserRequestsReducer(
+      { requestFound: false, requests: [] },
+      {
+        type: "GET_REQUESTS",
+        payload: [
+          {
+            id: 8,
+            user_id: 9,
+            request_type: "OneWay",
+            location_id: 3,
+            departure_date: "2019-11-16",
+            return_date: null,
+            destinations: [
+              {
+                room_id: 2,
+                check_in: "2019-11-18T15:16:38.447Z",
+                check_out: "2019-12-27T15:16:38.447Z",
+                destination_id: 4,
+                accomodation_id: 1,
+              },
+            ],
+            reason: "Visit Lagos",
+            status: "Pending",
+            createdAt: "2019-11-11T06:53:54.602Z",
+            updatedAt: "2019-11-11T06:53:54.602Z",
+          },
+        ],
+      },
+    );
+    expect(state).toEqual({
+      requestFound: true,
+      requests: [
+        {
+          id: 8,
+          user_id: 9,
+          request_type: "OneWay",
+          location_id: 3,
+          departure_date: "2019-11-16",
+          return_date: null,
+          destinations: [
+            {
+              room_id: 2,
+              check_in: "2019-11-18T15:16:38.447Z",
+              check_out: "2019-12-27T15:16:38.447Z",
+              destination_id: 4,
+              accomodation_id: 1,
+            },
+          ],
+          reason: "Visit Lagos",
+          status: "Pending",
+          createdAt: "2019-11-11T06:53:54.602Z",
+          updatedAt: "2019-11-11T06:53:54.602Z",
+        },
+      ],
+    });
+  });
+});

src/__tests__/redux/actions/UserRequestActions.test.js → src/__tests__/redux/actions/RequestActions.test.js

@@ -6,7 +6,7 @@ import moxios from "moxios";
 import configureStore from "redux-mock-store";
 import http from "../../../services/httpServices";
 import { GET_REQUESTS, GET_ERRORS } from "../../../redux/actions/actionType";
-import { getUserRequests } from "../../../redux/actions/UserRequestActions";
+import { getUserRequests } from "../../../redux/actions/RequestActions";
 import successresponse from "../../../__mocks__/__get_user_request_success__.json";
 import errorreponse from "../../../__mocks__/__get_user_request_failure__.json";
 import { token } from "../../../__mocks__/fixtures";

src/components/Router.js

@@ -3,7 +3,7 @@ import { Route, Switch } from "react-router-dom";
 import ProtectedRoute from "./protected-route/ProtectedRoute";
 import VerifyEmailPage from "./register-page/VerifyEmail";
 import {
-  LandingPage, LoginPage, NotFound, Register, UserRequests, Profile,
+  LandingPage, LoginPage, NotFound, Register, UserRequests, Profile, AdminRequests,
 } from "./index";
 
 const Router = () => (
@@ -12,6 +12,7 @@ const Router = () => (
     <Route path="/register" component={Register} />
     <Route path="/verify" component={VerifyEmailPage} />
     <ProtectedRoute path="/requests" component={UserRequests} />
+    <ProtectedRoute path="/allRequests" component={AdminRequests} />
     <Route exact path="/" component={LandingPage} />
     <ProtectedRoute exact path="/dashboard" component={Profile} />
     <Route component={NotFound} />

src/components/admin-requests/AdminRequests.js

@@ -0,0 +1,203 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-unused-state */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import { getMyUsersRequests } from "../../redux/actions/RequestActions";
+import { retrieveProfile } from "../../redux/actions/profileAction";
+import HomeNav from "../home-nav/HomeNav";
+import { Table } from "../table";
+import SideBar from "../side-bar";
+import Footer from "../footer";
+
+export class AdminRequests extends Component {
+  constructor() {
+    super();
+    this.state = {
+      requestFound: false,
+      requests: [],
+      errors: {},
+      postsPerPage: 4,
+      currentPage: 1,
+    };
+  }
+
+  componentDidMount() {
+    this.props.getMyUsersRequests();
+    this.props.retrieveProfile();
+  }
+
+  UNSAFE_componentWillReceiveProps({ requests, errors, user }) {
+    this.setState({ errors, requests, user });
+    if (errors.error && typeof errors.error !== "object") {
+      toast.error(errors.error, {
+        position: toast.POSITION.TOP_RIGHT,
+      });
+    }
+  }
+
+  render() {
+    const columns = [
+      "Avatar",
+      "Requester",
+      "Reason",
+      "Departure Date",
+      "Request Type",
+      "Requested on",
+      "Status",
+      "Actions",
+    ];
+
+    const { requests } = this.props.requests;
+    const { user } = this.props;
+    // Get current posts
+    const indexOfLastElement = this.state.currentPage * this.state.postsPerPage;
+    const indexOfFirstElement = indexOfLastElement - this.state.postsPerPage;
+    const currentElements = requests.slice(
+      indexOfFirstElement,
+      indexOfLastElement,
+    );
+    // Change page
+    const paginate = (currentPage) => this.setState({ currentPage });
+
+    const elements = currentElements.map((request) => (
+      <tr className="table-row" key={request.id}>
+        <td className="table-element" id={request.id}>
+          <img
+            className="user-avatar"
+            src={request.User.image_url}
+            alt={`${request.User.firstname} ${request.User.lastname}`}
+          />
+          <div className="tooltip">
+            <span>
+              Email:
+              {" "}
+              {request.User.email}
+            </span>
+            <br />
+            <span>
+              Phone:
+              {" "}
+              {request.User.phone}
+            </span>
+            <br />
+            <span>
+              Gender:
+              {" "}
+              {request.User.gender}
+            </span>
+            <br />
+            <span>
+              Address:
+              {" "}
+              {request.User.address}
+            </span>
+            <br />
+            <span>
+              Country:
+              {" "}
+              {request.User.country}
+            </span>
+            <br />
+            <span>
+              Language:
+              {" "}
+              {request.User.language}
+            </span>
+            <br />
+            <span>
+              Company:
+              {" "}
+              {request.User.company}
+            </span>
+            <br />
+            <span>
+              Department:
+              {" "}
+              {request.User.department}
+            </span>
+            <br />
+          </div>
+        </td>
+        <td className="table-element" id={request.id}>
+          {`${request.User.firstname} ${request.User.lastname}`}
+        </td>
+        <td className="table-element" id={request.id}>
+          {request.reason.substring(0, 12)}
+        </td>
+        <td className="table-element" id={request.id}>
+          {request.departure_date.substring(0, 10)}
+        </td>
+        <td className="table-element" id={request.id}>
+          {request.request_type}
+        </td>
+        <td className="table-element" id={request.id}>
+          {request.createdAt.substring(0, 10)}
+        </td>
+        <td className="table-element" id={request.id}>
+          {request.status}
+          <span className={`${request.status.toLowerCase()}-dot`} />
+        </td>
+        <td className="table-element">
+          <div
+            className={
+              request.status === "Pending"
+                ? "actions-dropdown"
+                : "actions-dropdown-disabled"
+            }
+          >
+            <button type="button" className="drop-btn">
+              Actions
+            </button>
+            <div className="dropdown-content">
+              <a href="#">Accept</a>
+              <a href="#">Reject</a>
+              <a href="#">View more</a>
+            </div>
+          </div>
+        </td>
+      </tr>
+    ));
+    return (
+      <>
+        <HomeNav user={user} />
+        <SideBar />
+        <div className="page-info">
+          <h1 className="page-title">All Requests</h1>
+          <h4 className="sub-title">
+            {" "}
+            <span className="sub-title-info">
+              <a href="#">Dashboard </a>
+            </span>
+            /
+            <span className="sub-title-info">
+              <a href="#"> All Requests</a>
+            </span>
+          </h4>
+        </div>
+        <Table
+          columns={columns}
+          elements={elements}
+          postsPerPage={this.state.postsPerPage}
+          totalPosts={requests.length}
+          paginate={paginate}
+          currentPageNumber={this.state.currentPage}
+        />
+        <Footer />
+      </>
+    );
+  }
+}
+const mapStateToProps = (state) => ({
+  requests: state.Requests,
+  errors: state.errors,
+  user: state.profile.user,
+});
+export default connect(mapStateToProps, { getMyUsersRequests, retrieveProfile })(AdminRequests);

src/components/footer/footer.scss

@@ -0,0 +1,10 @@
+@import "../../styles/variables";
+.footer{
+    background-color: $primaryColor;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    text-align: center;
+}

src/components/footer/index.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-tabs */
+import React from "react";
+import "./footer.scss";
+
+const Footer = () => (
+  <div className="footer">
+    <span>	&copy; Barefoot Nomad </span>
+  </div>
+);
+export default Footer;