Skip to content

Commit

Permalink
Refactor alerts view
Browse files Browse the repository at this point in the history
- Add separate components for each step of alert list
- Update GO UI version
- Update map color shading to reflect number of alerts
- Add column sizes in table view
- Improve alert details for map sidebar
  • Loading branch information
frozenhelium committed Apr 22, 2024
1 parent 758d444 commit 7dac84e
Show file tree
Hide file tree
Showing 31 changed files with 1,091 additions and 830 deletions.
13 changes: 10 additions & 3 deletions .unimportedrc.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
{
"entry": ["./src/index.tsx"],
"ignorePatterns": ["**/node_modules/**", "build/**"],
"ignorePatterns": ["**/node_modules/**", "build/**", "**/generated/**"],
"ignoreUnimported": ["**/*.d.ts", "**/*.test.*", "**/generated/**"],
"ignoreUnused": [
"@apollo/client",
"@graphql-codegen/introspection",
"@graphql-codegen/typescript-operations",
"@togglecorp/re-map",
"patch-package",
"@sentry/react"
],
"ignoreUnresolved": ["@graphql-typed-document-node/core"],
"ignoreUnresolved": [
[
"@graphql-typed-document-node/core",
[
"generated/types/graphql.ts"
]
]
],
"extensions": [".ts", ".js", ".tsx", ".jsx"],
"aliases": {
"#utils/*": ["./src/utils/*"],
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
"@graphql-codegen/introspection": "^4.0.3",
"@graphql-codegen/typescript-operations": "^4.2.0",
"@ifrc-go/icons": "^1.3.3",
"@ifrc-go/ui": "^1.0.0",
"@ifrc-go/ui": "^1.1.0",
"@mapbox/mapbox-gl-draw": "^1.4.3",
"@sentry/react": "^7.81.1",
"@togglecorp/fujs": "^2.1.1",
"@togglecorp/re-map": "^0.2.0-beta-6",
"@turf/bbox": "^6.5.0",
"@turf/buffer": "^6.5.0",
"graphql": "^16.8.1",
"mapbox-gl": "^1.13.0",
"patch-package": "^8.0.0",
Expand Down
17 changes: 0 additions & 17 deletions patches/@turf+buffer+6.5.0.patch

This file was deleted.

1 change: 1 addition & 0 deletions src/views/Home/AlertsTable/i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"alertTableRegionTitle":"Region",
"alertTableCountryTitle":"Country",
"alertTableViewDetailsTitle":"View Details",
"alertTableActionsTitle":"Actions",
"alertTableAdminsTitle":"Admin1s",
"alertTableSentLabel":"Sent"
}
Expand Down
47 changes: 36 additions & 11 deletions src/views/Home/AlertsTable/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { useMemo } from 'react';
import {
ComponentType,
HTMLProps,
useMemo,
} from 'react';
import {
gql,
useQuery,
Expand All @@ -12,6 +16,7 @@ import { SortContext } from '@ifrc-go/ui/contexts';
import { useTranslation } from '@ifrc-go/ui/hooks';
import {
createDateColumn,
createListDisplayColumn,
createStringColumn,
} from '@ifrc-go/ui/utils';
import { isNotDefined } from '@togglecorp/fujs';
Expand All @@ -24,6 +29,7 @@ import useFilterState from '#hooks/useFilterState';
import { createLinkColumn } from '#utils/domain/tableHelpers';

import i18n from './i18n.json';
import styles from './styles.module.css';

const ALERT_INFORMATIONS = gql`
query AlertInformations($pagination: OffsetPaginationInput) {
Expand Down Expand Up @@ -60,9 +66,11 @@ const ALERT_INFORMATIONS = gql`
`;

type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
type Country = AlertType['country'];
type Admin1 = Country['admin1s'][number];

const alertKeySelector = (item: AlertType) => item.id;
const PAGE_SIZE = 10;
const PAGE_SIZE = 20;

function AlertsTable() {
const strings = useTranslation(i18n);
Expand Down Expand Up @@ -111,44 +119,59 @@ function AlertsTable() {
'event',
strings.alertTableEventTitle,
(item) => item.info?.event,
{ sortable: true },
{
sortable: true,
columnClassName: styles.event,
},
),
createStringColumn<AlertType, string>(
'category',
strings.alertTableCategoryTitle,
(item) => item.info?.category,
{ columnClassName: styles.category },
),
createStringColumn<AlertType, string>(
'region',
strings.alertTableRegionTitle,
(item) => (item.country.region.name),
{ columnClassName: styles.region },

),
createStringColumn<AlertType, string>(
'countries_details',
'country',
strings.alertTableCountryTitle,
(item) => (item.country.name),
{ sortable: true },
{
sortable: true,
columnClassName: styles.country,
},
),

createStringColumn<AlertType, string>(
'admin',
createListDisplayColumn<AlertType, string, Admin1, HTMLProps<HTMLSpanElement>>(
'admin1s',
strings.alertTableAdminsTitle,
(item) => item.country.admin1s?.map((admin) => admin?.name)?.join(', '),
(item) => ({
list: item.country.admin1s,
keySelector: ({ id }) => id,
renderer: 'span' as unknown as ComponentType<HTMLProps<HTMLSpanElement>>,
rendererParams: ({ name }) => ({ children: name }),
}),
{ columnClassName: styles.admins },
),
createDateColumn<AlertType, string>(
'sent',
strings.alertTableSentLabel,
(item) => (item.sent),
{ columnClassName: styles.sent },
),
createLinkColumn<AlertType, string>(
'view_details',
strings.alertTableViewDetailsTitle,
'actions',
strings.alertTableActionsTitle,
() => strings.alertTableViewDetailsTitle,
(item) => ({
to: '/',
urlParams: { detailId: item.id },
}),
{ columnClassName: styles.actions },
),
]),
[
Expand All @@ -158,12 +181,14 @@ function AlertsTable() {
strings.alertTableCountryTitle,
strings.alertTableAdminsTitle,
strings.alertTableSentLabel,
strings.alertTableActionsTitle,
strings.alertTableViewDetailsTitle,
],
);

return (
<Container
className={styles.alertsTable}
heading={strings.allOngoingAlertTitle}
withHeaderBorder
withGridViewInFilter
Expand Down
31 changes: 31 additions & 0 deletions src/views/Home/AlertsTable/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.alerts-table {
.event {
width: 0%;
min-width: 8rem;
}

.category {
width: 0%;
min-width: 5rem;
}

.region {
width: 0%;
min-width: 5rem;
}

.country {
width: 0%;
min-width: 6rem;
}

.admins {
min-width: 14rem;
}

.actions,
.sent {
width: 7%;
min-width: 7rem;
}
}
67 changes: 67 additions & 0 deletions src/views/Home/AlertsView/AlertContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { createContext } from 'react';

type Id = string;
// type SetStateFn<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
type SetStateFn<T> = (newValue: T | undefined) => void;

export interface AlertContextProps {
bbox: unknown;
setBbox: SetStateFn<unknown>;
activeCountryName: string | undefined;

activeCountryId: Id | undefined;
activeAdmin1Id: Id | undefined;
activeAlertId: Id | undefined;

activeGoCountryId: Id | undefined;
activeGoAdmin1Id: Id | undefined;

setActiveCountryId: SetStateFn<Id>;
setActiveAdmin1Id: SetStateFn<Id>;

setActiveGoCountryId: SetStateFn<Id>;
setActiveGoAdmin1Id: SetStateFn<Id>;

setActiveAlertId: SetStateFn<Id>;
setActiveCountryName: SetStateFn<string>;
}

const AlertContext = createContext<AlertContextProps>({
bbox: undefined,
activeCountryId: undefined,
activeGoCountryId: undefined,
activeCountryName: undefined,
activeAdmin1Id: undefined,
activeGoAdmin1Id: undefined,
activeAlertId: undefined,
setBbox: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setBbox called without provider');
},
setActiveAdmin1Id: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveAlertId called without provider');
},
setActiveGoAdmin1Id: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveGoAlertId called without provider');
},
setActiveGoCountryId: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveGoCountryId called without provider');
},
setActiveCountryId: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveCountryId called without provider');
},
setActiveAlertId: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveAlertId called without provider');
},
setActiveCountryName: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveCountryName called without provider');
},
});

export default AlertContext;
Loading

0 comments on commit 7dac84e

Please sign in to comment.