From d035f1e41c73a90d44a0f93825e4cd897acc529d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 8 Dec 2015 16:49:06 +0100
Subject: [PATCH] Hide PieceListToolbarFilterWidget when no filters are
 applicable

---
 .../piece_list_toolbar_filter_widget.js       | 112 +++++++++---------
 1 file changed, 58 insertions(+), 54 deletions(-)

diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index c463330c..b798857a 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({
             </span>
         );
 
-        return (
-            <DropdownButton
-                pullRight={true}
-                title={filterIcon}
-                className="ascribe-piece-list-toolbar-filter-widget">
-                {/* We iterate over filterParams, to receive the label and then for each
-                    label also iterate over its items, to get all filterable options */}
-                {this.props.filterParams.map(({ label, items }, i) => {
-                    return (
-                        <div>
-                            <li
-                                style={{'textAlign': 'center'}}
-                                key={i}>
-                                <em>{label}:</em>
-                            </li>
-                            {items.map((param, j) => {
+        if(this.props.filterParams.length) {
+            return (
+                <DropdownButton
+                    pullRight={true}
+                    title={filterIcon}
+                    className="ascribe-piece-list-toolbar-filter-widget">
+                    {/* We iterate over filterParams, to receive the label and then for each
+                        label also iterate over its items, to get all filterable options */}
+                    {this.props.filterParams.map(({ label, items }, i) => {
+                        return (
+                            <div>
+                                <li
+                                    style={{'textAlign': 'center'}}
+                                    key={i}>
+                                    <em>{label}:</em>
+                                </li>
+                                {items.map((param, j) => {
 
-                                // As can be seen in the PropTypes, a param can either
-                                // be a string or an object of the shape:
-                                //
-                                // {
-                                //     key: <String>,
-                                //     label: <String>
-                                // }
-                                //
-                                // This is why we need to distinguish between both here.
-                                if(typeof param !== 'string') {
-                                    label = param.label;
-                                    param = param.key;
-                                } else {
-                                    param = param;
-                                    label = param.split('acl_')[1].replace(/_/g, ' ');
-                                }
+                                    // As can be seen in the PropTypes, a param can either
+                                    // be a string or an object of the shape:
+                                    //
+                                    // {
+                                    //     key: <String>,
+                                    //     label: <String>
+                                    // }
+                                    //
+                                    // This is why we need to distinguish between both here.
+                                    if(typeof param !== 'string') {
+                                        label = param.label;
+                                        param = param.key;
+                                    } else {
+                                        param = param;
+                                        label = param.split('acl_')[1].replace(/_/g, ' ');
+                                    }
 
-                                return (
-                                    <li
-                                        key={j}
-                                        onClick={this.filterBy(param)}
-                                        className="filter-widget-item">
-                                        <div className="checkbox-line">
-                                            <span>
-                                                {getLangText(label)}
-                                            </span>
-                                            <input
-                                                readOnly
-                                                type="checkbox"
-                                                checked={this.props.filterBy[param]} />
-                                        </div>
-                                    </li>
-                                );
-                            })}
-                        </div>
-                    );
-                })}
-            </DropdownButton>
-        );
+                                    return (
+                                        <li
+                                            key={j}
+                                            onClick={this.filterBy(param)}
+                                            className="filter-widget-item">
+                                            <div className="checkbox-line">
+                                                <span>
+                                                    {getLangText(label)}
+                                                </span>
+                                                <input
+                                                    readOnly
+                                                    type="checkbox"
+                                                    checked={this.props.filterBy[param]} />
+                                            </div>
+                                        </li>
+                                    );
+                                })}
+                            </div>
+                        );
+                    })}
+                </DropdownButton>
+            );
+        } else {
+            return null;
+        }
     }
 });