From 8c65e165972a2a52aafc43db76af097dae453d1d Mon Sep 17 00:00:00 2001 From: puranban Date: Thu, 11 Apr 2024 08:50:31 +0545 Subject: [PATCH] Add tabs and refactor alert table component --- package.json | 168 ++++++++++++------------- src/utils/domain/CountryLink/index.tsx | 20 --- src/utils/domain/RegionLink/index.tsx | 20 --- src/utils/domain/tableHelpers.ts | 11 +- src/views/AlertTable/i18n.json | 16 +-- src/views/AlertTable/index.tsx | 156 +++++++++++------------ src/views/AlertTable/styles.module.css | 0 src/views/Home/index.tsx | 49 +++++--- 8 files changed, 215 insertions(+), 225 deletions(-) delete mode 100644 src/utils/domain/CountryLink/index.tsx delete mode 100644 src/utils/domain/RegionLink/index.tsx delete mode 100644 src/views/AlertTable/styles.module.css 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 + + + + + + + + + ); }