[Board/Library manager] User should be able to see the total count of search result (#164)

Author: testforstephen

html/app/components/BoardManager.tsx

@@ -95,6 +95,12 @@ class BoardManager extends React.Component<IBoardManagerProps, IBoardManagerStat
             return filterType(element, this.state.category) && filterSearch(element);
         });
 
+        let totalCountTips = "";
+        if (this.state.category === "All" && !this.state.searchTerm) {
+            totalCountTips = `Total ${filteredPlatforms.length} Boards`;
+        } else {
+            totalCountTips = `${filteredPlatforms.length} Boards matched`;
+        }
         const boardProps = {
             installingBoardName: this.props.installingBoardName,
             installErrorMessage: this.props.installErrorMessage,
@@ -128,7 +134,9 @@ class BoardManager extends React.Component<IBoardManagerProps, IBoardManagerStat
                     })
                 }
             </div>
-            <div className="arduinomanager-footer"></div>
+            <div className="arduinomanager-footer theme-bgcolor">
+                <span>{totalCountTips}</span>
+            </div>
         </div>);
     }
 

html/app/components/LibraryManager.tsx

@@ -112,13 +112,21 @@ class LibraryManager extends React.Component<ILibraryManagerProps, ILibraryManag
 
         const SEARCH_KEYS = ["name", "sentence", "paragraph"];
         const filterSearch = createFilter(this.state.searchTerm, SEARCH_KEYS);
+        let totalCount = 0;
         this.props.libraries.forEach((element) => {
             if (filterType(element, this.state.type) && filterTopic(element, this.state.topic) && filterSearch(element)) {
                 element.shouldBeDisplayed = true;
+                totalCount++;
             } else {
                 element.shouldBeDisplayed = false;
             }
         });
+        let totalCountTips = "";
+        if (this.state.type === "All" && this.state.topic === "All" && !this.state.searchTerm) {
+            totalCountTips = `Total ${totalCount} Libraries`;
+        } else {
+            totalCountTips = `${totalCount} Libraries matched`;
+        }
 
         const libraryItemProps = {
             installLibrary: this.props.installLibrary,
@@ -156,7 +164,9 @@ class LibraryManager extends React.Component<ILibraryManagerProps, ILibraryManag
                     })
                 }
             </div>
-            <div className="arduinomanager-footer"></div>
+            <div className="arduinomanager-footer theme-bgcolor">
+                <span>{ totalCountTips }</span>
+            </div>
         </div>);
     }
 

html/app/styles/board.scss

@@ -56,6 +56,16 @@
 
 .arduinomanager-container {
     padding-top: 60px;
+    padding-bottom: 40px;
+}
+
+.arduinomanager-footer {
+    height: 40px;
+    line-height: 40px;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    padding: 0px 10px;
 }
 
 a {