listing articles with title and thumbnail

components/ListItem.js

@@ -17,17 +17,16 @@ import colors from '../utils/colors';
 
 const placeholder = require('../assets/default.png');
 
-const ListItem = ({ text, imageUrl }) => {
-   const image = (
-      imageUrl ? {uri: imageUrl} : placeholder
+const ListItem = ({ text, image }) => {
+   const imageUrl = (
+      image ? {uri: image} : placeholder
    );
-
    return (
       <TouchableOpacity
          underlayColor={ colors.grey }>
 
          <View style={ styles.mediaObject}>
-            <Image source={ image } style={ styles.image }/>
+            <Image source={ imageUrl } style={ styles.image }/>
             <Text style={ styles.text }> { text }</Text>
          </View>
 

components/Main.js

@@ -13,10 +13,10 @@
    StatusBar,
    View
  } from 'react-native';
-
+import { debounce } from 'lodash';
 import ListItem from './ListItem';
 import colors from '../utils/colors';
-
+import searchFor from '../utils/fetcher';
 export default class Main extends Component {
    constructor(props){
       super(props);
@@ -25,34 +25,47 @@ export default class Main extends Component {
          rowHasChanged: (r1, r2) => r1 !== r2
       });
 
-      const data = ['Spectacles', 'Giraffe', 'Turtle', 'Shark', 'Lamp',
-      'Beef', 'Drawer', 'Brocoli', 'Raspberries', 'Plate', 'Zebra'];
-
-      this.state = { artists: dataSource.cloneWithRows(data) }
+      this.state = { articles: dataSource }
    }
 
-   renderRow = (text, sId, rId) => {
+   renderRow = (article, sId, rId) => {
+      const imageUrl = article.fields.thumbnail ? article.fields.thumbnail : null;
       return (
          <ListItem index={ rId }
-            text={ text }
-            image={ null } />
+            text={ article.webTitle }
+            image={ imageUrl } />
       );
    };
+
    render() {
-      const { artists } = this.state;
+      const { articles } = this.state;
       return (
          <View style={styles.container}>
 
             <StatusBar barStyle="default" />
 
-            <TextInput style={ styles.searchBox } />
+            <TextInput style={ styles.searchBox }
+               onChangeText={ this.makeQuery }
+            />
 
-            <ListView dataSource={ artists }
-               style={{flex:1, alignSelf: 'stretch'}}
+            <ListView dataSource={ articles }
+               style={ styles.listItem }
                renderRow={ this.renderRow } />
          </View>
       );
    }
+
+   makeQuery = debounce(query => {
+      searchFor(query)
+         .then(articles => {
+             this.setState({
+                articles: this.state.articles.cloneWithRows(articles),
+             });
+         })
+         .catch((error) => {
+            throw error;
+         });
+   }, 400);
  }
 
  const styles = StyleSheet.create({
@@ -63,6 +76,10 @@ export default class Main extends Component {
       alignItems: 'center',
       backgroundColor: colors.white
    },
+   listItem: {
+      flex:1,
+      alignSelf: 'stretch'
+   },
    searchBox: {
      height: 40,
      borderColor: colors.black,

package.json

@@ -6,6 +6,7 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
+    "lodash": "^4.13.1",
     "react": "15.0.2",
     "react-native": "0.26.3"
   }

utils/fetcher.js

@@ -0,0 +1,15 @@
+export default function get(url){
+  return fetch(url)
+    .then((response) => response.json());
+}
+
+export default function searchFor(query){
+  const requestUrl = (
+    `http://content.guardianapis.com/search?show-elements=all&show-fields=all&q=${ query }&type=article&api-key=GUARDIAN-API-KEY&order-by=newest`
+  );
+  return get(requestUrl)
+    .then( (res) => {
+      const results = res.response.results ? res.response.results : [];
+      return results;
+    });
+}