feat: new not found component (#170)

* 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

View File

@ -11,3 +11,4 @@ Dockerfile
*.html
*.scss
*.png
doc

2
.gitignore vendored
View File

@ -2,6 +2,8 @@ npm-debug.log
verdaccio-*.tgz
.DS_Store
build/
doc
###
node_modules
package-lock.json

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>
<Box alignItems="center" data-testid="404" display="flex" flexDirection="column" flexGrow={1} justifyContent="center" p={2}>
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
<Heading className="not-found-text" variant={isWidthUp('sm', width!) ? 'h2' : 'h4'}>
<StyledHeading className="not-found-text" variant="h4">
{NOT_FOUND_TEXT}
</Heading>
{renderSubTitle()}
<Card>{renderList()}</Card>
</Inner>
</Wrapper>
</StyledHeading>
<Button onClick={handleGomHome} variant="contained">
{GO_TO_HOME_PAGE}
</Button>
</Box>
);
};
export default withRouter<NotFoundProps, React.ComponentType<NotFoundProps>>(withWidth()(NotFound));
export default NotFound;

View File

@ -1,18 +1,17 @@
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';
import NotFound from './NotFound';
console.error = jest.fn();
describe('<NotFound /> component', () => {
test('should load the component in default state', () => {
const routerWrapper = shallow(
const { container } = render(
<Router>
<NotFound />
</Router>
);
expect(routerWrapper.find(NotFound)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
test.todo('Test Button Click');
});

View File

@ -1,3 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<NotFound /> component should load the component in default state 1`] = `<withRouter(WithWidth(NotFound)) />`;
exports[`<NotFound /> component should load the component in default state 1`] = `
<div
class="MuiBox-root MuiBox-root-2"
data-testid="404"
>
<img
alt="404 - Page not found"
class="css-17y48z2 emotion-0"
src="[object Object]"
/>
<h4
class="MuiTypography-root not-found-text css-7pe7kh emotion-1 MuiTypography-h4"
>
Sorry, we couldn't find it...
</h4>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
Go to the home page
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
`;

View File

@ -1 +1 @@
export { default } from './NotFound';
export { default, NOT_FOUND_TEXT } from './NotFound';

View File

@ -1,41 +0,0 @@
import { default as MuiCard } from '@material-ui/core/Card';
import { default as MuiList } from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion';
export const Wrapper = styled('div')({
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
padding: '16px',
});
export const Inner = styled('div')({
maxWidth: '650px',
display: 'flex',
flexDirection: 'column',
});
export const EmptyPackage = styled('img')({
width: '150px',
margin: '0 auto',
});
export const Heading = styled(Typography)({
'&&': {
color: '#4b5e40',
},
});
export const List = styled(MuiList)({
'&&': {
padding: 0,
color: '#4b5e40',
},
});
export const Card = styled(MuiCard)({
marginTop: '24px',
});

View File

@ -1,6 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router';
import { MemoryRouter } from 'react-router-dom';
import { render, cleanup } from '@testing-library/react';
import { DetailContext, DetailContextProps } from '../../pages/Version';

View File

@ -3,4 +3,5 @@
export const spacings = {
lg: '30px',
sm: '16px',
};