Code review

imports/api/mensajes.js

@@ -19,8 +19,8 @@ Meteor.methods({
     check(idChat, String);
 
     //el usuario tiene que estar loggineado
-    if (!this.userId) {
-      throw new Meteor.Error('not-authorized');
+    if (/*!this.userId ¿esta variable de donde sale?*/ !Meteor.user()) {
+      /*si lo hace con throw, el error se lanza en el server*/return new Meteor.Error('not-authorized');
     }
     Mensajes.insert({
       mensaje,
@@ -30,4 +30,4 @@ Meteor.methods({
       username: Meteor.users.findOne(this.userId).username,
     });
   }
-});
+});

imports/api/viajes.js

@@ -28,7 +28,7 @@ Meteor.methods({
         check(precio, String);
 
         // El usuario debe estar loggineado
-        if (!this.userId) {
+        if (!Meteor.user()/*this.userId usar Meteor.user()*/ ) {
             throw new Meteor.Error('not-authorized');
         }
 
@@ -41,8 +41,8 @@ Meteor.methods({
             cantidad,
             precio,
             createdAt: new Date(),
-            owner: this.userId,
-            username: Meteor.users.findOne(this.userId).username
+            owner: Meteor.user()._id,
+            username: Meteor.users.findOne(Meteor.user()._id).username
         });
     },
 
@@ -51,7 +51,7 @@ Meteor.methods({
         check(viajeId, String);
 
         const viaje = Viajes.findOne(viajeId);
-        if (viaje.owner !== this.userId) {
+        if (viaje.owner !== Meteor.user()._id) {
             // If the task is private, make sure only the owner can delete it
             throw new Meteor.Error('not-authorized');
         }
@@ -66,4 +66,4 @@ Meteor.methods({
         const numero = parseInt(viaje.cantidad, 10) - 1 + "";
         Viajes.update(viajeId, { $set: { cantidad: numero } });
     }
-});
+});

imports/client/routes.js

@@ -8,7 +8,7 @@ import Home from '../ui/Home.js';
 import MensajeApp from '../ui/MensajeApp.js';
 import NewUserForm from '../ui/NewUserForm.js';
 import SignIn from '../ui/SignIn.js';
-import NewCompanieForm from '../ui/NewCompanieForm.js';
+import NewCompanyForm from '../ui/NewCompanieForm.js';
 
 //Se crean dos rutas, la principal y la de mensajes. En cada uno se renderiza su componente respectivo
 Meteor.startup(() => {
@@ -19,10 +19,10 @@ Meteor.startup(() => {
         <Route path='/app' component={App} />        
         <Route path='/newuserform' component={NewUserForm} />        
         <Route path='/signin' component={SignIn} />
-        <Route path='/newcompanieform' component={NewCompanieForm} />  
+        <Route path='/newcompanyform' component={NewCompanyForm} />  
         <Route path='/' component={Home} />        
       </Switch>
     </BrowserRouter>,
     document.getElementById('render-target')
   );
-});
+});

imports/ui/AccountsUIWrapper.js

@@ -7,14 +7,14 @@ export default class AccountsUIWrapper extends Component {
   componentDidMount() {
     // Use Meteor Blaze to render login buttons
     this.view = Blaze.render(Template.loginButtons,
-      ReactDOM.findDOMNode(this.refs.container));
+      ReactDOM.findDOMNode(this.container /*updated declaration*/));
   }
   componentWillUnmount() {
     // Clean up Blaze view
     Blaze.remove(this.view);
   }
   render() {
     // Just render a placeholder container that will be filled in
-    return <span ref="container" />;
+    return <span ref={ref => this.container = ref /*Updating deprecated ref declaration*/} />;
   }
-}
+}

imports/ui/App.js

@@ -62,7 +62,7 @@ class App extends Component {
 
   //se utiliza para que un card pueda actulizar el state del APP.JS y poner en su state el id de la publicacion
   //y asi saber qué chat abrir con el botón.
-  chatId(id) {
+  setChatId(id) { /*Se le puede poner un mejor nombre al método*/
     this.setState({
       idChat: id
     });
@@ -75,7 +75,9 @@ class App extends Component {
   renderCards() {
     let filteredViajes = this.props.viajes;
 
-    if (this.state.verLlenos) {
+    //Ver llenos significa mostrar los que tienen cupo y los que no (es decir, mostrar todos)
+    if (!this.state.verLlenos) {
+      //Si no se van a ver los llenos, entonces hay que retornar los que tengan cantidad > 0
       filteredViajes = filteredViajes.filter(viaje => viaje.cantidad > 0);
     }
 
@@ -84,7 +86,7 @@ class App extends Component {
         <CardViaje
           key={viaje._id}
           viaje={viaje}
-          establecerChat={this.chatId}
+          establecerChat={this.setChatId /*Nuevo nombre*/}
           idOwner={this.props.currentUser && this.props.currentUser._id}
         />
       );
@@ -115,7 +117,8 @@ class App extends Component {
                                 readOnly
                                 checked={this.state.verLleno}
                                 onClick={this.toggleVerLlenos}
-                            /> <h5 className="llenos"> Ver viajes llenos</h5>
+                            /> {/* Respetar la jerarquía! 'Ver viajes llenos' no es el encabezado de una sección <h5 className="llenos"> Ver viajes llenos</h5>, también no hay ningún h4 definido, no es correcto saltarse de h3 a h5 */}
+                            <span className="llenos"> Ver viajes llenos</span>
                         </label>
                         : ''}
                 </nav>
@@ -126,7 +129,8 @@ class App extends Component {
                         : ''}
                     <br />
                     {/*boton para entrar en la sala de chats*/}
-                    {this.props.currentUser && (this.state.idChat != null) ?
+                    {/* this.props.currentUser && (this.state.idChat !== null) cuidado usando '!=', se debe usar '!==', tamibén, es más sencillo: */
+                        this.props.currentUser && this.state.idChat ?
                         <div>
                             {this.renderRedirect()}
                             <button type="button" className="btn btn-primary chat btn-lg" onClick={this.setRedirect}>Sala de chat</button>
@@ -160,4 +164,4 @@ export default withTracker(() => {
     viajes: Viajes.find({}, { sort: { createdAt: -1 } }).fetch(),
     currentUser: Meteor.user()
   };
-})(App);
+})(App);

imports/ui/CardMensaje.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 //el card de un mensaje
-export default class CardMensaje extends Component {
+class CardMensaje extends Component {
 
     render() {
         return (
@@ -14,4 +15,11 @@ export default class CardMensaje extends Component {
             </div>
         )
     }
-}
+}
+
+//Set component propTypes
+CardMensaje.propTypes = {
+    mensaje: PropTypes.object.isRequired
+};
+
+export default CardMensaje;

imports/ui/CardViaje.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import { Meteor } from 'meteor/meteor';
+import PropTypes from 'prop-types';
 
 //el card de un viaje
-export default class CardViaje extends Component {
+class CardViaje extends Component {
     constructor(props) {
         super(props);
         this.reservarCupo = this.reservarCupo.bind(this);
@@ -34,10 +35,10 @@ export default class CardViaje extends Component {
                     <li className="list-group-item"><strong>Precio (pesos): </strong>{this.props.viaje.precio}</li>
                 </ul>
                 {/*boton para reservar un cupo*/}
-                {parseInt(this.props.viaje.cantidad, 10) > 0 ?
+                {parseInt(this.props.viaje.cantidad /*más sencillo*/) > 0 ?
                     <div className="card-body">
                         <a href="#" className="btn btn-success" onClick={this.reservarCupo}>Reservar Cupo</a>
-                    </div> : <div className="card-body no_cupos"><h5><strong>No quedan cupos</strong></h5></div>}
+                    </div> : <div className="card-body no_cupos">{/*¡Ojo la jerarquía! (falta un h4)*/}<h5><strong>No quedan cupos</strong></h5></div>}
                 {/*boton para borrar la publicacion*/}
                 {this.props.viaje.owner = this.props.idOwner ?
                     <div className="card-body">
@@ -46,4 +47,11 @@ export default class CardViaje extends Component {
             </div>
         )
     }
-}
+}
+
+CardViaje.propTypes = {
+    viaje: PropTypes.object,
+    establecerChat: PropTypes.func,
+    idOwner: PropTypes.string
+};
+export default CardViaje;

imports/ui/Home.js

@@ -24,7 +24,7 @@ class Home extends Component {
 
     if (this.state.redirectNewCompany) {
       return <Redirect to={{
-        pathname: '/newcompanieform'       
+        pathname: '/newcompanyform'       
       }} />;
     } 
 
@@ -111,13 +111,14 @@ class Home extends Component {
               </div>
             </div>
             <div className="row">
+              {/*Ojo con la jerarquía! no saltarse los h3*/}
               <div className="col-md-4">
                 <div className="info">
                   <div className="icon icon-danger">
                     <i className="fa fa-user-plus"/>
                   </div>
                   <div className="description">
-                    <h4 className="info-title">Register companies and users</h4>
+                    <h3 className="info-title">Register companies and users</h3>
                     <p className="description">Sign up now and start enjoying!</p>
                   </div>
                 </div>
@@ -128,7 +129,7 @@ class Home extends Component {
                     <i className="fas fa-car"></i>
                   </div>
                   <div className="description">
-                    <h4 className="info-title">Share journeys</h4>
+                    <h3 className="info-title">Share journeys</h3>
                     <p className="description">Create carpooling entry and wait for your co-workers to join.</p>
                   </div>
                 </div>
@@ -139,7 +140,7 @@ class Home extends Component {
                     <i className="fas fa-hand-pointer"></i>
                   </div>
                   <div className="description">
-                    <h4 className="info-title">Join journeys</h4>
+                    <h3 className="info-title">Join journeys</h3>
                     <p> Join other`s journey with a single click! </p>
                   </div>
                 </div>
@@ -152,4 +153,4 @@ class Home extends Component {
   }
 }
 
-export default Home;
+export default Home;

imports/ui/InsertarForm.js

@@ -10,16 +10,21 @@ export default class InsertarForm extends Component {
 
     registrarViaje() {
 
+        //¡Se pueden usar refs para evitar esto y queda mucho más simple! 
         const origen = document.getElementById("origen").value;
         const destino = document.getElementById("destino").value;
         const ruta = document.getElementById("routeToTake").value;
         const fecha = document.getElementById("dateLeaving").value;
         const tiempo = document.getElementById("timeLeaving").value;
         const cantidad = document.getElementById("cantidadCupos").value;
         const precio = document.getElementById("precioViaje").value;
-
-        Meteor.call('viajes.insert', origen, destino, ruta, fecha, tiempo, cantidad, precio);
-        this.props.ocultar();
+
+        //No creo que sea buena idea pasarle DOM elements a el servidor (en Node puede ser peligroso manipularlos, porque no hay interfaz gráfica)
+        Meteor.call('viajes.insert', origen, destino, ruta, fecha, tiempo, cantidad, precio, (err) =>{
+            if(err) return alert(err);
+            //Si hay un error, y no se va a ocultar
+            this.props.ocultar(); 
+        });
     }
 
     render() {
@@ -59,4 +64,4 @@ export default class InsertarForm extends Component {
             </form>
         )
     }
-}
+}

imports/ui/MensajeApp.js

@@ -86,6 +86,12 @@ class MensajeApp extends Component {
           {this.renderRedirect()}
           <button className="btn btn-primary inicio btn-lg" onClick={this.setRedirect}>Devolverse</button>
         </div>
+
+        {/*mensajes reenderizados*/}
+        <ul>
+          {this.renderMensajes()}
+        </ul>
+
         {/*el espacio para ingresar un nuevo mensaje*/}
         <form className="new-mensaje container" onSubmit={this.handleSubmit} >
           <input
@@ -94,11 +100,9 @@ class MensajeApp extends Component {
             ref="textInput"
             placeholder="Ingresa nuevos mensajes"
           />
+          {/*No todos van a saber que presionando 'enter' van a poder mandar le mensaje. Deben dejarlo explícito y poner también un botón (a los de celular les puede quedar más fácil)*/}
+          <button type="submit" class="send-message-button">Enviar {/*Puede ponerse también un icono como en whatsapp/messenger*/}</button>
         </form>
-        {/*mensajes reenderizados*/}
-        <ul>
-          {this.renderMensajes()}
-        </ul>
 
       </div>
     );
@@ -117,4 +121,4 @@ export default withTracker(() => {
   return {
     mensajes: Mensajes.find({}, { sort: { createdAt: -1 } }).fetch(),
   };
-})(MensajeApp);
+})(MensajeApp);

imports/ui/NewCompanieForm.js

@@ -42,7 +42,7 @@ export default class NewCompanieForm extends Component {
 
   renderError( )
   {
-    if(this.state.error !== '')
+    if(this.state.error /*así es suficiente*/)
     {
       return(
         <div className="alert">