add history / trivia to favorites list

savaughn · May 6, 2019 · 90fd515 · 90fd515
1 parent cfba371
commit 90fd515
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 22 deletions.
diff --git a/src/screens/historyScreen/historyScreen.js b/src/screens/historyScreen/historyScreen.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import { connect } from 'react-redux';
-import { GET_HISTORY_FACT } from "../../state/ActionTypes";
+import { GET_HISTORY_FACT, SAVE_TO_FAVORITES } from "../../state/ActionTypes";
 
 class HistoryScreen extends Component {
   constructor(props) {
@@ -20,22 +20,33 @@ class HistoryScreen extends Component {
     });
   };
 
-  keyExtractor = (item) => item.index.toString();
+    saveToFavorite = (item) => {
+        this.props.dispatch({
+            type: SAVE_TO_FAVORITES,
+            payload: {item, favArray: this.props.favorites},
+        });
+    };
+
+  keyExtractor = (item) => item.id.toString();
+
+    renderItem = ({item}) => (
+        <TouchableOpacity
+            onPress={ () => this.saveToFavorite(item) }
+        >
+            <Text style={ {margin: 10 } }>{`${item.year}: ${item.text}`}</Text>
+        </TouchableOpacity>
+    );
 
 
     render() {
         console.log(this.props.event);
         return (
         <View style={styles.container}>
-            <TouchableOpacity
-                onPress={()=> this.getHistory()}
-            >
-                <Text style={styles.item}>{this.props.event.currentDate}</Text>
-            </TouchableOpacity>
+            <Text style={styles.item}>{this.props.event.currentDate}</Text>
             <FlatList
                 data={ this.props.event.filteredEvents }
                 keyExtractor={this.keyExtractor}
-                renderItem={({item}) => <Text style={ {margin: 10 } }>{`${item.year}: ${item.text}\n`}</Text>}
+                renderItem={ this.renderItem }
                 onRefresh={()=> this.getHistory()}
                 refreshing={ this.props.refreshing }
             />
@@ -44,9 +55,10 @@ class HistoryScreen extends Component {
   }
 }
 
-const mapStateToProps = ({ randomHistory }) => ({
+const mapStateToProps = ({ randomHistory, favorites }) => ({
   event: randomHistory.event,
   refreshing: randomHistory.refreshing,
+  favorites: favorites.favorites,
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/src/screens/triviaScreen/triviaScreen.js b/src/screens/triviaScreen/triviaScreen.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import { connect } from 'react-redux';
-import { GET_RANDOM_TRIVIA } from '../../state/ActionTypes';
+import { GET_RANDOM_TRIVIA, SAVE_TO_FAVORITES } from '../../state/ActionTypes';
 
 class TriviaScreen extends Component {
     constructor(props) {
@@ -20,7 +20,22 @@ class TriviaScreen extends Component {
         });
     };
 
-    keyExtractor = (item) => item.index.toString();
+    saveToFavorite = (item) => {
+        this.props.dispatch({
+            type: SAVE_TO_FAVORITES,
+            payload: {item, favArray: this.props.favorites},
+        });
+    };
+
+    keyExtractor = (item) => item.id.toString();
+
+    renderItem = ({item}) => (
+        <TouchableOpacity
+            onPress={ () => this.saveToFavorite(item) }
+        >
+            <Text style={ {margin: 10 } }>{`${item.category}: ${item.question}\nCorrect Answer:${item.correctAnswer}\nMultiple Choice: ${item.multipleChoice}`}</Text>
+        </TouchableOpacity>
+    );
 
 
     render() {
@@ -29,7 +44,7 @@ class TriviaScreen extends Component {
                 <FlatList
                     data={ this.props.trivia }
                     keyExtractor={this.keyExtractor}
-                    renderItem={({item}) => <Text style={ {margin: 10 } }>{`${item.category}: ${item.question}\nCorrect Answer:${item.correctAnswer}\nMultiple Choice: ${item.multipleChoice}`}</Text>}
+                    renderItem={ this.renderItem }
                     onRefresh={()=> this.getTrivia()}
                     refreshing={ this.props.refreshing }
                 />
@@ -38,9 +53,10 @@ class TriviaScreen extends Component {
     }
 }
 
-const mapStateToProps = ({ randomTrivia }) => ({
+const mapStateToProps = ({ randomTrivia, favorites }) => ({
     trivia: randomTrivia.trivia,
     refreshing: randomTrivia.refreshing,
+    favorites: favorites.favorites,
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/src/state/sagas/favoritesSaga/favoritesSaga.js b/src/state/sagas/favoritesSaga/favoritesSaga.js
@@ -7,20 +7,42 @@ function* sagaWatcher() {
 }
 
 function* saga({ payload }) {
-    console.log('fav pay', payload);
+    console.log('saga', payload);
     try {
         const favArray = yield call(saveItemToArray, payload);
+        console.log('done', favArray);
         yield put({ type: SAVE_TO_FAVORITES_SUCCESS, favArray });
     } catch (err) {
+        console.log('fail');
         yield put({ type: SAVE_TO_FAVORITES_FAILURE });
     }
 }
 
 function saveItemToArray(payload) {
-    payload.favArray.push({
-        id: payload.item.id,
-        text: `${payload.item.setup}\n${payload.item.punchline}`,
-    });
+    console.log('payload', payload);
+    const type = payload.item.type;
+    switch(type) {
+        case 'history': {
+            payload.favArray.push({
+                id: payload.item.id,
+                text: `${payload.item.year}: ${payload.item.text}\n`,
+            });
+            break;
+        }
+        case 'trivia': {
+            payload.favArray.push({
+                id: payload.item.id,
+                text: `${payload.item.category}: ${payload.item.question}\nCorrect Answer:${payload.item.correctAnswer}\nMultiple Choice: ${payload.item.multipleChoice}`,
+            });
+            break;
+        }
+        default: {
+            payload.favArray.push({
+                id: payload.item.id,
+                text: `${payload.item.setup}\n${payload.item.punchline}`,
+            });
+        }
+    }
     return payload.favArray;
 }
 

diff --git a/src/state/sagas/historySaga/historySaga.js b/src/state/sagas/historySaga/historySaga.js
@@ -28,13 +28,13 @@ function getHistoryFact() {
             const unfilteredEventArray = json.data.Events;
             unfilteredEventArray.map((item) => {
                 data.filteredEvents.push({
-                    index,
+                    type: 'history',
+                    id: index,
                     year: item.year,
                     text: item.text,
                 });
                 index++;
             });
-            console.log(data);
             return data;
         });
 }

diff --git a/src/state/sagas/jokeSaga/jokeSaga.js b/src/state/sagas/jokeSaga/jokeSaga.js
@@ -9,7 +9,6 @@ function* sagaWatcher() {
 function* saga() {
     try {
         const joke = yield call(getRandomJoke);
-        console.log(joke);
         yield put({ type: GET_RANDOM_JOKE_SUCCESS, payload: joke });
     } catch (err) {
         yield put({ type: GET_RANDOM_JOKE_FAILURE });

diff --git a/src/state/sagas/triviaSaga/triviaSaga.js b/src/state/sagas/triviaSaga/triviaSaga.js
@@ -25,7 +25,8 @@ function getRandomTrivia() {
             const results = json.results;
             results.map((item) => {
                 filteredTrivia.push({
-                    index,
+                    type: 'trivia',
+                    id: index,
                     category: item.category,
                     question: item.question,
                     correctAnswer: item.correct_answer,