More goodies. Realtime firebase and worker live.

package.json

@@ -6,8 +6,10 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
-    "event-emitter": "^0.3.4",
+    "dotenv": "^2.0.0",
+    "firebase": "^2.4.2",
     "lodash": "^4.11.1",
+    "re-base": "^1.5.1",
     "react": "^0.14.8",
     "react-native": "^0.24.1",
     "react-native-linear-gradient": "^1.5.4",

src/app.js

@@ -20,11 +20,6 @@ export default class App extends Component {
     const route = {
       component: InTheaters,
       title: 'Í sýningu',
-      rightButtonTitle: 'Stillingar',
-      onRightButtonPress: () => this.refs.navigator.push({
-        title: 'Stillingar',
-        component: Settings,
-      }),
     };
 
     return (

src/components/MovieListItem.js

@@ -8,6 +8,7 @@ import React, {
   StyleSheet,
   PropTypes
 } from 'react-native';
+
 import _uniq from 'lodash/uniq';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import Entypo from 'react-native-vector-icons/Entypo';
@@ -19,13 +20,13 @@ export default class MovieListItem extends Component {
     title: PropTypes.string,
     year: PropTypes.number,
     runtime: PropTypes.number,
-    rating: PropTypes.number,
+    ratings: PropTypes.object,
     votes: PropTypes.number,
     showtimes: PropTypes.array,
   };
 
   runtime(num) {
-    let ori = num;
+    let ori = Number(num);
     const hours = Math.floor(num / 60);
     const minutes = ori - (hours * 60);
     return `${hours} klst ${minutes} mín`;
@@ -36,13 +37,13 @@ export default class MovieListItem extends Component {
     .map(s => s.hour.split(':').map(Number).reduce((a,b) => (a * 60) + b))
     .filter((val, i, self) => {
       var nearest = self.filter(d => d < val).sort((a,b) => a-b).pop();
-      return (val-nearest) > 15;
+      return (self.length === 1) || (val-nearest) > 15;
     })
-    .sort()
+    .sort((a,b) => a-b)
     .map(n => {
       var h = Math.floor(n / 60);
       var m = n - (h * 60);
-      return [h, m].map(d=> d<10 ? '0'+d : d).join(':');
+      return [h, m].map(d=> d < 10 ? '0'+d : d).join(':');
     }));
   }
 
@@ -52,24 +53,26 @@ export default class MovieListItem extends Component {
    */
   render () {
     const {
-      image,
+      posterUrl,
       title,
       year,
       runtime,
-      rating,
+      ratings,
       votes,
       showtimes,
     } = this.props;
 
+    const imdbRating = (ratings ? ratings.imdbRating : '?');
+
     return (
       <View style={s.item}>
-        <Image style={s.poster} source={{ uri: image }} />
+        <Image style={s.poster} source={{ uri: `http://image.tmdb.org/t/p/w500${posterUrl}` }} />
         <View style={s.detail}>
           <Text style={s.title}>{title}</Text>
           <View style={[s.vertical, { flex: 1 }]}>
             <Text style={s.runtime}>{this.runtime(runtime)}</Text>
             <Icon name="star" size={14} color="#FAD600" />
-            <Text style={s.rating}>{rating}/10</Text>
+            <Text style={s.rating}>{imdbRating}/10</Text>
           </View>
           <View style={s.showtimes}>
             {this.asHours(showtimes).map((hour, i) => (
@@ -103,6 +106,7 @@ const s = StyleSheet.create({
 
   vertical: {
     flexDirection: 'row',
+    paddingBottom: 5,
   },
 
   title: {

src/scenes/InTheaters.js

@@ -4,9 +4,11 @@ import React, {
   ScrollView,
   Text,
   StyleSheet,
-  TouchableHighlight
+  TouchableHighlight,
+  ListView
 } from 'react-native';
 
+import Rebase from 're-base';
 import MovieListItem from '../components/MovieListItem';
 import MovieDetails from './MovieDetails';
 
@@ -15,125 +17,82 @@ export default class SceneInTheaters extends Component {
   constructor(...args) {
     super(...args);
 
+    this.base = Rebase.createClass('https://kvikmyndr.firebaseio.com');
+
     this.state = {
-      items: [{
-        id: 1,
-        image: 'http://image.tmdb.org/t/p/w396/5N20rQURev5CNDcMjHVUZhpoCNC.jpg',
-        backdrop: 'https://image.tmdb.org/t/p/w780/m5O3SZvQ6EgD5XXXLPIP1wLppeW.jpg',
-        trailer: 'https://www.youtube.com/watch?v=e76nZeBRBYI',
-        title: 'Captain America: Civil War',
-        synoptis: `Vegna misheppnaðra aðgerða sem kostað hafa mannslíf hefur stjórnin ákveðið að hér eftir þurfi Avengers-hópurinn og aðrir með ofurkrafta að fylgja ströngum reglum. Við þetta vill Steve Rogers ekki sætta sig þvert á vilja Tonys Stark og smám saman magnast deilan uns á brestur bardagi sem á eftir að taka sinn toll.`,
-        directors: ['Anthony Russo', 'Joe Russo'],
-        actors: ['Chris Evans', 'Robert Downey Jr.'],
-        genres: ['Spenna', 'Spennutryllir', 'Vísindaskáldskapur'],
-        year: 2016,
-        runtime: 146,
-        rating: 8.7,
-        metascore: 7.1,
-        showtimes: [{
-          cinema: 'Sambíóin Egilshöll',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210586/',
-          hour: '16:00',
-          flags: []
-        },
-        {
-          cinema: 'Sambíóin Egilshöll',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210584/',
-          hour: '19:00',
-          flags: []
-        }, {
-          cinema: 'Sambíóin Egilshöll',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210585/',
-          hour: '22:00',
-          flags: []
-        }, {
-          cinema: 'Sambíóin Álfabakki',
-          hall: 'VIP',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210303/',
-          hour: '17:00',
-          flags: []
-        }, {
-          cinema: 'Sambíóin Álfabakki',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210292/',
-          hour: '17:00',
-          flags: []
-        }, {
-          cinema: 'Sambíóin Álfabakki',
-          hall: 'VIP',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210304/',
-          hour: '20:00',
-          flags: []
-        }, {
-          cinema: 'Sambíóin Álfabakki',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210293/',
-          hour: '20:00',
-          flags: []
-        }, {
-          cinema: 'Sambíóin Álfabakki',
-          hall: 'VIP',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210305/',
-          hour: '23:05',
-          flags: [] },
-          { cinema: 'Sambíóin Álfabakki',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210294/',
-          hour: '23:05',
-          flags: [] },
-          { cinema: 'Sambíóin Kringlan',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210310/',
-          hour: '17:00',
-          flags: ['íslenska'] },
-          { cinema: 'Sambíóin Kringlan',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210311/',
-          hour: '20:00',
-          flags: ['3D'] },
-          { cinema: 'Sambíóin Kringlan',
-          hall: 'Salur 2',
-          ticketUrl: 'https://www.sambio.is/Websales/Show/210312/',
-          hour: '23:00',
-          flags: []
-        }]
-      }]
+      loading: true,
+      movies: new ListView.DataSource({
+        rowHasChanged: (row1, row2) => (row1 !== row2)
+      }),
+      firebaseKey: (new Date()).toISOString().substr(0, 10),
     };
 
     this.onPress = this.onPress.bind(this);
   }
 
-  onPress(item) {
-    return () => {
-      this.props.navigator.push({
-        title: item.title,
-        component: MovieDetails,
-        passProps: item,
-      });
-    }
+  /**
+   * Fired when component was mounted
+   *
+   * @return void
+   */
+  componentDidMount () {
+    this.ref = this.base.listenTo(`in-show/${this.state.firebaseKey}`, {
+      context: this,
+      asArray: true,
+      queries: {
+        orderByChild: 'showtimeCount'
+      },
+      then (data) {
+        data.reverse();
+        this.setState({
+          movies: this.state.movies.cloneWithRows(data)
+        });
+      }
+    });
+  }
+
+  /**
+   * Fired when component will unmount
+   * @return void
+   */
+  componentWillUnmount () {
+    // Remove firebase binding to ref
+    this.base.removeBinding(this.ref);
+  }
+
+  renderRow(movie) {
+    return (
+      <TouchableHighlight key={movie.id} underlayColor="#f8f8ee" onPress={() => this.onPress(movie)}>
+        <View>
+          <MovieListItem {...movie} />
+        </View>
+      </TouchableHighlight>
+    );
+  }
+
+  onPress(movie) {
+    this.props.navigator.push({
+      title: movie.title,
+      component: MovieDetails,
+      passProps: {
+        movie,
+        date: this.state.firebaseKey,
+      },
+    });
   }
 
   /**
    * Render method
    * @return {Component}
    */
   render () {
-    const { items } = this.state;
-
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView style={{ flex: 1 }}>
-          {items.map(item => (
-            <TouchableHighlight key={item.id} underlayColor="#f8f8ee" onPress={this.onPress(item)}>
-              <View>
-                <MovieListItem {...item} />
-              </View>
-            </TouchableHighlight>
-          ))}
-        </ScrollView>
+        <ListView
+          dataSource={this.state.movies}
+          renderRow={this.renderRow.bind(this)}
+          styles={{ flex: 1 }}
+        />
       </View>
     );
   }