Adding functionality to filter buttons (#33)

* adding functionality to filter buttons

* adding EOF lines

* Fixing issue with color filters

* resolve issue #34, now you can click on an active filter button and remove the filter

* fixing issue where comboEnergy was active and clicking on it wouldn't remove the filter

* resolve issue #32, now generic energy cost is displayed correctly

* Deleting semicolons, refactoring the filterbox file, adding hooks

* refactoring the method to create buttons

* added changes so when a filter by same field already exist it will add it as an or into the same filter, also added changes requested by irving

* deleting semicolons

web-page/src/App.js

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import 'materialize-css/dist/css/materialize.min.css'
 import M from "materialize-css"
 import './App.css'
-import FilterBox from './components/FilterBox'
+import FilterBox from './components/filter-box'
 import CardsContainer from './components/CardsContainer'
 
 class App extends Component {

web-page/src/components/EnergyColor.js

@@ -1,12 +1,16 @@
-import React, { Component } from 'react';
-import './EnergyColor.css';
+import React, { Component } from 'react'
+import './EnergyColor.css'
 
 const
     reg = /[\dbugyr]+/g,
     filterColors = e => e.match(reg),
     iconPrinter = e => filterColors(e).map(i => {
         if (!isNaN(Number(i))) {
-          return <span className="energy-color white">{i}</span>
+            let extraColors = filterColors(e).length - 1
+            if (i-extraColors > 0)
+                return <span className="energy-color white">{i-extraColors}</span> 
+            else
+                return null
         }
 
         switch (i) {
@@ -26,8 +30,8 @@ const
 class EnergyColor extends Component {
 
     render() {
-        const { energy } = this.props;
-        if (!energy) return <span>{energy}</span>;
+        const { energy } = this.props
+        if (!energy) return <span>{energy}</span>
 
         return (
             <span key={energy}>
@@ -37,4 +41,4 @@ class EnergyColor extends Component {
     }
 }
 
-export default EnergyColor;
+export default EnergyColor

web-page/src/components/FilterButton.css

@@ -0,0 +1,3 @@
+.filter-on {
+    background-color: #ad2323;
+}

web-page/src/components/FilterButton.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import './FilterButton.css'
+
+const FilterButton = (props) => {
+    const { id, fieldname, customClass, onClick } = props
+    return <label
+                id={id} 
+                className={`${customClass ? 'filter-on' : ''} btn btn-secondary`}
+                onClick={ () => onClick(id, fieldname) }
+            >{id}</label>
+}
+
+export default FilterButton