Merge pull request #25 from dijonkitchen/feat-offline

[Feature]: Offline reading
dijonkitchen · Jun 5, 2017 · 867ba4f · 867ba4f
2 parents 9b4c04f + 864d668
commit 867ba4f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 18 deletions.
diff --git a/components/ShortStory.js b/components/ShortStory.js
@@ -24,7 +24,7 @@ export default class ShortStory extends React.Component {
       <TouchableHighlight
         onPress={() => navigate('Story', { data })}
       >
-        <View>
+        <View style={styles.whiteBg}>
           <View style={styles.container}>
             <Image
               style={styles.thumbnails}
@@ -48,6 +48,9 @@ ShortStory.navigationOptions = {
 };
 
 const styles = StyleSheet.create({
+  whiteBg: {
+    backgroundColor: 'white',
+  },
   container: {
     flex: 1,
     flexDirection: 'row',

diff --git a/components/Stories.js b/components/Stories.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import {
-  StyleSheet,
   ListView,
+  AsyncStorage,
+  RefreshControl,
 } from 'react-native';
 
 import ShortStory from './ShortStory';
@@ -14,32 +15,59 @@ export default class Stories extends React.Component {
     });
     this.state = {
       stories: ds.cloneWithRows([]),
+      refreshing: false,
     };
   }
 
   componentDidMount() {
     this.queryFeed();
   }
 
-  queryFeed() {
+  async queryFeed() {
+    try {
+      const stories = await AsyncStorage.getItem('stories');
+      if (stories !== null) {
+        this.setState({
+          stories: this.state.stories.cloneWithRows(JSON.parse(stories)),
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
     fetch("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D'http%3A%2F%2Ffeeds.reuters.com%2Freuters%2FMostRead'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys")
       .then(response => response.json())
       .then((responseJson) => {
         const mostRead = responseJson.query.results.item;
-        // console.log(mostRead[0])
         this.setState({
           stories: this.state.stories.cloneWithRows(mostRead),
         });
+        this.storeFeed(mostRead);
       })
       .catch((error) => {
-        console.error(error)
+        console.error(error);
       });
   }
 
+  async storeFeed(stories) {
+    try {
+      await AsyncStorage.setItem('stories', JSON.stringify(stories))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  _onRefresh() {
+    this.setState({ refreshing: true });
+    this.queryFeed().then(() => {
+      this.setState({ refreshing: false });
+    });
+  }
+
   render() {
     return (
       <ListView
-        style={styles.container}
+        enableEmptySections
         dataSource={this.state.stories}
         renderRow={(rowData) => {
           return (
@@ -49,6 +77,12 @@ export default class Stories extends React.Component {
             />
           );
         }}
+        refreshControl={
+          <RefreshControl
+            refreshing={this.state.refreshing}
+            onRefresh={this._onRefresh.bind(this)}
+          />
+        }
       />
     );
   }
@@ -57,9 +91,3 @@ export default class Stories extends React.Component {
 Stories.navigationOptions = {
   title: 'Stories',
 };
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 15,
-  },
-});
diff --git a/components/__tests__/__snapshots__/ShortStory.test.js.snap b/components/__tests__/__snapshots__/ShortStory.test.js.snap
@@ -27,7 +27,13 @@ exports[`ShortStory component renders correctly 1`] = `
   testID={undefined}
   tvParallaxProperties={undefined}
 >
-  <View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "white",
+      }
+    }
+  >
     <View
       style={
         Object {

diff --git a/components/__tests__/__snapshots__/Stories.test.js.snap b/components/__tests__/__snapshots__/Stories.test.js.snap
@@ -7,14 +7,17 @@ exports[`Stories component renders correctly 1`] = `
       "items": 0,
     }
   }
+  enableEmptySections={true}
+  refreshControl={
+    <RefreshControlMock
+      onRefresh={[Function]}
+      refreshing={false}
+    />
+  }
   renderRow={[Function]}
   renderScrollComponent={[Function]}
-  style={
-    Object {
-      "margin": 15,
-    }
-  }
 >
+  <RCTRefreshControl />
   <View />
 </RCTScrollView>
 `;