mirror of
https://github.com/SomboChea/ui
synced 2024-11-23 22:44:27 +07:00
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
Juan Picado @jotadeveloper
parent
7529c02e58
commit
fdbdb6303b
@ -11,3 +11,4 @@ Dockerfile
|
||||
*.html
|
||||
*.scss
|
||||
*.png
|
||||
doc
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -2,6 +2,8 @@ npm-debug.log
|
||||
verdaccio-*.tgz
|
||||
.DS_Store
|
||||
build/
|
||||
doc
|
||||
|
||||
###
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -1 +1 @@
|
||||
export { default } from './NotFound';
|
||||
export { default, NOT_FOUND_TEXT } from './NotFound';
|
||||
|
||||
@ -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',
|
||||
});
|
||||
@ -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';
|
||||
|
||||
@ -3,4 +3,5 @@
|
||||
|
||||
export const spacings = {
|
||||
lg: '30px',
|
||||
sm: '16px',
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user