multiple profs + classlist

src/actions/CursadaActions.js

@@ -25,7 +25,6 @@ export const cursadasFetch = () => {
 			});
 		})
 		.catch((error) => {
-			console.log(error);
 			dispatch({ type: CURSADAS_FETCH_FAIL, payload: error });
 		});
 	};

src/components/common/ClassCard.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+const ClassCard = (props) => {
+  return (
+    <View style={styles.containerStyle}>
+      {props.children}
+    </View>
+  );
+
+};
+
+const styles = {
+  containerStyle: {
+    borderBottomWidth: 0,
+	borderRadius: 5,
+	marginBottom: 5,
+    marginLeft: 5,
+    marginRight: 5,
+	padding: 5,
+	backgroundColor: '#fff'
+  }
+};
+export {ClassCard};

src/components/common/index.js

@@ -1,5 +1,6 @@
 //import { Header, Button, CardSection, Card } from './components/common';
 export * from './Button';
+export * from './ClassCard';
 export * from './Card';
 export * from './CardSection';
 export * from './Header';

src/scenes/Clase/Teoria.js

@@ -4,20 +4,29 @@ import { Actions } from 'react-native-router-flux';
 import { Card, CardSection, Button } from '../../components/common';
 
 class Teoria extends Component {
+	renderProf(p) {
+		if (!Array.isArray(p))
+			p = [ p ];
+		return p.map( e => {
+			<Text key={e._id} style={{ color: '#007aff', fontWeight: '600' }}>
+				{e.nombre} {e.apellido}
+			</Text>
+		});
+	}
+
 	render() {
 		//console.log('teoria', this.props);
+
 		return (
 			<View style={{ flex: 1 }}>
 		        <CardSection>
-		          <Text>{ this.props.titulo}</Text>
+		          <Text>{this.props.titulo}</Text>
 		        </CardSection>
 
 		        <CardSection>
 					<TouchableOpacity onPress={() => Actions.ViewProf({ id: this.props.profesor._id})}>
 						<Text>Profesor: </Text>
-						<Text style={{ color: '#007aff', fontWeight: '600' }}>
-							{ this.props.profesor.nombre} { this.props.profesor.apellido}
-						</Text>
+						{this.renderProf(this.props.profesor)}
 					</TouchableOpacity>
 		        </CardSection>
 

src/scenes/Cursada/ItemCursada.js

@@ -65,7 +65,7 @@ const styles = {
 	},
 	icons: {
 		fontSize: 18,
-		marginRight: 10
+		marginRight: 5
 	},
 	iconRowText: {
 		fontSize: 12

src/scenes/LSListaClases.js

@@ -34,6 +34,20 @@ class LSListaClases extends Component {
 		);
 	}
 
+	renderProf(p) {
+		if (!Array.isArray(p))
+			p = [p];
+		console.log("lslista, p", p);
+		const out = p.map(e => {
+			return (
+				<Text key={e._id} style={{ flex: 1, fontWeight: '600' }}>
+					{e.nombre} {e.apellido}
+				</Text>
+			);
+		});
+		console.log(out);
+		return out;
+	}
 	renderRow(data) {
 		const moment = require('moment');
 
@@ -47,9 +61,7 @@ class LSListaClases extends Component {
 
 				<CardSection>
 					<Text style={{ flex: 1 }}>Profesor:</Text>
-					<Text style={{ flex: 1, fontWeight: '600' }}>
-						{data.profesor.nombre} {data.profesor.apellido}
-					</Text>
+					{this.renderProf(data.profesor)}
 				</CardSection>
 
 				<CardSection>

src/scenes/ListaClases.js

@@ -4,10 +4,11 @@ import { Image, Text, ListView, View, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
 import { Actions } from 'react-native-router-flux';
 import { cursadaFetch } from '../actions/';
-import { Card, CardSection, Button, ConnectionError } from '../components/common/';
-import { Spinner } from '../components/common/';
+import { ClassCard, Card, CardSection, Button } from '../components/common/';
+import MyActionButton from '../components/ActionButton';
+import { ConnectionError } from '../components/common';
 
-class ListaClases extends Component {
+class ListaClases extends Component  {
 	componentWillMount() {
 		this.props.cursadaFetch(this.props);
 		this.createDataSource(this.props);
@@ -15,88 +16,91 @@ class ListaClases extends Component {
 	componentWillReceiveProps(nextProps) {
 		this.createDataSource(nextProps);
 	}
+	createDataSource({clases}){
+		const ds = new ListView.DataSource({
+			rowHasChanged: (r1,r2) => r1 !== r2
+		});
+		this.dataSource = ds.cloneWithRows(clases);
+	}
 
-	onClassPress(cursada, id) {
-		Actions.ViewClase({ cursada, _id: id });
+	onClassPress(cursada,id) {
+		Actions.ViewClase({ cursada, _id:id });
 	}
 
-	onProfPress(id) {
+	onProfPress(id){
 		Actions.ViewProf({ id });
 	}
 
-	createDataSource({ clases }) {
-		const ds = new ListView.DataSource({
-			rowHasChanged: (r1, r2) => r1 !== r2
+	renderProf(prof) {
+		return prof.map(p => {
+			return (
+				<Text key={p._id} style={{color: '#6281A2', fontWeight: '600'}}>
+					{p.nombre} {p.apellido}
+				</Text>
+			);
 		});
-		this.dataSource = ds.cloneWithRows(clases);
 	}
-
 	renderRow(data) {
 		const moment = require('moment');
 		const calendar = require('../../img/listaClases/calendario.png');
 		const professor = require('../../img/listaClases/profesor.png');
 
 		const fecha = moment(data.fecha).local().format('DD/MM/YY');
-
 		return (
-			<TouchableOpacity
-				onPress={() => { data.desactivada ? null : this.onClassPress(this.props._id, data._id)}}
-			>
-			<Card style={{backgroundColor:'#fff'}}>
-				<CardSection>
-					<Text style={{fontSize:15}}>{data.titulo}</Text>
-				</CardSection>
+		  	<TouchableOpacity onPress={ () => this.onClassPress(this.props._id, data._id)}>
+		      <ClassCard>
+                  <CardSection>
+                          <Text style={{fontSize:15}}>{data.titulo}</Text>
+                  </CardSection>
 
-				<CardSection>
-					<View style={{ flex: 1, flexDirection: 'row' }}>
-						<Image source={calendar} style={{marginRight:10,height:20}} resizeMode='contain' />
-						<Text style={{ color: '#6281A2' }}>{fecha}</Text>
-					</View>
-					<View style={{ flex: 1, flexDirection: 'row' }}>
-						<Image source={professor} style={{marginRight:10,height:20}} resizeMode='contain' />
-						<Text style={{ color: '#6281A2' }}>
-							{data.profesor.nombre} {data.profesor.apellido}
-						</Text>
-					</View>
-				</CardSection>
-			</Card>
+                  <CardSection>
+                      <View style={{ flex: 1, flexDirection: 'row' }}>
+                          <Image source={calendar} style={{marginRight:10,height:20}} resizeMode='contain' />
+                          <Text style={{ color: '#6281A2' }}>{fecha}</Text>
+                      </View>
+                      <View style={{ flex: 1, flexDirection: 'row' }}>
+                          <Image source={professor} style={{marginRight:10,height:20}} resizeMode='contain' />
+						  <View style={{ flex: 1, flexDirection: 'column' }}>
+	                          {this.renderProf(data.profesor)}
+						  </View>
+                      </View>
+                  </CardSection>
+		      </ClassCard>
 			</TouchableOpacity>
-		);
+    	);
 	}
 
 	render() {
-		const { cursada } = this.props;
+	    const { cursada } = this.props;
 		if (cursada.error) {
 			return <ConnectionError />;
 		}
-		if (cursada.loading) {
-			return <Spinner style={{flex:1}} />;
-		}
+
 		return (
-			<View style={{ flex: 1 }}>
-				<CardSection>
-					<Text style={{ textAlign: 'center', flex: 1, fontSize: 18 }}>{cursada.titulo}</Text>
-				</CardSection>
-				<ListView
-				enableEmptySections
-				dataSource={this.dataSource}
-				renderRow={this.renderRow.bind(this)}
-				style={{backgroundColor:'#eee'}}
-				/>
-			</View>
+      <View style={{flex:1}}>
+        <CardSection>
+          <Text style={{textAlign:'center', flex: 1, fontSize: 18}}>{cursada.titulo}</Text>
+        </CardSection>
+        <ListView
+          enableEmptySections
+          dataSource={this.dataSource}
+          renderRow={this.renderRow.bind(this)}
+		  style={{ backgroundColor: '#eee', paddingTop: 5 }}
+        />
+		<MyActionButton />
+      </View>
 		);
 	}
-}
+};
 
 const mapStateToProps = state => {
 	const moment = require('moment');
-
 	const { curCursada } = state.cursadasR;
 	const clases = _.partition(curCursada.clases, n => n.desactivada);
-	const inactivas = _.sortBy(clases[0], [o => moment(o.fecha).toDate()]);
-	const activas = _.reverse(_.sortBy(clases[1], [o => moment(o.fecha).toDate()]));
+	const inactivas = _.sortBy(clases[0], [ o => moment(o.fecha).toDate() ]);
+	const activas = _.reverse(_.sortBy(clases[1], [ o => moment(o.fecha).toDate() ]));
 
-	return { cursada: curCursada, clases: _.concat(activas, inactivas) };
+	return { cursada: curCursada, clases: _.concat(activas,inactivas) };
 };
 
 export default connect(mapStateToProps, { cursadaFetch })(ListaClases);