From a1ba366a29f4e34193a27be4b7f2ac37c0a3c87c Mon Sep 17 00:00:00 2001
From: Paulo Gomes da Cruz Junior <paulo.cruz@gov.bc.ca>
Date: Thu, 19 Dec 2024 09:25:15 -0800
Subject: [PATCH] fix(SILVA-549): fixing date picker on advanced search (#539)

---
 .../Openings/OpeningSearchBar.test.tsx        |   2 +-
 .../Openings/AdvancedSearchDropdown/index.tsx | 113 +++++++-----------
 2 files changed, 47 insertions(+), 68 deletions(-)

diff --git a/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx b/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx
index 820d83e4..a4dff783 100644
--- a/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx
+++ b/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx
@@ -6,7 +6,6 @@ import "@testing-library/jest-dom";
 import OpeningsSearchBar from "../../../../components/SilvicultureSearch/Openings/OpeningsSearchBar";
 import { vi } from "vitest";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { OpeningsSearchProvider, useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch";
 import userEvent from "@testing-library/user-event";
 
 // Mock the useOpeningsSearch context to avoid rendering errors
@@ -20,6 +19,7 @@ vi.mock("../../../../contexts/search/OpeningsSearch", async () => {
       searchTerm: "",
       setSearchTerm: vi.fn(),
       setIndividualClearFieldFunctions: vi.fn(),
+      setFilters: vi.fn(),
     }),
   }
 });
diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx
index 5b57ebd3..ecdf66c0 100644
--- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx
+++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx
@@ -16,10 +16,10 @@ import "./AdvancedSearchDropdown.scss";
 import { useOpeningFiltersQuery } from "../../../../services/queries/search/openingQueries";
 import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch";
 import { TextValueData, sortItems } from "../../../../utils/multiSelectSortUtils";
-import { formatDateForDatePicker } from "../../../../utils/DateUtils";
 import { AutocompleteProvider } from "../../../../contexts/AutocompleteProvider";
 import AutocompleteClientLocation, { skipConditions, fetchValues, AutocompleteComponentRefProps} from "../../../AutocompleteClientLocation";
-import { OpeningFilters, openingFiltersKeys } from '../../../../services/search/openings';
+import { OpeningFilters } from '../../../../services/search/openings';
+import { format } from "date-fns";
 
 interface AdvancedSearchDropdownProps {
   toggleShowFilters: () => void; // Function to be passed as a prop
@@ -33,6 +33,12 @@ const AdvancedSearchDropdown: React.FC<AdvancedSearchDropdownProps> = () => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState<any[]>([]);
   const [selectedCategories, setSelectedCategories] = useState<any[]>([]);
   const autoCompleteRef = useRef<AutocompleteComponentRefProps>(null);
+  const [dateRange, setDateRange] = useState<Date[]>([]);
+
+  const maxDate = () => format(new Date(), "yyyy/MM/dd");
+  const getDateRangeValue = (dates: Date[], index: number) => {
+    return dates && dates.length > index ? format(dates[index],"yyyy/MM/dd") : "";
+  }
 
   useEffect(() => {
     // Split filters.orgUnit into array and format as needed for selectedItems
@@ -62,7 +68,10 @@ const AdvancedSearchDropdown: React.FC<AdvancedSearchDropdownProps> = () => {
     // The idea is to keep the autocomplete component clear of any ties to the opening search context
     setIndividualClearFieldFunctions((previousIndividualFilters) => ({
       ...previousIndividualFilters,
-      clientLocationCode: () => autoCompleteRef.current?.reset()
+      clientLocationCode: () => autoCompleteRef.current?.reset(),
+      startDate: () => setDateRange([]),
+      endDate: () => setDateRange([]),
+      dateType: () => setDateRange([])
     }));
 
   },[]);
@@ -71,6 +80,13 @@ const AdvancedSearchDropdown: React.FC<AdvancedSearchDropdownProps> = () => {
     setFilters({ ...filters, ...updatedFilters });
   };
 
+  useEffect(() =>{
+    handleFilterChange({ 
+      startDate: dateRange && dateRange.length > 0 ? format(dateRange[0], "yyyy-MM-dd") : undefined,
+      endDate: dateRange && dateRange.length > 1 ? format(dateRange[1], "yyyy-MM-dd") : undefined
+    });
+  },[dateRange]);
+
   const handleMultiSelectChange = (group: string, selectedItems: any) => {
     const updatedGroup = selectedItems.map((item: any) => item.value);
     if (group === "orgUnit")
@@ -271,70 +287,33 @@ const AdvancedSearchDropdown: React.FC<AdvancedSearchDropdownProps> = () => {
                   max={11}
                   className="date-selectors-col"
                 >
-                  <div className="d-flex flex-auto">
-                    <DatePicker
-                      datePickerType="single"
-                      className="me-1"
-                      onChange={(dates: [Date]) => {
-                        if (dates.length > 0) {
-                          handleFilterChange({
-                            startDate: dates[0].toISOString().slice(0, 10),
-                          });
-                        }
-                      }}
-                      onClose={(dates: [Date]) => {
-                        if (dates.length > 0) {
-                          handleFilterChange({
-                            startDate: dates[0].toISOString().slice(0, 10),
-                          });
-                        }
-                      }}
-                      readOnly={!filters.dateType}
-                    >
-                      <DatePickerInput
-                        id="start-date-picker-input-id"
-                        size="md"
-                        labelText="Start Date"
-                        placeholder={
-                          filters.startDate
-                            ? filters.startDate // Display the date in YYYY-MM-DD format
-                            : "yyyy/MM/dd"
-                        }
-                        value={formatDateForDatePicker(filters.startDate)}
-                      />
-                    </DatePicker>
-
-                    <DatePicker
-                      datePickerType="single"
-                      onChange={(dates: [Date]) => {
-                        if (dates.length > 0) {
-                          handleFilterChange({
-                            endDate: dates[0].toISOString().slice(0, 10),
-                          });
-                        }
-                      }}
-                      onClose={(dates: [Date]) => {
-                        if (dates.length > 0) {
-                          handleFilterChange({
-                            endDate: dates[0].toISOString().slice(0, 10),
-                          });
-                        }
-                      }}
-                      readOnly={!filters.dateType}
-                    >
-                      <DatePickerInput
-                        id="end-date-picker-input-id"
-                        size="md"
-                        labelText="End Date"
-                        placeholder={
-                          filters.endDate
-                            ? filters.endDate // Display the date in YYYY-MM-DD format
-                            : "yyyy/MM/dd"
-                        }
-                        value={formatDateForDatePicker(filters.endDate)}
-                      />
-                    </DatePicker>
-                  </div>
+                  <DatePicker
+                    datePickerType="range"
+                    dateFormat="Y/m/d"
+                    allowInput={true}
+                    maxDate={maxDate()}
+                    onChange={setDateRange}
+                    value={dateRange}
+                  >
+                    <DatePickerInput
+                      autoComplete="off"
+                      id="start-date-picker-input-id"
+                      placeholder="yyyy/MM/dd"
+                      size="md"
+                      labelText="Start Date"
+                      disabled={!filters.dateType}
+                      value={getDateRangeValue(dateRange, 0)}
+                    />
+                    <DatePickerInput
+                      autoComplete="off"
+                      id="end-date-picker-input-id"
+                      placeholder="yyyy/MM/dd"
+                      size="md"
+                      labelText="End Date"
+                      disabled={!filters.dateType}
+                      value={getDateRangeValue(dateRange, 1)}
+                    />
+                  </DatePicker>
                 </Column>
               </Row>
             </FlexGrid>