From 1d705f58b6071c4345241e5bd4453f50d7d42a0b Mon Sep 17 00:00:00 2001
From: Priscila <priscilawebdev@gmail.com>
Date: Wed, 31 Oct 2018 13:42:43 +0100
Subject: [PATCH] refactor: added flow and css in JS in NotFound (#1098)

---
 src/webui/components/NotFound/404.scss        | 11 -------
 src/webui/components/NotFound/index.js        | 31 ++++++++-----------
 src/webui/components/NotFound/styles.js       | 19 ++++++++++++
 src/webui/components/NotFound/types.js        |  8 +++++
 src/webui/pages/detail/index.jsx              |  4 ++-
 .../__snapshots__/notfound.spec.js.snap       |  4 ++-
 test/unit/webui/components/notfound.spec.js   |  8 ++---
 7 files changed, 50 insertions(+), 35 deletions(-)
 delete mode 100644 src/webui/components/NotFound/404.scss
 create mode 100644 src/webui/components/NotFound/styles.js
 create mode 100644 src/webui/components/NotFound/types.js

diff --git a/src/webui/components/NotFound/404.scss b/src/webui/components/NotFound/404.scss
deleted file mode 100644
index 5ed544cc5..000000000
--- a/src/webui/components/NotFound/404.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '../../styles/variables';
-
-.notFound {
-  width: 100%;
-  font-size: $font-size-md;
-  line-height: $line-height-xl;
-  border: none;
-  outline: none;
-  flex-direction: column;
-  align-items: center;
-}
diff --git a/src/webui/components/NotFound/index.js b/src/webui/components/NotFound/index.js
index 8533ac7cb..8a1b11f62 100644
--- a/src/webui/components/NotFound/index.js
+++ b/src/webui/components/NotFound/index.js
@@ -1,23 +1,18 @@
+/**
+ * @prettier
+ * @flow
+ */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Wrapper } from './styles';
+import { IProps } from './types';
 
-import classes from './404.scss';
-
-const NotFound = (props) => {
-    return (
-      <div className={`container content ${classes.notFound}`}>
-        <h1>Error 404 - {props.pkg}</h1>
-        <hr/>
-        <p>
-          Oops, The package you are trying to access does not exist.
-        </p>
-      </div>
-    );
-};
-
-NotFound.propTypes = {
-  pkg: PropTypes.string.isRequired
-};
+const NotFound = ({ pkg }: IProps) => (
+  <Wrapper>
+    <h1>Error 404 - {pkg}</h1>
+    <hr />
+    <p>Oops, The package you are trying to access does not exist.</p>
+  </Wrapper>
+);
 
 export default NotFound;
diff --git a/src/webui/components/NotFound/styles.js b/src/webui/components/NotFound/styles.js
new file mode 100644
index 000000000..cca55ec7a
--- /dev/null
+++ b/src/webui/components/NotFound/styles.js
@@ -0,0 +1,19 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+
+import { fontSize, lineHeight } from '../../utils/styles/sizes';
+
+export const Wrapper = styled.div`
+  && {
+    font-size: ${fontSize.md};
+    line-height: ${lineHeight.xl};
+    border: none;
+    outline: none;
+    flex-direction: column;
+    align-items: center;
+  }
+`;
diff --git a/src/webui/components/NotFound/types.js b/src/webui/components/NotFound/types.js
new file mode 100644
index 000000000..c353bac2c
--- /dev/null
+++ b/src/webui/components/NotFound/types.js
@@ -0,0 +1,8 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  pkg: string;
+}
diff --git a/src/webui/pages/detail/index.jsx b/src/webui/pages/detail/index.jsx
index 80c9df8b9..30d070a7e 100644
--- a/src/webui/pages/detail/index.jsx
+++ b/src/webui/pages/detail/index.jsx
@@ -68,7 +68,9 @@ export default class Detail extends Component {
 
     if (notFound) {
       return (
-        <NotFound pkg={this.packageName} />
+        <div className='container content'>
+          <NotFound pkg={this.packageName} />
+        </div>
       );
     } else if (isEmpty(readMe)) {
       return <Spinner centered />;
diff --git a/test/unit/webui/components/__snapshots__/notfound.spec.js.snap b/test/unit/webui/components/__snapshots__/notfound.spec.js.snap
index 6d0ff4eaf..0f9b3cd0c 100644
--- a/test/unit/webui/components/__snapshots__/notfound.spec.js.snap
+++ b/test/unit/webui/components/__snapshots__/notfound.spec.js.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"container content notFound\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`;
+exports[`<NotFound /> component should load the component in default state 1`] = `"<div class=\\"css-24p7uw e1gvymku0\\"><h1>Error 404 - test</h1><hr><p>Oops, The package you are trying to access does not exist.</p></div>"`;
+
+exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"css-24p7uw e1gvymku0\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`;
diff --git a/test/unit/webui/components/notfound.spec.js b/test/unit/webui/components/notfound.spec.js
index 6c285f272..723218226 100644
--- a/test/unit/webui/components/notfound.spec.js
+++ b/test/unit/webui/components/notfound.spec.js
@@ -3,15 +3,15 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import NotFound from '../../../../src/webui/components/NotFound/index';
 
 console.error = jest.fn();
 
 describe('<NotFound /> component', () => {
-  it('should give error for the required fields', () => {
-    shallow(<NotFound />);
-    expect(console.error).toBeCalled();
+  it('should load the component in default state', () => {
+    const wrapper = mount(<NotFound pkg='test' />);
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should set html from props', () => {