Merge branch 'develop' into bg-expired-token-issue-170147517

src/__tests__/components/accommodation/AnAccommodationPage.test.js

@@ -5,9 +5,10 @@ import { Provider } from "react-redux";
 import { mount, shallow } from "enzyme";
 import { MemoryRouter } from "react-router-dom";
 import mockStore from "../../../__mocks__/mockStore";
+import { MapContainer } from '../../../components/shared/map/MapContainer';
 import { accommodation, accommodationNoImageAndRooms, user, messages } from "../../../__mocks__/fixtures";
 import AccPage, {
-  AnAccommodationPage,
+  AnAccommodationPage, mapStateToProps
 } from "../../../components/accommodation/AnAccommodationPage";
 
 const props = {
@@ -82,7 +83,35 @@ describe("An Accommodation page", () => {
       accPage.setState(state);
       accPage.setProps({ accId: 1 });
     });
-
+
+    test("should test map state to props", () => {
+      const state = { accommodations: { accommodation: [{}], averageRatings: 1, accommodationsLikes: 1 }, profile: { user: {} } }
+      const ownProps = { match: { params: { acc_id: 1 } } }
+      mapStateToProps(state, ownProps);
+    });
+
+    test("should test the map container", () => {
+      const props = {
+        lat: -1.2884,
+        lng: 36.8233,
+        name: 'Hotel Name'
+      };
+
+      const state = {
+        showingInfoWindow: true, // Hides or the shows the infoWindow
+        activeMarker: {}, // Shows the active marker upon click
+        selectedPlace: { name: "" }, // Shows the infoWindow to the selected place upon a marker
+      };
+
+      const mapContainer = shallow(<MapContainer {...props} />);
+      mapContainer.setState(state);
+      const marker = mapContainer.find('Marker');
+      const infoWindow = mapContainer.find('InfoWindow');
+      console.log('the info window is : ', infoWindow.debug());
+      // marker.simulate('click');
+      infoWindow.simulate('close');
+    });
+
   });
 
 });

src/__tests__/components/register-page/__snapshots__/registerPage.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RegisterPage /> should render the register component 1`] = `ShallowWrapper {}`;

src/__tests__/components/register-page/registerPage.test.js

@@ -5,6 +5,7 @@
 import React from "react";
 import { mount } from "enzyme";
 import { Register, mapStateToProps as mapStateToPropsNew } from '../../../components/register-page/RegisterPage';
+import { shallow } from 'enzyme';
 
 describe("<RegisterPage />", () => {
   const wrapper = mount(<Register />);
@@ -18,6 +19,11 @@ describe("<RegisterPage />", () => {
   props.displayVerifyConfirmation = true;
   wrapper2.setProps(props);
 
+  it('should render the register component', () => {
+    const localWrapper = shallow(<Register />);
+    expect(localWrapper).toMatchSnapshot();
+  });
+
   it("should taste the errors functionality", () => {
     const event = { target: { name: 'firstname', value: 'am' } };
     const input = wrapper.find('input[name="firstname"]');

src/__tests__/components/request-page/RequestPage.test.js

@@ -25,6 +25,7 @@ const mocks = {
   getAccomodations: () => jest.fn(),
   getRooms: () => jest.fn(),
   getUserRequests: () => jest.fn(),
+  getMyUsersRequests: () => jest.fn(),
 };
 const store = (state) => ({
   getState: () => state,
@@ -223,6 +224,7 @@ describe("<request page />", () => {
     deleteRequest: jest.fn(),
     editRequest: jest.fn(),
     getUserRequests: jest.fn(),
+    getMyUsersRequests: jest.fn(),
     getAccomodations: jest.fn(),
     getRooms: jest.fn(),
     match: {
@@ -1066,7 +1068,9 @@ describe("<request page />", () => {
       },
     },
     currentUser: {
-      auto_fill: true
+      auto_fill: true,
+      id: 1,
+      role_value: 1
     }
   }
 
@@ -1087,6 +1091,7 @@ describe("<request page />", () => {
     rooms: [{ id: 0, name: "Choose a room" }],
     currentRooms: [{ id: 0, name: "Choose a room" }],
     profile: { user: { auto_fill: true } },
+    isMyRequests: true
   };
 
   const initialStore = store({
@@ -1100,21 +1105,33 @@ describe("<request page />", () => {
   it('it should mount the request page', () => {
     const state = mapStateToProps({ profile: { user: {} } });
     wrapper = shallow(<RequestPage {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('it should mount the request page as a travel admin logged in', () => {
+    const state = mapStateToProps({ profile: { user: {} } });
+    const propsAsAdmin = { ...props };
+    propsAsAdmin.currentUser.role_value = 4;
+    wrapper = shallow(<RequestPage {...propsAsAdmin} />);
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('it should test for the populate request page', () => {
     wrapper = shallow(<SingleRequestComponent {...props} />);
     wrapper.setProps({ user: {} });
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('it should test for the populate request page with props new', () => {
     wrapper = shallow(<SingleRequestComponent {...props} />);
     wrapper.setProps({ user: {}, match: { params: { id: "new" } } });
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('should test for the new request', () => {
     props.match.params.id = "new";
     wrapper = shallow(<RequestPage {...props} />);
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('should test for the invalid id when populating the request', () => {

src/__tests__/components/request-page/__snapshots__/RequestPage.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<request page /> it should mount the request page 1`] = `ShallowWrapper {}`;
+
+exports[`<request page /> it should mount the request page as a travel admin logged in 1`] = `ShallowWrapper {}`;
+
+exports[`<request page /> it should test for the populate request page 1`] = `ShallowWrapper {}`;
+
+exports[`<request page /> it should test for the populate request page with props new 1`] = `ShallowWrapper {}`;
+
+exports[`<request page /> should test for the new request 1`] = `ShallowWrapper {}`;

src/components/accommodation/AnAccommodationPage.js

@@ -152,7 +152,7 @@ AnAccommodationPage.propTypes = {
   getAccommodation: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = (state, ownProps) => ({
+export const mapStateToProps = (state, ownProps) => ({
   accId: ownProps.match.params.acc_id,
   accommodation: state.accommodations.accommodation,
   user: state.profile.user,

src/components/admin-requests/AdminRequests.js

@@ -8,19 +8,20 @@
 /* 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 moment from 'moment';
-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';
-import Modal from '../shared/modal/Modal';
-import '../../styles/modal.scss';
-import PanelHeader from '../table/PanelHeader';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import moment from "moment";
+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";
+import Modal from "../shared/modal/Modal";
+import "../../styles/modal.scss";
+import PanelHeader from "../table/PanelHeader";
+import { Link } from 'react-router-dom';
 
 export class AdminRequests extends Component {
   constructor() {
@@ -31,7 +32,10 @@ export class AdminRequests extends Component {
       errors: {},
       postsPerPage: 4,
       currentPage: 1,
-      user: {}
+      user: {},
+      searchQuery: "",
+      filtered: [],
+      searchBy: "",
     };
   }
 
@@ -52,6 +56,14 @@ export class AdminRequests extends Component {
     }
   }
 
+  handleSearch = query => {
+    this.setState({ searchQuery: query, currentPage: 1 });
+  };
+
+  handleSelect = (input) => {
+    this.setState({ searchBy: input.target.value });
+  }
+
   render() {
     const columns = [
       'Avatar',
@@ -64,12 +76,23 @@ export class AdminRequests extends Component {
       'Actions'
     ];
 
+    const { searchQuery } = this.state;
     const { requests } = this.props.requests;
+    const { searchBy } = this.state;
+
+    // search by status, etc...
+    let filtered = requests;
+    if (searchQuery && (searchBy !== "")) {
+      filtered = requests.filter(r => r[searchBy].toLowerCase().includes(searchQuery.toLowerCase()));
+    } else {
+      filtered = 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(
+    const currentElements = filtered.slice(
       indexOfFirstElement,
       indexOfLastElement
     );
@@ -108,7 +131,18 @@ export class AdminRequests extends Component {
           {`${request.User.firstname} ${request.User.lastname}`}
         </td>
         <td className="table-element" id={request.id}>
-          {request.reason.substring(0, 12)}
+          {/* {request.reason.substring(0, 12)} */}
+          {(
+            <p
+              className="comment-content"
+              dangerouslySetInnerHTML={{
+                __html: request.reason.substring(0, 12).replace(
+                  /(<? *script)/gi,
+                  "illegalscript",
+                ),
+              }}
+            />
+          )}
         </td>
         <td className="table-element" id={request.id}>
           {request.departure_date.substring(0, 10)}
@@ -147,7 +181,7 @@ export class AdminRequests extends Component {
                 action="reject"
                 status="Rejected"
               />
-              <a href={`allrequests/${request.id}`}>View more</a>
+              <Link to={`allrequests/${request.id}`}>View more</Link>
             </div>
           </div>
         </td>
@@ -157,19 +191,22 @@ export class AdminRequests extends Component {
       <>
         <HomeNav user={user} />
         <SideBar userRole={user.role_value} />
-          <PanelHeader
-            pageTitle="All Requests"
-            setPageNumbers={setPageNumbers}
-            getRequests={this.props.getMyUsersRequests}
-          />
-          <Table
-            columns={columns}
-            elements={elements}
-            postsPerPage={this.state.postsPerPage.toString()}
-            totalPosts={requests.length}
-            paginate={paginate}
-            currentPageNumber={this.state.currentPage}
-          />
+        <PanelHeader
+          pageTitle="All Requests"
+          setPageNumbers={setPageNumbers}
+          getRequests={this.props.getMyUsersRequests}
+          handleSelect={this.handleSelect}
+          handleSearch={this.handleSearch}
+          searchQuery={searchQuery}
+        />
+        <Table
+          columns={columns}
+          elements={elements}
+          postsPerPage={this.state.postsPerPage.toString()}
+          totalPosts={requests.length}
+          paginate={paginate}
+          currentPageNumber={this.state.currentPage}
+        />
         <Footer />
       </>
     );

src/components/form/form.jsx

@@ -33,22 +33,22 @@ class Form extends Component {
     currentAccomodations: [{ id: 0, name: "Choose an accomodation" }],
     rooms: [{ id: 0, name: "Choose a room" }],
     currentRooms: [{ id: 0, name: "Choose a room" }],
-    autoFill: false
+    autoFill: false,
+    isMyRequests: true,
+    request: {} // used for approve or reject
   };
 
+  componentDidUpdate() {
+    console.log("the DATA IS : ", this.state);
+  }
+
   validate = () => {
     const options = { abortEarly: false };
     const { data } = this.state;
 
     const { error } = Joi.validate(data, this.schema, options);
 
     if (!error) {
-      // if (this.state.data.confirmPassword) {
-      //   if (this.state.data.password !== this.state.data.confirmPassword) {
-      //     toast.error("Password and Confirm password should be the same");
-      //     return {};
-      //   }
-      // }
       return null;
     }
 
@@ -217,10 +217,10 @@ class Form extends Component {
     this.setState({ data });
   };
 
-  handleAutoFill = (e) => {
+  handleAutoFill = e => {
     this.setState({ autoFill: e.target.checked });
     this.doSubmit("autoFill", e.target.checked);
-  }
+  };
 
   renderEditor = () => {
     return (
@@ -246,6 +246,7 @@ class Form extends Component {
 
     return (
       <Input
+        myRequest={this.state.isMyRequests}
         type={type}
         name={name}
         value={data[name]}
@@ -261,6 +262,7 @@ class Form extends Component {
 
     return (
       <Select
+        myRequest={this.state.isMyRequests}
         name={name}
         value={data[name]}
         label={label}

src/components/input/input.jsx

@@ -6,11 +6,16 @@
 import React from "react";
 import "./input.scss";
 
-const Input = ({ label, value, error, ...rest }) => {
+const Input = ({ label, value, error, myRequest, ...rest }) => {
   return (
     <div className="input-container">
       <div className="label">{label}</div>
-      <input {...rest} className="input-field" value={value || ''} />
+      <input
+        {...rest}
+        disabled={myRequest ? false : true}
+        className="input-field"
+        value={value || ""}
+      />
       {error && <div className="danger">{error}</div>}
     </div>
   );