header / favorites list components

savaughn · May 6, 2019 · cfba371 · cfba371
1 parent 7a38830
commit cfba371
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 66 deletions.
diff --git a/src/components/FavoritesList/favoritesList.js b/src/components/FavoritesList/favoritesList.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { FlatList, TouchableOpacity, Text, View } from 'react-native';
+import { refreshScreen } from '../../navigator/navigateTo';
+
+class Header extends Component {
+
+    keyExtractor = (item) => item.id.toString();
+
+    render() {
+        return (
+            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+            {
+                this.props.favorites &&
+                <FlatList
+                    data={this.props.favorites}
+                    keyExtractor={this.keyExtractor}
+                    renderItem={({item}) => <Text style={{margin: 10}}>{`${item.text}`}</Text>}
+                    onRefresh={() => refreshScreen()}
+                    refreshing={this.props.refreshing}
+                />
+            }
+            {
+                !this.props.favorites.length &&
+                <Text>Favorites List</Text>
+            }
+            </View>
+        );
+    }
+}
+
+export default Header;
+
+
+
diff --git a/src/components/Header/header.js b/src/components/Header/header.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import {TouchableOpacity, View, Text, StyleSheet} from 'react-native';
+import { navigateTo } from '../../navigator/navigateTo';
+
+class Header extends Component {
+
+    render() {
+        return (
+            <View style={ styles.header}>
+                <TouchableOpacity
+                    onPress={()=> navigateTo('jokeScreen')}
+                >
+                    <Text style={styles.items}>Jokes</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                    onPress={()=> navigateTo('historyScreen')}
+                >
+                    <Text style={styles.items}>Today in History</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                    onPress={()=> navigateTo('triviaScreen')}
+                >
+                    <Text style={styles.items}>Trivia</Text>
+                </TouchableOpacity>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+    },
+    items: {
+        textAlign: 'center',
+        color: '#333333',
+        marginBottom: 5,
+    },
+});
+
+export default Header;
diff --git a/src/navigator/navigateTo.js b/src/navigator/navigateTo.js
@@ -0,0 +1,19 @@
+import {Actions} from 'react-native-router-flux';
+
+export function navigateTo(screen, method = 'push') {
+    switch(method.toLowerCase()){
+        case 'replace':
+            Actions.replace(screen);
+            break;
+        case 'reset':
+            Actions.reset(screen);
+            break;
+        default:
+            Actions.push(screen);
+            break;
+    }
+}
+
+export function refreshScreen(props) {
+    Actions.refresh(props)
+}
diff --git a/src/screens/historyScreen/historyScreen.js b/src/screens/historyScreen/historyScreen.js
@@ -9,9 +9,9 @@ class HistoryScreen extends Component {
   }
 
   componentDidMount() {
-      this.props.dispatch({
-          type: GET_HISTORY_FACT,
-      });
+      if (!this.props.event.length) {
+          this.getHistory();
+      }
   }
 
   getHistory = () => {

diff --git a/src/screens/homeScreen/homeScreen.js b/src/screens/homeScreen/homeScreen.js
@@ -1,63 +1,30 @@
 import React, { Component } from 'react';
 import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import { connect } from 'react-redux';
-import { Actions } from 'react-native-router-flux';
+import Header from '../../components/Header/header';
+import FavoritesList from '../../components/FavoritesList/favoritesList';
 
 class HomeScreen extends Component {
     constructor(props) {
         super(props);
     }
 
-    goToJokeScreen = () => {
-        Actions.push('jokeScreen');
-    };
-
-    goToHistoryScreen = () => {
-        Actions.push('historyScreen');
-    };
-
-    goToTriviaScreen = () => {
-        Actions.push('triviaScreen');
-    };
-
-    keyExtractor = (item) => item.id.toString();
-
     render() {
-        console.log('home', this.props.favorites);
         return (
             <View style={styles.container}>
-                <View style={ styles.header}>
-                    <TouchableOpacity
-                        onPress={()=> this.goToJokeScreen()}
-                    >
-                        <Text style={styles.items}>Jokes</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        onPress={()=> this.goToHistoryScreen()}
-                    >
-                        <Text style={styles.items}>Today in History</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        onPress={()=> this.goToTriviaScreen()}
-                    >
-                        <Text style={styles.items}>Trivia</Text>
-                    </TouchableOpacity>
-                </View>
-                {
-                    this.props.favorites &&
-                    <FlatList
-                        data={ this.props.favorites }
-                        keyExtractor={this.keyExtractor}
-                        renderItem={({item}) => <Text style={ {margin: 10 } }>{`${item.text}`}</Text>}
-                    />
-                }
+                <Header />
+                <FavoritesList
+                    favorites={ this.props.favorites }
+                    refreshing={ this.props.refreshing }
+                />
             </View>
         );
     }
 }
 
 const mapStateToProps = ({ favorites }) => ({
     favorites: favorites.favorites,
+    refreshing: favorites.refreshing,
 });
 
 const styles = StyleSheet.create({
@@ -66,16 +33,6 @@ const styles = StyleSheet.create({
         backgroundColor: '#F5FCFF',
         marginTop: 50,
     },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-evenly',
-    },
-    items: {
-        textAlign: 'center',
-        color: '#333333',
-        marginBottom: 5,
-    },
 });
 
-
 export default connect(mapStateToProps)(HomeScreen);
diff --git a/src/screens/jokeScreen/jokeScreen.js b/src/screens/jokeScreen/jokeScreen.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import { connect } from 'react-redux';
-import { Actions } from 'react-native-router-flux';
 import {GET_RANDOM_JOKE, SAVE_TO_FAVORITES} from "../../state/ActionTypes";
 
 
@@ -11,9 +10,9 @@ class JokeScreen extends Component {
   }
 
   componentDidMount() {
-      this.props.dispatch({
-          type: GET_RANDOM_JOKE,
-      });
+      if (!this.props.jokes.length) {
+          this.getJoke();
+      }
   }
 
   getJoke = () => {
@@ -57,7 +56,7 @@ class JokeScreen extends Component {
 const mapStateToProps = ({ randomJoke, favorites }) => ({
   jokes: randomJoke.jokes,
   refreshing: randomJoke.refreshing,
-    favorites: favorites.favorites,
+  favorites: favorites.favorites,
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/src/screens/triviaScreen/triviaScreen.js b/src/screens/triviaScreen/triviaScreen.js
@@ -9,9 +9,9 @@ class TriviaScreen extends Component {
     }
 
     componentDidMount() {
-        this.props.dispatch({
-            type: GET_RANDOM_TRIVIA,
-        });
+        if (!this.props.trivia.length) {
+            this.getTrivia();
+        }
     }
 
     getTrivia = () => {

diff --git a/src/state/reducers/favoritesReducer/favoritesReducer.js b/src/state/reducers/favoritesReducer/favoritesReducer.js
@@ -3,16 +3,18 @@ import { SAVE_TO_FAVORITES, SAVE_TO_FAVORITES_SUCCESS, SAVE_TO_FAVORITES_FAILURE
 export const INITIAL_STATE = {
     favorites: [],
     error: false,
+    refreshing: false,
 };
 
 export default (state = INITIAL_STATE, action) => {
     switch (action.type) {
         case SAVE_TO_FAVORITES:
-            return {...state};
-        case SAVE_TO_FAVORITES_SUCCESS:
-            return { ...state, favorites: action.favArray, error: false };
+            return {...state, refreshing: true };
+        case SAVE_TO_FAVORITES_SUCCESS: {
+            return {...state, favorites: action.favArray, error: false, refreshing: false };
+        }
         case SAVE_TO_FAVORITES_FAILURE:
-            return { ...state, error: true };
+            return { ...state, error: true, refreshing: false };
         default:
             return { ...state };
     }