From e7fc942514e8713c4ad2be66deab48767f37c97c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 3 Apr 2024 18:03:16 +0530
Subject: [PATCH] [WEB-830] chore: project filter dropdown custom date select
 option improvement (#4069)

* chore: project filter dropdown custom date select option improvement

* fix: project filter custom date
---
 web/components/headers/projects.tsx               |  1 +
 .../project/dropdowns/filters/created-at.tsx      | 15 ++++++++++++++-
 web/helpers/date-time.helper.ts                   |  4 ++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 2f502bce5..64c370d17 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -57,6 +57,7 @@ export const ProjectsHeader = 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/project/dropdowns/filters/created-at.tsx b/web/components/project/dropdowns/filters/created-at.tsx
index 5a1b75c00..899281421 100644
--- a/web/components/project/dropdowns/filters/created-at.tsx
+++ b/web/components/project/dropdowns/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 { isDate } 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) => isDate(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/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index 7ca4d49fb..ba594e6b1 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -224,3 +224,7 @@ export const getDate = (date: string | Date | undefined | null): Date | undefine
     return undefined;
   }
 };
+export const isDate = (date: string) => {
+  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
+  return datePattern.test(date);
+};