Initial commit.

controllers/TournamentsListViewController.js

@@ -0,0 +1,63 @@
+/**
+ *  UpcomingTournamentsViewController
+ *  
+ *  Yeah, I do it iOS style. Handles fetching and displaying upcoming tournaments.
+ *
+ *  @copyright Ryan McGrath 2018.
+ */
+
+import moment from 'moment';
+import React from 'react';
+import {FlatList, View, ActivityIndicator} from 'react-native';
+import {inject, observer} from 'mobx-react/native';
+import {SearchBar} from 'react-native-elements';
+
+import styles from '../styles';
+import MemeleeViewController from './MemeleeViewController';
+import TournamentRow from './components/TournamentRow';
+
+const keyExtractor = (item, index) => item.id;
+
+@inject('Tournaments') @observer
+export default class UpcomingTournamentsViewController extends MemeleeViewController {
+    componentWillMount() {
+        this.props.Tournaments.fetchFeatured();
+    }
+    
+    onTap = (tournament) => {
+        this.props.navigator.push({
+            screen: 'memelee.tournamentInfoScreen',
+            title: tournament.name,
+            passProps: {tournament: tournament},
+            navigatorStyle: {tabBarHidden: true}
+        });
+    }
+
+    renderHeader = () => (
+        <SearchBar lightTheme round placeholder={""} onChangeText={this.props.Tournaments.search} containerStyle={styles.searchContainerStyle} />
+    )
+
+    renderFooter = () => (
+        this.props.Tournaments.fetchingData ? (<View style={{paddingTop: 200}}>
+            <ActivityIndicator animating size="large" />
+        </View>) : null
+    )
+
+    renderItem = ({item}) => (<TournamentRow tournament={item} onTap={this.onTap} />)
+
+    render() {
+        const props = {
+            data: this.props.Tournaments.fetchingData ? [] : 
+                this.props.Tournaments.mode === 'search' ? this.props.Tournaments.searchResults : 
+                    this.props.Tournaments.tournamentsList,
+
+            keyExtractor: keyExtractor,
+            contentContainerStyle: styles.tournamentsListView,
+            ListHeaderComponent: this.renderHeader,
+            ListFooterComponent: this.renderFooter,
+            renderItem: this.renderItem
+        };
+
+        return <FlatList {...props} renderItem={this.renderItem} />
+    }
+}