Misc. optimizations

This commit is contained in:
jeffvli 2023-01-07 23:09:58 -08:00
parent 586f42867d
commit 0f66687843
4 changed files with 84 additions and 67 deletions

View file

@ -1,10 +1,9 @@
import { Box, Center, Divider, Group, Stack } from '@mantine/core';
import { Box, Center, Group, Stack } from '@mantine/core';
import type { FallbackProps } from 'react-error-boundary';
import { RiErrorWarningLine, RiHomeFill, RiArrowLeftSLine } from 'react-icons/ri';
import { useNavigate, useRouteError } from 'react-router';
import { RiErrorWarningLine } from 'react-icons/ri';
import { useRouteError } from 'react-router';
import styled from 'styled-components';
import { Button, Text } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes';
const Container = styled(Box)`
background: var(--main-bg);
@ -36,62 +35,3 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
</Container>
);
};
export const RouteErrorBoundary = () => {
const navigate = useNavigate();
const error = useRouteError() as any;
console.log('error', error);
const handleReload = () => {
navigate(0);
};
const handleReturn = () => {
navigate(-1);
};
const handleHome = () => {
navigate(AppRoute.HOME);
};
return (
<Container>
<Center sx={{ height: '100vh' }}>
<Stack sx={{ maxWidth: '50%' }}>
<Group>
<Button
px={10}
variant="subtle"
onClick={handleReturn}
>
<RiArrowLeftSLine size={20} />
</Button>
<RiErrorWarningLine
color="var(--danger-color)"
size={30}
/>
<Text size="lg">Something went wrong</Text>
</Group>
<Divider my={5} />
<Text size="sm">{error?.message}</Text>
<Group grow>
<Button
leftIcon={<RiHomeFill />}
sx={{ flex: 0.5 }}
variant="default"
onClick={handleHome}
>
Go home
</Button>
<Button
variant="filled"
onClick={handleReload}
>
Reload
</Button>
</Group>
</Stack>
</Center>
</Container>
);
};

View file

@ -0,0 +1,66 @@
import { Container, Center, Stack, Group, Button, Divider } from '@mantine/core';
import { RiArrowLeftSLine, RiErrorWarningLine, RiHomeFill } from 'react-icons/ri';
import { useNavigate, useRouteError } from 'react-router';
import { Text } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes';
const RouteErrorBoundary = () => {
const navigate = useNavigate();
const error = useRouteError() as any;
console.log('error', error);
const handleReload = () => {
navigate(0);
};
const handleReturn = () => {
navigate(-1);
};
const handleHome = () => {
navigate(AppRoute.HOME);
};
return (
<Container>
<Center sx={{ height: '100vh' }}>
<Stack sx={{ maxWidth: '50%' }}>
<Group>
<Button
px={10}
variant="subtle"
onClick={handleReturn}
>
<RiArrowLeftSLine size={20} />
</Button>
<RiErrorWarningLine
color="var(--danger-color)"
size={30}
/>
<Text size="lg">Something went wrong</Text>
</Group>
<Divider my={5} />
<Text size="sm">{error?.message}</Text>
<Group grow>
<Button
leftIcon={<RiHomeFill />}
sx={{ flex: 0.5 }}
variant="default"
onClick={handleHome}
>
Go home
</Button>
<Button
variant="filled"
onClick={handleReload}
>
Reload
</Button>
</Group>
</Stack>
</Center>
</Container>
);
};
export default RouteErrorBoundary;