Merge 29ae8a1 into bfcec35

client/src/modules/Admin/components/AdminRequest.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// components
+import withRequests from '../../HOC/withRequests';
+import RequestHolder from './RequestHolder';
+import RequestPagination from '../../common/Pagination';
+
+// mock data
+import requests from '../../../tests/modules/Admin/mock/mockData';
+
+
+export const Request = ({
+  headerText,
+  handleChange,
+  requests,
+  checkedAll
+}) => (
+  <div className="request-container text-blue">
+    <h4>{headerText}</h4>
+    <hr className="hr-top" />
+    <RequestHolder
+      handleChange={handleChange}
+      requests={requests}
+      checkedAll={checkedAll}
+    />
+    <RequestPagination />
+
+    <div className="admin-btn-holder">
+      <button className="btn blue-btn admin-btn-margin" type="button">Accept</button>
+      <button className="btn red-btn" type="button">Reject</button>
+    </div>
+
+  </div>
+);
+
+Request.propTypes = {
+  headerText: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  requests: PropTypes.array.isRequired,
+  checkedAll: PropTypes.bool.isRequired
+};
+
+const AdminRequests = withRequests(Request, {
+  requests: requests.data.requests,
+  pageTitle: 'Admin Requests'
+});
+
+export default AdminRequests;

client/src/modules/Admin/components/RequestCheckbox.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const RequestCheckbox = ({
+  handleChange,
+  checkOne,
+  requests = [],
+  checkedAll
+}) => {
+  const Requests = requests.map((request, index) => (
+    <p key={request.id}>
+      <label htmlFor={request.id}>
+        <input
+          name={request.id}
+          id={request.id}
+          type="checkbox"
+          className="filled-in"
+          onChange={(e) => handleChange(e, request)}
+          checked={request.checked}
+        />
+        <span>{`${request.user.displayName} < ${request.user.email} >`}</span>
+      </label>
+    </p>));
+
+  return Requests;
+};
+
+export default RequestCheckbox;

client/src/modules/Admin/components/RequestHolder.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// component
+import RequestCheckbox from './RequestCheckbox';
+
+const RequestHolder = ({
+  handleChange,
+  requests,
+  checkedAll
+}) => (
+  <div className="request-checkbox-container">
+    <form>
+      <p>
+        <label htmlFor="main-control">
+          <input
+            name="main-control"
+            id="main-control"
+            type="checkbox"
+            className="filled-in"
+            onChange={(e) => handleChange(e)}
+            checked={checkedAll}
+          />
+          <span>Mark All</span>
+        </label>
+      </p>
+      <hr />
+      {/* hold the requests */}
+      <RequestCheckbox
+        handleChange={handleChange}
+        requests={requests}
+        checkedAll={checkedAll}
+      />
+    </form>
+  </div>
+);
+
+RequestHolder.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  requests: PropTypes.array.isRequired,
+  checkedAll: PropTypes.bool.isRequired
+};
+
+export default RequestHolder;

client/src/modules/HOC/withRequests.jsx

@@ -0,0 +1,90 @@
+import React, { Component, Fragment } from 'react';
+
+// components
+import Navbar from '../common/Navbar';
+
+const withRequests = (WrappedComponent, data) => {
+  class ComponentWithData extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        checkAll: false
+      };
+
+      this.handleInputChange = this.handleInputChange.bind(this);
+    }
+
+    componentDidMount() {
+      this.addCheckedFieldToRequests(data.requests);
+    }
+
+    handleInputChange(event, request) {
+      const { target } = event;
+      const { name, checked } = target;
+
+      /**to check if the mark all button was clicked
+       * then change the checked field of all the requests
+      */
+      if (name === 'main-control') {
+        return this.setState(previousState => {
+          const updatedRequests = previousState.allRequests
+            .map(request => ({ ...request, checked }));
+
+          return {
+            ...previousState,
+            checkAll: !previousState.checkAll,
+            allRequests: updatedRequests
+          };
+        });
+      }
+
+      /**
+       * this will handle when a single request is
+       * selected and change the state of the mark all button
+       */
+      return this.setState(previousState => {
+        const updatedRequest = previousState.allRequests
+          .map(previousRequest => ((previousRequest.id === request.id) ?
+            { ...previousRequest, checked } : previousRequest));
+
+        return {
+          ...previousState,
+          checkAll: false,
+          allRequests: updatedRequest
+        };
+      });
+    }
+
+    addCheckedFieldToRequests(requests) {
+      // take all the requests map through and add checked field
+      const requestsWithCheckedField = requests
+        .map(request => ({ ...request, checked: false }));
+
+      return this.setState({
+        ...this.state,
+        allRequests: requestsWithCheckedField
+      });
+    }
+
+    render() {
+      const { checkBoxes, checkAll, allRequests } = this.state;
+      return (
+        <Fragment>
+          <Navbar />
+          <WrappedComponent
+            headerText={data.pageTitle}
+            handleChange={this.handleInputChange}
+            checkOne={checkBoxes}
+            requests={allRequests}
+            checkedAll={checkAll}
+          />
+        </Fragment>
+      );
+    }
+  }
+
+  return ComponentWithData;
+};
+
+export default withRequests;

client/src/modules/common/Navbar/index.jsx

@@ -35,7 +35,8 @@ class Navbar extends Component {
     this.state = {
       showSearchBar: false,
       name: '',
-      timeout: 0
+      timeout: 0,
+      noOfRequests: 5
     };
     this.toggleState = this.toggleState.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
@@ -191,13 +192,13 @@ class Navbar extends Component {
                 </NavLink>
               </li>
               <li className="notif-container">
-                <a href="#!">
+                <NavLink to="/requests/admin">
                   {/* Notifications */}
-                  <span className="notif-badge" />
+                  <span className="badge notif-badge">{this.state.noOfRequests}</span>
                   <i className="material-icons" data-tip="notifications">
                     notifications_active
                   </i>
-                </a>
+                </NavLink>
               </li>
               <li>
                 <a

client/src/modules/common/Pagination/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Pagination } from 'semantic-ui-react';
+
+const RequestPagination = () => (
+  <Pagination
+    defaultActivePage={1}
+    firstItem={null}
+    lastItem={null}
+    pointing
+    secondary
+    totalPages={10}
+  />
+);
+
+export default RequestPagination;

client/src/routes/index.jsx

@@ -12,6 +12,7 @@ import Teams from '../modules/Teams/container';
 import RequireAuth from './RequireAuth';
 import AuthRoute from './AuthRoute';
 import ErrorPage from '../modules/common/404';
+import AdminRequests from '../modules/Admin/components/AdminRequest';
 
 export default class Routes extends Component {
   componentDidMount() {
@@ -35,6 +36,7 @@ export default class Routes extends Component {
             <Route path="/teams/create" component={RequireAuth(CreateTeam)} />
             <AuthRoute path="/" exact component={SignInContainer} />
             <Route path="/teams/:id" exact component={RequireAuth(Teams)} />
+            <Route path="/requests/admin" exact component={RequireAuth(AdminRequests)} />
             <Route path="/404" exact component={ErrorPage} />
             <Redirect from="*" to="/404" />
           </Switch>

client/src/tests/modules/Admin/components/AdminRequests.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import AdminRequests, { Request } from '../../../../modules/Admin/components/AdminRequest';
+
+import requests from '../mock/mockData';
+
+describe('Test for AdminRequests component', () => {
+  const handleChange = jest.fn();
+
+  let props = {
+    handleChange,
+    requests: requests.data.requests
+  };
+
+  let WrapperComponent = shallow(<AdminRequests {...props} />);
+
+  it('should render properly', () => {
+    expect(true).toBe(true);
+    expect(WrapperComponent.length).toBe(1);
+  });
+});
+
+describe('Test for Request component', () => {
+  const WrapperComponent = shallow(<Request />);
+
+  it('should render properly', () => {
+    expect(WrapperComponent.length).toBe(1);
+  });
+});

client/src/tests/modules/Admin/components/RequestCheckbox.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import RequestCheckbox from '../../../../modules/Admin/components/RequestCheckbox';
+
+import requests from '../mock/mockData';
+
+describe('Test for RequestCheckbox component', () => {
+  const handleChange = jest.fn();
+
+  let props = {
+    handleChange,
+    requests: requests.data.requests
+  };
+
+  let WrapperComponent = shallow(<RequestCheckbox {...props} />);
+
+  it('should render properly', () => {
+    expect(WrapperComponent.length).toBe(props.requests.length);
+  });
+
+  it('should render checkbox with the requests', () => {
+    expect(WrapperComponent.find('input').get(0).props.type).toBe('checkbox');
+
+    expect(WrapperComponent.find('input').get(0).props.id).toBe(props.requests[0].id);
+  });
+
+  it('should call the onChange event listener', () => {
+    WrapperComponent.find('input').get(0).props.onChange();
+
+    expect(WrapperComponent.find('input').get(0).props.type).toBe('checkbox');
+  });
+
+  it('should render properly with no requests', () => {
+    props = {
+      handleChange,
+    };
+
+    WrapperComponent = shallow(<RequestCheckbox {...props} />);
+
+    expect(WrapperComponent.length).toBe(0);
+  });
+});
+

client/src/tests/modules/Admin/components/RequestHolder.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import RequestHolder from '../../../../modules/Admin/components/RequestHolder';
+
+describe('Test for RequestHolder component', () => {
+  const handleChange = jest.fn();
+
+  const WrapperComponent = shallow(<RequestHolder handleChange={handleChange} />);
+
+  it('should render properly', () => {
+    expect(WrapperComponent.find('.request-checkbox-container').length).toBe(1);
+  });
+
+  it('should call the change event', () => {
+    expect(true).toBe(true);
+
+    WrapperComponent.find('#main-control').simulate('change');
+
+    expect(WrapperComponent.find('#main-control').length).toBe(1);
+  });
+});
+