From 4e7d86d40c482d2168030ffce5986e615a3e1a8f Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Wed, 10 Apr 2024 17:55:35 +0545 Subject: [PATCH] Add alerts info --- package.json | 8 +- .../AlertListItem/AlertDetail/index.tsx | 37 ++++ .../Home/AlertMap/AlertListItem/i18n.json | 6 + .../Home/AlertMap/AlertListItem/index.tsx | 175 ++++++++++++++++++ .../AlertMap/AlertListItem/styles.module.css | 3 + .../AlertMap/CountryListItem/i18n.json | 0 .../AlertMap/CountryListItem/index.tsx | 6 +- .../CountryListItem/styles.module.css | 0 .../{ => Home}/AlertMap/Filters/i18n.json | 0 .../{ => Home}/AlertMap/Filters/index.tsx | 0 .../AlertMap/Filters/styles.module.css | 0 .../AlertMap/RegionListItem/i18n.json | 0 .../AlertMap/RegionListItem/index.tsx | 2 +- .../AlertMap/RegionListItem/styles.module.css | 0 src/views/{ => Home}/AlertMap/i18n.json | 0 src/views/{ => Home}/AlertMap/index.tsx | 133 ++++++++----- .../{ => Home}/AlertMap/styles.module.css | 0 src/views/Home/index.tsx | 11 ++ 18 files changed, 325 insertions(+), 56 deletions(-) create mode 100644 src/views/Home/AlertMap/AlertListItem/AlertDetail/index.tsx create mode 100644 src/views/Home/AlertMap/AlertListItem/i18n.json create mode 100644 src/views/Home/AlertMap/AlertListItem/index.tsx create mode 100644 src/views/Home/AlertMap/AlertListItem/styles.module.css rename src/views/{ => Home}/AlertMap/CountryListItem/i18n.json (100%) rename src/views/{ => Home}/AlertMap/CountryListItem/index.tsx (84%) rename src/views/{ => Home}/AlertMap/CountryListItem/styles.module.css (100%) rename src/views/{ => Home}/AlertMap/Filters/i18n.json (100%) rename src/views/{ => Home}/AlertMap/Filters/index.tsx (100%) rename src/views/{ => Home}/AlertMap/Filters/styles.module.css (100%) rename src/views/{ => Home}/AlertMap/RegionListItem/i18n.json (100%) rename src/views/{ => Home}/AlertMap/RegionListItem/index.tsx (97%) rename src/views/{ => Home}/AlertMap/RegionListItem/styles.module.css (100%) rename src/views/{ => Home}/AlertMap/i18n.json (100%) rename src/views/{ => Home}/AlertMap/index.tsx (72%) rename src/views/{ => Home}/AlertMap/styles.module.css (100%) diff --git a/package.json b/package.json index 1e07706f..eb4f3cb6 100644 --- a/package.json +++ b/package.json @@ -20,17 +20,21 @@ }, "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", - "@mapbox/mapbox-gl-draw": "^1.4.3", - "@sentry/react": "^7.81.1", + "@mapbox/mapbox-gl-draw": "^1.2.0", "@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" diff --git a/src/views/Home/AlertMap/AlertListItem/AlertDetail/index.tsx b/src/views/Home/AlertMap/AlertListItem/AlertDetail/index.tsx new file mode 100644 index 00000000..4551653b --- /dev/null +++ b/src/views/Home/AlertMap/AlertListItem/AlertDetail/index.tsx @@ -0,0 +1,37 @@ +import { Link } from 'react-router-dom'; +import { Container } from '@ifrc-go/ui'; + +import { CountryAlertsListQuery } from '#generated/types'; + +type CountryAlertType = NonNullable>; + +export interface AlertProps { + data: CountryAlertType; + onExpandClick: (alertId: string | undefined) => void; +} + +function AlertDetail(props: AlertProps) { + const { + data, + onExpandClick, + } = props; + + return ( + + {data?.infos?.map((alert) => ( + +
+ {alert?.event} +
+
+ {alert?.category} +
+ + ))} + + ) +} + +export default AlertDetail; diff --git a/src/views/Home/AlertMap/AlertListItem/i18n.json b/src/views/Home/AlertMap/AlertListItem/i18n.json new file mode 100644 index 00000000..d15e35b0 --- /dev/null +++ b/src/views/Home/AlertMap/AlertListItem/i18n.json @@ -0,0 +1,6 @@ +{ + "namespace": "alertDetails", + "strings": { + "alertViewDetails": "Alert List Details" + } +} \ No newline at end of file diff --git a/src/views/Home/AlertMap/AlertListItem/index.tsx b/src/views/Home/AlertMap/AlertListItem/index.tsx new file mode 100644 index 00000000..97dfacc8 --- /dev/null +++ b/src/views/Home/AlertMap/AlertListItem/index.tsx @@ -0,0 +1,175 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { isDefined } from '@togglecorp/fujs'; +import { gql, useQuery } from '@apollo/client'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + Button, + Container, + Pager, + TextOutput, +} from '@ifrc-go/ui'; + +import { + CountryAlertsListQuery, + CountryAlertsListQueryVariables, +} from '#generated/types'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; +import { ChevronLeftLineIcon } from '@ifrc-go/icons'; + +const COUNTRY_ALERTS_LIST = gql` + query CountryAlertsList( + $country: ID!, + $pagination: OffsetPaginationInput + ) { + public { + alerts( + filters: { + country: { + pk: $country + } + } + pagination: $pagination + ) { + items { + id + info { + event + category + alertId + } + } + } + } + } +`; + +const defaultMaxItemsPerPage = 10; + +type CountryAlertType = NonNullable>; + +const countryAlertKeySelector = (alert: CountryAlertType) => alert.id; + +export interface Props { + countryId: string; + handleAlertClick: (countryId: string | undefined) => void; + activeAlertId: string | undefined; +} + +function AlertDetail(props: Props) { + const { + countryId, + handleAlertClick, + activeAlertId, + } = props; + + const strings = useTranslation(i18n); + + const [activePage, setActivePage] = useState(1); + + const variables = useMemo(() => ({ + country: countryId, + pagination: { + offset: (activePage - 1) * defaultMaxItemsPerPage, + limit: defaultMaxItemsPerPage, + }, + }), [activePage]); + + const { + data: countryAlertsResponse, + loading: countryAlertsLoading, + } = useQuery( + COUNTRY_ALERTS_LIST, { + variables, + }); + + // const setActiveCountryIdSafe = useCallback( + // (countryId: string | undefined) => { + // setActiveCountryId(countryId); + // onActiveCountryChange(countryId); + // }, + // [onActiveCountryChange, setActiveCountryId], + // ); + + // const alertListRendererParams = useCallback( + // (_: string | number, alert: CountryAlertType): Props => ({ + // countryId: activeCountryId, + // onActiveCountryChange: setActiveCountryIdSafe, + // }), + // [activeCountryId, setActiveCountryIdSafe], + // ); + + console.log('alert', activeAlertId); + + return ( + + )} + contentViewType="vertical" + // actions={isDefined(countryId) && ( + // + // )} + > + {/* + {alert.event} + {alert.category} + */} + {countryAlertsResponse?.public?.alerts?.items?.map((alerts) => ( +
+ +
+ ))} + {/* {countryAlertsLoading && } + {isDefined(countryAlertsResponse) && ( + + )} */} + + ); +} + +export default AlertDetail; diff --git a/src/views/Home/AlertMap/AlertListItem/styles.module.css b/src/views/Home/AlertMap/AlertListItem/styles.module.css new file mode 100644 index 00000000..e7f2d20d --- /dev/null +++ b/src/views/Home/AlertMap/AlertListItem/styles.module.css @@ -0,0 +1,3 @@ +.alerts { + display: flex; +} diff --git a/src/views/AlertMap/CountryListItem/i18n.json b/src/views/Home/AlertMap/CountryListItem/i18n.json similarity index 100% rename from src/views/AlertMap/CountryListItem/i18n.json rename to src/views/Home/AlertMap/CountryListItem/i18n.json diff --git a/src/views/AlertMap/CountryListItem/index.tsx b/src/views/Home/AlertMap/CountryListItem/index.tsx similarity index 84% rename from src/views/AlertMap/CountryListItem/index.tsx rename to src/views/Home/AlertMap/CountryListItem/index.tsx index 85bbcc24..75892cb6 100644 --- a/src/views/AlertMap/CountryListItem/index.tsx +++ b/src/views/Home/AlertMap/CountryListItem/index.tsx @@ -10,17 +10,19 @@ import { CountryListQuery } from '#generated/types'; import i18n from './i18n.json'; import styles from './styles.module.css'; -type CountryType = NonNullable['countries']>['items']>[number]; +type CountryType = NonNullable['allCountries']>[number]; export interface CountryProps { data: CountryType; onExpandClick: (alertId: string | undefined) => void; + bbox?: number[][] | undefined; } function CountryListItem(props: CountryProps) { const { data, onExpandClick, + bbox, } = props; const strings = useTranslation(i18n); @@ -28,7 +30,7 @@ function CountryListItem(props: CountryProps) { return ( }
{filteredAdmins.map((name) => ( -
+
{name}
))} diff --git a/src/views/AlertMap/RegionListItem/styles.module.css b/src/views/Home/AlertMap/RegionListItem/styles.module.css similarity index 100% rename from src/views/AlertMap/RegionListItem/styles.module.css rename to src/views/Home/AlertMap/RegionListItem/styles.module.css diff --git a/src/views/AlertMap/i18n.json b/src/views/Home/AlertMap/i18n.json similarity index 100% rename from src/views/AlertMap/i18n.json rename to src/views/Home/AlertMap/i18n.json diff --git a/src/views/AlertMap/index.tsx b/src/views/Home/AlertMap/index.tsx similarity index 72% rename from src/views/AlertMap/index.tsx rename to src/views/Home/AlertMap/index.tsx index ad87fa21..01b9e5ad 100644 --- a/src/views/AlertMap/index.tsx +++ b/src/views/Home/AlertMap/index.tsx @@ -13,6 +13,10 @@ import { Button, Container, List, + Tab, + TabList, + TabPanel, + Tabs, } from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { @@ -51,6 +55,7 @@ import { import CountryListItem, { CountryProps } from './CountryListItem'; import Filters, { FilterValue } from './Filters'; import RegionListItem from './RegionListItem'; +import AlertListItem from './AlertListItem'; import i18n from './i18n.json'; import styles from './styles.module.css'; @@ -58,16 +63,11 @@ import styles from './styles.module.css'; const COUNTRIES_LIST = gql` query CountryList { public { - countries { - items { - name - id - admin1s { - name - id - } - iso3 - } + allCountries { + alertCount + name + id + iso3 } } }`; @@ -98,7 +98,7 @@ const defaultFilterValue: FilterValue = { certaintyList: [], }; -type CountryType = NonNullable['countries']>['items']>[number]; +type CountryType = NonNullable['allCountries']>[number]; export type AlertPointFeature = GeoJSON.Feature; @@ -110,6 +110,7 @@ type Props = { className?: string; bbox: LngLatBoundsLike | undefined; onActiveCountryChange: (countryId: string | undefined) => void; + activeCountryId: string | undefined; } const countryKeySelector = (country: CountryType) => country?.id; @@ -119,15 +120,18 @@ interface ClickedPoint { lngLat: mapboxgl.LngLatLike; } -function OngoingAlertMap(props: Props) { +function OngoingAlertMap(props: Props) { const { className, bbox, + activeCountryId, onActiveCountryChange, } = props; const strings = useTranslation(i18n); - const [activeCountryId, setActiveCountryId] = useState(undefined); + const [filters, setFilters] = useInputState(defaultFilterValue); + const [activeAlertId, setActiveAlertId] = useState(); + const [activeLearnOption, setActiveLearnOption] = useState('admin-1'); const { data: countryResponse, @@ -142,35 +146,10 @@ function OngoingAlertMap(props: Props) { ALERT_ENUMS, ); - const activeCountry = useMemo( - () => { - if (isNotDefined(activeCountryId)) { - return undefined; - } - - return countryResponse?.public.countries.items?.filter( - ({ id }) => activeCountryId === id, - ); - }, - [activeCountryId, countryResponse], - ); - - const bounds = useMemo( - () => { - if (isNotDefined(activeCountry)) { - return bbox; - } - - return bbox; - }, - [ - bbox, - activeCountry, - ], + const filteredCountries = countryResponse?.public.allCountries.filter( + country => country.alertCount > 0 ); - const boundsSafe = useDebouncedValue(bounds); - const [ clickedPointProperties, setClickedPointProperties, @@ -185,10 +164,9 @@ function OngoingAlertMap(props: Props) { const setActiveCountryIdSafe = useCallback( (countryId: string | undefined) => { - setActiveCountryId(countryId); onActiveCountryChange(countryId); }, - [onActiveCountryChange, setActiveCountryId], + [onActiveCountryChange], ); const countryListRendererParams = useCallback( @@ -210,8 +188,11 @@ function OngoingAlertMap(props: Props) { return false; }, []); + const [bounds, setBounds] = useState(bbox); + const boundsSafe = useDebouncedValue(bounds); + const countryFillOptions = useMemo>(() => { - if (isNotDefined(countryResponse)) { + if (isNotDefined(filteredCountries)) { return { type: 'fill', layout: { @@ -220,7 +201,7 @@ function OngoingAlertMap(props: Props) { }; } const uniqueCountries = unique( - countryResponse.public.countries.items, + filteredCountries, (item) => item.iso3, ); @@ -246,7 +227,12 @@ function OngoingAlertMap(props: Props) { }; }, [countryResponse]); - const [filters, setFilters] = useInputState(defaultFilterValue); + const handleAlertClick = useCallback( + (id: string | undefined) => { + setActiveAlertId(id); + onActiveCountryChange(undefined); + }, [onActiveCountryChange], + ); return ( (props: Props) { )} filters={( (props: Props) { )} > - {isDefined(countryResponse) && isNotDefined(activeCountryId) && ( + {isDefined(countryResponse) && isNotDefined(activeCountryId) && isNotDefined(activeAlertId) && ( )} + {isDefined(activeCountryId) && ( - + + + + Admin-1 + + + Alerts + + + +
+ + {isDefined(activeCountryId) && ( + + )} + + + {isDefined(activeCountryId) && ( + + )} + + )} diff --git a/src/views/AlertMap/styles.module.css b/src/views/Home/AlertMap/styles.module.css similarity index 100% rename from src/views/AlertMap/styles.module.css rename to src/views/Home/AlertMap/styles.module.css diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index 97a0768b..91adca70 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -5,6 +5,7 @@ import { TabPanel, Tabs, } from '@ifrc-go/ui'; + import { useTranslation } from '@ifrc-go/ui/hooks'; import Page from '#components/Page'; @@ -21,6 +22,8 @@ export function Component() { const strings = useTranslation(i18n); const [activeTab, setActiveTab] = useState('map'); + const [activeCountryId, setActiveCountryId] = useState(); + return ( + + ); }