[##165785921] implement feature to enable super user view office bloc…

…ks in different centres (#243)

* [##165785921] implement a feature to enable superuser view office blocks in different locations
- add dropdown component
- add action to fetch office blocks in a particular center
- add action test
- implement feedback on dropdown styling
[finishes ##165785921]

src/__test__/actions/officeLocations.actions.test.js

@@ -4,9 +4,10 @@ import axios from 'axios';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
-import { loadOfficeLocations, loadOfficeBlocks, createOfficeBlock } from '../../_actions/officeLocations.actions';
+import { loadOfficeLocations, loadOfficeBlocks, createOfficeBlock, loadCentreOfficeBlocks } from '../../_actions/officeLocations.actions';
 
 import officeLocations from '../../_mock/officeLocations';
+import officeBlocks from '../../_mock/officeBlocks';
 
 import constants from '../../_constants';
 
@@ -73,6 +74,16 @@ describe('Centres Action tests', () => {
     });
   });
 
+  it('should dispatch LOAD_OFFICE_BLOCK_SUCCESS when loadCentreOfficeBlocks is called successfully', () => {
+    mock.onGet().reply(200, officeBlocks.results);
+    return store.dispatch(loadCentreOfficeBlocks(2)).then(() => {
+      expect(store.getActions()).toContainEqual({
+        payload: officeBlocks.results,
+        type: LOAD_OFFICE_BLOCK_SUCCESS
+      });
+    });
+  });
+
   it('should dispatch LOAD_OFFICE_BLOCK_FAILURE when loadOfficeBlocks is unsuccessful', () => {
     mock.onGet('office-blocks/?page=1&page_size=10').reply(400, 'Could not office blocks');
     return store.dispatch(loadOfficeBlocks(1, 10)).then(() => {

src/__test__/components/OfficeBlocksComponent.test.js

@@ -8,8 +8,10 @@ describe('Renders <OfficeBlocksComponent /> correctly', () => {
   const props = {
     isLoading: false,
     blockCount: 2,
+    locationList: [{ name: 'Lagos', id: 23 }, { name: 'Nairobi', id: 45 }],
     loadOfficeBlocks: jest.fn(),
     loadOfficeLocations: jest.fn(),
+    loadCentreOfficeBlocks: jest.fn(),
     loadCountries: jest.fn(),
     resetMessage: jest.fn()
   };
@@ -36,6 +38,43 @@ describe('Renders <OfficeBlocksComponent /> correctly', () => {
     expect(handlePaginationChangeSpy.mock.calls.length).toEqual(1);
   });
 
+  it('calls handleToggleModal when the modal is toggled', () => {
+    const handleToggleModalSpy = jest.spyOn(wrapper.instance(), 'handleToggleModal');
+
+    wrapper.setState({ modalOpen: true });
+
+    const event = {};
+    const data = {};
+
+    wrapper.instance().handleToggleModal(event, data);
+    expect(handleToggleModalSpy.mock.calls.length).toEqual(1);
+    expect(wrapper.state('modalOpen')).toEqual(false);
+  });
+
+  it('calls handleEditToggleModal when modal is clicked', () => {
+    const handleEditToggleModalSpy = jest.spyOn(wrapper.instance(), 'handleEditToggleModal');
+
+    wrapper.setState({ modalOpen: true });
+
+    const event = {};
+    const data = {};
+
+    wrapper.instance().handleEditToggleModal(event, data);
+    expect(handleEditToggleModalSpy.mock.calls.length).toEqual(1);
+    expect(wrapper.state('modalOpen')).toEqual(true);
+  });
+
+
+  it('calls handleDropdownChange the dropdown item is selected', () => {
+    const handleDropdownChangeSpy = jest.spyOn(wrapper.instance(), 'handleDropdownChange');
+
+    const event = {};
+    const data = {};
+
+    wrapper.instance().handleDropdownChange(event, data);
+    expect(handleDropdownChangeSpy.mock.calls.length).toEqual(1);
+  });
+
   it('calls the getTotalPages function when the next button is clicked', () => {
     const getTotalPagesSpy = jest.spyOn(wrapper.instance(), 'getTotalPages');
     wrapper.instance().getTotalPages();

src/_actions/officeLocations.actions.js

@@ -104,6 +104,14 @@ export const loadOfficeBlocks = (pageNumber, limit) => (dispatch) => {
     });
 };
 
+export const loadCentreOfficeBlocks = centreId => (dispatch) => {
+  dispatch({ type: LOAD_OFFICE_BLOCK_REQUEST });
+  return axios
+    .get(`andela-centres/${centreId}/office_blocks/`)
+    .then(response => dispatch(loadOfficeBlocksSuccess(response.data)))
+    .catch(error => dispatch(loadOfficeBlocksFailure(error)));
+};
+
 export const loadOfficeBlocksSuccess = blocks => ({
   type: LOAD_OFFICE_BLOCK_SUCCESS,
   payload: blocks

src/_components/OfficeBlocks/OfficeBlocksContainer.jsx

@@ -2,7 +2,8 @@ import { connect } from 'react-redux';
 import {
   loadOfficeBlocks,
   resetMessage,
-  loadOfficeLocations
+  loadOfficeLocations,
+  loadCentreOfficeBlocks
 } from '../../_actions/officeLocations.actions';
 import OfficeBlocksComponent from '../../components/OfficeBlocks/OfficeBlocksComponent';
 
@@ -32,5 +33,6 @@ export const mapStateToProps = ({ officeLocations }) => {
 export default connect(mapStateToProps, {
   loadOfficeBlocks,
   resetMessage,
-  loadOfficeLocations
+  loadOfficeLocations,
+  loadCentreOfficeBlocks
 })(OfficeBlocksComponent);

src/_css/officeBlocksComponent.scss

@@ -0,0 +1,7 @@
+.center-filter {
+  .ui.fluid.dropdown {
+    margin-top: 0;
+    height: 100%;
+    width: 160px;
+  }
+}

src/_mock/officeBlocks.js

@@ -0,0 +1,17 @@
+export default {
+  count: 2,
+  next: null,
+  previous: null,
+  results: [
+    {
+      id: 4,
+      name: 'Epic Tower',
+      location: 'Lagos'
+    },
+    {
+      id: 5,
+      name: 'Dojo',
+      location: 'Nairobi'
+    }
+  ]
+};

src/components/OfficeBlocks/OfficeBlocksComponent.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 
+import { Dropdown } from 'semantic-ui-react';
 import NavBarComponent from '../../_components/NavBarContainer';
 import LoaderComponent from '../../components/LoaderComponent';
 import Cards from '../common/Card/Card';
@@ -10,6 +11,9 @@ import Paginator from '../common/PaginationComponent';
 import StatusMessageComponent from '../common/StatusComponent';
 import PageHeader from '../common/PageHeader';
 import OfficeBlocksModal from '../../_components/OfficeBlocks/OfficeBlocksModal';
+import verifySuperAdmin from '../../_utils/verifySuperAdmin';
+
+import '../../_css/officeBlocksComponent.scss';
 
 class OfficeBlocksComponent extends React.Component {
   state = {
@@ -48,14 +52,27 @@ class OfficeBlocksComponent extends React.Component {
     this.props.resetMessage();
   };
 
+  handleDropdownChange = (e, data) => {
+    this.props.loadCentreOfficeBlocks(data.value);
+  };
+
   getTotalPages = () => Math.ceil(this.props.blockCount / this.state.limit);
 
   render() {
-    const { isLoading, blockList, error, resetMessage, entity } = this.props;
+    const { isLoading, blockList, error, resetMessage, entity, locationList } = this.props;
     const hasLocations = !isEmpty(blockList);
     const showStatus = error;
     const showAction = entity === 'office-blocks';
     const showNotFound = !isLoading && !hasLocations && !showStatus;
+    const options = [{ key: -1, text: 'Select Center', value: 0 }];
+    locationList.forEach((location, index) => {
+      const locObj = {
+        key: index,
+        text: location.name,
+        value: location.id
+      };
+      options.push(locObj);
+    });
 
     return (
       <NavBarComponent>
@@ -69,6 +86,19 @@ class OfficeBlocksComponent extends React.Component {
                 onToggle={this.handleToggleModal}
                 open={this.state.modalOpen}
               />
+              {
+              verifySuperAdmin() && (
+                <div className="center-filter">
+                  <Dropdown
+                    placeholder="Select Center"
+                    fluid
+                    selection
+                    options={options}
+                    onChange={this.handleDropdownChange}
+                  />
+                </div>
+              )
+            }
             </div>
           </PageHeader>
 
@@ -128,8 +158,10 @@ OfficeBlocksComponent.propTypes = {
   resetMessage: PropTypes.func,
   blockCount: PropTypes.number,
   blockList: PropTypes.array,
+  locationList: PropTypes.array,
   error: PropTypes.string,
   loadOfficeLocations: PropTypes.func,
+  loadCentreOfficeBlocks: PropTypes.func,
   entity: PropTypes.string
 };