fix: filter custom date select toggle (#4244)

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);

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);

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>

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>

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);

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);

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>

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>

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>

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);

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 = () => {

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);
 };