refactor(search-engine): improve the organization of the groups

Signed-off-by: Gianfranco Manganiello <gmanganiello@teclib.com>

Author: Gianfranco97

src/containers/SearchEngine/components/QueryBuilder/Group.js

@@ -52,6 +52,7 @@ class Group extends PureComponent {
             rule={rule}
             changeRule={this.props.changeRule}
             fieldList={this.props.fieldList}
+            addGroup={this.props.addGroup}
           />,
         )
       }
@@ -87,40 +88,33 @@ class Group extends PureComponent {
 
   render() {
     return (
-      <>
-        <div className="search-engine__group">
-          {this.getRules(this.props.criteria)}
-          <button
-            className="btn btn--primary"
-            type="button"
-            onClick={() => console.log('test')}
-          >
-            +
-            {' '}
-            {I18n.t('search_engine.group')}
-          </button>
-        </div>
-
-        <div className="search-engine__group">
-          {this.getRules(this.props.metacriteria)}
-        </div>
-      </>
+      <div className="search-engine__group">
+        {this.getRules(this.props.rules)}
+        <button
+          className="btn btn--secondary"
+          type="button"
+          onClick={() => this.props.addGroup()}
+        >
+          +
+          {' '}
+          {I18n.t('search_engine.group')}
+        </button>
+      </div>
     )
   }
 }
 
 Group.defaultProps = {
-  criteria: [],
-  metacriteria: [],
+  rules: [],
   index: [],
 }
 
 Group.propTypes = {
   index: PropTypes.array,
-  criteria: PropTypes.array,
-  metacriteria: PropTypes.array,
+  rules: PropTypes.array,
   changeRule: PropTypes.func.isRequired,
   fieldList: PropTypes.array.isRequired,
+  addGroup: PropTypes.func.isRequired,
 }
 
 export default Group

src/containers/SearchEngine/components/QueryBuilder/SubGroup.js

@@ -30,6 +30,7 @@ import React, {
   PureComponent,
 } from 'react'
 import PropTypes from 'prop-types'
+import I18n from 'shared/i18n'
 import Rule from './Rule'
 
 class SubGroup extends PureComponent {
@@ -101,6 +102,15 @@ class SubGroup extends PureComponent {
     return (
       <div className="search-engine__group">
         { render }
+        <button
+          className="btn btn--secondary"
+          type="button"
+          onClick={() => this.props.addGroup()}
+        >
+            +
+          {' '}
+          {I18n.t('search_engine.group')}
+        </button>
       </div>
     )
   }
@@ -115,6 +125,7 @@ SubGroup.propTypes = {
   rule: PropTypes.object.isRequired,
   changeRule: PropTypes.func.isRequired,
   fieldList: PropTypes.array.isRequired,
+  addGroup: PropTypes.func.isRequired,
 }
 
 export default SubGroup

src/containers/SearchEngine/components/QueryBuilder/index.js

@@ -207,6 +207,10 @@ class QueryBuilder extends PureComponent {
     })
   }
 
+  addGroup = () => {
+    console.log('test')
+  }
+
   /**
    * Render component
    * @function render
@@ -235,12 +239,30 @@ class QueryBuilder extends PureComponent {
           </button>
         </div>
 
-        <Group
-          criteria={this.state.criteria}
-          metacriteria={this.state.metacriteria}
-          changeRule={this.changeRule}
-          fieldList={this.state.fieldList}
-        />
+
+        {
+          this.state.criteria.length > 0
+          && (
+            <Group
+              rules={this.state.criteria}
+              changeRule={this.changeRule}
+              fieldList={this.state.fieldList}
+              addGroup={this.addGroup}
+            />
+          )
+        }
+
+        {
+          this.state.metacriteria.length > 0
+          && (
+            <Group
+              rules={this.state.metacriteria}
+              changeRule={this.changeRule}
+              fieldList={this.state.fieldList}
+              addGroup={this.addGroup}
+            />
+          )
+        }
       </div>
     )
   }