Merge pull request #187 from CivicDataLab/186-fix-analytics-page-on-deselecting-all-dates-selected

fix empty date dropdown handling and fallbacks in all views

Author: bhavabhuthi

app/[locale]/[state]/analytics/components/analytics-layout.tsx

@@ -38,9 +38,11 @@ export function AnalyticsMainLayout() {
   const searchParams = useSearchParams();
   const indicator = searchParams.get('indicator') || '';
 
-  const timePeriod = getLatestDate(
-    searchParams.getAll('time-period') || process.env.NEXT_PUBLIC_TIME_PERIOD
-  )?.split('-');
+  const timePeriod = searchParams.get('time-period')
+    ? getLatestDate(searchParams.get('time-period')?.split(',') || [])?.split(
+        '-'
+      ) || process.env.NEXT_PUBLIC_TIME_PERIOD
+    : null;
 
   const timePeriodSelected = timePeriod
     ? `${timePeriod[0]}_${timePeriod[1]}`
@@ -342,52 +344,69 @@ export function AnalyticsMainLayout() {
                   />
                 </div>
 
-                {mapData?.isFetching && revenueMapData?.isFetching && (
-                  <div className="flex h-full flex-col place-content-center items-center">
-                    <Spinner color="highlight" />
-                    <Text>Loading...</Text>
+                {!timePeriod ? (
+                  <div className="flex h-[calc(100dvh_-_400px)] flex-col place-content-center items-center">
+                    <Text>Please select a time period</Text>
                   </div>
+                ) : (
+                  <>
+                    {mapData?.isFetching && revenueMapData?.isFetching && (
+                      <div className="flex h-full flex-col place-content-center items-center">
+                        <Spinner color="highlight" />
+                        <Text>Loading...</Text>
+                      </div>
+                    )}
+
+                    {revenueMapData?.data && mapData?.data && (
+                      <MapComponent
+                        indicator={indicator}
+                        mapDataloading={mapData?.isFetching}
+                        revenueMapDataLoading={revenueMapData?.isFetching}
+                        indicatorsData={indicatorsData?.data?.indicators}
+                        setRegion={setDistrictCode}
+                        setRevenueRegion={setRevenueCode}
+                        revenueMapData={revenueMapData?.data?.revCircleMapData}
+                        mapData={mapData?.data?.districtMapData}
+                        currentSelectedState={currentSelectedState}
+                      />
+                    )}
+
+                    {region !== null && region.length > 0 && view === 'map' && (
+                      <OutputWindowComponent
+                        currentState={currentSelectedState}
+                        time_period={timePeriodSelected}
+                      />
+                    )}
+                  </>
                 )}
-
-                {revenueMapData?.data && mapData?.data && (
-                  <MapComponent
-                    indicator={indicator}
-                    mapDataloading={mapData?.isFetching}
-                    revenueMapDataLoading={revenueMapData?.isFetching}
-                    indicatorsData={indicatorsData?.data?.indicators}
-                    setRegion={setDistrictCode}
-                    setRevenueRegion={setRevenueCode}
-                    revenueMapData={revenueMapData?.data?.revCircleMapData}
-                    mapData={mapData?.data?.districtMapData}
+              </div>
+            </TabPanel>
+            <TabPanel value="table">
+              <div className=" mt-2 h-[calc(100dvh_-_140px)]">
+                <div>
+                  <FilterDropdownOptions
                     currentSelectedState={currentSelectedState}
+                    RevCircleDropdownOptions={RevCircleDropdownOptions}
+                    DistrictDropDownOption={DistrictDropDownOption}
+                    timeLimits={timePeriods}
                   />
-                )}
-                {region !== null && region.length > 0 && view === 'map' && (
-                  <OutputWindowComponent
-                    currentState={currentSelectedState}
-                    time_period={timePeriodSelected}
+                </div>
+                {!timePeriod ? (
+                  <div className="flex h-[calc(100dvh_-_400px)] flex-col place-content-center items-center">
+                    <Text>Please select a time period</Text>
+                  </div>
+                ) : (
+                  <TableComponent
+                    data={
+                      filteredTableData?.length > 0
+                        ? filteredTableData
+                        : tableData.data?.tableData
+                    }
+                    isLoading={tableData.isLoading}
                   />
                 )}
               </div>
             </TabPanel>
-            <TabPanel value="table">
-              <div>
-                <FilterDropdownOptions
-                  currentSelectedState={currentSelectedState}
-                  RevCircleDropdownOptions={RevCircleDropdownOptions}
-                  DistrictDropDownOption={DistrictDropDownOption}
-                  timeLimits={timePeriods}
-                />
-              </div>
-              <TableComponent
-                data={
-                  filteredTableData?.length > 0
-                    ? filteredTableData
-                    : tableData.data?.tableData
-                }
-                isLoading={tableData.isLoading}
-              />
-            </TabPanel>
             <TabPanel value="chart">
               <div className=" mt-2 h-[calc(100dvh_-_140px)]">
                 <ChartView

app/[locale]/[state]/analytics/components/chart-view.tsx

@@ -160,16 +160,20 @@ export const ChartView = ({
   };
 
   return (
-    <div>
-      <div className=" mt-2 h-[calc(100dvh_-_140px)]">
-        <FilterDropdownOptions
-          currentSelectedState={currentSelectedState}
-          RevCircleDropdownOptions={RevCircleDropdownOptions}
-          DistrictDropDownOption={DistrictDropDownOption}
-          timeLimits={timeLimits}
-          monthMulti={true}
-        />        
+    <>
+      <FilterDropdownOptions
+        currentSelectedState={currentSelectedState}
+        RevCircleDropdownOptions={RevCircleDropdownOptions}
+        DistrictDropDownOption={DistrictDropDownOption}
+        timeLimits={timeLimits}
+        monthMulti={true}
+      />
 
+      {timePeriod.length === 0 ? (
+        <div className="flex h-[calc(100dvh_-_400px)] flex-col place-content-center items-center">
+          <Text>Please select a time period</Text>
+        </div>
+      ) : (
         <div className="mt-2 w-full bg-surfaceDefault p-4 pb-0 pt-8 max-sm:p-2">
           <Text variant="headingLg" fontWeight="semibold">
             {`${
@@ -183,6 +187,7 @@ export const ChartView = ({
             {districtCode &&
               `${DistrictDropDownOption.find((option) => option.value === districtCode)?.label} District`}
           </Text>
+
           {loading ? (
             <div className="flex h-[calc(100dvh_-_400px)] flex-col place-content-center items-center">
               <Spinner color="highlight" />
@@ -213,7 +218,7 @@ export const ChartView = ({
             </div>
           )}
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };

app/[locale]/[state]/analytics/components/filter-dropdown-options.tsx

@@ -105,10 +105,12 @@ export default function FilterDropdownOptions({
               // name="time-period-select"
               // className="flex-1"
               selectedValues={
-                selectedTimePeriod?.map((timePeriod: string) => {
-                  const [year, month] = timePeriod.split('_');
-                  return parseDate(`${year}-${month.padStart(2, '0')}-01`);
-                }) || []
+                selectedTimePeriod
+                  ?.filter(Boolean)
+                  ?.map((timePeriod: string) => {
+                    const [year, month] = timePeriod.split('_');
+                    return parseDate(`${year}-${month.padStart(2, '0')}-01`);
+                  }) || []
               }
               label="Select Months"
               // minValue={parseDate(minDate || '2023-01-04')}
@@ -125,9 +127,14 @@ export default function FilterDropdownOptions({
           ) : (
             <MonthPicker
               name="time-period-select"
-              defaultValue={parseDate(
-                getLatestDate(selectedTimePeriod || []) || '2023-08-01'
-              )}
+              defaultValue={
+                selectedTimePeriod &&
+                selectedTimePeriod?.filter(Boolean)?.length > 0
+                  ? parseDate(
+                      getLatestDate(selectedTimePeriod || []) || '2023-08-01'
+                    )
+                  : null
+              }
               label="Select Month"
               minValue={parseDate(minDate || '2023-01-04')}
               maxValue={parseDate(maxDate || '2023-01-04')}