agrego linter

taller2fiuba · May 25, 2020 · 2002257 · 2002257
1 parent ff509ed
commit 2002257
Show file tree

Hide file tree

Showing 16 changed files with 652 additions and 199 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,22 @@
+{
+    "extends": [
+      "airbnb",
+      "plugin:jsx-a11y/recommended",
+      "prettier",
+      "prettier/react"
+    ],
+    "plugins": [
+      "jsx-a11y",
+      "prettier"
+    ],
+    "rules": {
+      "semi": 1,
+      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+      "prettier/prettier": [
+        "error", {
+          "semi": true
+        }
+      ],
+      "react/destructuring-assignment": [0, "always"]
+    }
+  }
diff --git a/.huskyrc.json b/.huskyrc.json
@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -0,0 +1,4 @@
+{
+  "*.+(js|jsx)": ["eslint --fix", "git add"],
+  "*.+(json|css|md)": ["prettier --write", "git add"]
+}
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
@@ -23,7 +24,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "dev": "react-scripts start",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,5 +42,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^3.0.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.6",
+    "prettier": "^2.0.5"
   }
 }
diff --git a/src/components/estado/FilaEstadoServer.js b/src/components/estado/FilaEstadoServer.js
@@ -1,42 +1,52 @@
 import React, { Component } from "react";
-import requester from '../../comunications/Requester';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import PropTypes from "prop-types";
+import Requester from "../../comunications/Requester";
 
+export default class FilaEstadoServer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      estado: false,
+    };
 
-export class FilaEstadoServer extends Component{
-    constructor(props){
-        super(props)
-        this.state = {
-            estado: false,
-        }
+    this.handleApiResponse = this.handleApiResponse.bind(this);
+  }
 
-        this.handleApiResponse = this.handleApiResponse.bind(this);
-    }
+  componentDidMount() {
+    this.getEstado(this.props.url);
+  }
 
-    componentDidMount() {
-        this.getEstado(this.props.url);
-    }
+  getEstado(url) {
+    Requester.getPing(url, this.handleApiResponse);
+  }
 
-    handleApiResponse(response) {
-        this.setState({estado: response['ping'] === 200})
-    }
+  handleApiResponse(response) {
+    this.setState({ estado: response.ping === 200 });
+  }
 
-    getEstado(url) {
-        requester.getPing(url, this.handleApiResponse)
-    }
+  render() {
+    return (
+      <tr>
+        <td>{this.props.nombre}</td>
+        <td>
+          {this.state.estado ? (
+            <FontAwesomeIcon
+              icon="check"
+              size="2x"
+              style={{ color: "green" }}
+            />
+          ) : (
+            <FontAwesomeIcon icon="times" size="2x" style={{ color: "red" }} />
+          )}
+        </td>
+        <td>{this.props.url}</td>
+      </tr>
+    );
+  }
+}
 
-    render(){
-        return(
-            <tr>
-                <td>{this.props.nombre}</td>
-                <td>{
-                    this.state.estado ? 
-                    <FontAwesomeIcon icon="check" size="2x" style={{color: 'green'}} /> :
-                    <FontAwesomeIcon icon="times" size="2x" style={{color: 'red'}}/>
-                    }
-                </td>
-                <td>{this.props.url}</td>
-            </tr>
-        )
-    }
-}
+FilaEstadoServer.propTypes = {
+  nombre: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
diff --git a/src/components/estado/TablaEstadoServer.js b/src/components/estado/TablaEstadoServer.js
@@ -1,64 +1,58 @@
 import React, { Component } from "react";
-import Table from 'react-bootstrap/Table';
-import {FilaEstadoServer} from './FilaEstadoServer';
-import authServerService from '../../comunications/AuthServerService';
+import Table from "react-bootstrap/Table";
+import FilaEstadoServer from "./FilaEstadoServer";
+import authServerService from "../../comunications/AuthServerService";
 
 // TODO: Mover a variable de ambiente
-const AUTH_SERVER = 'https://chotuve-auth-server-g4.herokuapp.com';
-
-export class TablaEstadoServer extends Component{
-    constructor(props){
-        super(props);
-        this.state = {
-            servers : [{nombre:"auth-server", url:AUTH_SERVER}],
-        };
-
-        this.handleApiResponse = this.handleApiResponse.bind(this);
-    }
-
-    componentDidMount() {   
-        authServerService.getAppServers(this.handleApiResponse, (error) => console.log(error));
-    }
-
-    handleApiResponse(response) {
-        const servers = this.state.servers;
-        this.setState({
-            servers: servers.concat(response),
-        });
-    }
-
-    renderEstadoServers = () =>{
-        const servers = this.state.servers;
-
-        return servers.map(server => {
-            const {nombre, url} = server;
-
-            return(
-                <FilaEstadoServer
-                    key={nombre}
-                    nombre={nombre}
-                    url={url}
-                />
-            )
-        })
-    }
-
-    render(){
-        return(
-            <div className="row col-8">
-                <Table striped bordered hover responsive className="text-center">
-                    <thead>
-                        <tr>
-                            <th>Servidor</th>
-                            <th>Estado</th>
-                            <th>Url</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {this.renderEstadoServers()}
-                    </tbody>
-                </Table>
-            </div>
-        )
-    }
-}
+const AUTH_SERVER = "https://chotuve-auth-server-g4.herokuapp.com";
+
+export default class TablaEstadoServer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      servers: [{ nombre: "auth-server", url: AUTH_SERVER }],
+    };
+
+    this.handleApiResponse = this.handleApiResponse.bind(this);
+  }
+
+  componentDidMount() {
+    authServerService.getAppServers(this.handleApiResponse, (error) =>
+      console.log(error)
+    );
+  }
+
+  handleApiResponse(response) {
+    const { servers } = this.state;
+    this.setState({
+      servers: servers.concat(response),
+    });
+  }
+
+  renderEstadoServers() {
+    const { servers } = this.state;
+
+    return servers.map((server) => {
+      const { nombre, url } = server;
+
+      return <FilaEstadoServer key={nombre} nombre={nombre} url={url} />;
+    });
+  }
+
+  render() {
+    return (
+      <div className="row col-8">
+        <Table striped bordered hover responsive className="text-center">
+          <thead>
+            <tr>
+              <th>Servidor</th>
+              <th>Estado</th>
+              <th>Url</th>
+            </tr>
+          </thead>
+          <tbody>{this.renderEstadoServers()}</tbody>
+        </Table>
+      </div>
+    );
+  }
+}
diff --git a/src/comunications/AuthServerService.js b/src/comunications/AuthServerService.js
@@ -1,18 +1,18 @@
-//import axios from 'axios';
+// import axios from 'axios';
 
 // TODO: Mover a variable de ambiente
-//const AUTH_SERVER = 'https://chotuve-auth-server-g4.herokuapp.com';
+// const AUTH_SERVER = 'https://chotuve-auth-server-g4.herokuapp.com';
 
-class AuthServerService{
+// eslint-disable-next-line no-unused-vars
+const getAppServers = (callback, errorHandler) => {
+  // TODO:Debería devolver una lista de objetos con la información de las appservers regitradas
+  // axios(`${AUTH_SERVER}/appservers`)
+  //     .then(response => callback(response))
+  //     .catch(error => errorHandler(error));
 
-    getAppServers(callback, errorHandler){
-        // TODO:Debería devolver una lista de objetos con la información de las appservers regitradas
-        // axios(`${AUTH_SERVER}/appservers`)
-        //     .then(response => callback(response))
-        //     .catch(error => errorHandler(error));
+  callback([
+    { nombre: "appserver", url: "https://chotuve-app-server.herokuapp.com" },
+  ]);
+};
 
-        callback([{nombre: 'appserver', url: 'https://chotuve-app-server.herokuapp.com'}])
-    }
-}
-
-export default new AuthServerService();
+export default { getAppServers };
diff --git a/src/comunications/Requester.js b/src/comunications/Requester.js
@@ -1,16 +1,13 @@
-import axios from 'axios';
+import axios from "axios";
 
-class Requester {
-    getPing(url, callback){
-        axios.get(`${url}/ping`)
-            .then(response => 
-                callback({ping: response.status})
-            )
-            .catch(error => {
-                console.log(error);
-                callback({ping:error.status});
-            })
-    }
-}
+const getPing = (url, callback) => {
+  axios
+    .get(`${url}/ping`)
+    .then((response) => callback({ ping: response.status }))
+    .catch((error) => {
+      console.log(error);
+      callback({ ping: error.status });
+    });
+};
 
-export default new Requester();
+export default { getPing };
diff --git a/src/controllers/Estado.js b/src/controllers/Estado.js
@@ -1,13 +1,11 @@
-import React, {Component} from 'react';
-import {TablaEstadoServer} from '../components/estado/TablaEstadoServer'
+import React from "react";
+import TablaEstadoServer from "../components/estado/TablaEstadoServer";
 
-export class Estado extends Component{
-    render(){
-        return(
-            <div>
-                <h1>Estado de los servidores</h1>
-                <TablaEstadoServer/>
-            </div>
-        )
-    }
-}
+export default () => {
+  return (
+    <div>
+      <h1>Estado de los servidores</h1>
+      <TablaEstadoServer />
+    </div>
+  );
+};
diff --git a/src/fontawesome.js b/src/fontawesome.js
@@ -1,7 +1,5 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { library } from "@fortawesome/fontawesome-svg-core";
 
-import { fas} from '@fortawesome/free-solid-svg-icons'
+import { fas } from "@fortawesome/free-solid-svg-icons";
 
-library.add(
-  fas
-);
+library.add(fas);