From 1619b3cb1c01f0dde6d39525eda27facefd29a70 Mon Sep 17 00:00:00 2001 From: Rafael Date: Sun, 7 Mar 2021 18:42:01 +0100 Subject: [PATCH] Small code refactor --- README.md | 2 + src/App.test.tsx | 8 +- src/components/Central.tsx | 133 ++++++++++++++++++--------------- src/components/Header.tsx | 3 +- src/index.css | 6 +- src/index.tsx | 12 +-- src/styledComponents/Header.js | 1 - 7 files changed, 87 insertions(+), 78 deletions(-) diff --git a/README.md b/README.md index f8801a1..7d04f3e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # Rafael Barea Hidalgo + ## Inicialización pre-mejora Para lanzar el proyecto: + - Instalar las dependecias del proyecto ejecutando el comando **`npm install`** en una terminal en la carpeta del proyecto. - Tras instalra las dependecias iniciar el servidor en modo desarrollador con el comando **`npm start`**. - El servidor se abrirá en la dirección [http://localhost:3000](http://localhost:3000) diff --git a/src/App.test.tsx b/src/App.test.tsx index 4db7ebc..352d7b8 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,8 +1,8 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; +import React from "react"; +import { render } from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { +test("renders learn react link", () => { const { getByText } = render(); const linkElement = getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/src/components/Central.tsx b/src/components/Central.tsx index 9defd12..b74a907 100644 --- a/src/components/Central.tsx +++ b/src/components/Central.tsx @@ -1,9 +1,9 @@ import React from "react"; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepLabel from '@material-ui/core/StepLabel'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Stepper from "@material-ui/core/Stepper"; +import Step from "@material-ui/core/Step"; +import StepLabel from "@material-ui/core/StepLabel"; +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; /* function Central(props: any) { @@ -169,90 +169,99 @@ interface ICentralProps { setActiveStep: (arg0: number) => void; } -interface ICentralState { - -} +interface ICentralState {} class Centrals extends React.Component { - steps = ['Seleccionar oficina', 'Seleccionar Área', 'Datos del interesado', 'Datos del representante', 'Otros datos']; + steps = [ + "Seleccionar oficina", + "Seleccionar Área", + "Datos del interesado", + "Datos del representante", + "Otros datos", + ]; constructor(props: ICentralProps) { super(props); } isStepOptional(step: number) { - return step === 3 + return step === 3; } - handleNext= ()=> { - console.log(this.props) + handleNext = () => { + console.log(this.props); this.props.setActiveStep(this.props.current + 1); - console.log(this.props.current) + console.log(this.props.current); }; - handleBack=()=>{ + handleBack = () => { this.props.setActiveStep(this.props.current - 1); }; getStepContent(step: number) { switch (step) { case 0: - return 'Select campaign settings...'; + return "Select campaign settings..."; case 1: - return 'What is an ad group anyways?'; + return "What is an ad group anyways?"; case 2: - return 'This is the bit I really care about!'; - case 3: - return '3!'; - case 4: - return '4!'; + return "This is the bit I really care about!"; + case 3: + return "3!"; + case 4: + return "4!"; default: - return 'Unknown step'; + return "Unknown step"; } } render() { - return( + return (
- - {this.steps.map((label, index) => { - const stepProps: { completed?: boolean } = {}; - const labelProps: { optional?: React.ReactNode } = {}; - if (this.isStepOptional(index)) { - labelProps.optional = Opcional; - } - return ( - - {label} - - ); - })} - -
- {this.props.current === this.steps.length ? ( + + {this.steps.map((label, index) => { + const stepProps: { completed?: boolean } = {}; + const labelProps: { optional?: React.ReactNode } = {}; + if (this.isStepOptional(index)) { + labelProps.optional = ( + Opcional + ); + } + return ( + + {label} + + ); + })} +
- - Has completado todos los pasos - -
- ) : ( -
- {this.getStepContent(this.props.current)} -
- - -
+ {this.props.current === this.steps.length ? ( +
+ Has completado todos los pasos +
+ ) : ( +
+ {this.getStepContent(this.props.current)} +
+ + +
+
+ )}
- )} -
-
- ) + + ); } } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a3a75b2..c8568f5 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -16,8 +16,7 @@ function Header(props: IHeaderProps) {
-
-
+
); diff --git a/src/index.css b/src/index.css index ec2585e..4a1df4d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/index.tsx b/src/index.tsx index f5185c1..9710934 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root") ); // If you want your app to work offline and load faster, you can change diff --git a/src/styledComponents/Header.js b/src/styledComponents/Header.js index 45a1366..b546c96 100644 --- a/src/styledComponents/Header.js +++ b/src/styledComponents/Header.js @@ -2,5 +2,4 @@ import injectSheet from 'react-jss' import Header from '../components/Header' import classes from './Header-jss.ts' - export default injectSheet(classes)(Header) \ No newline at end of file