From beff8536c90620fbeab82b3650cef9488c4ec6e4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 23 Apr 2024 12:56:21 +0530
Subject: [PATCH] fix: filter custom date select toggle (#4244)

---
 web/components/cycles/archived-cycles/header.tsx  |  2 +-
 web/components/cycles/cycles-view-header.tsx      |  2 ++
 .../cycles/dropdowns/filters/end-date.tsx         | 15 ++++++++++++++-
 .../cycles/dropdowns/filters/start-date.tsx       | 15 ++++++++++++++-
 web/components/headers/modules-list.tsx           |  1 +
 .../modules/archived-modules/header.tsx           |  2 +-
 .../modules/dropdowns/filters/start-date.tsx      | 15 ++++++++++++++-
 .../modules/dropdowns/filters/target-date.tsx     | 15 ++++++++++++++-
 web/components/pages/list/filters/created-at.tsx  | 15 ++++++++++++++-
 web/components/pages/list/filters/root.tsx        |  1 +
 .../project/dropdowns/filters/created-at.tsx      |  4 ++--
 web/helpers/date-time.helper.ts                   |  2 +-
 12 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/web/components/cycles/archived-cycles/header.tsx b/web/components/cycles/archived-cycles/header.tsx
index 267c87388..f5edc3bd3 100644
--- a/web/components/cycles/archived-cycles/header.tsx
+++ b/web/components/cycles/archived-cycles/header.tsx
@@ -34,12 +34,12 @@ export const ArchivedCyclesHeader: FC = observer(() => {
   const handleFilters = useCallback(
     (key: keyof TCycleFilters, value: string | string[]) => {
       if (!projectId) return;
-
       const newValues = currentProjectArchivedFilters?.[key] ?? [];
 
       if (Array.isArray(value))
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       else {
         if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/cycles/cycles-view-header.tsx b/web/components/cycles/cycles-view-header.tsx
index aad650dd6..50cf6df97 100644
--- a/web/components/cycles/cycles-view-header.tsx
+++ b/web/components/cycles/cycles-view-header.tsx
@@ -47,11 +47,13 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
 
   const handleFilters = useCallback(
     (key: keyof TCycleFilters, value: string | string[]) => {
+      if (!projectId) return;
       const newValues = currentProjectFilters?.[key] ?? [];
 
       if (Array.isArray(value))
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       else {
         if (currentProjectFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/cycles/dropdowns/filters/end-date.tsx b/web/components/cycles/dropdowns/filters/end-date.tsx
index 699071187..e689859e5 100644
--- a/web/components/cycles/dropdowns/filters/end-date.tsx
+++ b/web/components/cycles/dropdowns/filters/end-date.tsx
@@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
 import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+// helpers
+import { isInDateFormat } from "@/helpers/date-time.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -25,6 +27,17 @@ export const FilterEndDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -53,7 +66,7 @@ export const FilterEndDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/cycles/dropdowns/filters/start-date.tsx b/web/components/cycles/dropdowns/filters/start-date.tsx
index 2b55ada35..0b8408c2e 100644
--- a/web/components/cycles/dropdowns/filters/start-date.tsx
+++ b/web/components/cycles/dropdowns/filters/start-date.tsx
@@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
 import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+// helpers
+import { isInDateFormat } from "@/helpers/date-time.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -25,6 +27,17 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -53,7 +66,7 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 37aa68fce..6b28dc40b 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -62,6 +62,7 @@ export const ModulesListHeader: React.FC = observer(() => {
       if (Array.isArray(value))
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       else {
         if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/modules/archived-modules/header.tsx b/web/components/modules/archived-modules/header.tsx
index f72d35f4e..d4d5ef37a 100644
--- a/web/components/modules/archived-modules/header.tsx
+++ b/web/components/modules/archived-modules/header.tsx
@@ -43,12 +43,12 @@ export const ArchivedModulesHeader: FC = observer(() => {
   const handleFilters = useCallback(
     (key: keyof TModuleFilters, value: string | string[]) => {
       if (!projectId) return;
-
       const newValues = currentProjectArchivedFilters?.[key] ?? [];
 
       if (Array.isArray(value))
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       else {
         if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/modules/dropdowns/filters/start-date.tsx b/web/components/modules/dropdowns/filters/start-date.tsx
index 2b55ada35..0b8408c2e 100644
--- a/web/components/modules/dropdowns/filters/start-date.tsx
+++ b/web/components/modules/dropdowns/filters/start-date.tsx
@@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
 import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+// helpers
+import { isInDateFormat } from "@/helpers/date-time.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -25,6 +27,17 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -53,7 +66,7 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/modules/dropdowns/filters/target-date.tsx b/web/components/modules/dropdowns/filters/target-date.tsx
index cbb45eb7a..f97021720 100644
--- a/web/components/modules/dropdowns/filters/target-date.tsx
+++ b/web/components/modules/dropdowns/filters/target-date.tsx
@@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
 import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+// helpers
+import { isInDateFormat } from "@/helpers/date-time.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -25,6 +27,17 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -53,7 +66,7 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/pages/list/filters/created-at.tsx b/web/components/pages/list/filters/created-at.tsx
index 5a1b75c00..731bfa844 100644
--- a/web/components/pages/list/filters/created-at.tsx
+++ b/web/components/pages/list/filters/created-at.tsx
@@ -5,6 +5,8 @@ import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
 import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
+// helpers
+import { isInDateFormat } from "@/helpers/date-time.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -24,6 +26,17 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -52,7 +65,7 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/pages/list/filters/root.tsx b/web/components/pages/list/filters/root.tsx
index 1107bbe95..475f89054 100644
--- a/web/components/pages/list/filters/root.tsx
+++ b/web/components/pages/list/filters/root.tsx
@@ -27,6 +27,7 @@ export const PageFiltersSelection: React.FC<Props> = observer((props) => {
       if (Array.isArray(value))
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       else if (typeof value === "string") {
         if (newValues?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/project/dropdowns/filters/created-at.tsx b/web/components/project/dropdowns/filters/created-at.tsx
index 899281421..731bfa844 100644
--- a/web/components/project/dropdowns/filters/created-at.tsx
+++ b/web/components/project/dropdowns/filters/created-at.tsx
@@ -6,7 +6,7 @@ import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
 import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
 // helpers
-import { isDate } from "@/helpers/date-time.helper";
+import { isInDateFormat } from "@/helpers/date-time.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -27,7 +27,7 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
   );
 
   const isCustomDateSelected = () => {
-    const isValidDateSelected = appliedFilters?.filter((f) => isDate(f.split(";")[0])) || [];
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
     return isValidDateSelected.length > 0 ? true : false;
   };
   const handleCustomDate = () => {
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index ba594e6b1..5d5acd07e 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -224,7 +224,7 @@ export const getDate = (date: string | Date | undefined | null): Date | undefine
     return undefined;
   }
 };
-export const isDate = (date: string) => {
+export const isInDateFormat = (date: string) => {
   const datePattern = /^\d{4}-\d{2}-\d{2}$/;
   return datePattern.test(date);
 };