Add alert map details

src/index.tsx

@@ -14,7 +14,7 @@ import App from './App';
 const webappRootId = 'webapp-root';
 
 const webappRootElement = document.getElementById(webappRootId);
-const APP_GRAPHQL_ENDPOINT= "http://localhost:8000/graphql/";
+const APP_GRAPHQL_ENDPOINT = 'http://localhost:8000/graphql/';
 
 const client = new ApolloClient({
     uri: APP_GRAPHQL_ENDPOINT,

src/utils/constants.ts

@@ -3,7 +3,11 @@ export const DURATION_MAP_ZOOM = 1000;
 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';
-export const COLOR_PRIMARY_RED = '#f5333f';
+export const COLOR_TEXT_ON_DARK = COLOR_WHITE;
+export const COLOR_DARK_GREY = '#a5a5a5';
+export const COLOR_BLACK = '#000000';

src/views/AlertMap/AlertDetail/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "alertDetails",
+    "strings": {
+        "alertViewDetails": "View Details"
+    }
+}

src/views/AlertMap/AlertDetail/index.tsx

@@ -0,0 +1,50 @@
+import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import { AlertsInfoQuery } from '#generated/types';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type Alert = NonNullable<NonNullable<NonNullable<AlertsInfoQuery['public']>['alerts']>['items']>[number];
+
+export interface Props {
+    data: Alert;
+    onExpandClick: (alertId: string | undefined) => void;
+}
+
+function AlertDetail(props: Props) {
+    const {
+        data,
+        onExpandClick,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            className={styles.alertInfo}
+            heading={data?.country.name ?? '--'}
+            headerClassName={styles.alertListItem}
+            headingLevel={5}
+            key={data.countryId}
+            headerDescription={data.infos.map((alert) => alert.event)}
+            actions={(
+                <Button
+                    name={data.countryId}
+                    onClick={onExpandClick}
+                    variant="tertiary"
+                    title={strings.alertViewDetails}
+                >
+                    <ChevronRightLineIcon className={styles.icon} />
+                </Button>
+            )}
+        />
+    );
+}
+
+export default AlertDetail;

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

@@ -0,0 +1,32 @@
+.alert-info {
+    .alert-list-item {
+        gap: 0;
+
+        .icon {
+            align-self: flex-end;
+            font-size: var(--go-ui-height-icon-multiplier);
+        }:hover {
+            .icon {
+                animation: wiggle var(--go-ui-duration-transition-slow) ease-in-out;
+            }
+        }
+    }
+
+    @keyframes wiggle {
+        0% {
+            transform: translateX(0);
+        }
+
+        25% {
+            transform: translateX(-0.1rem);
+        }
+
+        50% {
+            transform: translateX(0.1rem);
+        }
+
+        100% {
+            transform: translateX(0);
+        }
+    }
+}

src/views/AlertMap/i18n.json

@@ -2,6 +2,9 @@
     "namespace": "ongoingAlertMap",
     "strings": {
         "mapHeading": "All Ongoing Alerts",
-        "mapViewAllSources": "View All Sources"
+        "mapViewAllSources": "View All Sources",
+        "ongoingAlertCountries": "Ongoing Alert Countries",
+        "backToAlertsLabel": "Back to Alerts",
+        "alertViewDetails": "View Details"
     }
 }

src/views/AlertMap/index.tsx

@@ -4,38 +4,49 @@ import {
     useState,
 } from 'react';
 import { Link } from 'react-router-dom';
-import type { LngLatBoundsLike, FillLayer } from 'mapbox-gl';
 import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { Container } from '@ifrc-go/ui';
+import { ChevronLeftLineIcon } from '@ifrc-go/icons';
+import {
+    BlockLoading,
+    Button,
+    Container,
+    List,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     _cs,
+    isDefined,
     isNotDefined,
-    listToGroupList,
     unique,
 } from '@togglecorp/fujs';
 import {
     MapBounds,
     MapContainer,
     MapLayer,
 } from '@togglecorp/re-map';
+import type {
+    FillLayer,
+    LngLatBoundsLike,
+} from 'mapbox-gl';
 
-import MapPopup from '#components/MapPopup';
 import BaseMap from '#components/domain/BaseMap';
+import MapPopup from '#components/MapPopup';
 import {
     AlertsInfoQuery,
     AlertsInfoQueryVariables,
-    CountryInfoQuery,
-    CountryInfoQueryVariables,
 } from '#generated/types';
 import {
+    COLOR_LIGHT_GREY,
+    COLOR_PRIMARY_RED,
     DEFAULT_MAP_PADDING,
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 
+import AlertDetail from './AlertDetail';
+
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -44,6 +55,7 @@ query AlertsInfo {
     public {
         alerts {
             items {
+              id
               addresses
               country {
                 centroid
@@ -116,70 +128,40 @@ query AlertsInfo {
   }
 `;
 
-const COUNTRY_INFO = gql`
-query CountryInfo {
-    public {
-      countries {
-        items {
-          iso3
-          id
-          centroid
-          continent {
-            id
-            name
-          }
-          continentId
-          name
-          region {
-            id
-            name
-            centroid
-          }
-          regionId
-        }
-        limit
-        offset
-      }
-    }
-  }
-`;
+type AlertType = NonNullable<NonNullable<NonNullable<AlertsInfoQuery['public']>['alerts']>['items']>[number];
 
 type Props = {
     className?: string;
-    alertId: string;
     bbox: LngLatBoundsLike | undefined;
+    onActiveCountryChange: (countryId: | undefined) => void;
 }
 
-const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
-    type: 'geojson',
-};
+const keySelector = (alert: AlertType) => alert?.id;
 
 interface ClickedPoint {
     feature: GeoJSON.Feature<GeoJSON.Point, AlertsInfoQueryVariables>;
     lngLat: mapboxgl.LngLatLike;
 }
 
-function OngoingAlertMap(props: Props) {
+function OngoingAlertMap<
+    KEY extends string | number
+>(props: Props) {
     const {
         className,
         bbox,
-        alertId,
+        onActiveCountryChange,
     } = props;
 
     const strings = useTranslation(i18n);
+    const [activeCountryId, setActiveCountryId] = useState<KEY | undefined>(undefined);
 
     const {
         data: alertsResponse,
+        loading: alertLoading,
     } = useQuery<AlertsInfoQuery, AlertsInfoQueryVariables>(
         ALERTS_INFO,
     );
 
-    const {
-        data: countryResponse,
-    } = useQuery<CountryInfoQuery, CountryInfoQueryVariables>(
-        COUNTRY_INFO,
-    );
-
     const [
         clickedPointProperties,
         setClickedPointProperties,
@@ -192,6 +174,24 @@ function OngoingAlertMap(props: Props) {
         [setClickedPointProperties],
     );
 
+    const setActiveAlertIdSafe = useCallback(
+        (countryId: string | number | undefined) => {
+            const countryIdSafe = countryId as undefined;
+
+            setActiveCountryId(countryIdSafe);
+            onActiveCountryChange(countryIdSafe);
+        },
+        [onActiveCountryChange],
+    );
+
+    const eventListRendererParams = useCallback(
+        (_: string | number, alert: AlertType) => ({
+            data: alert,
+            onExpandClick: setActiveAlertIdSafe,
+        }),
+        [setActiveAlertIdSafe],
+    );
+
     const handleCountryClick = useCallback((
         feature: mapboxgl.MapboxGeoJSONFeature,
         lngLat: mapboxgl.LngLatLike,
@@ -212,7 +212,11 @@ function OngoingAlertMap(props: Props) {
                 },
             };
         }
-        const uniqueCountries = unique(alertsResponse.public.alerts.items, (item) => item.country.iso3);
+        const uniqueCountries = unique(
+            alertsResponse.public.alerts.items,
+            (item) => item.country.iso3,
+        );
+
         return {
             type: 'fill',
             paint: {
@@ -223,27 +227,26 @@ function OngoingAlertMap(props: Props) {
                     ...uniqueCountries.flatMap(
                         (alert) => [
                             alert.country.iso3.toUpperCase(),
-                            '#ff0000',
+                            COLOR_PRIMARY_RED,
                         ],
                     ),
-                    '#e0e0e0',
+                    COLOR_LIGHT_GREY,
                 ],
             },
             layout: {
                 visibility: 'visible',
             },
         };
-    }, [alertsResponse?.public.alerts.items]);
-
-    console.info('country', alertsResponse);
+    }, [alertsResponse]);
 
     return (
         <Container
             className={_cs(styles.alertMap, className)}
             heading={strings.mapHeading}
             withHeaderBorder
-            childrenContainerClassName={styles.content}
+            childrenContainerClassName={styles.mainContent}
             actions={(
+                // TODO: Add sources link
                 <Link
                     className={styles.sources}
                     to="/"
@@ -269,10 +272,11 @@ function OngoingAlertMap(props: Props) {
                     <MapPopup
                         onCloseButtonClick={handlePointClose}
                         coordinates={clickedPointProperties.lngLat}
-                        childrenContainerClassName={styles.popupContent}
                         heading="Map"
+                        contentViewType="vertical"
+                        childrenContainerClassName={styles.popupContent}
                     >
-                        <>Hello</>
+                        Map
                     </MapPopup>
                 )}
                 <MapBounds
@@ -281,6 +285,42 @@ function OngoingAlertMap(props: Props) {
                     padding={DEFAULT_MAP_PADDING}
                 />
             </BaseMap>
+            <Container
+                className={styles.countryList}
+                childrenContainerClassName={styles.content}
+                withInternalPadding
+                heading={strings.ongoingAlertCountries}
+                headingLevel={4}
+                withHeaderBorder
+                contentViewType="vertical"
+                actions={isDefined(activeCountryId) && (
+                    <Button
+                        name={undefined}
+                        onClick={setActiveAlertIdSafe}
+                        variant="tertiary"
+                        icons={(
+                            <ChevronLeftLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.backToAlertsLabel}
+                    </Button>
+                )}
+            >
+                {alertLoading && <BlockLoading />}
+                {isDefined(alertsResponse) && (
+                    <List
+                        className={styles.countryList}
+                        filtered={false}
+                        pending={alertLoading}
+                        errored={false}
+                        data={alertsResponse?.public?.alerts.items}
+                        keySelector={keySelector}
+                        renderer={AlertDetail}
+                        rendererParams={eventListRendererParams}
+                        emptyMessage="No data found"
+                    />
+                )}
+            </Container>
         </Container>
     );
 }