sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-17 08:35:47 +07:00
Code Issues Releases Wiki Activity

feat: new not found component (#170)

Browse Source 
* refactor: updated not found component

* chore: removed react-router

* refactored: applied feedbacks

* fix: removed doc folder

* refactor: rollback yarn.lock
This commit is contained in:
Priscila Oliveira
2019-10-12 13:23:14 +02:00
committed by Juan Picado @jotadeveloper
parent 7529c02e58
commit fdbdb6303b
10 changed files with 72 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/NotFound/NotFound.tsx
View File

@@ -1,53 +1,47 @@
import ListItem from '@material-ui/core/ListItem';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import withWidth, { isWidthUp, WithWidthProps } from '@material-ui/core/withWidth';
import styled from 'react-emotion';
import React, { useCallback } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import Button from '../../muiComponents/Button';
import colors from '../../utils/styles/colors';
import { spacings } from '../../utils/styles/spacings';
import PackageImg from './img/package.svg';
import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles';
export const NOT_FOUND_TEXT = `Sorry, we couldn't find it...`;
export const LABEL_NOT_FOUND = `The page you're looking for doesn't exist.`;
export const LABEL_FOOTER_NOT_FOUND = 'Perhaps these links will help find what you are looking for:';
export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
export const GO_TO_HOME_PAGE = 'Go to the home page';
export type NotFoundProps = RouteComponentProps & WithWidthProps;
const EmptyPackage = styled('img')({
width: '150px',
margin: '0 auto',
});
const HOME_LABEL = 'Home';
const StyledHeading = styled(Typography)({
color: colors.primary,
marginBottom: spacings.sm,
});
const renderSubTitle = (): JSX.Element => (
<Typography variant="subtitle1">
<div>{LABEL_NOT_FOUND}</div>
<div>{LABEL_FOOTER_NOT_FOUND}</div>
</Typography>
);
const NotFound: React.FC = () => {
const history = useHistory();
const NotFound: React.FC<NotFoundProps> = ({ history, width }) => {
const handleGomHome = useCallback(() => {
history.push('/');
}, [history]);
const renderList = (): JSX.Element => (
<List>
<ListItem button={true} divider={true} onClick={handleGomHome}>
{HOME_LABEL}
</ListItem>
</List>
);
/* eslint-disable @typescript-eslint/no-non-null-assertion */
return (
<Wrapper data-testid="404">
<Inner>
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
<Heading className="not-found-text" variant={isWidthUp('sm', width!) ? 'h2' : 'h4'}>
{NOT_FOUND_TEXT}
</Heading>
{renderSubTitle()}
<Card>{renderList()}</Card>
</Inner>
</Wrapper>
<Box alignItems="center" data-testid="404" display="flex" flexDirection="column" flexGrow={1} justifyContent="center" p={2}>
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
<StyledHeading className="not-found-text" variant="h4">
{NOT_FOUND_TEXT}
</StyledHeading>
<Button onClick={handleGomHome} variant="contained">
{GO_TO_HOME_PAGE}
</Button>
</Box>
);
};
export default withRouter<NotFoundProps, React.ComponentType<NotFoundProps>>(withWidth()(NotFound));
export default NotFound;