feat(filter): filter society activities

- import Filter component
- add filter dropdown
- add filter functionality

[Finishes ######]

src/app/Dashboard/components/DashboardContainer.js

@@ -102,6 +102,10 @@ export class DashboardContainer extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideFilter, false);
+  }
+
   logPointsModal = () => {
     const { logPoints } = this.state;
     this.setState({

src/app/Societies/components/SocietiesContainer.js

@@ -1,3 +1,6 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-sequences */
+/* eslint-disable no-return-assign */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -6,11 +9,14 @@ import ReactPaginate from 'react-paginate';
 import { actions } from '../operations';
 import SocietyActivities from './SocietyActivitiesComponent';
 import LogPointsComponent from '../../Dashboard/components/LogPointsModalContainer';
+import Filter from '../../common/components/Filter';
 import {
   ButtonComponent, TabsComponent, SocietyStatsComponent, ToastMessageComponent,
 } from '../../common/components';
 import { search } from '../../utils';
 
+import { myStats } from '../../Dashboard/constants';
+
 export class SocietiesContainer extends Component {
   static defaultProps = {
     match: {
@@ -24,6 +30,7 @@ export class SocietiesContainer extends Component {
     fetchSocietyRedemptionsRequest: null,
     successMessage: '',
     showToastMessage: false,
+    // userActivities: myStats.userActivities,
   };
 
   static propTypes = {
@@ -34,15 +41,28 @@ export class SocietiesContainer extends Component {
     fetchSocietyRedemptionsRequest: PropTypes.func,
     successMessage: PropTypes.string,
     showToastMessage: PropTypes.bool,
+    // userActivities: PropTypes.arrayOf(PropTypes.shape({})),
   };
 
   state = {
     selectedTab: 'activities',
     logPoints: false,
     currentPage: 1,
+    clickNum: 0,
     activitiesPerPage: 6,
+    filteredSocietyActivities: [],
+    filterBy: [
+      { name: 'select all', checked: false },
+      { name: 'approved', checked: false },
+      { name: 'in review', checked: false },
+      { name: 'rejected', checked: false },
+      { name: 'pending', checked: false },
+    ],
+    showFilterDropdown: false,
   };
 
+  filterRef = React.createRef();
+
   componentDidMount() {
     // get society from params
     // call action to get actities for that society
@@ -55,6 +75,7 @@ export class SocietiesContainer extends Component {
     } = this.props;
     fetchSocietyInfoRequest(society);
     fetchSocietyRedemptionsRequest(society);
+    window.addEventListener('mousedown', this.hideFilter);
   }
 
   componentDidUpdate(prevProps) {
@@ -65,6 +86,12 @@ export class SocietiesContainer extends Component {
       fetchSocietyInfoRequest,
       fetchSocietyRedemptionsRequest,
     } = this.props;
+    if (prevProps.society[societyName].loggedActivities !== this.props.society[societyName].loggedActivities) {
+      this.setLoggedActivities();
+    }
+    if (prevProps.match.params.society !== societyName) {
+      this.setLoggedActivities();
+    }
     if (
       prevProps.match.params.society !== societyName
       && !prevProps.society[societyName].redemptions.length
@@ -74,6 +101,10 @@ export class SocietiesContainer extends Component {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('mousedown', this.hideFilter);
+  }
+
   changeSelectedTab = (tabName) => {
     this.setState({ selectedTab: tabName });
   };
@@ -92,6 +123,109 @@ export class SocietiesContainer extends Component {
     });
   };
 
+  setLoggedActivities = () => {
+    const {
+      society,
+      match: {
+        params: { society: societyName },
+      },
+    } = this.props;
+
+    const {
+      loggedActivities,
+    } = society[
+      societyName
+    ];
+
+    const filterBy = [
+      { name: 'select all', checked: false },
+      { name: 'approved', checked: false },
+      { name: 'in review', checked: false },
+      { name: 'rejected', checked: false },
+      { name: 'pending', checked: false },
+    ];
+
+    this.setState({
+      filterBy,
+      clickNum: 0,
+      filteredSocietyActivities: loggedActivities,
+    });
+  }
+
+  handleClick = index => (event) => {
+    const { checked, value } = event.target;
+    const { filterBy, clickNum } = this.state;
+
+    const {
+      society,
+      match: {
+        params: { society: name },
+      },
+    } = this.props;
+
+    if (value === 'select all') {
+      const filter = filterBy.map((item) => {
+        if (checked) {
+          return (item.checked = true), item;
+        }
+
+        return (item.checked = false), item;
+      });
+
+      this.setState({
+        filterBy: filter,
+        filteredSocietyActivities: [...society[name].loggedActivities],
+      });
+    } else {
+      const item = [...filterBy];
+      let filteredSocietyActivities = [];
+      let restore = false;
+
+      if (checked && clickNum > 0) {
+        item[index].checked = checked;
+        const filter = society[name].loggedActivities.filter(activity => activity.status === value);
+        filteredSocietyActivities = [...this.state.filteredSocietyActivities, ...filter];
+      }
+
+      if (checked && clickNum === 0) {
+        item[index].checked = checked;
+        const filter = this.state.filteredSocietyActivities.filter(activity => activity.status === value);
+        filteredSocietyActivities = [...filter];
+      }
+
+      if (!checked) {
+        item[index].checked = checked;
+        item[0].checked = false;
+        filteredSocietyActivities = this.state.filteredSocietyActivities.filter(activity => activity.status !== value);
+        if (filteredSocietyActivities.length === 0) {
+          restore = true;
+          filteredSocietyActivities = society[name].loggedActivities;
+        }
+      }
+
+      this.setState({
+        filterBy: item,
+        clickNum: !restore ? (clickNum + 1) : 0,
+        filteredSocietyActivities,
+      });
+    }
+  }
+
+  hideFilter = (event) => {
+    const { target } = event;
+    if (!target.className || target.className === 'button__filter') {
+      return;
+    }
+
+    if (!this.filterRef.current.contains(target)) {
+      this.setState({ showFilterDropdown: false });
+    }
+  };
+
+  showFilter = () => {
+    this.setState(prevState => ({ showFilterDropdown: !prevState.showFilterDropdown }));
+  }
+
   render() {
     const {
       selectedTab, logPoints, currentPage, activitiesPerPage,
@@ -154,15 +288,24 @@ export class SocietiesContainer extends Component {
               <span className='fa fa-plus' />
               <span>Log Points</span>
             </ButtonComponent>
-            <ButtonComponent className='button__filter'>
+            <ButtonComponent
+              className='button__filter'
+              onClick={this.showFilter}
+            >
               <span>Filter</span>
               <span className='fa fa-filter' />
             </ButtonComponent>
+            <Filter
+              handleClick={this.handleClick}
+              filterBy={this.state.filterBy}
+              show={this.state.showFilterDropdown}
+              filterRef={this.filterRef}
+            />
           </div>
         </div>
         {logPointsComponent}
         <SocietyActivities
-          activities={search(searchText, currentActivities)}
+          activities={search(searchText, this.state.filteredSocietyActivities || currentActivities)}
           selectedTab={selectedTab}
         />
         <ReactPaginate

src/app/Societies/components/tests/SocietiesContainer.test.js

@@ -27,12 +27,20 @@ describe('<SocietiesContainer />', () => {
         activitiesLogged: activities.length,
         loggedActivities: activities,
         redemptions: []
-      }
+      },
     },
     fetchSocietyInfoRequest: jest.fn(),
-    fetchSocietyRedemptionsRequest: jest.fn()
+    fetchSocietyRedemptionsRequest: jest.fn(),
   };
-  const shallowWrapper = shallow(<SocietiesContainer {...props} />);
+
+  let shallowWrapper;
+  beforeEach(() => {
+    shallowWrapper = shallow(<SocietiesContainer {...props} />);
+  });
+
+  afterEach(() => {
+    shallowWrapper.unmount();
+  });
 
   it('has a 2 ButtonComponents', () => {
     expect(shallowWrapper.find('ButtonComponent')).toHaveLength(2);
@@ -72,4 +80,37 @@ describe('<SocietiesContainer />', () => {
     instance.handlePageClick(data);
     expect(instance.state.currentPage).toBe(1);
   });
+
+  it('should show the filter drop down', () => {
+    const instance = shallowWrapper.instance();
+
+    instance.showFilter();
+    expect(instance.state.showFilterDropdown).toEqual(true);
+
+    shallowWrapper.unmount();
+  });
+
+  it('should hide the filter drop down', () => {
+    const instance = shallowWrapper.instance();
+    const event = {
+      target: {
+        className: 'button__filter',
+      },
+    };
+
+    instance.hideFilter(event);
+    expect(instance.state.showFilterDropdown).toEqual(false);
+  });
+
+  it('should hide the filter drop down', () => {
+    const instance = shallowWrapper.instance();
+    const event = {
+      target: {
+        current: '<span>Filter</span>',
+      },
+    };
+
+    instance.hideFilter(event);
+    expect(instance.state.showFilterDropdown).toEqual(false);
+  });
 });