Clear all categories (#391)

* Refactored handleChange and filter resource

1. TODO have filteredResource outside the handle change so we can
handle the selectedCategory state correctly
1. Right now the selectedCategory gets added everytime the check-
box is clicked.

* Refactor lifecycle methods and change styling

- Refactored filter categories
- Replaced checkboxes with list items
- Sort categories alphabetically

* Include proptypes and fix export issue

1. updated proptypes
2. fixed styling using the linter

* Fixed proptypes and included default prop types

* Move clear categories button below list

src/components/AdminPage/CategoryList.js

@@ -2,67 +2,114 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
-import { Form, FormGroup, Label, Input } from "reactstrap";
+import { ListGroup, ListGroupItem, Button } from "reactstrap";
+import _ from "lodash";
 import * as resourceAction from "../../action/resourceDataAction";
 
 class CategoryList extends Component {
-  static propTypes = {
-    resource: PropTypes.array.isRequired,
-    categories: PropTypes.array.isRequired,
-    actions: PropTypes.object.isRequired,
-  };
-
   constructor(props) {
     super(props);
     this.state = {
       selectedCategory: [],
     };
   }
 
-  handleChange = selected => {
+  componentDidUpdate() {
     const { selectedCategory } = this.state;
-    const index = selectedCategory.indexOf(selected);
-
-    // eslint-disable-next-line no-unused-expressions
-    index !== -1
-      ? selectedCategory.splice(index, 1)
-      : selectedCategory.push(selected);
-
-    const filteredResource = this.props.resource.filter(resource =>
-      this.state.selectedCategory.some(searchCategory =>
-        resource.categories
-          .split(",")
-          .map(item => item.trim())
-          .includes(searchCategory)
-      )
-    );
+    const { resource } = this.props;
+    const filteredResource = [];
+
+    if (selectedCategory.length === 0) {
+      this.props.actions.filterByCategories(resource);
+    } else {
+      resource.forEach(res => {
+        const isMatch = selectedCategory.some(cat => res.categories === cat);
 
-    this.props.actions.filterByCategories(
-      selectedCategory.length > 0 ? filteredResource : this.props.resource
+        if (isMatch) {
+          filteredResource.push(res);
+        }
+      });
+      this.props.actions.filterByCategories(filteredResource);
+    }
+  }
+
+  handleClick = async event => {
+    event.persist();
+    const isContains = event.target.classList.contains(
+      "list-group-item-success"
     );
+
+    const selectedCategoryLength = this.state.selectedCategory.length;
+
+    if (isContains && selectedCategoryLength === 1) {
+      this.setState({
+        selectedCategory: [],
+      });
+    } else if (isContains) {
+      this.setState(prevState => {
+        const selectedCategoryCopy = prevState.selectedCategory.slice();
+        _.remove(selectedCategoryCopy, cat => cat === event.target.innerHTML);
+
+        return {
+          selectedCategory: selectedCategoryCopy,
+        };
+      });
+    } else {
+      this.setState(prevState => ({
+        selectedCategory: [
+          ...prevState.selectedCategory,
+          event.target.innerHTML,
+        ],
+      }));
+    }
+  };
+
+  clearChecks = () => {
+    this.setState({
+      selectedCategory: [],
+    });
   };
 
   render() {
-    const categoryMenuItems = this.props.categories.map(cat => (
-      <FormGroup key={cat} check>
-        <Input
-          type="checkbox"
-          key={cat}
-          onChange={() => this.handleChange(cat)}
-        />
-        {cat}
-      </FormGroup>
+    const { selectedCategory } = this.state;
+    const { categories } = this.props;
+    categories.sort();
+    const categoryMenuItems = categories.map((curr, index) => (
+      <ListGroupItem
+        key={index.toString()}
+        className="category-group-item"
+        color={_.indexOf(selectedCategory, curr) !== -1 ? "success" : ""}
+        onClick={this.handleClick}
+      >
+        {curr}
+      </ListGroupItem>
     ));
 
     return (
-      <Form>
-        <Label>Filter by Category</Label>
-        {categoryMenuItems}
-      </Form>
+      <div className="category-parent-container">
+        <h4>Filter by Category</h4>
+        <div className="category-container">
+          <ListGroup className="category-group">{categoryMenuItems}</ListGroup>
+        </div>
+        <Button color="info" className="w-100 mt-2" onClick={this.clearChecks}>
+          Clear
+        </Button>
+      </div>
     );
   }
 }
 
+CategoryList.propTypes = {
+  resource: PropTypes.array.isRequired,
+  actions: PropTypes.object.isRequired,
+  filterByCategories: PropTypes.func,
+  categories: PropTypes.array.isRequired,
+};
+
+CategoryList.defaultProps = {
+  filterByCategories: undefined,
+};
+
 function mapStateToProps(state) {
   return {
     categories: state.categories,

src/css/component-styles/Admin.scss

@@ -10,6 +10,12 @@
   grid-template-rows: $spacing-lg auto;
 }
 
+.category-container {
+  height: 50vh;
+  overflow: auto;
+  cursor: pointer;
+}
+
 .search-and-sort {
   display: grid;
   grid-template-columns: auto auto;

src/css/mobile.scss

@@ -27,6 +27,10 @@
     grid-template-columns: repeat(1, 1fr);
   }
 
+  .category-group-item {
+    border-radius: 10px;
+  }
+
   .results {
     width: 100%;
   }