Add alert detail

src/views/AlertDetails/AreaAlertInfo/AreaInfoDetail/i18n.json

@@ -0,0 +1,13 @@
+{
+    "namespace": "areaAlertInfo",
+    "strings": {
+        "areaAlertInfoGeoCode":"Geo Code",
+        "areaAlertInfoValueName": "Value Name",
+        "areaAlertInfoValue": "Value",
+        "areaAlertAreaDescription": "Area Description",
+        "areaAlertPolygon": "Area Polygon & Circle",
+        "areaAlertChooseAnOption": "Choose an option",
+        "areaAlertGeocodes": "Geocodes"
+    }
+}
+

src/views/AlertDetails/AreaAlertInfo/AreaInfoDetail/index.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useMemo } from 'react';
+import {
+    Header,
+    SelectInput,
+    Table,
+    TabPanel,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { createStringColumn } from '@ifrc-go/ui/utils';
+
+import { GetAreaAlertInfoQuery } from '#generated/types/graphql';
+import { stringIdSelector } from '#utils/selectors';
+import { EntriesAsList } from '../../../../types';
+
+import i18n from './i18n.json';
+
+type AreaInfo = NonNullable<NonNullable<GetAreaAlertInfoQuery['public']>['alertInfo']>['areas'][number];
+
+type PolygonInfo = NonNullable<AreaInfo['polygons'][number]>;
+type GeocodeInfo = NonNullable<AreaInfo['geocodes'][number]>;
+
+export interface FilterValue {
+    polygon: string | undefined;
+}
+
+interface Props {
+    data: AreaInfo;
+    onChange?: React.Dispatch<React.SetStateAction<FilterValue>>;
+    value?: FilterValue;
+}
+
+const keySelector = (polygon: PolygonInfo) => polygon.id;
+const labelSelector = (polygon: PolygonInfo) => polygon.value;
+
+function AreaInfoDetail(props: Props) {
+    const {
+        data,
+        onChange,
+        value,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const columns = useMemo(() => ([
+        createStringColumn<GeocodeInfo, string>(
+            'value',
+            strings.areaAlertInfoGeoCode,
+            (item) => item.alertInfoAreaId,
+        ),
+        createStringColumn<GeocodeInfo, string>(
+            'value',
+            strings.areaAlertInfoValueName,
+            (item) => item.valueName,
+        ),
+        createStringColumn<GeocodeInfo, string>(
+            'value',
+            strings.areaAlertInfoValue,
+            (item) => item.value,
+        ),
+    ]), [
+        strings.areaAlertInfoGeoCode,
+        strings.areaAlertInfoValueName,
+        strings.areaAlertInfoValue,
+    ]);
+
+    const handleChange = useCallback(
+        (...args: EntriesAsList<FilterValue>) => {
+            const [val, key] = args;
+            onChange((prevValue): FilterValue => ({
+                ...prevValue,
+                [key]: val,
+            }));
+        },
+        [onChange],
+    );
+
+    return (
+        <TabPanel name={data.id}>
+            <TextOutput
+                label={strings.areaAlertAreaDescription}
+                value={data?.areaDesc}
+            />
+            <Header
+                heading={strings.areaAlertPolygon}
+            />
+            <SelectInput
+                name="polygon"
+                placeholder={strings.areaAlertChooseAnOption}
+                options={data?.polygons}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+                value={value?.polygon}
+                onChange={handleChange}
+            />
+            <Header
+                heading={strings.areaAlertGeocodes}
+            />
+            <Table
+                columns={columns}
+                keySelector={stringIdSelector}
+                data={data?.geocodes}
+                filtered={false}
+                pending={false}
+            />
+        </TabPanel>
+    );
+}
+
+export default AreaInfoDetail;

src/views/AlertDetails/AreaAlertInfo/i18n.json

@@ -0,0 +1,26 @@
+{
+    "namespace": "areaAlertInfo",
+    "strings": {
+        "alertInfoArea": "Area",
+        "alertInfoHeadline": "Headline",
+        "alertInfoLanguage": "Language",
+        "alertInfoEvent": "Event",
+        "alertInfoUrgency": "Urgency",
+        "alertInfoSeverity": "Severity",
+        "alertInfoCertainty": "Certainty",
+        "alertInfoOnset": "Onset",
+        "alertInfoExpires": "Expires",
+        "alertInfoSenderName": "Sender Name",
+        "alertInfoAreaDescription": "Area Description",
+        "alertInfoDescription": "Description",
+        "alertInfoInstruction": "Instruction",
+        "alertInfoCategory": "Category",
+        "alertInfoResponseType": "Response Type",
+        "alertInfoAudience": "Audience",
+        "alertInfoEventCode": "Event Code",
+        "alertInfoEffective": "Effective",
+        "alertInfoWeb": "Web",
+        "alertInfoContact": "Contact"
+    }
+}
+

src/views/AlertDetails/AreaAlertInfo/index.tsx

@@ -1,18 +1,38 @@
-import { useMemo } from 'react';
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
 import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { TabPanel } from '@ifrc-go/ui';
-import { isNotDefined } from '@togglecorp/fujs';
+import {
+    DateOutput,
+    List,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import {
     GetAreaAlertInfoQuery,
     GetAreaAlertInfoQueryVariables,
 } from '#generated/types/graphql';
+import { stringIdSelector } from '#utils/selectors';
+
+import AreaInfoDetail from './AreaInfoDetail';
+
+import i18n from './i18n.json';
 
 interface Props {
-    title: string;
     infoId: string;
 }
 
@@ -22,6 +42,7 @@ const GET_AREA_ALER_INFO = gql`
             alertInfo(pk: $pk) {
                 id
                 event
+                eventCode
                 headline
                 expires
                 language
@@ -47,23 +68,44 @@ const GET_AREA_ALER_INFO = gql`
                 alertId
                 areas {
                     id
+                    areaDesc
+                    ceiling
+                    alertInfoId
+                    altitude
+                    polygons {
+                        id
+                        value
+                        alertInfoAreaId
+                      }
+                      geocodes {
+                        id
+                        value
+                        valueName
+                        alertInfoAreaId
+                      }
                 }
             }
         }
     }
 `;
+
+type AreaInfo = NonNullable<NonNullable<GetAreaAlertInfoQuery['public']>['alertInfo']>['areas'][number];
+
 function AreaAlertInfo(props: Props) {
     const {
-        title,
         infoId,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const variables: GetAreaAlertInfoQueryVariables = useMemo(() => ({
         pk: infoId,
     }), [infoId]);
 
     const {
-        data: response,
+        data: areaAlertResponse,
+        loading: areaAlertLoading,
+        error: areaAlertError,
     } = useQuery<GetAreaAlertInfoQuery, GetAreaAlertInfoQueryVariables>(
         GET_AREA_ALER_INFO,
         {
@@ -72,12 +114,138 @@ function AreaAlertInfo(props: Props) {
         },
     );
 
-    const data = response?.public?.alertInfo;
-    console.log('alert info data', data);
+    const data = areaAlertResponse?.public?.alertInfo;
+    const initialActiveTab = data?.areas[0]?.id || '';
+    const [activeTab, setActiveTab] = useState<string>(initialActiveTab);
+
+    const rendererParams = useCallback((_: string, value: AreaInfo) => ({
+        data: value,
+    }), []);
 
     return (
         <TabPanel name={infoId}>
-            {title}
+            <Tabs
+                value={activeTab}
+                onChange={setActiveTab}
+                variant="tertiary"
+            >
+                <TabList>
+                    {data?.areas?.map((area: AreaInfo, index: number) => (
+                        <Tab name={area?.id}>
+                            {strings.alertInfoArea}
+                            {index + 1}
+                        </Tab>
+                    ))}
+                </TabList>
+                <List
+                    data={data?.areas}
+                    renderer={AreaInfoDetail}
+                    rendererParams={rendererParams}
+                    keySelector={stringIdSelector}
+                    pending={areaAlertLoading}
+                    filtered={false}
+                    errored={isDefined(areaAlertError)}
+                />
+            </Tabs>
+            <TextOutput
+                label={strings.alertInfoHeadline}
+                value={data?.headline}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoLanguage}
+                value={data?.language}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoEvent}
+                value={data?.event}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoUrgency}
+                value={data?.urgency}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoSeverity}
+                value={(
+                    <DateOutput
+                        value={data?.severityDisplay}
+                    />
+                )}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoCertainty}
+                value={data?.certaintyDisplay}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoOnset}
+                value={data?.onset}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoExpires}
+                value={data?.expires}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoSenderName}
+                value={data?.senderName}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoAreaDescription}
+                value=""
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoDescription}
+                value={data?.description}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoInstruction}
+                value={data?.instruction}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoCategory}
+                value={data?.categoryDisplay}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoResponseType}
+                value={data?.responseType}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoAudience}
+                value={data?.audience}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoEventCode}
+                value={data?.eventCode}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoEffective}
+                value={data?.effective}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoWeb}
+                value={data?.web}
+                withoutLabelColon
+            />
+            <TextOutput
+                label={strings.alertInfoContact}
+                value={data?.contact}
+                withoutLabelColon
+            />
         </TabPanel>
     );
 }

src/views/AlertDetails/AreaAlertInfo/styles.module.css

@@ -0,0 +1,3 @@
+.area-info {
+    display: flex;
+}