From e1b4e2e034b129491e1c096921bf79928f33420c Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 8 Dec 2021 14:32:27 +0100
Subject: [PATCH] DEV: removes jquery usage from add-category-tag-classes
 (#15232)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
---
 .../components/add-category-tag-classes.js    | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/add-category-tag-classes.js b/app/assets/javascripts/discourse/app/components/add-category-tag-classes.js
index 8e8dd86683..8cb6081fe8 100644
--- a/app/assets/javascripts/discourse/app/components/add-category-tag-classes.js
+++ b/app/assets/javascripts/discourse/app/components/add-category-tag-classes.js
@@ -15,21 +15,19 @@ export default Component.extend({
       return;
     }
     const slug = this.get("category.fullSlug");
-    const tags = this.tags;
 
     this._removeClass();
 
-    let classes = [];
+    const classes = [];
+
     if (slug) {
       classes.push("category");
       classes.push(`category-${slug}`);
     }
-    if (tags) {
-      tags.forEach((t) => classes.push(`tag-${t}`));
-    }
-    if (classes.length > 0) {
-      $("body").addClass(classes.join(" "));
-    }
+
+    this.tags?.forEach((t) => classes.push(`tag-${t}`));
+
+    document.body.classList.add(...classes);
   },
 
   @observes("category.fullSlug", "tags")
@@ -37,14 +35,23 @@ export default Component.extend({
     scheduleOnce("afterRender", this, this._updateClass);
   },
 
-  _removeClass() {
-    $("body").removeClass((_, css) =>
-      (css.match(/\b(?:category|tag)-\S+|( category )/g) || []).join(" ")
-    );
-  },
-
   willDestroyElement() {
     this._super(...arguments);
     this._removeClass();
   },
+
+  _removeClass() {
+    const invalidClasses = [];
+    const regex = /\b(?:category|tag)-\S+|( category )/g;
+
+    document.body.classList.forEach((name) => {
+      if (regex.test(name)) {
+        invalidClasses.push(name);
+      }
+    });
+
+    if (invalidClasses.length) {
+      document.body.classList.remove(...invalidClasses);
+    }
+  },
 });