Loading pics from imgur

.babelrc

@@ -1,3 +1,3 @@
 {
-"presets": ["react-native", "react-native-stage-0/decorator-support"]
+"presets": ["react-native", "latest", "react-native-stage-0/decorator-support"]
 }

Constants.js

@@ -1,8 +1,5 @@
 
-const LANDSCAPE = 'LANDSCAPE',
-      PORTRAIT = 'PORTRAIT'
+export const CLIENT_ID = '80872e55c11d61b';
 
-export {
-    LANDSCAPE,
-    PORTRAIT
-}
+export const LANDSCAPE = 'LANDSCAPE';
+export const PORTRAIT = 'PORTRAIT';

Store.js

@@ -1,21 +1,56 @@
 
 
-import { observable, action } from 'mobx';
-import { PORTRAIT } from './Constants';
+import { observable, action, computed } from 'mobx';
+import fetch from 'better-fetch';
+
+import { PORTRAIT, CLIENT_ID } from './Constants';
+
+
+const IMGUR_URL = 'https://api.imgur.com/3/';
+
+fetch.setDefaultHeaders({
+    Authorization: `Client-ID ${CLIENT_ID}`
+});
 
 class Store {
     @observable orientation = PORTRAIT;
+    @observable images = [];
+    @observable index = 0;
+    @observable galleryPage = 0;
 
     @action changeOrientation(orientation) {
         this.orientation = orientation;
     }
 
     @action prevImage() {
-        console.log('previous');
+        this.index = this.index - 1;
+
+        if (this.index < 1) {
+            this.index = 0;
+        }
     }
 
     @action nextImage() {
-        console.log('next');
+        this.index = this.index + 1;
+
+        if (this.index > this.images.length) {
+            this.galleryPage = this.galleryPage+1;
+            this.fetchImages();
+        }
+    }
+
+    @action fetchImages() {
+        fetch(`${IMGUR_URL}gallery/hot/viral/${this.galleryPage}.json`)
+          .then(fetch.throwErrors)
+          .then(res => res.json())
+          .then(json => {
+              json.data.forEach(img => this.images.push(img));
+          })
+          .catch(err => console.log('ERROR', err.message));
+    }
+
+    @computed get currentImage() {
+        return this.images.length ? this.images[this.index] : null;
     }
 }
 

components/Carousel.js

@@ -7,9 +7,10 @@ import {
     Image,
     TouchableHighlight
 } from 'react-native';
+import { toJS } from 'mobx';
 import { inject, observer } from 'mobx-react/native';
 
-@inject('store')
+@inject('store') @observer
 class TouchableImage extends Component {
     state = {
         width: null
@@ -36,13 +37,17 @@ class TouchableImage extends Component {
     render() {
         const { image, orientation } = this.props;
 
+        const uri = image.link.replace('http://', 'https://');
+
+        console.log(toJS(image));
+
         return (
             <TouchableHighlight onPress={this.onPress.bind(this)}
                                 style={styles.fullscreen}>
-                <Image source={{uri: image.uri}}
+                <Image source={{uri: uri}}
                        style={[styles.backgroundImage, styles[orientation.toLowerCase()]]}
                        onLayout={this.onImageLayout.bind(this)}>
-                    <Text style={styles.imageLabel}>{image.label}</Text>
+                    <Text style={styles.imageLabel}>{image.title}</Text>
                 </Image>
             </TouchableHighlight>
         );
@@ -52,11 +57,14 @@ class TouchableImage extends Component {
 @inject('store') @observer
 class ImageCarousel extends Component {
     render() {
-        const { image, store } = this.props;
+        const { store } = this.props;
+
+        if (!store.currentImage) {
+            return null;
+        }
 
         return (
-            <TouchableImage image={{uri: "https://i.imgur.com/6cFNnJp.jpg",
-                                    label: "Its my cake day, why am i happier about this then my real birthday, i will never know. First fav. Post"}}
+            <TouchableImage image={store.currentImage}
                             orientation={store.orientation} />
         );
     }

index.ios.js

@@ -28,6 +28,10 @@ class ImgurApp extends Component {
         Store.changeOrientation(orientation);
     }
 
+    componentWillMount() {
+        Store.fetchImages();
+    }
+
     render() {
         return (
             <MobXProvider store={Store}>

package.json

@@ -7,7 +7,9 @@
     "test": "jest"
   },
   "dependencies": {
+    "babel-preset-latest": "^6.22.0",
     "babel-preset-react-native-stage-0": "^1.0.1",
+    "better-fetch": "^1.1.0",
     "mobx": "^3.1.0",
     "mobx-react": "^4.1.0",
     "react": "15.4.2",