Login user

package.json

@@ -4,9 +4,13 @@
   "homepage": "https://PracticaDS.github.io/pdes-tp-pochinki/",
   "private": true,
   "dependencies": {
+    "create-react-app": "^3.0.1",
+    "global": "^4.3.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.0.2",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "2.1.8",
     "redux": "^4.0.1"
   },
@@ -19,11 +23,12 @@
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   },
-  "husky":{
-    "hooks":{
+  "husky": {
+    "hooks": {
       "pre-push": "CI=true yarn test"
     }
   },
+  "proxy": "http://localhost:3001",
   "eslintConfig": {
     "extends": "react-app"
   },

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
 import Fabrica from './containers/FabricaContainer';
+//import Login from './components/Login';
 
 const App = () => {
     return (

src/actions/maquina.js

@@ -18,4 +18,11 @@ export const selectMaterial = (material) => {
         type: 'SELECT_MAT',
         material
     }
+}
+
+export const selectBlueprint = (blueprint) => {
+    return {
+        type: 'SELECT_BLUE',
+        blueprint
+    }
 }

src/components/InfoUser.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+
+const InfoUser = ({match: {params}}) => {
+
+    const username = params.username;
+    let userN
+    let loading = true
+
+    fetch('http://localhost:3001/api/users/' + username)
+    .then(res => res.json())
+    .then(user => {
+        userN = user
+        loading = false
+    })
+
+    return (
+        <div>
+            <h2>Bienvenido {!loading ? userN.username : "Usuario"}!</h2>
+        </div>
+            )
+
+}
+
+export default InfoUser;

src/components/Login.css

@@ -0,0 +1,34 @@
+.buttonIn {
+    padding: 7px;
+    background-color: rgb(202, 204, 209);
+    border: none;
+    margin-inline-end: 440px;
+    display: inline-block;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+}
+
+.buttonIn:hover{
+    background-color: rgb(153, 153, 155);
+}
+
+.inputIn{
+
+    padding: 6px;
+    margin-block-start: 25px;
+    padding-top: 5px;
+    padding-right: 200px;
+    display: inline-block;
+    margin-left: 400px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+}
+
+h2 {
+    text-align: center;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: 30px;
+    font-weight: bold;
+    color: azure;
+    margin-top: 80px;
+}

src/components/Login.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import './Login.css';
+import {Route,NavLink,HashRouter,Redirect} from "react-router-dom";
+import Fabrica from './Fabrica';
+import history from '../history';
+
+class Login extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            user: '',
+            inputUser:''
+        } 
+    }
+
+
+    loadUser() {
+        fetch('/api/users/auth/' + this.state.inputUser )
+            .then(res => 
+                res.json()
+                )
+            .then(user => {
+                history.push({pathname:'/user/'+ user._id})
+            });
+    }
+
+    handleChange(event) {
+        this.setState({inputUser: event.target.value});
+        console.log('input ',this.state.inputUser);
+    }
+
+    handleSubmit = () => {
+        if(this.state.inputUser !== ''){
+            this.loadUser();
+            //history.push({pathname:'game'});
+            // alert('Bievenido ' + this.state.user.username);
+            //chequeo si existe o no y alertas
+        }else{
+            alert('Ingrese su usario por favor');
+        }
+    }
+
+    render() {
+        return(
+            <div>
+                <h2>Bienvenido a la revolucion industrial!</h2>
+                <HashRouter>
+                <form>
+                    <span className="form-group">
+                        <input type="text" className="inputIn" placeholder="Usuario" value={this.state.inputUser} onChange={(event) => { this.handleChange(event) } } />
+                    </span>
+                    <button className="buttonIn" onClick={() => this.handleSubmit()}>
+                        Ingresar
+                    </button>
+                </form>
+                </HashRouter>
+            </div>
+        );
+    }
+}
+
+export default Login;

src/components/PanelDetalles.css

@@ -38,7 +38,7 @@
 .panelMats {
     background-color: blueviolet;
     height: 280px;
-    width: 180px;
+    width: 140px;
     margin-left: 40px;
     margin-right: 20px;
     padding: 4px;
@@ -58,4 +58,26 @@
 
 .botonMat:hover {
     border: 1px solid orange;
+}
+
+.panelBlue {
+    background-color: blueviolet;
+    height: 340px;
+    width: 140px;
+    margin-left: 40px;
+    margin-right: 20px;
+    padding: 4px;
+    border: 1px solid rgb(179, 214, 214);
+    border-radius: 4px;
+
+}
+
+.botonBlue{
+    float:left;
+    height: 30px;
+    width: 30px;
+}
+
+.botonBlue:hover{
+    border: 1px solid orange;
 }

src/components/PanelDetalles.js

@@ -5,6 +5,7 @@ import cobre from '../assets/cobre.PNG'
 import aluminio from '../assets/aluminio.PNG'
 import carbon from '../assets/carbon.PNG'
 import hierro from '../assets/aluminio.PNG'
+import blue from '../assets/blueprint.PNG'
 
 const renderInfo= (name,costo,frecuencia) => {
         return <div>
@@ -35,7 +36,24 @@ const renderInfoMat = (onMatClick) => {
             </div>
 }
 
-const PanelDetalles = ({tablero,maquinaSeleccionada,onMatClick}) => {
+// ACA HAY QUE AGREGAR UN BOTON PARA SELECCIONAR LA BLUEPRINT
+const renderBlueprints = (blueprints,onSelectBlueprint) => {
+    return <div className="panelBlue">
+        { blueprints.map(function(item) {
+                return <div key={item}>
+                        <img src={blue} alt="blueBot" className="botonBlue" onClick={() => onSelectBlueprint( {recursos: [item.ingrediente1,item.ingrediente2], producto: item.resultado} )}/>
+                            <p className="infoBlue">{item.nombre}</p>
+                            <ul className="listaBlue">
+                                <li>{item.ingrediente1}</li>
+                                <li>{item.ingrediente2}</li>
+                            </ul>
+                        </div>
+            })
+        }
+    </div>
+}
+
+const PanelDetalles = ({tablero,maquinaSeleccionada,blueprints,onMatClick,onSelectBlueprint}) => {
 
     const displayInfoSt= (maquina) => {
         switch(maquina){
@@ -46,6 +64,15 @@ const PanelDetalles = ({tablero,maquinaSeleccionada,onMatClick}) => {
         }
     }
 
+    const displayBluePrints = (maquina) => {
+        switch(maquina){
+            case "CRAFTER":
+                return renderBlueprints(blueprints,onSelectBlueprint)
+            default:
+                return <div></div>
+        }
+    }
+
     const displayInfo = (maquina) => {
         switch (maquina){
             case "CRAFTER":
@@ -69,6 +96,7 @@ const PanelDetalles = ({tablero,maquinaSeleccionada,onMatClick}) => {
             <div className="info">
                 <div className="infobox">
                     {displayInfo(maquinaSeleccionada)}
+                    {displayBluePrints(maquinaSeleccionada)}
 
                 </div>
                 <div>

src/containers/FabricaContainer.js

@@ -1,5 +1,7 @@
 import { connect } from 'react-redux';
 import Fabrica from '../components/Fabrica';
+import { withRouter } from 'react-router-dom'
+
 
 const mapStateToProps = (state) => (
 
@@ -19,4 +21,4 @@ const FabricaContainer = connect(
   mapActionsToProps
 )(Fabrica);
 
-export default FabricaContainer;
+export default withRouter(FabricaContainer);

src/containers/PanelDetallesContainer.js

@@ -1,20 +1,25 @@
 import { connect } from 'react-redux';
 import PanelDetalles from '../components/PanelDetalles';
-import {selectMaterial} from '../actions/maquina'
+import {selectMaterial, selectBlueprint} from '../actions/maquina'
+import { blueprints } from '../model/maquina';
+import { withRouter } from 'react-router-dom'
+
 
 const mapStateToProps = (state) => (
      {
         tablero: state.maquinas.tablero,
         maquinaSeleccionada : state.maquinas.maquinaSeleccionada,
-        materialSeleccionado: state.maquinas.materialSeleccionado
+        materialSeleccionado: state.maquinas.materialSeleccionado,
+        blueprints: blueprints()
     }
 );
 
 
 
 const mapActionsToProps = (dispatch) => {
   return{
-      onMatClick: material => dispatch(selectMaterial(material))
+      onMatClick: material => dispatch(selectMaterial(material)),
+      onSelectBlueprint : blueprint => dispatch(selectBlueprint(blueprint))
   };    
 };
 
@@ -23,4 +28,4 @@ const PanelDetallesContainer = connect(
   mapActionsToProps
 )(PanelDetalles);
 
-export default PanelDetallesContainer;
+export default withRouter(PanelDetallesContainer);

src/containers/PanelEdicionContainer.js

@@ -1,6 +1,8 @@
 import { connect } from 'react-redux';
 import PanelEdicion from '../components/PanelEdicion';
 import { selectHerramienta } from '../actions/herramienta';
+import { withRouter } from 'react-router-dom'
+
 
 const mapStateToProps = (state) => (
 
@@ -22,4 +24,4 @@ const PanelEdicionContainer = connect(
   mapActionsToProps
 )(PanelEdicion);
 
-export default PanelEdicionContainer;
+export default withRouter(PanelEdicionContainer);

src/containers/SeleccionMaquinasContainer.js

@@ -2,6 +2,8 @@ import { connect } from 'react-redux';
 
 import {selectMaquina} from '../actions/maquina';
 import SeleccionMaquinas from '../components/SeleccionMaquinas';
+import { withRouter } from 'react-router-dom'
+
 
 const mapStateToProps = (state) => (
 
@@ -23,4 +25,4 @@ const SeleccionMaquinasContainer = connect(
   mapActionsToProps
 )(SeleccionMaquinas);
 
-export default SeleccionMaquinasContainer;
+export default withRouter(SeleccionMaquinasContainer);

src/containers/TableroContainer.js

@@ -1,6 +1,8 @@
 import { connect } from 'react-redux';
 import Tablero from '../components/Tablero';
 import {colocarMaquina} from '../actions/maquina';
+import { withRouter } from 'react-router-dom'
+
 
 const mapStateToProps = (state) => (
      {
@@ -22,4 +24,4 @@ const TableroContainer = connect(
   mapActionsToProps
 )(Tablero);
 
-export default TableroContainer;
+export default withRouter(TableroContainer);

src/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory();