diff --git a/package.json b/package.json
index b688b6d7..ced99d4d 100644
--- a/package.json
+++ b/package.json
@@ -1,86 +1,86 @@
{
- "name": "alert-hub",
- "version": "0.0.0",
- "type": "module",
- "private": true,
- "scripts": {
- "start": "vite",
- "build": "vite build",
- "generate": "graphql-codegen --config codegen.yml && eslint --fix generated/types.ts",
- "lint:js": "eslint src",
- "lint:css": "stylelint \"./src/**/*.css\"",
- "lint:unused": "unimported",
- "lint": "yarn lint:js && yarn lint:css && yarn lint:unused",
- "test": "vitest",
- "test:coverage": "vitest run --coverage",
- "typecheck": "tsc"
- },
- "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",
- "@sentry/react": "^7.81.1",
- "@togglecorp/fujs": "^2.1.1",
- "@togglecorp/re-map": "^0.2.0-beta-6",
- "@togglecorp/toggle-form": "^2.0.4",
- "graphql": "^16.8.1",
- "mapbox-gl": "^1.13.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "react-router-dom": "^6.22.3"
- },
- "devDependencies": {
- "@eslint/eslintrc": "^2.0.3",
- "@julr/vite-plugin-validate-env": "^1.0.1",
- "@types/mapbox-gl": "^1.13.0",
- "@types/node": "^20.1.3",
- "@types/react": "^18.0.28",
- "@types/react-dom": "^18.2.22",
- "@types/react-router-dom": "^5.3.3",
- "@typescript-eslint/eslint-plugin": "^5.59.5",
- "@typescript-eslint/parser": "^5.59.5",
- "@vitejs/plugin-react-swc": "^3.5.0",
- "autoprefixer": "^10.4.14",
- "cross-var": "^1.1.0",
- "dotenv-cli": "^7.2.1",
- "eslint": "^8.40.0",
- "eslint-config-airbnb": "^19.0.4",
- "eslint-import-resolver-typescript": "^3.5.5",
- "eslint-plugin-import": "^2.27.5",
- "eslint-plugin-import-exports-imports-resolver": "^1.0.1",
- "eslint-plugin-import-newlines": "^1.3.4",
- "eslint-plugin-jsx-a11y": "^6.7.1",
- "eslint-plugin-react": "^7.32.2",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-refresh": "^0.3.4",
- "eslint-plugin-simple-import-sort": "^10.0.0",
- "fast-glob": "^3.3.0",
- "happy-dom": "^9.18.3",
- "postcss": "^8.3.0",
- "postcss-nested": "^6.0.1",
- "postcss-normalize": "^10.0.1",
- "postcss-preset-env": "^8.3.2",
- "postinstall-postinstall": "^2.1.0",
- "rollup-plugin-visualizer": "^5.9.0",
- "stylelint": "^15.6.1",
- "stylelint-config-concentric": "^2.0.2",
- "stylelint-config-recommended": "^12.0.0",
- "stylelint-no-unused-selectors": "git+https://github.com/toggle-corp/stylelint-no-unused-selectors#e0831e1",
- "stylelint-value-no-unknown-custom-properties": "^4.0.0",
- "surge": "^0.23.1",
- "typescript": "^5.0.4",
- "unimported": "1.28.0",
- "vite": "^5.0.10",
- "vite-plugin-checker": "^0.6.2",
- "vite-plugin-compression2": "^0.11.0",
- "vite-plugin-radar": "^0.9.2",
- "vite-plugin-svgr": "^4.2.0",
- "vite-plugin-webfont-dl": "^3.9.1",
- "vite-tsconfig-paths": "^4.2.2",
- "vitest": "^1.1.0"
- }
+ "name": "alert-hub",
+ "version": "0.0.0",
+ "type": "module",
+ "private": true,
+ "scripts": {
+ "start": "vite",
+ "build": "vite build",
+ "generate": "graphql-codegen --config codegen.yml && eslint --fix generated/types.ts",
+ "lint:js": "eslint src",
+ "lint:css": "stylelint \"./src/**/*.css\"",
+ "lint:unused": "unimported",
+ "lint": "yarn lint:js && yarn lint:css && yarn lint:unused",
+ "test": "vitest",
+ "test:coverage": "vitest run --coverage",
+ "typecheck": "tsc"
+ },
+ "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",
+ "@sentry/react": "^7.81.1",
+ "@togglecorp/fujs": "^2.1.1",
+ "@togglecorp/re-map": "^0.2.0-beta-6",
+ "@togglecorp/toggle-form": "^2.0.4",
+ "graphql": "^16.8.1",
+ "mapbox-gl": "^1.13.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.22.3"
+ },
+ "devDependencies": {
+ "@eslint/eslintrc": "^2.0.3",
+ "@julr/vite-plugin-validate-env": "^1.0.1",
+ "@types/mapbox-gl": "^1.13.0",
+ "@types/node": "^20.1.3",
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.2.22",
+ "@types/react-router-dom": "^5.3.3",
+ "@typescript-eslint/eslint-plugin": "^5.59.5",
+ "@typescript-eslint/parser": "^5.59.5",
+ "@vitejs/plugin-react-swc": "^3.5.0",
+ "autoprefixer": "^10.4.14",
+ "cross-var": "^1.1.0",
+ "dotenv-cli": "^7.2.1",
+ "eslint": "^8.40.0",
+ "eslint-config-airbnb": "^19.0.4",
+ "eslint-import-resolver-typescript": "^3.5.5",
+ "eslint-plugin-import": "^2.27.5",
+ "eslint-plugin-import-exports-imports-resolver": "^1.0.1",
+ "eslint-plugin-import-newlines": "^1.3.4",
+ "eslint-plugin-jsx-a11y": "^6.7.1",
+ "eslint-plugin-react": "^7.32.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.3.4",
+ "eslint-plugin-simple-import-sort": "^10.0.0",
+ "fast-glob": "^3.3.0",
+ "happy-dom": "^9.18.3",
+ "postcss": "^8.3.0",
+ "postcss-nested": "^6.0.1",
+ "postcss-normalize": "^10.0.1",
+ "postcss-preset-env": "^8.3.2",
+ "postinstall-postinstall": "^2.1.0",
+ "rollup-plugin-visualizer": "^5.9.0",
+ "stylelint": "^15.6.1",
+ "stylelint-config-concentric": "^2.0.2",
+ "stylelint-config-recommended": "^12.0.0",
+ "stylelint-no-unused-selectors": "git+https://github.com/toggle-corp/stylelint-no-unused-selectors#e0831e1",
+ "stylelint-value-no-unknown-custom-properties": "^4.0.0",
+ "surge": "^0.23.1",
+ "typescript": "^5.0.4",
+ "unimported": "1.28.0",
+ "vite": "^5.0.10",
+ "vite-plugin-checker": "^0.6.2",
+ "vite-plugin-compression2": "^0.11.0",
+ "vite-plugin-radar": "^0.9.2",
+ "vite-plugin-svgr": "^4.2.0",
+ "vite-plugin-webfont-dl": "^3.9.1",
+ "vite-tsconfig-paths": "^4.2.2",
+ "vitest": "^1.1.0"
+ }
}
diff --git a/src/utils/domain/CountryLink/index.tsx b/src/utils/domain/CountryLink/index.tsx
deleted file mode 100644
index a1b6dac6..00000000
--- a/src/utils/domain/CountryLink/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export interface Props {
- name: string;
-}
-
-function CountryLink(props: Props) {
- const { name } = props;
-
- // Add TODO: Add country Link
- return (
-
- {name}
-
- );
-}
-
-export default CountryLink;
diff --git a/src/utils/domain/RegionLink/index.tsx b/src/utils/domain/RegionLink/index.tsx
deleted file mode 100644
index dd9fc380..00000000
--- a/src/utils/domain/RegionLink/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export interface Props {
- name: string;
-}
-
-function RegionLink(props: Props) {
- const { name } = props;
-
- // Add TODO: Add region link
- return (
-
- {name}
-
- );
-}
-
-export default RegionLink;
diff --git a/src/utils/domain/tableHelpers.ts b/src/utils/domain/tableHelpers.ts
index 11dc6c8e..d5f9f7d5 100644
--- a/src/utils/domain/tableHelpers.ts
+++ b/src/utils/domain/tableHelpers.ts
@@ -12,8 +12,15 @@ import {
TableActionsProps,
} from '@ifrc-go/ui';
-import type { Props as CountryLinkProps } from './CountryLink';
-import type { Props as RegionLinkProps } from './RegionLink';
+// FIXME: remove after completion of table
+type CountryLinkProps = {
+ name: string;
+};
+
+// FIXME: remove after completion of table
+type RegionLinkProps = {
+ name: string;
+};
type Options = {
sortable?: boolean,
diff --git a/src/views/AlertTable/i18n.json b/src/views/AlertTable/i18n.json
index 3b361e6a..30574946 100644
--- a/src/views/AlertTable/i18n.json
+++ b/src/views/AlertTable/i18n.json
@@ -2,12 +2,12 @@
"namespace": "allOngoingAlerts",
"strings": {
"allOngoingAlertTitle":"All Alerts ",
- "alertTableEvent":"Event" ,
- "alertTableCategory":"Event Categories",
- "alertTableRegion":"Region",
- "alertTablecounteries":"Country",
- "alertTableviewDetailsTitle":"View Details",
- "alertTableAdmins":"Admin1s",
- "alertTableSent":"Sent"
+ "alertTableEventTitle":"Event" ,
+ "alertTableCategoryTitle":"Event Categories",
+ "alertTableRegionTitle":"Region",
+ "alertTableCountryTitle":"Country",
+ "alertTableViewDetailsTitle":"View Details",
+ "alertTableAdminsTitle":"Admin1s",
+ "alertTableSentLabel":"Sent"
}
-}
\ No newline at end of file
+}
diff --git a/src/views/AlertTable/index.tsx b/src/views/AlertTable/index.tsx
index bae95e92..6713d060 100644
--- a/src/views/AlertTable/index.tsx
+++ b/src/views/AlertTable/index.tsx
@@ -15,6 +15,7 @@ import {
createStringColumn,
} from '@ifrc-go/ui/utils';
import { isNotDefined } from '@togglecorp/fujs';
+import { removeNull } from '@togglecorp/toggle-form';
import {
AlertInformationsQuery,
@@ -24,10 +25,6 @@ import useFilterState from '#hooks/useFilterState';
import { createLinkColumn } from '#utils/domain/tableHelpers';
import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-type AlertType = NonNullable['alerts']>['items']>[number];
-const alertKeySelector = (item: AlertType) => item.id;
const ALERT_INFORMATIONS = gql`
query AlertInformations($pagination: OffsetPaginationInput) {
@@ -35,6 +32,7 @@ const ALERT_INFORMATIONS = gql`
alerts(pagination: $pagination) {
limit
offset
+ count
items {
id
country {
@@ -50,9 +48,10 @@ const ALERT_INFORMATIONS = gql`
}
}
sent
- url
- infos {
+ info {
+ id
event
+ alertId
category
}
}
@@ -61,8 +60,14 @@ const ALERT_INFORMATIONS = gql`
}
`;
+type AlertType = NonNullable['alerts']>['items']>[number];
+
+const alertKeySelector = (item: AlertType) => item.id;
+const PAGE_SIZE = 10;
+
function AlertTable() {
const strings = useTranslation(i18n);
+
const {
sortState,
page,
@@ -73,120 +78,117 @@ function AlertTable() {
event?: string,
eventCategory?: string
}>({
- pageSize: 7,
+ pageSize: PAGE_SIZE,
filter: {},
});
+ const variables = useMemo(() => ({
+ pagination: {
+ offset: page,
+ limit,
+ },
+ }), [
+ page,
+ limit,
+ ]);
+
+ const {
+ loading,
+ previousData,
+ data: alertInfosResponse = previousData,
+ } = useQuery(
+ ALERT_INFORMATIONS,
+ {
+ skip: isNotDefined(variables),
+ variables,
+ },
+ );
+
+ const data = removeNull(alertInfosResponse?.public.alerts);
+
const columns = useMemo(
() => ([
createStringColumn(
'event',
- strings.alertTableEvent,
- (item) => (item.infos.map((info: { event: string; }) => info.event).join(', ')),
+ strings.alertTableEventTitle,
+ (item) => item.info?.event,
{ sortable: true },
),
createStringColumn(
'category',
- strings.alertTableCategory,
- (item) => (item.infos.map((info: { category: string; }) => info.category).join(',')),
+ strings.alertTableCategoryTitle,
+ (item) => item.info?.category,
),
createStringColumn(
'region',
- strings.alertTableRegion,
+ strings.alertTableRegionTitle,
(item) => (item.country.region.name),
),
createStringColumn(
'countries_details',
- strings.alertTablecounteries,
+ strings.alertTableCountryTitle,
(item) => (item.country.name),
{ sortable: true },
),
createStringColumn(
'admin',
- strings.alertTableAdmins,
- (item) => (item.country.admin1s.map((admin: { name: string; }) => admin.name).join(', ')),
+ strings.alertTableAdminsTitle,
+ // NOTE: adim1s may be multiple
+ // so for now we are using first element
+ (item) => item.country.admin1s?.[0]?.name,
),
createDateColumn(
'sent',
- strings.alertTableSent,
+ strings.alertTableSentLabel,
(item) => (item.sent),
),
createLinkColumn(
'view_details',
- strings.alertTableviewDetailsTitle,
+ strings.alertTableViewDetailsTitle,
() => 'View Details',
(item) => ({
- to: 'detailsLayout',
+ to: '/',
urlParams: { detailId: item.id },
}),
),
]),
[
- strings.alertTableEvent,
- strings.alertTableCategory,
- strings.alertTableRegion,
- strings.alertTablecounteries,
- strings.alertTableAdmins,
- strings.alertTableSent,
- strings.alertTableviewDetailsTitle,
+ strings.alertTableEventTitle,
+ strings.alertTableCategoryTitle,
+ strings.alertTableRegionTitle,
+ strings.alertTableCountryTitle,
+ strings.alertTableAdminsTitle,
+ strings.alertTableSentLabel,
+ strings.alertTableViewDetailsTitle,
],
);
- const variables = useMemo(() => ({
- pagination: {
- offset: page,
- limit,
- },
- }), [
- page,
- limit,
- ]);
-
- const {
- loading,
- data: alertInfosResponse,
- } = useQuery(
- ALERT_INFORMATIONS,
- {
- skip: isNotDefined(variables),
- variables,
- },
- );
-
- const itemsCount = alertInfosResponse?.public.alerts.count || 0;
- const items = alertInfosResponse?.public.alerts.items;
-
return (
-
+
+ )}
+ >
+
+
+
+
);
}
export default AlertTable;
diff --git a/src/views/AlertTable/styles.module.css b/src/views/AlertTable/styles.module.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index a76c9fea..b9ef45d1 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -1,3 +1,10 @@
+import { useState } from 'react';
+import {
+ Tab,
+ TabList,
+ TabPanel,
+ Tabs,
+} from '@ifrc-go/ui';
import { useTranslation } from '@ifrc-go/ui/hooks';
import Page from '#components/Page';
@@ -8,26 +15,40 @@ import AlertTable from '../AlertTable';
import i18n from './i18n.json';
import styles from './styles.module.css';
+export type TabKeys = 'map' | 'table';
// eslint-disable-next-line import/prefer-default-export
export function Component() {
const strings = useTranslation(i18n);
+ const [activeTab, setActiveTab] = useState('map');
return (
- <>
-
+
-
-
-
-
+
+ Map
+ Table
+
+
+
+
+
+
+
+
+
);
}