From dfd0dd0475b9186e2a76e2a5b701f8ac681910ec Mon Sep 17 00:00:00 2001
From: "antonio.bergas" <anthonyprincedom@hotmail.com>
Date: Wed, 17 May 2023 23:19:37 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(pluginsFilter):=20added=20drop?=
 =?UTF-8?q?down=20filter=20for=20plugins=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: antonio.bergas <anthonyprincedom@hotmail.com>
---
 microsite/src/pages/plugins/index.tsx | 41 ++++++++++++---------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/microsite/src/pages/plugins/index.tsx b/microsite/src/pages/plugins/index.tsx
index 02f7854110..6b2ebe22a1 100644
--- a/microsite/src/pages/plugins/index.tsx
+++ b/microsite/src/pages/plugins/index.tsx
@@ -31,34 +31,29 @@ plugins.corePlugins.sort((a, b) => a.order - b.order);
 plugins.otherPlugins.sort((a, b) => a.order - b.order);
 
 const Plugins = () => {
-  const allCategories: ChipCategory[] = [];
-  plugins.corePlugins.concat(plugins.otherPlugins).forEach(pluginData => {
-    const index = allCategories.findIndex(
-      chip => chip.name === pluginData.category,
-    );
-    if (index === -1) {
-      allCategories.push({
-        name: pluginData.category,
-        isSelected: false,
-      });
-    }
-  });
-
-  const [categories, setCategories] = useState(allCategories);
-  const [selectedCategories, setSelectedCategories] = useState([]);
+  const allCategoriesSet = new Set(
+    [...plugins.corePlugins, ...plugins.otherPlugins].map(
+      ({ category }) => category,
+    ),
+  );
+  const allCategoriesArray = Array.from(allCategoriesSet).map(category => ({
+    name: category,
+    isSelected: false,
+  }));
+  const [categories, setCategories] =
+    useState<ChipCategory[]>(allCategoriesArray);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [showCoreFeaturesHeader, setShowCoreFeaturesHeader] = useState(true);
   const [showOtherPluginsHeader, setShowOtherPluginsHeader] = useState(true);
 
   const handleChipClick = (categoryName: string) => {
-    console.log(categoryName);
-    const category = categories.find(
-      category => category.name === categoryName,
-    );
-    const isSelected = category?.isSelected || false;
+    const isSelected =
+      categories.find(category => category.name === categoryName)?.isSelected ||
+      false;
 
-    const newSelectedCategories = isSelected ? selectedCategories.filter(
-        c => c !== categoryName,
-      ) : selectedCategories.push(categoryName);
+    const newSelectedCategories = isSelected
+      ? selectedCategories.filter(c => c !== categoryName)
+      : [...selectedCategories, categoryName];
 
     setSelectedCategories(newSelectedCategories);