Not Found Component

package.json

@@ -27,7 +27,7 @@
     "@types/node": "12.7.8",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
-    "@types/react-router-dom": "4.3.5",
+    "@types/react-router-dom": "5.1.0",
     "@types/validator": "10.11.3",
     "@typescript-eslint/parser": "2.3.2",
     "@verdaccio/babel-preset": "2.0.0",
@@ -87,8 +87,7 @@
     "react-dom": "16.10.0",
     "react-emotion": "9.2.12",
     "react-hot-loader": "4.12.11",
-    "react-router": "5.0.1",
-    "react-router-dom": "5.0.1",
+    "react-router-dom": "5.1.2",
     "resolve-url-loader": "3.1.0",
     "rimraf": "3.0.0",
     "source-map-loader": "0.2.4",

src/components/NotFound/NotFound.tsx

@@ -1,53 +1,44 @@
-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 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 type NotFoundProps = RouteComponentProps & WithWidthProps;
+const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
 
-const HOME_LABEL = 'Home';
+const StyledHeading = styled(Typography)({
+  color: '#4b5e40',
+  marginBottom: 16,
+});
 
-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 the 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,16 @@
 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();
   });
 });

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

yarn.lock

@@ -1676,10 +1676,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-router-dom@4.3.5":
-  version "4.3.5"
-  resolved "https://registry.verdaccio.org/@types%2freact-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
-  integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==
+"@types/react-router-dom@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.verdaccio.org/@types%2freact-router-dom/-/react-router-dom-5.1.0.tgz#8baa84a7fa8c8e7797fb3650ca51f93038cb4caf"
+  integrity sha512-YCh8r71pL5p8qDwQf59IU13hFy/41fDQG/GeOI3y+xmD4o0w3vEPxE8uBe+dvOgMoDl0W1WUZsWH0pxc1mcZyQ==
   dependencies:
     "@types/history" "*"
     "@types/react" "*"
@@ -10946,23 +10946,23 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.verdaccio.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-router-dom@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.verdaccio.org/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
-  integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==
+react-router-dom@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.verdaccio.org/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
+  integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "5.0.1"
+    react-router "5.1.2"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.verdaccio.org/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
-  integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
+react-router@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.verdaccio.org/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
+  integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"