Skip to content

Commit

Permalink
Add region list in alert info
Browse files Browse the repository at this point in the history
  • Loading branch information
@barshathakuri @frozenhelium
barshathakuri authored and frozenhelium committed Apr 19, 2024
1 parent 4e76e92 commit 758d444
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 50 deletions.
96 changes: 73 additions & 23 deletions src/views/Home/AlertsView/AlertsAside/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
} from '@togglecorp/fujs';

import {
Admin1AlertListQuery,
AlertInfoQuery,
CountryAdmin1Query,
CountryAdmin1QueryVariables,
Expand Down Expand Up @@ -70,6 +71,8 @@ type Alert = NonNullable<NonNullable<NonNullable<CountryAlertsListQuery['public'

type AlertInfoDetail = NonNullable<NonNullable<NonNullable<AlertInfoQuery['public']>['alert']>['info']>;

type Admin1Alerts = NonNullable<NonNullable<Admin1AlertListQuery['public']>['alerts']>['items'][number];

interface Props {
className?: string;
countriesWithAlert?: Country[];
Expand All @@ -82,10 +85,16 @@ interface Props {
countryAlerts?: Alert[];
activePage: number;
setActivePage: (page: number) => void;
alertCount: number;
totalAlertCount: number;
activeAlertId?: string;
handleAlertClick: (id: string | undefined) => void;
alertInfo?: AlertInfoDetail[];
activeAdmin1Id?: string;
setActiveAdmin1Id?: (id: string | undefined) => void;
admin1Alerts: Admin1Alerts[];
activeAdmin1Page: number;
setActiveAdmin1Page: (page: number) => void;
admin1AlertCount: number;
}

const defaultMaxItemsPerPage = 10;
Expand All @@ -105,15 +114,20 @@ function AlertsAside(props: Props) {
countryAlerts,
activePage,
setActivePage,
alertCount,
totalAlertCount,
handleAlertClick,
activeAlertId,
alertInfo,
activeAdmin1Id,
setActiveAdmin1Id,
admin1Alerts,
activeAdmin1Page,
setActiveAdmin1Page,
admin1AlertCount,
} = props;

const strings = useTranslation(i18n);
const [activeTab, setActiveTab] = useState<TabKeys>('alert');
const [activeAdmin1Id, setActiveAdmin1Id] = useState<string | undefined>(undefined);

const variables: CountryAdmin1QueryVariables = useMemo(() => ({
pk: activeCountryId,
Expand Down Expand Up @@ -150,7 +164,7 @@ function AlertsAside(props: Props) {
data: value,
onAdmin1Click: setActiveAdmin1Id,
}),
[],
[setActiveAdmin1Id],
);

return (
Expand All @@ -175,14 +189,6 @@ function AlertsAside(props: Props) {
{strings.alertBack}
</Button>
)}
footerActions={isDefined(activeCountryId) && isNotDefined(activeAlertId) && (
<Pager
activePage={activePage}
itemsCount={alertCount}
maxItemsPerPage={defaultMaxItemsPerPage}
onActivePageChange={setActivePage}
/>
)}
>
{isNotDefined(activeCountryId) && (
<List
Expand Down Expand Up @@ -214,17 +220,28 @@ function AlertsAside(props: Props) {
</TabList>
<TabPanel name="alert">
{isDefined(activeCountryId) && isNotDefined(activeAlertId) && (
<List
className={styles.countryList}
data={countryAlerts}
keySelector={stringIdSelector}
renderer={AlertListItem}
errored={alertsFetchError}
pending={alertsPending}
filtered={alertsFiltered}
rendererParams={alertRendererParams}
compact
/>
<Container
footerActions={(
<Pager
activePage={activePage}
itemsCount={totalAlertCount}
maxItemsPerPage={defaultMaxItemsPerPage}
onActivePageChange={setActivePage}
/>
)}
>
<List
className={styles.countryList}
data={countryAlerts}
keySelector={stringIdSelector}
renderer={AlertListItem}
errored={alertsFetchError}
pending={alertsPending}
filtered={alertsFiltered}
rendererParams={alertRendererParams}
compact
/>
</Container>
)}
{isDefined(activeAlertId) && isDefined(activeCountryId) && (
<AlertDetail
Expand All @@ -250,6 +267,39 @@ function AlertsAside(props: Props) {
</Tabs>
)}
</div>
{isDefined(activeAdmin1Id) && (
<Container
footerActions={(
<Pager
activePage={activeAdmin1Page}
itemsCount={admin1AlertCount}
maxItemsPerPage={defaultMaxItemsPerPage}
onActivePageChange={setActiveAdmin1Page}
/>
)}
>
<List
className={styles.countryList}
data={admin1Alerts}
keySelector={stringIdSelector}
renderer={AlertListItem}
errored={alertsFetchError}
pending={alertsPending}
filtered={alertsFiltered}
rendererParams={alertRendererParams}
compact
/>
</Container>
)}
{
isDefined(activeAlertId)
&& isDefined(activeCountryId)
&& isDefined(activeAdmin1Id) && (
<AlertDetail
data={alertInfo}
/>
)
}
</Container>
);
}
Expand Down
6 changes: 3 additions & 3 deletions src/views/Home/AlertsView/AlertsMap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ const DURATION_MAP_ZOOM = 1000;
const DEFAULT_MAP_PADDING = 50;

interface Props {
className?: string;
className: string;
countriesWithAlert?: CountryType[];
countryBbox: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
adminBbox: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
countryBbox?: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
adminBbox?: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
}

function AlertsMap(props: Props) {
Expand Down
87 changes: 63 additions & 24 deletions src/views/Home/AlertsView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
} from '@togglecorp/fujs';

import {
Admin1AlertListQuery,
Admin1AlertListQueryVariables,
Admin1ListQuery,
Admin1ListQueryVariables,
AlertInfoQuery,
Expand Down Expand Up @@ -153,6 +155,35 @@ query AlertInfo($alert: ID!) {
}
`;

const ADMIN1_ALERT_LIST = gql`
query Admin1AlertList(
$admin: ID!,
$pagination: OffsetPaginationInput
) {
public {
alerts(filters: {
admin1: $admin
}, pagination: $pagination) {
items {
id
info {
id
event
description
}
admin1s {
bbox
id
}
}
limit
offset
count
}
}
}
`;

export type AlertPointFeature = GeoJSON.Feature<GeoJSON.Point, AlertPointProperties>;
export type TabKeys = 'admin1' | 'alert';

Expand All @@ -174,6 +205,7 @@ function AlertsView(props: Props) {
const [activeCountryId, setActiveCountryId] = useState<string | undefined>(undefined);
const [activeAlertId, setActiveAlertId] = useState<string | undefined>(undefined);
const [activePage, setActivePage] = useState(1);
const [activeAdmin1Id, setActiveAdmin1Id] = useState<string | undefined>(undefined);

const {
data: countryResponse,
Expand Down Expand Up @@ -208,9 +240,21 @@ function AlertsView(props: Props) {
const {
data: countryAlertsResponse,
loading: countryAlertsLoading,
} = useQuery<CountryAlertsListQuery, CountryAlertsListQueryVariables>(COUNTRY_ALERTS_LIST, {
variables,
});
} = useQuery<CountryAlertsListQuery, CountryAlertsListQueryVariables>(
COUNTRY_ALERTS_LIST,
{
variables,
},
);

const {
data: admin1AlertsListResponse,
} = useQuery<Admin1AlertListQuery, Admin1AlertListQueryVariables>(
ADMIN1_ALERT_LIST,
{
variables: { admin: activeAdmin1Id },
},
);

const {
data: alertInfoResponse,
Expand All @@ -221,18 +265,6 @@ function AlertsView(props: Props) {
},
);

const admin1sWithActiveAlert = useMemo(() => {
if (isDefined(activeCountryId) && admin1Response?.public?.admin1s?.items) {
return admin1Response.public.admin1s.items.filter(
(admin1) => admin1.countryId === activeCountryId,
);
}
return [];
}, [
admin1Response,
activeCountryId,
]);

const setActiveCountryIdSafe = useCallback((countryId: string | number | undefined) => {
const countryIdSafe = countryId as string | undefined;
setActiveCountryId(countryIdSafe);
Expand All @@ -252,22 +284,26 @@ function AlertsView(props: Props) {
countriesWithAlert,
]);

const activeAdmin = useMemo(() => {
if (isDefined(activeAlertId) && admin1sWithActiveAlert) {
return admin1sWithActiveAlert.find((admin) => admin.id === activeAlertId);
const activeAdmin1 = useMemo(() => {
if (isDefined(activeAdmin1Id) && admin1AlertsListResponse?.public?.alerts?.items) {
return admin1AlertsListResponse?.public?.alerts?.items?.find(
(admin) => admin.id === activeAlertId,
);
}
return undefined;
}, [activeAlertId,
admin1sWithActiveAlert,
}, [
activeAdmin1Id,
admin1AlertsListResponse,
]);

const alertCount = countryAlertsResponse?.public.alerts.count ?? 0;

const setActiveAlertIdSafe = useCallback((alertId: string | number | undefined) => {
const alertIdSafe = alertId as string | undefined;
setActiveAlertId(alertIdSafe);
}, [setActiveAlertId]);

const totalAlertCount = countryAlertsResponse?.public.alerts.count ?? 0;
const admin1AlertCount = admin1AlertsListResponse?.public?.alerts?.count ?? 0;

return (
<Container
className={_cs(styles.alertMap, className)}
Expand All @@ -288,7 +324,6 @@ function AlertsView(props: Props) {
className={styles.alertsMap}
countriesWithAlert={countriesWithAlert}
countryBbox={activeCountry?.bbox}
adminBbox={activeAdmin?.bbox}
/>
<AlertsAside
className={styles.alertsAside}
Expand All @@ -302,9 +337,13 @@ function AlertsView(props: Props) {
countryAlerts={countryAlertsResponse?.public.alerts?.items}
activePage={activePage}
setActivePage={setActivePage}
alertCount={alertCount}
totalAlertCount={totalAlertCount}
activeAlertId={activeAlertId}
activeAdmin1Id={activeAdmin1Id}
setActiveAdmin1Id={setActiveAdmin1Id}
handleAlertClick={setActiveAlertIdSafe}
admin1AlertCount={admin1AlertCount}
admin1Alerts={admin1AlertsListResponse?.public?.alerts.items}
alertInfo={alertInfoResponse?.public?.alert}
/>
</Container>
Expand Down

0 comments on commit 758d444

Please sign in to comment.