From ddc801fe9321b70f88f31b76c2f45c0e0b4c4212 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Mon, 18 Feb 2019 19:58:17 +0100
Subject: [PATCH] WiP

---
 app/src/actions/Sidebar.ts             | 25 ++++++++++++++-----------
 app/src/components/Sidebar/Sidebar.tsx | 25 +++++++++++++++++++++----
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/src/actions/Sidebar.ts b/app/src/actions/Sidebar.ts
index 8a7dac1..1eb38ae 100644
--- a/app/src/actions/Sidebar.ts
+++ b/app/src/actions/Sidebar.ts
@@ -12,7 +12,7 @@ export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () =
   dispatch(clearTopic(selectedTopic, false))
 }
 
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
   const { connectionId } = getState().connection
   if (!connectionId) {
     return
@@ -29,15 +29,18 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => (dispa
   rendererEvents.emit(publishEvent, mqttMessage)
 
   if (recursive) {
-    topic.childTopics().forEach((topic) => {
-      console.log('deleting', topic.path())
-      const mqttMessage = {
-        topic: topic.path(),
-        payload: null,
-        retain: true,
-        qos: 0 as 0,
-      }
-      rendererEvents.emit(publishEvent, mqttMessage)
-    })
+    topic.childTopics()
+      .filter(topic => Boolean(topic.message && topic.message.value))
+      .slice(0, subtopicClearLimit)
+      .forEach((topic) => {
+        console.log('deleting', topic.path())
+        const mqttMessage = {
+          topic: topic.path(),
+          payload: null,
+          retain: true,
+          qos: 0 as 0,
+        }
+        rendererEvents.emit(publishEvent, mqttMessage)
+      })
   }
 }
diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index 9efc085..e1f4612 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -4,6 +4,7 @@ import Clear from '@material-ui/icons/Clear'
 import Copy from '../Copy'
 import DateFormatter from '../helper/DateFormatter'
 import Delete from '@material-ui/icons/Delete'
+import DeleteForever from '@material-ui/icons/DeleteForever'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
@@ -26,8 +27,10 @@ import {
   Popper,
   Typography,
   Tooltip,
+  Badge,
 } from '@material-ui/core'
 import CustomIconButton from '../CustomIconButton';
+import { max } from 'moment';
 
 const throttle = require('lodash.throttle')
 
@@ -102,19 +105,33 @@ class Sidebar extends React.Component<Props, State> {
   }
 
   private renderRecursiveTopicDeleteButton() {
-    if (!this.props.node) {
+    const deleteLimit = 50
+    const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
+    if (!this.props.node || topicCount <= 1) {
       return null
     }
 
-    return <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true)}><Delete style={{ color: 'red' }} /></CustomIconButton>
+    return (
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
+        <Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
+          <Badge
+            classes={{ badge: this.props.classes.badge }}
+            badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
+            color="secondary"
+          >
+            <DeleteForever color="action" />
+          </Badge>
+        </Tooltip>
+      </CustomIconButton>
+    )
   }
 
-  private deleteTopic = (topic?: q.TreeNode<TopicViewModel>, recursive: boolean = false) => {
+  private deleteTopic = (topic?: q.TreeNode<TopicViewModel>, recursive: boolean = false, maxCount = 50) => {
     if (!topic) {
       return
     }
 
-    this.props.actions.clearTopic(topic, recursive)
+    this.props.actions.clearTopic(topic, recursive, maxCount)
   }
 
   private renderNode() {