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 *.html
*.scss *.scss
*.png *.png
doc

2
.gitignore vendored
View File

@ -2,6 +2,8 @@ npm-debug.log
verdaccio-*.tgz verdaccio-*.tgz
.DS_Store .DS_Store
build/ build/
doc
### ###
node_modules node_modules
package-lock.json 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 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 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 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 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_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 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 => ( const NotFound: React.FC = () => {
<Typography variant="subtitle1"> const history = useHistory();
<div>{LABEL_NOT_FOUND}</div>
<div>{LABEL_FOOTER_NOT_FOUND}</div>
</Typography>
);
const NotFound: React.FC<NotFoundProps> = ({ history, width }) => {
const handleGomHome = useCallback(() => { const handleGomHome = useCallback(() => {
history.push('/'); history.push('/');
}, [history]); }, [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 ( return (
<Wrapper data-testid="404"> <Box alignItems="center" data-testid="404" display="flex" flexDirection="column" flexGrow={1} justifyContent="center" p={2}>
<Inner>
<EmptyPackage alt="404 - Page not found" src={PackageImg} /> <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} {NOT_FOUND_TEXT}
</Heading> </StyledHeading>
{renderSubTitle()} <Button onClick={handleGomHome} variant="contained">
<Card>{renderList()}</Card> {GO_TO_HOME_PAGE}
</Inner> </Button>
</Wrapper> </Box>
); );
}; };
export default withRouter<NotFoundProps, React.ComponentType<NotFoundProps>>(withWidth()(NotFound)); export default NotFound;

View File

@ -1,18 +1,17 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
import { shallow } from 'enzyme'; import { render } from '@testing-library/react';
import NotFound from './NotFound'; import NotFound from './NotFound';
console.error = jest.fn();
describe('<NotFound /> component', () => { describe('<NotFound /> component', () => {
test('should load the component in default state', () => { test('should load the component in default state', () => {
const routerWrapper = shallow( const { container } = render(
<Router> <Router>
<NotFound /> <NotFound />
</Router> </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 // 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 React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router'; import { MemoryRouter } from 'react-router-dom';
import { render, cleanup } from '@testing-library/react'; import { render, cleanup } from '@testing-library/react';
import { DetailContext, DetailContextProps } from '../../pages/Version'; import { DetailContext, DetailContextProps } from '../../pages/Version';

View File

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