From 73f87f7d602fe060ebb435b4e7ac176cb0f8cb85 Mon Sep 17 00:00:00 2001
From: shrilakshmishastry <shrilakshmishastry@gmail.com>
Date: Sat, 23 Apr 2022 07:34:13 +0530
Subject: [PATCH 1/6] add feature to show no of filters applied

---
 src/common/search/FilterPlays.jsx | 43 +++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index bbd95e9de6..0b508db35c 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -1,6 +1,6 @@
 import { Modal } from "common";
 import { getAllCreators, getAllLevels, getAllTags } from "meta/play-meta-util";
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { SearchContext } from "./search-context";
 import "./search.css";
@@ -70,6 +70,35 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
   );
 };
 
+const getAppliedFilter = (filterObject) => {
+  //for single filter to check whether filter has been applied
+  const noOfLevelsApplied =
+    filterObject?.level !== undefined && filterObject.level.trim() !== ""
+      ? 1
+      : 0;
+  const noOfcreatorsApplied =
+    filterObject.creator !== undefined && filterObject.creator.trim() !== ""
+      ? 1
+      : 0;
+  let totalTags = 0;
+  if (filterObject?.tags && filterObject?.labels && filterObject?.creators) {
+    totalTags =
+      noOfLevelsApplied +
+      noOfcreatorsApplied +
+      filterObject?.tags?.length +
+      filterObject?.labels?.length +
+      filterObject?.creators?.length;
+  }
+
+  console.log(totalTags, noOfLevelsApplied, noOfcreatorsApplied);
+  console.log(
+    filterObject?.tags?.length,
+    filterObject?.labels?.length,
+    filterObject?.creators?.length
+  );
+  return totalTags;
+};
+
 const FilterPlays = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -80,6 +109,11 @@ const FilterPlays = () => {
     labels: [],
     creators: [],
   });
+
+  useEffect(() => {
+    getAppliedFilter(0);
+  }, []);
+
   useBackListener(({ action }) => {
     if (action === "POP") {
       console.log("POP");
@@ -87,11 +121,15 @@ const FilterPlays = () => {
         level: "",
         tags: [],
         creator: "",
+        labels: [],
+        creators: [],
       });
       setFilterQuery({
         level: "",
         tags: [],
         creator: "",
+        labels: [],
+        creators: [],
       });
     }
     if (action === "PUSH") {
@@ -113,6 +151,7 @@ const FilterPlays = () => {
     console.log("filterQuery", filterQuery);
     console.log("modifiedFilterQuery", modifiedFilterQuery);
     setFilterQuery(modifiedFilterQuery);
+    getAppliedFilter(modifiedFilterQuery);
     if (location.pathname !== "/plays") {
       navigate("/plays", { replace: true });
     }
@@ -140,7 +179,7 @@ const FilterPlays = () => {
         className="btn-filter"
         title="Filter Plays"
       >
-        {/*<div className="badge">8</div>*/}
+        <div className="badge">8</div>
         <RiFilterFill
           className="icon"
           size="28px"

From 0d70eae8eae319393ebcbb0aac284c0394bf3fe0 Mon Sep 17 00:00:00 2001
From: shrilakshmishastry <shrilakshmishastry@gmail.com>
Date: Sat, 30 Apr 2022 11:43:41 +0530
Subject: [PATCH 2/6] add feat show no of filters applied

---
 src/common/search/FilterPlays.jsx | 38 ++++++++++++++-----------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 0b508db35c..4d5e9e57c3 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -37,7 +37,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
         <select
           className="form-control"
           onChange={(event) =>
-            setFilterQuery({ ...filterQuery, tags: [event.target.value] })
+            setFilterQuery({ ...filterQuery, tags: event.target.value !== "" ? [event.target.value] : [] })
           }
           value={filterQuery.tags[0]}
         >
@@ -80,22 +80,18 @@ const getAppliedFilter = (filterObject) => {
     filterObject.creator !== undefined && filterObject.creator.trim() !== ""
       ? 1
       : 0;
-  let totalTags = 0;
-  if (filterObject?.tags && filterObject?.labels && filterObject?.creators) {
-    totalTags =
-      noOfLevelsApplied +
-      noOfcreatorsApplied +
-      filterObject?.tags?.length +
-      filterObject?.labels?.length +
-      filterObject?.creators?.length;
+  let totalTags = noOfLevelsApplied +
+    noOfcreatorsApplied;
+
+  //if the appiled filter is an array form. Useful for handling multi filter
+
+  if (filterObject?.tags || filterObject?.labels || filterObject?.creators) {
+    totalTags +=
+      filterObject?.tags?.length ? filterObject.tags.length : 0 +
+        filterObject?.labels?.length ? filterObject.labels.length : 0 +
+          filterObject?.creators?.length ? filterObject.creators.length : 0;
   }
 
-  console.log(totalTags, noOfLevelsApplied, noOfcreatorsApplied);
-  console.log(
-    filterObject?.tags?.length,
-    filterObject?.labels?.length,
-    filterObject?.creators?.length
-  );
   return totalTags;
 };
 
@@ -109,10 +105,7 @@ const FilterPlays = () => {
     labels: [],
     creators: [],
   });
-
-  useEffect(() => {
-    getAppliedFilter(0);
-  }, []);
+  const [noOfAppliedFilter, setnoOfAppliedFilter] = useState(0);
 
   useBackListener(({ action }) => {
     if (action === "POP") {
@@ -131,6 +124,7 @@ const FilterPlays = () => {
         labels: [],
         creators: [],
       });
+      setnoOfAppliedFilter(0);
     }
     if (action === "PUSH") {
       console.log("PUSH");
@@ -145,13 +139,15 @@ const FilterPlays = () => {
         creator: "",
       });
     }
+    setnoOfAppliedFilter(0);
   });
   const handleFilter = (event) => {
     event.preventDefault();
+    console.log(modifiedFilterQuery + "hello");
     console.log("filterQuery", filterQuery);
     console.log("modifiedFilterQuery", modifiedFilterQuery);
     setFilterQuery(modifiedFilterQuery);
-    getAppliedFilter(modifiedFilterQuery);
+    setnoOfAppliedFilter(getAppliedFilter(modifiedFilterQuery));
     if (location.pathname !== "/plays") {
       navigate("/plays", { replace: true });
     }
@@ -179,7 +175,7 @@ const FilterPlays = () => {
         className="btn-filter"
         title="Filter Plays"
       >
-        <div className="badge">8</div>
+        <div className="badge">{noOfAppliedFilter}</div>
         <RiFilterFill
           className="icon"
           size="28px"

From f3745330304af61b7119a764aa268123b0ffe5ec Mon Sep 17 00:00:00 2001
From: shrilakshmishastry <shrilakshmishastry@gmail.com>
Date: Sat, 30 Apr 2022 12:23:06 +0530
Subject: [PATCH 3/6] remove console log messages

---
 src/common/search/FilterPlays.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 4d5e9e57c3..00eea2473d 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -143,7 +143,6 @@ const FilterPlays = () => {
   });
   const handleFilter = (event) => {
     event.preventDefault();
-    console.log(modifiedFilterQuery + "hello");
     console.log("filterQuery", filterQuery);
     console.log("modifiedFilterQuery", modifiedFilterQuery);
     setFilterQuery(modifiedFilterQuery);

From 9f0fcd9f904ce625ff47198d1ecdbc42933616d8 Mon Sep 17 00:00:00 2001
From: shrilakshmishastry <shrilakshmishastry@gmail.com>
Date: Sat, 30 Apr 2022 12:49:00 +0530
Subject: [PATCH 4/6] remove unused useeffect

---
 src/common/search/FilterPlays.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 00eea2473d..8440a97ac8 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -1,6 +1,6 @@
 import { Modal } from "common";
 import { getAllCreators, getAllLevels, getAllTags } from "meta/play-meta-util";
-import { useContext, useState, useEffect } from "react";
+import { useContext, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { SearchContext } from "./search-context";
 import "./search.css";

From a4db1eccc7b729d64c99c0c0489b7309c2de30ef Mon Sep 17 00:00:00 2001
From: shrilakshmishastry <shrilakshmishastry@gmail.com>
Date: Sat, 30 Apr 2022 20:42:58 +0530
Subject: [PATCH 5/6] remove count when no filters applied

---
 src/common/search/FilterPlays.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 8440a97ac8..e50509da2e 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -173,8 +173,12 @@ const FilterPlays = () => {
         onClick={() => setShowModal(true)}
         className="btn-filter"
         title="Filter Plays"
-      >
-        <div className="badge">{noOfAppliedFilter}</div>
+      >{
+          noOfAppliedFilter === 0 ?
+            <></>
+            : <div className="badge">{noOfAppliedFilter}</div>
+        }
+
         <RiFilterFill
           className="icon"
           size="28px"

From d6f0f63f1e45c1c49c524a8b6d38926b44e1af54 Mon Sep 17 00:00:00 2001
From: shrilakshmishastry <shrilakshmishastry@gmail.com>
Date: Sun, 1 May 2022 19:17:25 +0530
Subject: [PATCH 6/6] replace react fragment with null

---
 src/common/search/FilterPlays.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index e50509da2e..3489695a8f 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -175,7 +175,7 @@ const FilterPlays = () => {
         title="Filter Plays"
       >{
           noOfAppliedFilter === 0 ?
-            <></>
+            null
             : <div className="badge">{noOfAppliedFilter}</div>
         }