styling+sort clases

src/Router.js

@@ -9,12 +9,12 @@ const RouterComponent = () => {
 	return (
 		<Router sceneStyle={{ paddingTop: 55 }}>
 			<Scene key="auth">
-				<Scene key="login" component={LoginForm} title="Please Login" initial />
+				<Scene key="login" component={LoginForm} title="Ingresar" initial />
 			</Scene>
 
 			<Scene key="main">
-				<Scene key="ListaCursadas" component={ListaCursadas} />
-				<Scene key="ViewCursada" component={Cursada} />
+				<Scene key="ListaCursadas" component={ListaCursadas} title="Cursadas" />
+				<Scene key="ViewCursada" component={Cursada} title="Clases" />
 				<Scene key="Live" component={LiveVideo} />
 			</Scene>
 		</Router>

src/actions/AuthActions.js

@@ -37,7 +37,6 @@ export const loginUser = ({ email, password }) => {
     })
     .then( (response) => response.json() )
       .then( (responseJson) => {
-        console.log(responseJson);
         loginUserSuccess(dispatch, responseJson);
       });
   //FIXME: Catch

src/actions/CursadaActions.js

@@ -5,10 +5,7 @@ import {
 } from './types';
 
 export const cursadasFetch = () => {
-	//const { currentUser } = firebase.auth();
-  console.log("Fetching cursadas?");
 	return (dispatch) => {
-    console.log("Fetching cursadas!");
     fetch('https://plataforma.especificosba.com.ar/back/listaCursos.php', {
       method: 'POST',
       headers: {
@@ -31,7 +28,7 @@ export const cursadasFetch = () => {
 };
 
 export const cursadaFetch = ({_id}) => {
-	console.log({_id});
+	console.log("Fetching",_id);
 	return (dispatch) => {
 		fetch('https://plataforma.especificosba.com.ar/back/getCourse.php', {
       method: 'POST',
@@ -45,7 +42,6 @@ export const cursadaFetch = ({_id}) => {
     })
     .then( (response) => response.json() )
       .then( (responseJson) => {
-        console.log("cursadita",responseJson);
         dispatch({
           type: CURSADA_FETCH_SUCCESS,
           payload: responseJson

src/components/Cursada.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { Text, ListView, View } from 'react-native';
 import { connect } from 'react-redux';
 import { cursadaFetch } from '../actions/';
-import { Card, CardSection } from './common';
+import { Card, CardSection, Button } from './common';
 
 class Cursada extends Component  {
 
@@ -14,20 +14,46 @@ class Cursada extends Component  {
 	componentWillReceiveProps(nextProps) {
 		this.createDataSource(nextProps);
 	}
-  createDataSource({cursada}){
-    const { clases } = cursada;
+  createDataSource({clases}){
     const ds = new ListView.DataSource({
       rowHasChanged: (r1,r2) => r1 !== r2
     });
     this.dataSource = ds.cloneWithRows(clases);
-  }
+	}
+
+	renderButton(data) {
+		if (data.desactivada){
+			return <View />;
+		}
+		return (
+			<CardSection>
+				<Button>Ingresar</Button>
+			</CardSection>
+		);
+	}
 
   renderRow(data) {
+    const fecha = new Date(data.fecha).toDateString();
 		return (
-      <CardSection>
-        <Text>{data.titulo}</Text>
-      </CardSection>
+      <Card>
+        <CardSection>
+          <Text>{data.titulo}</Text>
+        </CardSection>
+
+        <CardSection>
+          <Text style={{flex:1}}>Profesor:</Text>
+          <Text style={{flex:1}}>{data.profesor.nombre} {data.profesor.apellido}</Text>
+        </CardSection>
+
+        <CardSection>
+          <Text style={{flex:1}}>Fecha:</Text>
+          <Text style={{flex:1}}>{fecha}</Text>
+        </CardSection>
+
+				{this.renderButton(data)}
+      </Card>
     );
+    //<Text>{data.profesor._id}</Text>
 	}
 
 	render() {
@@ -35,20 +61,26 @@ class Cursada extends Component  {
 		return (
       <View>
         <CardSection>
-          <Text style={{fontSize:18}}>{cursada.titulo}</Text>
+          <Text style={{textAlign:'center', flex: 1, fontSize:18}}>{cursada.titulo}</Text>
         </CardSection>
         <ListView
           enableEmptySections
           dataSource={this.dataSource}
-          renderRow={this.renderRow}
+          renderRow={this.renderRow.bind(this)}
         />
+
       </View>
 		);
 	}
 };
 
 const mapStateToProps = state => {
-	return { cursada: state.cursadasR.curCursada };
+  const { curCursada } = state.cursadasR;
+  const clases = _.partition(curCursada.clases, n => n.desactivada);
+	const inactivas = _.sortBy(clases[0], [ o => new Date(o.fecha) ]);
+	const activas = _.reverse(_.sortBy(clases[1], [ o => new Date(o.fecha) ]));
+
+	return { cursada: curCursada, clases: _.concat(activas,inactivas) };
 };
 
 export default connect(mapStateToProps, { cursadaFetch })(Cursada);

src/components/ItemCursada.js

@@ -1,16 +1,17 @@
 import React, { Component } from 'react';
-import { Text, ScrollView } from 'react-native';
+import { Text, ScrollView, View } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 import { Button, Card, CardSection } from './common';
 
 class ItemCursada extends Component {
   onRowPress(){
-    //console.log(this.props.data); //_id
     Actions.ViewCursada( { _id: this.props.data._id } );
   }
 
   render() {
     const { data } = this.props;
+    const horaIni = (new Date(data.horaIni)).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+    const horaFin = (new Date(data.horaFin)).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
     return (
       <ScrollView>
         <Card>
@@ -20,15 +21,18 @@ class ItemCursada extends Component {
             </Text>
           </CardSection>
 
-          <CardSection>
-            <Text>{data.descCorta}</Text>
-            <Text>Mas info</Text>
+          <CardSection style={{flexDirection: 'column'}}>
+            <View>
+              <Text>{data.descCorta}</Text>
+            </View>
+            <View>
+              <Text style={{fontWeight:'700'}}>Mas info</Text>
+            </View>
           </CardSection>
 
           <CardSection>
-            <Text>{data.dia}</Text>
-            <Text>Mostrar como hora ajustado a zona</Text>
-            <Text>{data.horaIni} a {data.horaFin}</Text>
+            <Text style={{flex:1}}>{data.dia}</Text>
+            <Text style={{flex:2}}>{horaIni} a {horaFin}</Text>
           </CardSection>
 
           <CardSection>
@@ -45,7 +49,9 @@ class ItemCursada extends Component {
 const styles = {
   titleStyle: {
     fontSize: 18,
-    paddingLeft: 15
+    paddingLeft: 15,
+    textAlign: 'center',
+    flex: 1
   }
 };