Merge pull request #33 from IFRCGo/feature/alert-details

Alert Detail page

.unimportedrc.json

@@ -19,10 +19,14 @@
     ],
     "extensions": [".ts", ".js", ".tsx", ".jsx"],
     "aliases": {
-        "#utils/*": ["./src/utils/*"],
-        "#views/*": ["./src/views/*"],
         "#generated/*": ["./generated/*"],
+        "#assets/*": ["./src/assets/*"],
         "#components/*": ["./src/components/*"],
-        "#hooks/*": ["./src/hooks/*"]
+        "#config": ["./src/config"],
+        "#contexts/*": ["./src/contexts/*"],
+        "#hooks/*": ["./src/hooks/*"],
+        "#utils/*": ["./src/utils/*"],
+        "#views/*": ["./src/views/*"],
+        "#routes": ["./src/App/routes"]
     }
 }

src/App/routes.tsx

@@ -50,10 +50,19 @@ const preferences = myWrapRoute({
     parent: root,
 });
 
+const alertDetails = myWrapRoute({
+    title: 'AlertDetails',
+    path: 'alert-details/:alertId',
+    component: () => import('#views/AlertDetails'),
+    componentProps: {},
+    parent: root,
+});
+
 export const wrappedRoutes = {
     root,
     home,
     preferences,
+    alertDetails,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

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

@@ -0,0 +1,15 @@
+{
+    "namespace": "areaInfoDetail",
+    "strings": {
+        "polygonOptionLabel": "Polygon {polygonNum}",
+        "circleOptionLabel": "Circle {circleNum}",
+        "areaAlertInfoGeocode":"Geocode",
+        "areaAlertInfoValueName": "Value Name",
+        "areaAlertInfoValue": "Value",
+        "areaAlertAreaDescription": "Area Description",
+        "areaAlertPolygon": "Area Polygon & Circle",
+        "areaAlertChooseAnOption": "Choose an option",
+        "areaAlertGeocodes": "Geocodes"
+    }
+}
+

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

@@ -0,0 +1,124 @@
+import {
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Container,
+    SelectInput,
+    Table,
+    TabPanel,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    createStringColumn,
+    resolveToString,
+} from '@ifrc-go/ui/utils';
+
+import { GetAreaAlertInfoQuery } from '#generated/types/graphql';
+import {
+    stringIdSelector,
+    stringNameSelector,
+} from '#utils/selectors';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type AreaInfo = NonNullable<NonNullable<GetAreaAlertInfoQuery['public']>['alertInfo']>['areas'][number];
+
+type GeocodeInfo = NonNullable<AreaInfo['geocodes'][number]>;
+
+interface Props {
+    data: AreaInfo;
+}
+
+function AreaInfoDetail(props: Props) {
+    const { data } = props;
+
+    const strings = useTranslation(i18n);
+    const [selectedFeature, setSelectedFeature] = useState<string | undefined>();
+
+    const columns = useMemo(() => ([
+        createStringColumn<GeocodeInfo, string>(
+            'id',
+            strings.areaAlertInfoGeocode,
+            (item) => item.id,
+        ),
+        createStringColumn<GeocodeInfo, string>(
+            'name',
+            strings.areaAlertInfoValueName,
+            (item) => item.valueName,
+        ),
+        createStringColumn<GeocodeInfo, string>(
+            'value',
+            strings.areaAlertInfoValue,
+            (item) => item.value,
+        ),
+    ]), [
+        strings.areaAlertInfoGeocode,
+        strings.areaAlertInfoValueName,
+        strings.areaAlertInfoValue,
+    ]);
+
+    const featureOptions = useMemo(
+        () => {
+            const polygonOptions = data?.polygons.map((polygon, index) => ({
+                ...polygon,
+                name: resolveToString(strings.polygonOptionLabel, { polygonNum: index + 1 }),
+            }));
+
+            const circleOptions = data?.circles.map((circle, index) => ({
+                ...circle,
+                name: resolveToString(strings.circleOptionLabel, { circleNum: index + 1 }),
+            }));
+
+            return [
+                ...polygonOptions,
+                ...circleOptions,
+            ];
+        },
+        [data, strings],
+    );
+
+    return (
+        <TabPanel
+            name={data.id}
+            className={styles.areaInfoDetail}
+        >
+            <Container
+                className={styles.areaDetails}
+                heading={data?.areaDesc}
+                contentViewType="vertical"
+                filters={(
+                    <SelectInput
+                        label={strings.areaAlertPolygon}
+                        name="feature"
+                        placeholder={strings.areaAlertChooseAnOption}
+                        options={featureOptions}
+                        keySelector={stringIdSelector}
+                        labelSelector={stringNameSelector}
+                        value={selectedFeature}
+                        onChange={setSelectedFeature}
+                    />
+                )}
+                withGridViewInFilter
+                headingLevel={4}
+            >
+                <div className={styles.map} />
+            </Container>
+            <Container
+                className={styles.geocodes}
+                heading={strings.areaAlertGeocodes}
+            >
+                <Table
+                    columns={columns}
+                    keySelector={stringIdSelector}
+                    data={data?.geocodes}
+                    filtered={false}
+                    pending={false}
+                />
+            </Container>
+        </TabPanel>
+    );
+}
+
+export default AreaInfoDetail;

src/views/AlertDetails/AlertInfo/AreaInfoDetail/styles.module.css

@@ -0,0 +1,19 @@
+.area-info-detail {
+    display: flex;
+    gap: var(--go-ui-spacing-md);
+
+    .map {
+        background-color: var(--go-ui-color-background);
+        height: 20rem;
+    }
+
+    .area-details {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+
+    .geocodes {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+}

src/views/AlertDetails/AlertInfo/i18n.json

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