Modernize code

.eslintrc

@@ -10,6 +10,7 @@
      "no-extra-semi": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-space-before-closing": 0,
+     "react/jsx-props-no-spreading": 0,
      "react/jsx-tag-spacing": 1,
      "react/prop-types": 0,
      "jsx-a11y/img-has-alt": 0,

package.json

@@ -6,38 +6,39 @@
   "dependencies": {
     "@fortawesome/fontawesome": "1.1.8",
     "@fortawesome/fontawesome-free-solid": "5.0.13",
-    "@fortawesome/fontawesome-svg-core": "1.2.15",
-    "@fortawesome/free-brands-svg-icons": "5.7.2",
-    "@fortawesome/free-regular-svg-icons": "5.7.2",
-    "@fortawesome/free-solid-svg-icons": "5.7.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.20",
+    "@fortawesome/free-brands-svg-icons": "5.10.2",
+    "@fortawesome/free-regular-svg-icons": "5.10.2",
+    "@fortawesome/free-solid-svg-icons": "5.10.2",
     "@fortawesome/react-fontawesome": "0.1.4",
-    "antd": "3.15.2",
-    "enzyme": "3.6.0",
-    "enzyme-adapter-react-16": "1.5.0",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.1",
-    "eslint-plugin-react": "7.11.1",
-    "expect": "23.6.0",
-    "fetch-mock": "7.0.0-alpha.6",
+    "antd": "3.22.2",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.3",
+    "expect": "24.9.0",
+    "fetch-mock": "7.3.9",
     "history": "^4.7.2",
     "isomorphic-fetch": "^2.2.1",
-    "react": "16.8.5",
-    "react-dom": "16.8.5",
-    "react-redux": "6.0.1",
-    "react-responsive": "6.1.1",
-    "react-router": "5.0.0",
-    "react-router-dom": "5.0.0",
-    "react-test-renderer": "16.8.5",
-    "react-transition-group": "^2.4.0",
-    "redux": "4.0.1",
+    "prop-types": "^15.7.2",
+    "react": "16.9.0",
+    "react-dom": "16.9.0",
+    "react-redux": "7.1.1",
+    "react-responsive": "8.0.0",
+    "react-router": "5.0.1",
+    "react-router-dom": "5.0.1",
+    "react-test-renderer": "16.9.0",
+    "react-transition-group": "4.2.1",
+    "redux": "4.0.4",
     "redux-mock-store": "1.5.3",
-    "redux-saga": "1.0.2",
+    "redux-saga": "1.0.5",
     "reselect": "4.0.0"
   },
   "devDependencies": {
-    "babel-plugin-import": "^1.9.1",
-    "react-scripts": "2.1.8"
+    "babel-plugin-import": "1.12.1",
+    "react-scripts": "3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -48,22 +49,19 @@
     "lint-all": "eslint src/",
     "lint-all-ci": "eslint -f checkstyle src/ > eslint.xml"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!src/index.js",
+      "!src/sagas/index.js"
+    ]
+  },
   "author": "UTNianos",
   "license": "ISC",
   "repository": {
     "type": "git",
     "url": "https://github.com/UTNianos/frontend.git"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}",
-      "!**/registerServiceWorker.js",
-      "!**/index.js",
-      "!**/store/configureStore.js",
-      "!**/store/Reducers.js",
-      "!**/Routes/*"
-    ]
-  },
   "bugs": {
     "url": "https://github.com/UTNianos/frontend/issues"
   },

src/App/App.jsx → src/App/App.js

@@ -1,21 +1,18 @@
+/* eslint-disable react/no-children-prop */
 import React from 'react';
+import MediaQuery from 'react-responsive';
 import LayoutDesktop from './LayoutDesktop';
 import LayoutMobile from './LayoutMobile';
-import MediaQuery from 'react-responsive';
 
-const App = ({children}) => {
-
-  return (
+const App = ({ children }) => (
   <div>
-   <MediaQuery minDeviceWidth={1224} >
+    <MediaQuery minDeviceWidth={1224}>
       <LayoutDesktop children={children} />
-   </MediaQuery>
-	 <MediaQuery maxDeviceWidth={1224}>
+    </MediaQuery>
+    <MediaQuery maxDeviceWidth={1224}>
       <LayoutMobile children={children} />
-   </MediaQuery>
+    </MediaQuery>
   </div>
-  );
-
-}
+)
 
 export default App;

src/App/test/App.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Enzyme, { render } from 'enzyme';
+import { MemoryRouter /* , Link */ } from 'react-router-dom';
+import Adapter from 'enzyme-adapter-react-16';
+import App from '../App';
+import Home from '../Home';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('App', () => {
+
+  it('<App />', () => {
+    const app = render(<App />);
+
+    expect(app).toBeTruthy();
+  });
+
+  it('<Home />', () => {
+    const homeComponent = render(
+      <MemoryRouter>
+        <Home />
+      </MemoryRouter>
+    );
+
+    // const linkComponent = homeComponent.find(<Link />);
+    // console.log(linkComponent);
+    // expect(linkComponent.length).toBe(1);
+    expect(homeComponent).toBeTruthy();
+  });
+
+})

src/Errors/NotFound.jsx → src/Errors/NotFound.js

@@ -3,7 +3,11 @@ import React from 'react';
 const NotFound = () => (
   <div>
     <h3>404 pagina no encontrada.</h3>
-    <p>La pagina que estas buscando <strong>no existe</strong>.</p>
+    <p>
+La pagina que estas buscando
+      <strong>no existe</strong>
+.
+    </p>
     <p>Deal with it.</p>
   </div>
 );

src/Errors/test/component.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Enzyme, { render } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import NotFound from '../NotFound';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+it('renders without crashing', () => {
+  render(<NotFound />);
+});

src/Fetching/Fetching.test.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import Enzyme, { render } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Fetching from './FetchingIndicator';
 
-jest.mock('react-dom');
-jest.mock('antd');
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('<Fetching />', () => {
-  it('renders correctly', () => {
-    const tree = renderer.create(<Fetching />).toJSON();
-    expect(tree).toMatchSnapshot();
-  })
+it('renders without crashing', () => {
+  render(<Fetching />);
 });

src/Fetching/FetchingIndicator.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spin, Alert } from 'antd';
+
+const indicatorStyles = {
+  marginLeft: '0%',
+  marginTop: '10%'
+};
+
+const FetchingIndicator = () => (
+  <div style={indicatorStyles}>
+    <Spin tip="Cargando...">
+      <Alert
+        message="Cargando"
+        description="Por favor espere..."
+        type="info"
+      />
+    </Spin>
+  </div>
+)
+
+export default FetchingIndicator;