Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add global filter #31

Merged
merged 4 commits into from
Apr 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { createContext } from 'react';

import {
AlertInfoCertaintyEnum,
AlertInfoSeverityEnum,
AlertInfoUrgencyEnum,
} from '#generated/types/graphql';

type Id = string;
// type SetStateFn<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
type SetStateFn<T> = (newValue: T | undefined) => void;
Expand All @@ -24,6 +30,14 @@ export interface AlertContextProps {

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

selectedUrgencyTypes: AlertInfoUrgencyEnum[] | undefined;
selectedSeverityTypes: AlertInfoSeverityEnum[] | undefined;
selectedCertaintyTypes: AlertInfoCertaintyEnum[] | undefined;

setSelectedUrgencyTypes: SetStateFn<AlertInfoUrgencyEnum[]>;
setSelectedSeverityTypes: SetStateFn<AlertInfoSeverityEnum[]>;
setSelectedCertaintyTypes: SetStateFn<AlertInfoCertaintyEnum[]>;
}

const AlertContext = createContext<AlertContextProps>({
Expand All @@ -34,6 +48,9 @@ const AlertContext = createContext<AlertContextProps>({
activeAdmin1Id: undefined,
activeGoAdmin1Id: undefined,
activeAlertId: undefined,
selectedUrgencyTypes: undefined,
selectedSeverityTypes: undefined,
selectedCertaintyTypes: undefined,
setBbox: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setBbox called without provider');
Expand Down Expand Up @@ -62,6 +79,18 @@ const AlertContext = createContext<AlertContextProps>({
// eslint-disable-next-line no-console
console.warn('AlertContext::setActiveCountryName called without provider');
},
setSelectedUrgencyTypes: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setSelectedUrgencyTypes called without provider');
},
setSelectedSeverityTypes: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setSelectedSeverityTypes called without provider');
},
setSelectedCertaintyTypes: () => {
// eslint-disable-next-line no-console
console.warn('AlertContext::setSelectedCertaintyTypes called without provider');
},
});

export default AlertContext;
29 changes: 25 additions & 4 deletions src/views/Home/AlertsTable/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
ComponentType,
HTMLProps,
useContext,
useMemo,
} from 'react';
import {
Expand All @@ -19,22 +20,30 @@ import {
createListDisplayColumn,
createStringColumn,
} from '@ifrc-go/ui/utils';
import { isNotDefined } from '@togglecorp/fujs';
import {
isDefined,
isNotDefined,
} from '@togglecorp/fujs';

import {
AlertFilter,
AlertInformationsQuery,
AlertInformationsQueryVariables,
OffsetPaginationInput,
} from '#generated/types/graphql';
import useFilterState from '#hooks/useFilterState';
import { createLinkColumn } from '#utils/domain/tableHelpers';

import AlertContext from '../AlertContext';
import useAlertFilters from '../useAlertFilters';

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

const ALERT_INFORMATIONS = gql`
query AlertInformations($pagination: OffsetPaginationInput) {
query AlertInformations($pagination: OffsetPaginationInput, $filters: AlertFilter) {
public {
alerts(pagination: $pagination) {
alerts(pagination: $pagination, filters: $filters) {
limit
offset
count
Expand Down Expand Up @@ -74,6 +83,8 @@ const PAGE_SIZE = 20;

function AlertsTable() {
const strings = useTranslation(i18n);
const alertFilters = useAlertFilters();
const { activeCountryId, activeAdmin1Id } = useContext(AlertContext);

const {
sortState,
Expand All @@ -89,14 +100,24 @@ function AlertsTable() {
filter: {},
});

const variables = useMemo(() => ({
const variables = useMemo<{ filters: AlertFilter, pagination: OffsetPaginationInput }>(() => ({
pagination: {
offset: page,
limit,
},
filters: {
...alertFilters,
country: isDefined(activeCountryId)
? { pk: activeCountryId }
: undefined,
admin1: activeAdmin1Id,
},
}), [
page,
limit,
alertFilters,
activeCountryId,
activeAdmin1Id,
]);

const {
Expand Down
4 changes: 2 additions & 2 deletions src/views/Home/AlertsTable/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@

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

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

.admins {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
} from '#generated/types/graphql';
import { stringIdSelector } from '#utils/selectors';

import AlertContext from '../../AlertContext';
import AlertContext from '../../../AlertContext';
import AlertListItem from '../AlertListItem';

const ADMIN1_DETAIL = gql`
Expand Down
16 changes: 10 additions & 6 deletions src/views/Home/AlertsView/AlertsAside/CountryAdmin1List/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,22 @@ import {
CountryAdmin1QueryVariables,
} from '#generated/types/graphql';
import { stringIdSelector } from '#utils/selectors';
import useAlertFilters from '#views/Home/useAlertFilters';

import AlertContext from '../../AlertContext';
import AlertContext from '../../../AlertContext';
import Admin1ListItem from '../Admin1ListItem';

type CountryAdmin1 = NonNullable<NonNullable<CountryAdmin1Query['public']>['country']>['admin1s'][number];

const COUNTRY_ADMIN1 = gql`
query CountryAdmin1($countryId: ID!) {
query CountryAdmin1($countryId: ID!, $alertFilters: AlertFilter) {
public {
id
country(pk: $countryId) {
id
name
alertCount
ifrcGoId
admin1s(alertFilters: {}) {
admin1s(alertFilters: $alertFilters) {
id
name
ifrcGoId
Expand All @@ -51,10 +51,14 @@ interface Props {
function CountryAdmin1List(props: Props) {
const { countryId } = props;
const { setActiveAdmin1Id } = useContext(AlertContext);
const alertFilters = useAlertFilters();

const variables = useMemo<CountryAdmin1QueryVariables>(
() => ({ countryId }),
[countryId],
() => ({
countryId,
alertFilters,
}),
[countryId, alertFilters],
);

const {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
} from '#generated/types/graphql';
import { stringIdSelector } from '#utils/selectors';

import AlertContext from '../../AlertContext';
import AlertContext from '../../../AlertContext';
import AlertListItem from '../AlertListItem';

const COUNTRY_ALERTS = gql`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
CountryDetailQueryVariables,
} from '#generated/types/graphql';

import AlertContext from '../../AlertContext';
import AlertContext from '../../../AlertContext';
import Admin1Alerts from '../Admin1Alerts';
import AlertDetail from '../AlertDetail';
import CountryAdmin1List from '../CountryAdmin1List';
Expand Down
2 changes: 1 addition & 1 deletion src/views/Home/AlertsView/AlertsAside/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
import { CountryListQuery } from '#generated/types/graphql';
import { stringIdSelector } from '#utils/selectors';

import AlertContext from '../AlertContext';
import AlertContext from '../../AlertContext';
import CountryDetail from './CountryDetail';
import CountryListItem from './CountryListItem';

Expand Down
2 changes: 1 addition & 1 deletion src/views/Home/AlertsView/AlertsMap/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
COLOR_PRIMARY_RED,
} from '#utils/constants';

import AlertContext from '../AlertContext';
import AlertContext from '../../AlertContext';

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

Expand Down
2 changes: 1 addition & 1 deletion src/views/Home/AlertsView/AlertsMap/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

.map-container {
flex-grow: 1;
height: 40rem;
height: 45rem;
}
}

91 changes: 17 additions & 74 deletions src/views/Home/AlertsView/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
import {
useCallback,
useMemo,
useState,
} from 'react';
import { useMemo } from 'react';
import { Link } from 'react-router-dom';
import {
gql,
Expand All @@ -13,26 +9,25 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
import {
_cs,
isDefined,
isNotDefined,
} from '@togglecorp/fujs';

import {
CountryListQuery,
CountryListQueryVariables,
} from '#generated/types/graphql';

import AlertContext, { AlertContextProps } from './AlertContext';
import useAlertFilters from '../useAlertFilters';
import AlertsAside from './AlertsAside';
import AlertsMap from './AlertsMap';

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

// NOTE: alertFilters is related with filteredAlertCount
const COUNTRIES_LIST = gql`
query CountryList {
const COUNTRY_LIST = gql`
query CountryList($alertFilters: AlertFilter) {
public {
allCountries(alertFilters: {}) {
allCountries(alertFilters: $alertFilters) {
name
id
iso3
Expand All @@ -58,72 +53,21 @@ function AlertsView(props: Props) {
const { className } = props;

const strings = useTranslation(i18n);

const [activeCountryId, setActiveCountryId] = useState<string | undefined>(undefined);
const [activeGoCountryId, setActiveGoCountryId] = useState<string | undefined>(undefined);
const [activeAlertId, setActiveAlertId] = useState<string | undefined>(undefined);
const [activeAdmin1Id, setActiveAdmin1Id] = useState<string | undefined>(undefined);
const [activeGoAdmin1Id, setActiveGoAdmin1Id] = useState<string | undefined>(undefined);
const alertFilters = useAlertFilters();

const {
data: countryListResponse,
loading: countryListLoading,
error: countryListError,
} = useQuery<CountryListQuery, CountryListQueryVariables>(
COUNTRIES_LIST,
COUNTRY_LIST,
{ variables: { alertFilters } },
);

const countriesWithAlert = useMemo(() => countryListResponse?.public.allCountries.filter(
(country) => (country?.filteredAlertCount ?? 0) > 0,
), [countryListResponse?.public.allCountries]);

const [bbox, setBbox] = useState<unknown | undefined>();
const [activeCountryName, setActiveCountryName] = useState<string | undefined>();

const setActiveCountryIdSafe = useCallback(
(countryId: string | undefined) => {
setActiveCountryId(countryId);
setActiveCountryName(undefined);
setActiveAlertId(undefined);
setActiveAdmin1Id(undefined);
setActiveGoAdmin1Id(undefined);
setActiveGoCountryId(undefined);
if (isNotDefined(countryId)) {
setBbox(undefined);
}
},
[],
);

const alertContextValue = useMemo<AlertContextProps>(
() => ({
bbox,
setBbox,
activeAlertId,
activeCountryId,
activeCountryName,
activeAdmin1Id,
activeGoAdmin1Id,
activeGoCountryId,
setActiveAlertId,
setActiveGoCountryId,
setActiveGoAdmin1Id,
setActiveCountryId: setActiveCountryIdSafe,
setActiveAdmin1Id,
setActiveCountryName,
}),
[
bbox,
activeCountryName,
activeAlertId,
activeGoCountryId,
activeGoAdmin1Id,
activeAdmin1Id,
activeCountryId,
setActiveCountryIdSafe,
],
);

return (
<Container
className={_cs(styles.alertMap, className)}
Expand All @@ -139,22 +83,21 @@ function AlertsView(props: Props) {
{strings.mapViewAllSources}
</Link>
)}
overlayPending
pending={countryListLoading}
errored={isDefined(countryListError)}
errorMessage={countryListError?.message}
contentViewType="grid"
numPreferredGridContentColumns={3}
>
<AlertContext.Provider value={alertContextValue}>
<AlertsMap
className={styles.alertsMap}
countriesWithAlert={countriesWithAlert}
/>
<AlertsAside
className={styles.alertsAside}
countriesWithAlert={countriesWithAlert}
/>
</AlertContext.Provider>
<AlertsMap
className={styles.alertsMap}
countriesWithAlert={countriesWithAlert}
/>
<AlertsAside
className={styles.alertsAside}
countriesWithAlert={countriesWithAlert}
/>
</Container>
);
}
Expand Down
Loading