From 49c20b184017a2a9867e0c27ea6b0401c626f092 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Fri, 1 Nov 2024 16:38:47 +0545
Subject: [PATCH] Refactor: Remove checks for null

---
 src/components/MonitorList.vue       | 10 ++---
 src/components/MonitorListFilter.vue | 58 +++++++++++-----------------
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 49be97ed5..88450948b 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -294,9 +294,7 @@ export default {
             this.$router.replace({
                 query: {
                     ...this.$route.query,
-                    status: newFilter.status,
-                    active: newFilter.active,
-                    tags: newFilter.tags,
+                    ...newFilter,
                 },
             });
         },
@@ -388,7 +386,7 @@ export default {
 
             // filter by status
             let statusMatch = true;
-            if (this.filterState.status != null && this.filterState.status.length > 0) {
+            if (this.filterState.status.length > 0) {
                 if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
                     monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
                 }
@@ -397,13 +395,13 @@ export default {
 
             // filter by active
             let activeMatch = true;
-            if (this.filterState.active != null && this.filterState.active.length > 0) {
+            if (this.filterState.active.length > 0) {
                 activeMatch = this.filterState.active.includes(monitor.active);
             }
 
             // filter by tags
             let tagsMatch = true;
-            if (this.filterState.tags != null && this.filterState.tags.length > 0) {
+            if (this.filterState.tags.length > 0) {
                 tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs
                     .filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
                     .length > 0;
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 251551006..5f223d60c 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -14,10 +14,10 @@
             <font-awesome-icon v-if="numFiltersActive > 0" icon="times" />
         </button>
         <MonitorListFilterDropdown
-            :filterActive="filterState.status?.length > 0"
+            :filterActive="filterState.status.length > 0"
         >
             <template #status>
-                <Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
+                <Status v-if="filterState.status.length === 1" :status="filterState.status[0]" />
                 <span v-else>
                     {{ $t('Status') }}
                 </span>
@@ -29,7 +29,7 @@
                             <Status :status="1" />
                             <span class="ps-3">
                                 {{ $root.stats.up }}
-                                <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(1)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -42,7 +42,7 @@
                             <Status :status="0" />
                             <span class="ps-3">
                                 {{ $root.stats.down }}
-                                <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(0)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -55,7 +55,7 @@
                             <Status :status="2" />
                             <span class="ps-3">
                                 {{ $root.stats.pending }}
-                                <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(2)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -68,7 +68,7 @@
                             <Status :status="3" />
                             <span class="ps-3">
                                 {{ $root.stats.maintenance }}
-                                <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(3)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -77,9 +77,9 @@
                 </li>
             </template>
         </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
+        <MonitorListFilterDropdown :filterActive="filterState.active.length > 0">
             <template #status>
-                <span v-if="filterState.active?.length === 1">
+                <span v-if="filterState.active.length === 1">
                     <span v-if="filterState.active[0] === true">{{ $t("Running") }}</span>
                     <span v-else-if="filterState.active[0] === false">{{ $t("filterActivePaused") }}</span>
                     <span v-else>{{ $t("Unknown") }}</span>
@@ -95,7 +95,7 @@
                             <span>{{ $t("Running") }}</span>
                             <span class="ps-3">
                                 {{ $root.stats.active }}
-                                <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
+                                <span v-if="filterState.active.includes(true)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -108,7 +108,7 @@
                             <span>{{ $t("filterActivePaused") }}</span>
                             <span class="ps-3">
                                 {{ $root.stats.pause }}
-                                <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
+                                <span v-if="filterState.active.includes(false)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -117,11 +117,11 @@
                 </li>
             </template>
         </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
+        <MonitorListFilterDropdown :filterActive="filterState.tags.length > 0">
             <template #status>
                 <!-- Prevent rendering Tag component if tagsList has not been fetched or filterState contains invalid tag -->
                 <Tag
-                    v-if="filterState.tags?.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
+                    v-if="filterState.tags.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
                     :item="tagsList.find(tag => tag.id === filterState.tags[0])"
                     :size="'sm'"
                 />
@@ -136,7 +136,7 @@
                             <span><Tag :item="tag" :size="'sm'" /></span>
                             <span class="ps-3">
                                 {{ getTaggedMonitorCount(tag) }}
-                                <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
+                                <span v-if="filterState.tags.includes(tag.id)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -181,7 +181,7 @@ export default {
             let num = 0;
 
             Object.values(this.filterState).forEach(item => {
-                if (item != null && item.length > 0) {
+                if (item.length > 0) {
                     num += 1;
                 }
             });
@@ -219,14 +219,10 @@ export default {
                 ...this.filterState
             };
 
-            if (newFilter.status == null) {
-                newFilter.status = [ status ];
+            if (newFilter.status.includes(status)) {
+                newFilter.status = newFilter.status.filter(item => item !== status);
             } else {
-                if (newFilter.status.includes(status)) {
-                    newFilter.status = newFilter.status.filter(item => item !== status);
-                } else {
-                    newFilter.status.push(status);
-                }
+                newFilter.status.push(status);
             }
             this.$emit("updateFilter", newFilter);
         },
@@ -235,14 +231,10 @@ export default {
                 ...this.filterState
             };
 
-            if (newFilter.active == null) {
-                newFilter.active = [ active ];
+            if (newFilter.active.includes(active)) {
+                newFilter.active = newFilter.active.filter(item => item !== active);
             } else {
-                if (newFilter.active.includes(active)) {
-                    newFilter.active = newFilter.active.filter(item => item !== active);
-                } else {
-                    newFilter.active.push(active);
-                }
+                newFilter.active.push(active);
             }
             this.$emit("updateFilter", newFilter);
         },
@@ -251,14 +243,10 @@ export default {
                 ...this.filterState
             };
 
-            if (newFilter.tags == null) {
-                newFilter.tags = [ tag.id ];
+            if (newFilter.tags.includes(tag.id)) {
+                newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
             } else {
-                if (newFilter.tags.includes(tag.id)) {
-                    newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
-                } else {
-                    newFilter.tags.push(tag.id);
-                }
+                newFilter.tags.push(tag.id);
             }
             this.$emit("updateFilter", newFilter);
         },