Commit dd0169c

mo khan <mo@mokhan.ca>
2016-11-22 05:21:58
try to load a list of movies.
1 parent 4f4b7ed
app/components/application-shell.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { AppRegistry, Text, ListView, View } from 'react-native';
+import ViewContainer from './ViewContainer'
+import StatusBarBackground from './StatusBarBackground'
+import Api from '../services/api'
+
+export default class ApplicationShell extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      dataSource: new ListView.DataSource({
+        rowHasChanged: (row1, row2) => {
+          debugger
+          return row1 != row2;
+        }
+      })
+    };
+  }
+  componentDidMount() {
+    var that = this;
+    var url = 'https://facebook.github.io/react-native/movies.json'
+    new Api(url).get((json) => {
+      that.setState({ dataSource: that.mapAll(json.movies) });
+    });
+  }
+  render() {
+    return (
+      <ViewContainer>
+        <StatusBarBackground style={{backgroundColor: "mistyrose"}} />
+        <ListView
+          dataSource={this.state.dataSource}
+          renderRow={this.renderMovie}
+        />
+      </ViewContainer>
+    );
+  }
+  renderMovie(movie) {
+    return (
+      <View>
+        <Text>{movie.title}</Text>
+      </View>
+    )
+  }
+  mapAll(movies) {
+    return this.state.dataSource.cloneWithRows(movies);
+  }
+}
app/services/api.js
@@ -0,0 +1,13 @@
+export default class Api {
+  constructor(url) {
+    this.url = url;
+  }
+
+  get(success) {
+    fetch(this.url)
+      .then((response) => response.json())
+      .then(success)
+      .done();
+  }
+}
+
index.android.js
@@ -1,63 +1,6 @@
 import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, ListView, View } from 'react-native';
-import ViewContainer from './app/components/ViewContainer'
-import StatusBarBackground from './app/components/StatusBarBackground'
-
-const people = [
-  { name: 'mo', age: 32 },
-  { name: 'allison', age: 33 },
-  { name: 'adia', age: 10 },
-  { name: 'nailah', age: 7 },
-]
-
-class ApplicationShell extends Component {
-  render() {
-    return (
-      <Navigator
-        initialRoute="PeopleIndex"
-        ref="appNavigator"
-        style={styles.navigatorStyles}
-        renderScene={(route, navigator) => { return this._renderScene(route, navigator) }}
-      />
-    )
-  }
-  _renderScene(route, navigator) {
-    var globalNavigatorProps = { navigator }
-    switch(route.ident) {
-      case "PeopleIndex":
-        return (<PeopleIndexScreen {...globalNavigatorProps} />)
-    }
-  }
-}
-
-export default class AwesomeProject extends Component {
-  constructor(props) {
-    super(props)
-    let dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
-    this.state = {
-      peopleDataSource: dataSource.cloneWithRows(people)
-    };
-  }
-  render() {
-    return (
-      <ViewContainer>
-        <StatusBarBackground style={{backgroundColor: "mistyrose"}} />
-        <ListView
-          dataSource={this.state.peopleDataSource}
-          renderRow={(person) => { return this._renderPersonRow(person) }}
-        />
-      </ViewContainer>
-    );
-  }
-
-  _renderPersonRow(person) {
-    return (
-      <View style={styles.personRow}>
-        <Text style={styles.personName}>{person.name}</Text>
-      </View>
-    )
-  }
-}
+import { AppRegistry, StyleSheet } from 'react-native';
+import ApplicationShell from './app/components/application-shell'
 
 const styles = StyleSheet.create({
   container: {
@@ -66,11 +9,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-  personRow: {
-
-  },
-  personName: {
-  }
 });
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => ApplicationShell);
movies.json
@@ -0,0 +1,11 @@
+{
+  "title": "The Basics - Networking",
+  "description": "Your app fetched this from a remote endpoint!",
+  "movies": [
+    { "title": "Star Wars", "releaseYear": "1977"},
+    { "title": "Back to the Future", "releaseYear": "1985"},
+    { "title": "The Matrix", "releaseYear": "1999"},
+    { "title": "Inception", "releaseYear": "2010"},
+    { "title": "Interstellar", "releaseYear": "2014"}
+  ]
+}