refactor to use tabs + comments

package.json

@@ -12,6 +12,7 @@
     "react": "15.3.2",
     "react-native": "0.37.0",
     "react-native-router-flux": "^3.37.0",
+    "react-native-tabs": "^1.0.9",
     "react-native-video": "^0.9.0",
     "react-redux": "^4.4.6",
     "redux": "^3.6.0",

src/Router.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View, Text } from 'react-native';
 import { Scene, Router, Actions } from 'react-native-router-flux';
 import RegisterForm from './components/RegisterForm';
 import LoginForm from './components/LoginForm';
@@ -10,6 +11,7 @@ import Profesor from './components/Profesor';
 
 const scenes = Actions.create(
 	<Scene key="container">
+
 		<Scene key="auth">
 			<Scene key="login" component={LoginForm} title="Ingresar" initial />
 			<Scene key="register" component={RegisterForm} title="Registrarse" />
@@ -22,6 +24,7 @@ const scenes = Actions.create(
 			<Scene key="ViewProf" component={Profesor} title="Profesor" />
 			<Scene key="Live" component={LiveVideo} />
 		</Scene>
+
 	</Scene>
 );
 

src/actions/CursadaActions.js

@@ -19,7 +19,6 @@ export const cursadasFetch = () => {
     })
     .then( (response) => response.json() )
       .then( (responseJson) => {
-        console.log(responseJson);
         dispatch({
           type: CURSADAS_FETCH_SUCCESS,
           payload: responseJson

src/components/Clase.js

@@ -1,56 +1,62 @@
-import _ from 'lodash';
 import React, { Component } from 'react';
-import { Text, WebView, ScrollView, View, TouchableOpacity } from 'react-native';
+import { View, Text } from 'react-native';
+import { Scene } from 'react-native-router-flux'
 import { connect } from 'react-redux';
-import { Actions } from 'react-native-router-flux';
+import Tabs from 'react-native-tabs';
+
 import { claseFetch } from '../actions/';
-import { Card, CardSection, Button } from './common';
+import Teoria from './Clase/Teoria';
+import Comentarios from './Clase/Comentarios';
 
-class Clase extends Component  {
+class Clase extends Component {
+  state = { page: 'Teoria' };
 
-	componentWillMount() {
+  componentWillMount() {
     this.props.claseFetch(this.props);
 	}
 
-	render() {
+  renderView() {
+    const { titulo, profesor, texto, comentarios, respuestas } = this.props.clase;
+    if ( this.state.page === 'Teoria' )
+      return <Teoria titulo={titulo} profesor={profesor} texto={texto} />;
+
+    if ( this.state.page === 'Comentarios' )
+      return <Comentarios comentarios={comentarios} respuestas={respuestas} />;
+
+    return <Text>{this.state.page}!!!</Text>;
+  }
+  render() {
     const { clase } = this.props;
-    console.log("props", this.props);
-		return (
-			<ScrollView>
-	      <Card>
-	        <CardSection>
-	          <Text>{clase.titulo}</Text>
-	        </CardSection>
-
-	        <CardSection>
-						<TouchableOpacity onPress={() => Actions.ViewProf({ id: clase.profesor._id})}>
-							<Text style={{flex:1, color: '#007aff', fontWeight: '600'}}>
-								{clase.profesor.nombre} {clase.profesor.apellido}
-							</Text>
-						</TouchableOpacity>
-	        </CardSection>
-
-	        <CardSection>
-	            <WebView
-	              style={{height:1700}}
-	              scalesPageToFit={true}
-	              javaScriptEnabled={false}
-	              source={{html: clase.texto}} />
-	        </CardSection>
-	        <CardSection>
-	          <Text>
-	            Comentarios
-	          </Text>
-	        </CardSection>
-	      </Card>
-			</ScrollView>
-		);
-	}
+    console.log(clase);
+
+    return (
+      <View style={styles.container}>
+        <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
+          selectedStyle={{fontWeight:"700"}}
+          onSelect={ el => {
+            this.setState({ page: el.props.name })
+          } }>
+          <Text name="Teoria">Teoria</Text>
+          <Text name="Videos">Videos</Text>
+          <Text name="Comentarios">Comentarios</Text>
+        </Tabs>
+        {this.renderView()}
+      </View>
+    );
+  }
+};
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  }
 };
 
 const mapStateToProps = state => {
   const { curClase } = state.cursadasR;
-  console.log("State:", state);
 	return { clase: curClase };
 };
 

src/components/Clase/Comentarios.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Text, ListView, View, TouchableOpacity, Image } from 'react-native';
+import { Actions } from 'react-native-router-flux';
+import { Card, CardSection, Button } from '../common';
+
+class Comentarios extends Component {
+
+  componentWillMount() {
+    this.createDataSource(this.props);
+	}
+
+	componentWillReceiveProps(nextProps) {
+		this.createDataSource(nextProps);
+	}
+
+  createDataSource({comentarios, respuestas}){
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1,r2) => r1 !== r2
+    });
+    console.log(respuestas);
+    //for c in comentarios:
+    //  c.respuestas = [];
+    //  for r in respuestas:
+    //    if r.parent == c._id:
+    //      c.push(r)
+
+    this.dataSource = ds.cloneWithRows(comentarios);
+	}
+
+  renderComentario(item) {
+    const uri = `https://plataforma.especificosba.com.ar/images/perfiles/${item.userid}.jpg`;
+    //respuestas.$.parent == comentario._id
+    return (
+      <Card>
+
+        <CardSection>
+          <Image resizeMode='contain' source={{ uri }} style={{flex:1, height:70}}/>
+          <View style={{flex:2, justifyContent: 'center', alignItems:'center'}}>
+            <Text style={{alignSelf:'center'}}>{item.nombreUsuario}</Text>
+            <Text style={{alignSelf:'center'}}>{item.fecha}</Text>
+          </View>
+        </CardSection>
+
+        <CardSection>
+          <Text>{item.texto}</Text>
+        </CardSection>
+      </Card>
+    );
+  }
+	render() {
+		//console.log("teoria", this.props);
+		return (
+        <ListView
+          dataSource={this.dataSource}
+          renderRow={this.renderComentario.bind(this)}
+          style={{flex:1, marginBottom:50}}
+          />
+		);
+	}
+}
+
+export default Comentarios;

src/components/Clase/Teoria.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Text, WebView, View, TouchableOpacity } from 'react-native';
+import { Actions } from 'react-native-router-flux';
+import { Card, CardSection, Button } from '../common';
+
+class Teoria extends Component {
+	render() {
+		//console.log("teoria", this.props);
+		return (
+			<View style={{flex:1}}>
+        <CardSection>
+          <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>
+					</TouchableOpacity>
+        </CardSection>
+
+        <CardSection>
+            <WebView
+              style={{height:400}}
+              scalesPageToFit={true}
+              javaScriptEnabled={false}
+              source={{html: this.props.texto}} />
+        </CardSection>
+			</View>
+		);
+	}
+}
+
+export default Teoria;

src/reducers/RegisterReducer.js

@@ -22,7 +22,6 @@ const INITIAL_STATE = {
 };
 
 export default (state = INITIAL_STATE, action) => {
-  console.log("reg reducer", action);
   switch(action.type) {
     case PROP_CHANGED:
       const { key, val } = action.payload;