Merge pull request #31 from IFRCGo/feature/alert-filtered

Add global filter
IFRCGo · Apr 22, 2024 · 5a51352 · 5a51352
2 parents 76683c1 + 868fa95
commit 5a51352
Show file tree

Hide file tree

Showing 18 changed files with 490 additions and 120 deletions.
diff --git a/backend b/backend
diff --git a/src/views/Home/AlertsView/AlertContext.tsx → src/views/Home/AlertContext.tsx b/src/views/Home/AlertsView/AlertContext.tsx → src/views/Home/AlertContext.tsx
@@ -1,5 +1,11 @@
 import { createContext } from 'react';
 
+import {
+    AlertInfoCertaintyEnum,
+    AlertInfoSeverityEnum,
+    AlertInfoUrgencyEnum,
+} from '#generated/types/graphql';
+
 type Id = string;
 // type SetStateFn<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
 type SetStateFn<T> = (newValue: T | undefined) => void;
@@ -24,6 +30,14 @@ export interface AlertContextProps {
 
     setActiveAlertId: SetStateFn<Id>;
     setActiveCountryName: SetStateFn<string>;
+
+    selectedUrgencyTypes: AlertInfoUrgencyEnum[] | undefined;
+    selectedSeverityTypes: AlertInfoSeverityEnum[] | undefined;
+    selectedCertaintyTypes: AlertInfoCertaintyEnum[] | undefined;
+
+    setSelectedUrgencyTypes: SetStateFn<AlertInfoUrgencyEnum[]>;
+    setSelectedSeverityTypes: SetStateFn<AlertInfoSeverityEnum[]>;
+    setSelectedCertaintyTypes: SetStateFn<AlertInfoCertaintyEnum[]>;
 }
 
 const AlertContext = createContext<AlertContextProps>({
@@ -34,6 +48,9 @@ const AlertContext = createContext<AlertContextProps>({
     activeAdmin1Id: undefined,
     activeGoAdmin1Id: undefined,
     activeAlertId: undefined,
+    selectedUrgencyTypes: undefined,
+    selectedSeverityTypes: undefined,
+    selectedCertaintyTypes: undefined,
     setBbox: () => {
         // eslint-disable-next-line no-console
         console.warn('AlertContext::setBbox called without provider');
@@ -62,6 +79,18 @@ const AlertContext = createContext<AlertContextProps>({
         // eslint-disable-next-line no-console
         console.warn('AlertContext::setActiveCountryName called without provider');
     },
+    setSelectedUrgencyTypes: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setSelectedUrgencyTypes called without provider');
+    },
+    setSelectedSeverityTypes: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setSelectedSeverityTypes called without provider');
+    },
+    setSelectedCertaintyTypes: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setSelectedCertaintyTypes called without provider');
+    },
 });
 
 export default AlertContext;
diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
@@ -1,6 +1,7 @@
 import {
     ComponentType,
     HTMLProps,
+    useContext,
     useMemo,
 } from 'react';
 import {
@@ -19,22 +20,30 @@ import {
     createListDisplayColumn,
     createStringColumn,
 } from '@ifrc-go/ui/utils';
-import { isNotDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import {
+    AlertFilter,
     AlertInformationsQuery,
     AlertInformationsQueryVariables,
+    OffsetPaginationInput,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
 import { createLinkColumn } from '#utils/domain/tableHelpers';
 
+import AlertContext from '../AlertContext';
+import useAlertFilters from '../useAlertFilters';
+
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 const ALERT_INFORMATIONS = gql`
-    query AlertInformations($pagination: OffsetPaginationInput) {
+    query AlertInformations($pagination: OffsetPaginationInput, $filters: AlertFilter) {
         public {
-            alerts(pagination: $pagination) {
+            alerts(pagination: $pagination, filters: $filters) {
                 limit
                 offset
                 count
@@ -74,6 +83,8 @@ const PAGE_SIZE = 20;
 
 function AlertsTable() {
     const strings = useTranslation(i18n);
+    const alertFilters = useAlertFilters();
+    const { activeCountryId, activeAdmin1Id } = useContext(AlertContext);
 
     const {
         sortState,
@@ -89,14 +100,24 @@ function AlertsTable() {
         filter: {},
     });
 
-    const variables = useMemo(() => ({
+    const variables = useMemo<{ filters: AlertFilter, pagination: OffsetPaginationInput }>(() => ({
         pagination: {
             offset: page,
             limit,
         },
+        filters: {
+            ...alertFilters,
+            country: isDefined(activeCountryId)
+                ? { pk: activeCountryId }
+                : undefined,
+            admin1: activeAdmin1Id,
+        },
     }), [
         page,
         limit,
+        alertFilters,
+        activeCountryId,
+        activeAdmin1Id,
     ]);
 
     const {

diff --git a/src/views/Home/AlertsTable/styles.module.css b/src/views/Home/AlertsTable/styles.module.css
@@ -11,12 +11,12 @@
 
     .region {
         width: 0%;
-        min-width: 5rem;
+        min-width: 7rem;
     }
 
     .country {
         width: 0%;
-        min-width: 6rem;
+        min-width: 8rem;
     }
 
     .admins {

diff --git a/src/views/Home/AlertsView/AlertsAside/Admin1Alerts/index.tsx b/src/views/Home/AlertsView/AlertsAside/Admin1Alerts/index.tsx
@@ -26,7 +26,7 @@ import {
 } from '#generated/types/graphql';
 import { stringIdSelector } from '#utils/selectors';
 
-import AlertContext from '../../AlertContext';
+import AlertContext from '../../../AlertContext';
 import AlertListItem from '../AlertListItem';
 
 const ADMIN1_DETAIL = gql`

diff --git a/src/views/Home/AlertsView/AlertsAside/CountryAdmin1List/index.tsx b/src/views/Home/AlertsView/AlertsAside/CountryAdmin1List/index.tsx
@@ -18,22 +18,22 @@ import {
     CountryAdmin1QueryVariables,
 } from '#generated/types/graphql';
 import { stringIdSelector } from '#utils/selectors';
+import useAlertFilters from '#views/Home/useAlertFilters';
 
-import AlertContext from '../../AlertContext';
+import AlertContext from '../../../AlertContext';
 import Admin1ListItem from '../Admin1ListItem';
 
 type CountryAdmin1 = NonNullable<NonNullable<CountryAdmin1Query['public']>['country']>['admin1s'][number];
 
 const COUNTRY_ADMIN1 = gql`
-query CountryAdmin1($countryId: ID!) {
+query CountryAdmin1($countryId: ID!, $alertFilters: AlertFilter) {
     public {
-      id
       country(pk: $countryId) {
         id
         name
         alertCount
         ifrcGoId
-        admin1s(alertFilters: {}) {
+        admin1s(alertFilters: $alertFilters) {
           id
           name
           ifrcGoId
@@ -51,10 +51,14 @@ interface Props {
 function CountryAdmin1List(props: Props) {
     const { countryId } = props;
     const { setActiveAdmin1Id } = useContext(AlertContext);
+    const alertFilters = useAlertFilters();
 
     const variables = useMemo<CountryAdmin1QueryVariables>(
-        () => ({ countryId }),
-        [countryId],
+        () => ({
+            countryId,
+            alertFilters,
+        }),
+        [countryId, alertFilters],
     );
 
     const {

diff --git a/src/views/Home/AlertsView/AlertsAside/CountryAlerts/index.tsx b/src/views/Home/AlertsView/AlertsAside/CountryAlerts/index.tsx
@@ -24,7 +24,7 @@ import {
 } from '#generated/types/graphql';
 import { stringIdSelector } from '#utils/selectors';
 
-import AlertContext from '../../AlertContext';
+import AlertContext from '../../../AlertContext';
 import AlertListItem from '../AlertListItem';
 
 const COUNTRY_ALERTS = gql`

diff --git a/src/views/Home/AlertsView/AlertsAside/CountryDetail/index.tsx b/src/views/Home/AlertsView/AlertsAside/CountryDetail/index.tsx
@@ -25,7 +25,7 @@ import {
     CountryDetailQueryVariables,
 } from '#generated/types/graphql';
 
-import AlertContext from '../../AlertContext';
+import AlertContext from '../../../AlertContext';
 import Admin1Alerts from '../Admin1Alerts';
 import AlertDetail from '../AlertDetail';
 import CountryAdmin1List from '../CountryAdmin1List';

diff --git a/src/views/Home/AlertsView/AlertsAside/index.tsx b/src/views/Home/AlertsView/AlertsAside/index.tsx
@@ -18,7 +18,7 @@ import {
 import { CountryListQuery } from '#generated/types/graphql';
 import { stringIdSelector } from '#utils/selectors';
 
-import AlertContext from '../AlertContext';
+import AlertContext from '../../AlertContext';
 import CountryDetail from './CountryDetail';
 import CountryListItem from './CountryListItem';
 

diff --git a/src/views/Home/AlertsView/AlertsMap/index.tsx b/src/views/Home/AlertsView/AlertsMap/index.tsx
@@ -26,7 +26,7 @@ import {
     COLOR_PRIMARY_RED,
 } from '#utils/constants';
 
-import AlertContext from '../AlertContext';
+import AlertContext from '../../AlertContext';
 
 import styles from './styles.module.css';
 

diff --git a/src/views/Home/AlertsView/AlertsMap/styles.module.css b/src/views/Home/AlertsView/AlertsMap/styles.module.css
@@ -3,7 +3,7 @@
 
     .map-container {
         flex-grow: 1;
-        height: 40rem;
+        height: 45rem;
     }
 }
 
diff --git a/src/views/Home/AlertsView/index.tsx b/src/views/Home/AlertsView/index.tsx
@@ -1,8 +1,4 @@
-import {
-    useCallback,
-    useMemo,
-    useState,
-} from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import {
     gql,
@@ -13,26 +9,25 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     _cs,
     isDefined,
-    isNotDefined,
 } from '@togglecorp/fujs';
 
 import {
     CountryListQuery,
     CountryListQueryVariables,
 } from '#generated/types/graphql';
 
-import AlertContext, { AlertContextProps } from './AlertContext';
+import useAlertFilters from '../useAlertFilters';
 import AlertsAside from './AlertsAside';
 import AlertsMap from './AlertsMap';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 // NOTE: alertFilters is related with filteredAlertCount
-const COUNTRIES_LIST = gql`
-query CountryList {
+const COUNTRY_LIST = gql`
+query CountryList($alertFilters: AlertFilter) {
   public {
-    allCountries(alertFilters: {}) {
+    allCountries(alertFilters: $alertFilters) {
       name
       id
       iso3
@@ -58,72 +53,21 @@ function AlertsView(props: Props) {
     const { className } = props;
 
     const strings = useTranslation(i18n);
-
-    const [activeCountryId, setActiveCountryId] = useState<string | undefined>(undefined);
-    const [activeGoCountryId, setActiveGoCountryId] = useState<string | undefined>(undefined);
-    const [activeAlertId, setActiveAlertId] = useState<string | undefined>(undefined);
-    const [activeAdmin1Id, setActiveAdmin1Id] = useState<string | undefined>(undefined);
-    const [activeGoAdmin1Id, setActiveGoAdmin1Id] = useState<string | undefined>(undefined);
+    const alertFilters = useAlertFilters();
 
     const {
         data: countryListResponse,
         loading: countryListLoading,
         error: countryListError,
     } = useQuery<CountryListQuery, CountryListQueryVariables>(
-        COUNTRIES_LIST,
+        COUNTRY_LIST,
+        { variables: { alertFilters } },
     );
 
     const countriesWithAlert = useMemo(() => countryListResponse?.public.allCountries.filter(
         (country) => (country?.filteredAlertCount ?? 0) > 0,
     ), [countryListResponse?.public.allCountries]);
 
-    const [bbox, setBbox] = useState<unknown | undefined>();
-    const [activeCountryName, setActiveCountryName] = useState<string | undefined>();
-
-    const setActiveCountryIdSafe = useCallback(
-        (countryId: string | undefined) => {
-            setActiveCountryId(countryId);
-            setActiveCountryName(undefined);
-            setActiveAlertId(undefined);
-            setActiveAdmin1Id(undefined);
-            setActiveGoAdmin1Id(undefined);
-            setActiveGoCountryId(undefined);
-            if (isNotDefined(countryId)) {
-                setBbox(undefined);
-            }
-        },
-        [],
-    );
-
-    const alertContextValue = useMemo<AlertContextProps>(
-        () => ({
-            bbox,
-            setBbox,
-            activeAlertId,
-            activeCountryId,
-            activeCountryName,
-            activeAdmin1Id,
-            activeGoAdmin1Id,
-            activeGoCountryId,
-            setActiveAlertId,
-            setActiveGoCountryId,
-            setActiveGoAdmin1Id,
-            setActiveCountryId: setActiveCountryIdSafe,
-            setActiveAdmin1Id,
-            setActiveCountryName,
-        }),
-        [
-            bbox,
-            activeCountryName,
-            activeAlertId,
-            activeGoCountryId,
-            activeGoAdmin1Id,
-            activeAdmin1Id,
-            activeCountryId,
-            setActiveCountryIdSafe,
-        ],
-    );
-
     return (
         <Container
             className={_cs(styles.alertMap, className)}
@@ -139,22 +83,21 @@ function AlertsView(props: Props) {
                     {strings.mapViewAllSources}
                 </Link>
             )}
+            overlayPending
             pending={countryListLoading}
             errored={isDefined(countryListError)}
             errorMessage={countryListError?.message}
             contentViewType="grid"
             numPreferredGridContentColumns={3}
         >
-            <AlertContext.Provider value={alertContextValue}>
-                <AlertsMap
-                    className={styles.alertsMap}
-                    countriesWithAlert={countriesWithAlert}
-                />
-                <AlertsAside
-                    className={styles.alertsAside}
-                    countriesWithAlert={countriesWithAlert}
-                />
-            </AlertContext.Provider>
+            <AlertsMap
+                className={styles.alertsMap}
+                countriesWithAlert={countriesWithAlert}
+            />
+            <AlertsAside
+                className={styles.alertsAside}
+                countriesWithAlert={countriesWithAlert}
+            />
         </Container>
     );
 }
+4 −1		.github/dependabot.yaml
+28 −0		.github/pull_request_template.md
+1 −1		Dockerfile
+0 −228		apps/cap_feed/data_injector.py
+47 −0		apps/cap_feed/data_injector/feed.py
+373 −0		apps/cap_feed/data_injector/geo.py
+2 −0		apps/cap_feed/formats/cap_xml.py
+0 −0		apps/cap_feed/management/__init__.py
+0 −0		apps/cap_feed/management/commands/__init__.py
+10 −0		apps/cap_feed/management/commands/init_geo_data.py
+10 −0		apps/cap_feed/management/commands/sync_geo_data_with_ifrc_go.py
+44 −0		apps/cap_feed/migrations/0002_admin1_bbox_admin1_ifrc_go_id_country_bbox_and_more.py
+16 −2		apps/cap_feed/models.py
+4 −3		apps/cap_feed/tasks.py
+27 −20		apps/cap_feed/types.py
+5 −0		docker-compose.yml
+82 −0		main/managers.py
+2 −1		main/settings.py
+47 −45		poetry.lock
+2 −2		pyproject.toml
+9 −11		schema.graphql
+21 −0		utils/strawberry/types.py