Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

feat(console): error handling in dashboard (#1090)

Browse source
This commit is contained in:
Wang Sijie 2022-06-13 13:50:48 +08:00 committed by GitHub
parent 147775a8f4
commit 6d3857ef35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/console/src/pages/Dashboard/index.tsx
View file

@ -12,8 +12,10 @@ import {
} from 'recharts';
import useSWR from 'swr';
import AppError from '@/components/AppError';
import Card from '@/components/Card';
import TextInput from '@/components/TextInput';
import { RequestError } from '@/hooks/use-api';
import Block from './components/Block';
import Skeleton from './components/Skeleton';
@ -21,15 +23,21 @@ import * as styles from './index.module.scss';
import { ActiveUsersResponse, NewUsersResponse, TotalUsersResponse } from './types';
const Dashboard = () => {
const [date, setDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
const { data: totalData } = useSWR<TotalUsersResponse>('/api/dashboard/users/total');
const { data: newData } = useSWR<NewUsersResponse>('/api/dashboard/users/new');
const { data: activeData } = useSWR<ActiveUsersResponse>(
`/api/dashboard/users/active?date=${date}`
const { data: totalData, error: totalError } = useSWR<TotalUsersResponse, RequestError>(
'/api/dashboard/users/total'
);
const { data: newData, error: newError } = useSWR<NewUsersResponse, RequestError>(
'/api/dashboard/users/new'
);
const { data: activeData, error: activeError } = useSWR<ActiveUsersResponse, RequestError>(
'/api/dashboard/users/active'
);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [date, setDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
const isLoading = !totalData || !newData || !activeData;
// Pick an error as the page's error
const error = totalError ?? newError ?? activeError;
const isLoading = (!totalData || !newData || !activeData) && !error;
const handleDateChange: ChangeEventHandler<HTMLInputElement> = (event) => {
setDate(event.target.value);
@ -42,7 +50,8 @@ const Dashboard = () => {
<div className={styles.subtitle}>{t('dashboard.description')}</div>
</div>
{isLoading && <Skeleton />}
{!isLoading && (
{error && <AppError errorMessage={error.body?.message} />}
{!isLoading && totalData && newData && activeData && (
<>
<div className={styles.blocks}>
<Block