Fix Duration filter in dashboards and add contentLoader in respond,al…

…ert,watch cards
EyeSeeTea · Oct 11, 2024 · ea0e609 · ea0e609
1 parent e1b3a19
commit ea0e609
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/webapp/components/date-picker/DateRangePicker.tsx b/src/webapp/components/date-picker/DateRangePicker.tsx
@@ -21,8 +21,12 @@ const ID = "date-range-picker";
 export const DateRangePicker: React.FC<DateRangePickerProps> = React.memo(
     ({ label = "", value, placeholder = "", onChange }) => {
         const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-        const [startDate, setStartDate] = useState<Date | null>(null);
-        const [endDate, setEndDate] = useState<Date | null>(null);
+        const [startDate, setStartDate] = useState<Date | null>(
+            value && value[0] ? new Date(value[0]) : null
+        );
+        const [endDate, setEndDate] = useState<Date | null>(
+            value && value[1] ? new Date(value[1]) : null
+        );
 
         const handleOpen = useCallback((event: React.MouseEvent<HTMLElement>) => {
             setAnchorEl(event.currentTarget);
@@ -41,14 +45,14 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = React.memo(
         }, [onCleanValues, value.length]);
 
         const formatDurationValue = useMemo(() => {
-            if (!value || value.length !== 2) {
+            if (!value || value.length !== 2 || !value[0] || !value[1]) {
                 return placeholder;
             }
 
-            return `${moment(startDate).format("DD/MM/yyyy")} — ${moment(endDate).format(
-                "DD/MM/yyyy"
-            )}`;
-        }, [startDate, endDate, placeholder, value]);
+            return `${moment(new Date(value[0])).format("DD/MM/yyyy")} — ${moment(
+                new Date(value[1])
+            ).format("DD/MM/yyyy")}`;
+        }, [placeholder, value]);
 
         const onReset = useCallback(() => {
             onChange([]);

diff --git a/src/webapp/pages/dashboard/DashboardPage.tsx b/src/webapp/pages/dashboard/DashboardPage.tsx
@@ -17,6 +17,7 @@ import { DateRangePicker } from "../../components/date-picker/DateRangePicker";
 import { PerformanceMetric717, use717Performance } from "./use717Performance";
 import { Loader } from "../../components/loader/Loader";
 import { useLastAnalyticsRuntime } from "../../hooks/useLastAnalyticsRuntime";
+import LoaderContainer from "../../components/loader/LoaderContainer";
 
 export const DashboardPage: React.FC = React.memo(() => {
     const {
@@ -54,7 +55,7 @@ export const DashboardPage: React.FC = React.memo(() => {
         resetCurrentEventTrackerId();
     });
 
-    return performanceOverviewLoading || _717CardsLoading || cardCountsLoading ? (
+    return performanceOverviewLoading || _717CardsLoading ? (
         <Loader />
     ) : (
         <Layout
@@ -103,16 +104,18 @@ export const DashboardPage: React.FC = React.memo(() => {
                         />
                     </FilterContainer>
                 </FiltersContainer>
-                <GridWrapper>
-                    {cardCounts.map((cardCount, index) => (
-                        <StyledStatsCard
-                            key={index}
-                            stat={cardCount.total.toString()}
-                            title={i18n.t(cardCount.name)}
-                            fillParent
-                        />
-                    ))}
-                </GridWrapper>
+                <LoaderContainer loading={cardCountsLoading}>
+                    <GridWrapper>
+                        {cardCounts.map((cardCount, index) => (
+                            <StyledStatsCard
+                                key={index}
+                                stat={cardCount.total.toString()}
+                                title={i18n.t(cardCount.name)}
+                                fillParent
+                            />
+                        ))}
+                    </GridWrapper>
+                </LoaderContainer>
             </Section>
             <Section title={i18n.t("All public health events")}>
                 <MapSection