Add highligted operations and country key figures

IFRCGo · Dec 14, 2023 · de043b2 · de043b2
1 parent 8adafa4
commit de043b2
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 135 deletions.
diff --git a/src/components/domain/ActiveOperationMap/index.tsx b/src/components/domain/ActiveOperationMap/index.tsx
@@ -27,7 +27,6 @@ import LegendItem from '#components/LegendItem';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
-import MultiSelectInput from '#components/MultiSelectInput';
 import RadioInput from '#components/RadioInput';
 import SelectInput from '#components/SelectInput';
 import TextOutput from '#components/TextOutput';
@@ -36,10 +35,6 @@ import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useInputState from '#hooks/useInputState';
 import { useRequest } from '#utils/restRequest';
 import type { GoApiUrlQuery, GoApiResponse } from '#utils/restRequest';
-import {
-    numericIdSelector,
-    stringNameSelector,
-} from '#utils/selectors';
 import {
     adminFillLayerOptions,
 } from '#utils/map';
@@ -68,6 +63,7 @@ import {
     APPEAL_TYPE_MULTIPLE,
 } from './utils';
 import styles from './styles.module.css';
+import DistrictSearchMultiSelectInput, { DistrictItem } from '../DistrictSearchMultiSelectInput';
 
 type AppealQueryParams = GoApiUrlQuery<'/api/v2/appeal/'>;
 type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
@@ -102,8 +98,6 @@ interface ClickedPoint {
     lngLat: mapboxgl.LngLatLike;
 }
 
-type DistrictListItem = NonNullable<GoApiResponse<'/api/v2/district/'>['results']>[number];
-
 type BaseProps = {
     className?: string;
     onPresentationModeButtonClick?: () => void;
@@ -114,7 +108,6 @@ type BaseProps = {
 type CountryProps = {
     variant: 'country';
     countryId: number;
-    districtList: DistrictListItem[];
 }
 type RegionProps = {
     variant: 'region';
@@ -159,7 +152,6 @@ function ActiveOperationMap(props: Props) {
     // eslint-disable-next-line react/destructuring-assignment
     const countryId = variant === 'country' ? props.countryId : undefined;
     // eslint-disable-next-line react/destructuring-assignment
-    const districtList = variant === 'country' ? props.districtList : undefined;
 
     const query = useMemo<AppealQueryParams>(
         () => {
@@ -372,6 +364,8 @@ function ActiveOperationMap(props: Props) {
         ? countryGroupedAppeal[clickedPointProperties.feature.properties.iso3]
         : undefined;
 
+    const [districtOptions, setDistrictOptions] = useState<DistrictItem[] | null | undefined>();
+
     return (
         <Container
             className={_cs(styles.activeOperationMap, className)}
@@ -394,15 +388,15 @@ function ActiveOperationMap(props: Props) {
                         value={rawFilter.startDateBefore}
                     />
                     {variant === 'country' && (
-                        <MultiSelectInput
+                        <DistrictSearchMultiSelectInput
                             name="district"
                             placeholder={strings.operationFilterDistrictPlaceholder}
                             label={strings.operationMapProvinces}
-                            options={districtList}
                             value={rawFilter.district}
-                            keySelector={numericIdSelector}
-                            labelSelector={stringNameSelector}
+                            options={districtOptions}
+                            onOptionsChange={setDistrictOptions}
                             onChange={setFilterField}
+                            countryId={countryId}
                         />
                     )}
                     <SelectInput

diff --git a/src/components/domain/HighlightedOperations/i18n.json b/src/components/domain/HighlightedOperations/i18n.json
@@ -2,7 +2,9 @@
     "namespace": "common",
     "strings": {
         "highlightedOperationsTitle": "Highlighted Operations",
+        "highlightedOperationsCountryTitle": "Emergencies in last 30 days",
         "highlightedOperationsViewAllInRegion":"View all Emergencies in this Region",
+        "highlightedOperationsViewAllInCountry":"View all Emergencies in this Country",
         "highlightedOperationsViewAll":"View all Emergencies"
     }
 }
diff --git a/src/components/domain/HighlightedOperations/index.tsx b/src/components/domain/HighlightedOperations/index.tsx
@@ -27,6 +27,11 @@ type BaseProps = {
     className?: string;
 }
 
+type CountryProps = {
+    variant: 'country';
+    countryId: number;
+}
+
 type RegionProps = {
     variant: 'region';
     regionId: number;
@@ -36,7 +41,7 @@ type GlobalProps = {
     variant: 'global';
 }
 
-type Props = BaseProps & (RegionProps | GlobalProps);
+type Props = BaseProps & (CountryProps | RegionProps | GlobalProps);
 
 function HighlightedOperations(props: Props) {
     const {
@@ -49,18 +54,33 @@ function HighlightedOperations(props: Props) {
     // eslint-disable-next-line react/destructuring-assignment
     const regionId = variant === 'region' ? props.regionId : undefined;
 
+    // eslint-disable-next-line react/destructuring-assignment
+    const countryId = variant === 'country' ? props.countryId : undefined;
+
     const query = useMemo<EventQueryParams>(
         () => {
             if (variant === 'global') {
                 return { is_featured: true };
             }
 
+            if (variant === 'country') {
+                const thirtyDaysAgo = new Date();
+                thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+                thirtyDaysAgo.setHours(0, 0, 0, 0);
+
+                return {
+                    countries__in: countryId,
+                    disaster_start_date__gte: thirtyDaysAgo.toISOString(),
+                    ordering: '-disaster_start_date',
+                };
+            }
+
             return {
                 is_featured_region: true,
                 regions__in: regionId,
             };
         },
-        [variant, regionId],
+        [variant, regionId, countryId],
     );
 
     const {
@@ -97,21 +117,49 @@ function HighlightedOperations(props: Props) {
 
     const featuredEmergencies = featuredEmergencyResponse?.results;
 
+    const urlSearch = useMemo(
+        () => {
+            if (variant === 'country') {
+                return `countryId=${countryId}`;
+            }
+
+            if (variant === 'region') {
+                return `regionId=${regionId}`;
+            }
+
+            return undefined;
+        },
+        [regionId, countryId, variant],
+    );
+
+    const viewAllLabel = useMemo(
+        () => {
+            if (variant === 'country') {
+                return strings.highlightedOperationsViewAllInCountry;
+            }
+
+            if (variant === 'region') {
+                return strings.highlightedOperationsViewAllInRegion;
+            }
+
+            return strings.highlightedOperationsViewAll;
+        },
+        [variant, strings],
+    );
+
     return (
         <Container
             className={className}
             withHeaderBorder
-            heading={strings.highlightedOperationsTitle}
+            heading={variant === 'country' ? strings.highlightedOperationsCountryTitle : strings.highlightedOperationsTitle}
             actions={(
                 <Link
                     to="allEmergencies"
-                    urlSearch={variant === 'region' ? `region=${regionId}` : undefined}
+                    urlSearch={urlSearch}
                     withLinkIcon
                     withUnderline
                 >
-                    {variant === 'region'
-                        ? strings.highlightedOperationsViewAllInRegion
-                        : strings.highlightedOperationsViewAll}
+                    {viewAllLabel}
                 </Link>
             )}
         >

diff --git a/src/views/CountryOngoingActivities/index.tsx b/src/views/CountryOngoingActivities/index.tsx
@@ -11,8 +11,8 @@ import styles from './styles.module.css';
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const outletContext = useOutletContext<CountryOutletContext>();
-    const strings = useTranslation(i18n);
     const { countryId } = outletContext;
+    const strings = useTranslation(i18n);
 
     return (
         <div className={styles.countryOngoingActivities}>

diff --git a/src/views/CountryOngoingActivities/styles.module.css b/src/views/CountryOngoingActivities/styles.module.css
@@ -1,3 +1,6 @@
 .country-ongoing-activities {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-2xl);
     padding: var(--go-ui-spacing-2xl) 0;
 }
diff --git a/src/views/CountryOngoingActivitiesEmergencies/i18n.json b/src/views/CountryOngoingActivitiesEmergencies/i18n.json
@@ -1,8 +1,21 @@
 {
     "namespace": "countryOngoingActivitiesEmergencies",
     "strings": {
-        "pageTitle": "Country Ongoing Emergencies",
         "fullScreenHeading": "IFRC Disaster Response and Preparedness",
-        "countryCloseButton": "Close"
+        "countryCloseButton": "Close",
+        "countryOngoingActivitiesDREFOperations": "Active DREF Operations",
+        "countryOngoingActivitiesKeyFiguresDrefTitle": "DREF",
+        "countryOngoingActivitiesKeyFiguresDref": "These are small to medium scale emergency operations funded through the Disaster Relief Emergency Fund (DREF).The DREF provides immediate financial support to National Red Cross and Red Crescent Societies, enabling them to carry out their unique role as first responders after a disaster.",
+        "countryOngoingActivitiesKeyFiguresAppealsTitle": "Emergency Appeal",
+        "countryOngoingActivitiesFigureAppealDescription": "These are medium to large scale emergency operations funded through a public appeal for funds.",
+        "countryOngoingActivitiesKeyFiguresActiveAppeals": "Active Emergency Appeals",
+        "countryOngoingActivitiesKeyFiguresTargetPop": "Targeted Population",
+        "countryOngoingActivitiesKeyFiguresBudget": "Funding Requirements (CHF)",
+        "countryOngoingActivitiesKeyFiguresAppealsFunding": "Funding Coverage",
+        "countryOngoingActivitiesEditCountryLink": "Edit Country",
+        "countryOngoingActivitiesEmergenciesDescription": "The following data displays the current and ongoing emergencies within the country that are reported by the National Societies and partners. The displayed data is based on reporting and may not be fully indicative of all the activities.",
+        "countryOngoingActivitiesTitle": "Active Emergencies",
+        "countryOngoingActivitiesViewAll":"View all Emergencies in this Country",
+        "countryOngoingActivitiesViewAllInRegion": "View all Emergencies in this Region"
     }
 }