respuestas para comentarios

src/scenes/Clase/Comentarios.js

@@ -17,19 +17,50 @@ class Comentarios extends Component {
     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);
+
+    let c = comentarios.map(function(el) {
+      el.respuestas = respuestas.filter(function(r){
+        return (r.parent == el._id);
+      })
+      return el;
+    });
+    console.log(c);
+    this.dataSource = ds.cloneWithRows(c);
 	}
 
+  imageUri(id) {
+    return `https://plataforma.especificosba.com.ar/images/perfiles/${id}.jpg`;
+  }
+
+  renderRespuesta(item, key) {
+    return (
+      <View key={item._id} style={{flex:1}}>
+        <View style={{flexDirection: 'row'}}>
+          <Image resizeMode='contain' source={{ uri: this.imageUri(item.userid) }} style={{flex:1, height:40}}/>
+          <View style={{flex:2, justifyContent: 'center', alignItems:'center'}}>
+            <Text>{item.nombreUsuario}</Text>
+            <Text>{item.fecha}</Text>
+          </View>
+        </View>
+        <CardSection>
+          <Text>{item.texto}</Text>
+        </CardSection>
+      </View>
+    );
+  }
   renderComentario(item) {
-    const uri = `https://plataforma.especificosba.com.ar/images/perfiles/${item.userid}.jpg`;
-    //respuestas.$.parent == comentario._id
+    const uri = this.imageUri(item.userid);
+
+    let Arr = item.respuestas.map( el => {
+      return this.renderRespuesta(el);
+    });
+    if ( Arr != undefined && Arr.length > 0 ) {
+      Arr = (
+        <CardSection style={{backgroundColor:'#eef'}}>
+          {Arr}
+        </CardSection>);
+    }
+
     return (
       <Card>
 
@@ -44,6 +75,8 @@ class Comentarios extends Component {
         <CardSection>
           <Text>{item.texto}</Text>
         </CardSection>
+
+        {Arr}
       </Card>
     );
   }
@@ -52,7 +85,7 @@ class Comentarios extends Component {
     return (
       <Card>
         <CardSection>
-          <Text style={{backgroundColor:'red',justifyContent:'center'}}>
+          <Text style={{justifyContent:'center'}}>
             Dejar un comentario
           </Text>
         </CardSection>
@@ -69,32 +102,29 @@ class Comentarios extends Component {
       </Card>
   );
   }
-  renderList() {
+  render() {
     if (this.props.comentarios === undefined ||
         this.props.comentarios.length == 0 ) {
           return (
             <View style={{margin:10}}>
+              {this.renderNewComment()}
               <Text style={{fontSize:14,alignSelf:'center'}}>
                 Aún no hay comentarios
               </Text>
-              {this.renderNewComment()}
             </View>
           );
     }
 
     return (
-        <ListView
-          enableEmptySections
-          dataSource={this.dataSource}
-          renderRow={this.renderComentario.bind(this)}
-          style={{flex:1, marginBottom:50}}
-          />
+          <ListView
+            enableEmptySections
+            renderHeader={this.renderNewComment}
+            dataSource={this.dataSource}
+            renderRow={this.renderComentario.bind(this)}
+            />
 		);
   }
-	render() {
-		//console.log("teoria", this.props);
-		return this.renderList();
-	}
+
 }
 
 export default Comentarios;