Fix Historical alert filter ,table filter

IFRCGo · Dec 4, 2024 · f9b12d5 · f9b12d5
1 parent eee48e0
commit f9b12d5
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 27 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
     gql,
     useMutation,
@@ -40,6 +41,7 @@ interface Props {
     className?: string;
 }
 function Navbar(props: Props) {
+    const navigate = useNavigate();
     const { className } = props;
     const strings = useTranslation(i18n);
     const { isAuthenticated } = useAuth();
@@ -58,8 +60,9 @@ function Navbar(props: Props) {
             onCompleted: (logoutResponse) => {
                 const response = logoutResponse?.private?.logout;
                 if (response.ok) {
-                    window.location.reload();
                     removeUser();
+                    navigate('/login');
+                    window.location.reload();
                 } else {
                     alert.show(
                         strings.logoutFailure,

diff --git a/src/views/HistoricalAlerts/index.tsx b/src/views/HistoricalAlerts/index.tsx
@@ -30,6 +30,7 @@ import {
     resolveToString,
 } from '@ifrc-go/ui/utils';
 import {
+    doesObjectHaveNoData,
     isDefined,
     isNotDefined,
 } from '@togglecorp/fujs';
@@ -197,40 +198,55 @@ export function Component() {
     const variables = useMemo<{
         filters: AlertFilter | undefined,
         pagination: OffsetPaginationInput,
-    }>(() => ({
-        pagination: {
-            offset,
-            limit,
-        },
-        filters: finalFilter ? {
-            DISTINCT: true,
-            infos: {
-                urgency: finalFilter?.urgency,
-                severity: finalFilter?.severity,
-                certainty: finalFilter?.certainty,
-                category: finalFilter?.category,
+    }>(() => {
+        const sentFilter = finalFilter?.startDateBefore || finalFilter?.startDateAfter ? {
+            range: {
+                ...(finalFilter?.startDateBefore && { end: finalFilter.startDateBefore }),
+                ...(finalFilter?.startDateAfter && { start: finalFilter.startDateAfter }),
             },
-            country: isDefined(finalFilter?.country?.pk)
-                ? { pk: finalFilter.country.pk } : undefined,
-            admin1: finalFilter?.admin1,
-            sent: {
-                range: {
-                    end: finalFilter?.startDateBefore,
-                    start: finalFilter?.startDateAfter,
-                },
+        } : undefined;
+        return {
+            pagination: {
+                offset,
+                limit,
             },
-        } : undefined,
-    }), [
+            filters: finalFilter ? {
+                DISTINCT: true,
+                infos: {
+                    urgency: finalFilter?.urgency,
+                    severity: finalFilter?.severity,
+                    certainty: finalFilter?.certainty,
+                    category: finalFilter?.category,
+                },
+                country: isDefined(finalFilter?.country?.pk)
+                    ? { pk: finalFilter.country.pk } : undefined,
+                admin1: finalFilter?.admin1,
+                sent: sentFilter,
+            } : undefined,
+        };
+    }, [
         limit,
         offset,
         finalFilter,
     ]);
 
     const handleApplyFilters = useCallback(() => {
-        setFinalFilter(rawFilter);
-    }, [
-        rawFilter,
-    ]);
+        if (doesObjectHaveNoData(rawFilter)) {
+            setFinalFilter(undefined);
+        } else {
+            const updatedFilter = {
+                ...rawFilter,
+                sent: rawFilter.startDateBefore || rawFilter.startDateAfter ? {
+                    range: {
+                        ...(rawFilter.startDateBefore && { end: rawFilter.startDateBefore }),
+                        ...(rawFilter.startDateAfter && { start: rawFilter.startDateAfter }),
+                    },
+                } : {},
+            };
+            setFinalFilter(updatedFilter);
+        }
+        setPage(1);
+    }, [rawFilter, setPage]);
 
     const handleResetFilters = useCallback(() => {
         setFinalFilter(undefined);
@@ -401,6 +417,7 @@ export function Component() {
                 errorMessage={alertInfoError?.message}
                 footerActions={isDefined(data) && (
                     <Pager
+                        className={styles.pager}
                         activePage={page}
                         itemsCount={data?.count}
                         maxItemsPerPage={limit}

diff --git a/src/views/HistoricalAlerts/styles.module.css b/src/views/HistoricalAlerts/styles.module.css
@@ -1,4 +1,14 @@
 .historical-alerts {
+    .pager {
+        button {
+            flex-shrink: 0 !important;
+            border-radius: 2rem !important;
+            padding: 0 var(--go-ui-spacing-sm);
+            width: fit-content !important;
+            min-width: 2rem;
+            line-height: 1;
+        }
+    }
     .alerts-table {
         overflow: auto;
 

diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
@@ -110,6 +110,9 @@ export function Component() {
         activeAdmin1Id,
         activeRegionId,
         selectedCategoryTypes,
+        selectedSeverityTypes,
+        selectedCertaintyTypes,
+        selectedUrgencyTypes,
         startDateFrom,
         startDateTo,
     } = useContext(AlertDataContext);
@@ -138,6 +141,9 @@ export function Component() {
                 region: activeRegionId,
                 infos: {
                     category: selectedCategoryTypes,
+                    severity: selectedSeverityTypes,
+                    certainty: selectedCertaintyTypes,
+                    urgency: selectedUrgencyTypes,
                 },
                 sent: isDefined(startDateFrom) && isDefined(startDateTo) ? {
                     range: {
@@ -154,6 +160,9 @@ export function Component() {
             activeAdmin1Id,
             activeRegionId,
             selectedCategoryTypes,
+            selectedSeverityTypes,
+            selectedCertaintyTypes,
+            selectedUrgencyTypes,
             startDateFrom,
             startDateTo,
         ],