Added ListView

Author: Marco Sciuto

App.js

@@ -5,7 +5,7 @@ import ShoppingList from './src/components/ShoppingList';
 import Header from './src/components/Header';
 
 
-export default class App extends Component {  
+export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>

src/components/OrderItem.js

@@ -40,7 +40,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    borderWidth: 1,
     height: 200
   }
 });

src/components/ProductDetail.js

@@ -22,8 +22,8 @@ ProductDetail.propTypes = {
 
 const styles = StyleSheet.create({
   wrapper: {
-    borderWidth: 1,
-    flex: 2
+    flex: 1,
+    justifyContent: 'center'
   },
   title: {
     fontSize: 16,

src/components/QuantityManager.js

@@ -41,13 +41,12 @@ export default QuantityManager;
 
 const styles = StyleSheet.create({
   wrapper: {
-    borderWidth: 1,
     flex: 1,
-    justifyContent: 'center'
+    alignItems: 'center'
   },
   buttons: {
-    flexDirection: 'row',
-    borderWidth: 1,
+    width: 50,
+    flex: 1,
     justifyContent: 'center'
   }
 });

src/components/ShoppingList.js

@@ -1,58 +1,75 @@
 import React, { Component } from 'react';
-import { StyleSheet, ScrollView, View } from 'react-native';
+import { StyleSheet, View, ListView } from 'react-native';
 import OrderItem from './OrderItem';
 import Total from './Total';
 
 class ShoppingList extends Component {
   //state = { total: 0 };
   constructor(props) {
     super(props);
-    /*this.ds = new ListView.DataSource({
+    this.ds = new ListView.DataSource({
       rowHasChanged: (r1, r2) => r1.title !== r2.title
-    });*/
-    this.state = { total: 0 };
+    });
+    this.state = {
+      total: 0,
+      dataSource: this.ds.cloneWithRows([]),
+    };
+  }
+  /*<OrderItem
+    img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
+    title="BUH"
+    desc="buh"
+    price={25.36}
+    onQuantityUpdate={this.updateTotal.bind(this)}
+  />
+  <OrderItem
+    img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
+    title="BUH"
+    desc="buh"
+    price={25.36}
+    onQuantityUpdate={this.updateTotal.bind(this)}
+  />
+  <OrderItem
+    img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
+    title="BUH"
+    desc="buh"
+    price={25.36}
+    onQuantityUpdate={this.updateTotal.bind(this)}
+  />
+  <OrderItem
+    img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
+    title="BUH"
+    desc="buh"
+    price={25.36}
+    onQuantityUpdate={this.updateTotal.bind(this)}
+  />*/
+  componentWillMount() {
+    fetch('https://www.dmi.unict.it/~calanducci/LAP2/data.json',
+      { headers: { 'Cache-Control': 'no-cache' } }
+    )
+    .then(response => response.json())
+    .then(responseData => this.setState({ dataSource: this.ds.cloneWithRows(responseData.items) }))
+    .catch(error => alert('Errore caricando file json', error));
   }
-
   updateTotal(amount) {
       this.setState({ total: this.state.total + amount });
   }
-
   render() {
     return (
       <View style={styles.wrapper}>
         <Total total={this.state.total} />
-        <ScrollView>
-
-          <OrderItem
-            img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
-            title="BUH"
-            desc="buh"
-            price={25.36}
-            onQuantityUpdate={this.updateTotal.bind(this)}
-          />
-          <OrderItem
-            img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
-            title="BUH"
-            desc="buh"
-            price={25.36}
-            onQuantityUpdate={this.updateTotal.bind(this)}
-          />
-          <OrderItem
-            img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
-            title="BUH"
-            desc="buh"
-            price={25.36}
-            onQuantityUpdate={this.updateTotal.bind(this)}
-          />
-          <OrderItem
-            img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
-            title="BUH"
-            desc="buh"
-            price={25.36}
-            onQuantityUpdate={this.updateTotal.bind(this)}
-          />
-
-        </ScrollView>
+        <ListView
+          enableEmptySections
+          dataSource={this.state.dataSource}
+          renderRow={row =>
+            <OrderItem
+              img={row.thumbnailUrl}
+              title={row.title}
+              desc={row.description}
+              price={row.price}
+              onQuantityUpdate={this.updateTotal.bind(this)}
+            />}
+        />
       </View>
     );
   }