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

.eslintignore

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

.gitignore

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

src/components/NotFound/NotFound.tsx

@@ -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;

src/components/NotFound/Notfound.test.tsx

@@ -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');
 });

src/components/NotFound/__snapshots__/Notfound.test.tsx.snap

@@ -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>
+`;

src/components/NotFound/index.ts

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

src/components/NotFound/styles.ts

@@ -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',
-});

src/components/Versions/Versions.test.tsx

@@ -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';

src/utils/styles/spacings.ts

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