Add filters in alert ongoing map

package.json

@@ -19,9 +19,7 @@
     },
     "dependencies": {
         "@apollo/client": "^3.9.9",
-        "@graphql-codegen/cli": "^5.0.2",
         "@graphql-codegen/introspection": "^4.0.3",
-        "@graphql-codegen/typescript": "^4.0.6",
         "@graphql-codegen/typescript-operations": "^4.2.0",
         "@ifrc-go/icons": "^1.3.3",
         "@ifrc-go/ui": "^1.0.0",
@@ -30,11 +28,8 @@
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.2.0-beta-6",
         "@togglecorp/toggle-form": "^2.0.4",
-        "@turf/bbox": "^6.5.0",
-        "@turf/buffer": "^6.5.0",
         "graphql": "^16.8.1",
         "mapbox-gl": "^1.13.0",
-        "patch-package": "^8.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3"

src/utils/constants.ts

@@ -4,7 +4,6 @@ export const DEFAULT_MAP_PADDING = 50;
 
 // Colors
 export const COLOR_LIGHT_GREY = '#e0e0e0';
-export const COLOR_RED = '#f5333f';
 export const COLOR_PRIMARY_RED = '#f5333f';
 export const COLOR_WHITE = '#ffffff';
 export const COLOR_TEXT = '#313131';

src/views/AlertMap/CountryListItem/index.tsx

@@ -12,12 +12,12 @@ import styles from './styles.module.css';
 
 type CountryType = NonNullable<NonNullable<NonNullable<CountryListQuery['public']>['countries']>['items']>[number];
 
-export interface Props {
+export interface CountryProps {
     data: CountryType;
     onExpandClick: (alertId: string | undefined) => void;
 }
 
-function CountryListItem(props: Props) {
+function CountryListItem(props: CountryProps) {
     const {
         data,
         onExpandClick,

src/views/AlertMap/Filters/i18n.json

@@ -1,10 +1,9 @@
 {
-    "namespace": "common",
+    "namespace": "alertFilters",
     "strings": {
-        "riskAllCountries": "All countries",
-        "riskSelectHazardTypes": "Select Hazard types",
-        "riskSelectMonths": "Select months",
-        "riskNormalize": "Normalize by population",
-        "riskCopingCapacity": "Include coping capacity"
+        "alertCountries": "All countries",
+        "alertUrgency": "Select Urgency type",
+        "alertSeverity": "Select Severity type",
+        "alertCertainty": "Select Certainty type"
     }
 }

src/views/AlertMap/Filters/index.tsx

@@ -1,39 +1,54 @@
-import { useCallback, useMemo } from 'react';
-import {
-    MultiSelectInput,
-} from '@ifrc-go/ui';
-import { gql } from '@apollo/client';
+import { useCallback } from 'react';
+import { MultiSelectInput } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import {
-    stringNameSelector,
-} from '@ifrc-go/ui/utils';
-import { listToGroupList } from '@togglecorp/fujs';
+import { stringNameSelector } from '@ifrc-go/ui/utils';
 import { EntriesAsList } from '@togglecorp/toggle-form';
 
-import { CountryListQuery } from '#generated/types';
+import {
+    AlertEnumsQuery,
+    CountryListQuery,
+} from '#generated/types';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 type CountryType = NonNullable<NonNullable<NonNullable<CountryListQuery['public']>['countries']>['items']>[number];
 
+interface AlertFilters {
+    key: string;
+    label: string;
+}
+
 const countryKeySelector = (country: CountryType) => country?.id;
 
+const keySelector = (alert: AlertFilters) => alert?.key;
+const labelSelector = (alert: AlertFilters) => alert?.label;
+
 export interface FilterValue {
     countries: string[];
     regions: string[];
+    urgencyList: string[];
+    severityList: string[];
+    certaintyList: string[];
 }
 
 interface Props {
     value: FilterValue;
     onChange: React.Dispatch<React.SetStateAction<FilterValue>>;
     countries?: NonNullable<CountryListQuery['public']['countries']['items']>;
+    urgencyList?: NonNullable<AlertEnumsQuery['enums']['AlertInfoUrgency']>;
+    severityList?: NonNullable<AlertEnumsQuery['enums']['AlertInfoSeverity']>;
+    certaintyList?: NonNullable<AlertEnumsQuery['enums']['AlertInfoCertainty']>;
 }
 
 function Filters(props: Props) {
     const {
         value,
         onChange,
         countries,
+        urgencyList,
+        severityList,
+        certaintyList,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -50,16 +65,45 @@ function Filters(props: Props) {
     );
 
     return (
-        <MultiSelectInput
-            placeholder={strings.riskAllCountries}
-            name="countries"
-            options={countries}
-            keySelector={countryKeySelector}
-            labelSelector={stringNameSelector}
-            value={value.countries}
-            onChange={handleChange}
-            withSelectAll
-        />
+        <div className={styles.filters}>
+            <MultiSelectInput
+                placeholder={strings.alertCountries}
+                name="countries"
+                options={countries}
+                keySelector={countryKeySelector}
+                labelSelector={stringNameSelector}
+                value={value.countries}
+                onChange={handleChange}
+                withSelectAll
+            />
+            <MultiSelectInput
+                placeholder={strings.alertUrgency}
+                name="urgencyList"
+                options={urgencyList}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+                value={value.urgencyList}
+                onChange={handleChange}
+            />
+            <MultiSelectInput
+                placeholder={strings.alertSeverity}
+                name="severityList"
+                options={severityList}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+                value={value.severityList}
+                onChange={handleChange}
+            />
+            <MultiSelectInput
+                placeholder={strings.alertCertainty}
+                name="certaintyList"
+                options={certaintyList}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+                value={value.certaintyList}
+                onChange={handleChange}
+            />
+        </div>
     );
 }
 

src/views/AlertMap/Filters/styles.module.css

@@ -1,5 +1,5 @@
 .filters {
     display: grid;
-    grid-gap: var(--go-ui-spacing-md);
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    grid-gap: var(--go-ui-spacing-md);
 }

src/views/AlertMap/RegionListItem/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "ongoingAlertRegion",
+    "strings": {
+        "regionList": "Region List"
+    }
+}

src/views/AlertMap/RegionListItem/index.tsx

@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+import {
+    gql,
+    useQuery,
+} from '@apollo/client';
+import {
+    BlockLoading,
+    Container,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import {
+    Admin1ListQuery,
+    Admin1ListQueryVariables,
+} from '#generated/types';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const ADMIN1_LIST = gql`
+query Admin1List {
+    public {
+      admin1s {
+        items {
+          countryId
+          name
+        }
+      }
+    }
+  }
+`;
+
+export interface RegionProps {
+    countryId: string | undefined;
+}
+
+function RegionListItem(props: RegionProps) {
+    const {
+        countryId,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const {
+        data: admin1ListResponse,
+        loading: admin1ListLoading,
+    } = useQuery<Admin1ListQuery, Admin1ListQueryVariables>(
+        ADMIN1_LIST,
+    );
+
+    const filteredAdmins = useMemo(() => {
+        if (!countryId || !admin1ListResponse?.public?.admin1s?.items) return [];
+
+        return admin1ListResponse.public.admin1s.items
+            .filter((item) => countryId.includes(item.countryId))
+            .map((item) => item.name);
+    }, [countryId, admin1ListResponse]);
+
+    return (
+        <Container
+            className={styles.alerts}
+            childrenContainerClassName={styles.content}
+            headingLevel={4}
+            spacing="compact"
+            heading={strings.regionList}
+        >
+            {admin1ListLoading && <BlockLoading />}
+            <div className={styles.alertDetails}>
+                {filteredAdmins.map((name) => (
+                    <div>
+                        {name}
+                    </div>
+                ))}
+            </div>
+        </Container>
+    );
+}
+
+export default RegionListItem;

src/views/AlertMap/RegionListItem/styles.module.css

@@ -0,0 +1,13 @@
+.alerts {
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-lg);
+
+        .alert-details {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-2xs);
+        }
+    }
+}