added click to remove from favorites list

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

Hide file tree

Showing 6 changed files with 58 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "android": "react-native run-android"
   },
   "dependencies": {
+    "lodash": "^4.17.11",
     "native-base": "^2.12.1",
     "react": "16.8.3",
     "react-native": "0.59.5",

diff --git a/src/components/FavoritesList/favoritesList.js b/src/components/FavoritesList/favoritesList.js
@@ -1,11 +1,27 @@
 import React, { Component } from 'react';
 import { FlatList, TouchableOpacity, Text, View } from 'react-native';
 import { refreshScreen } from '../../navigator/navigateTo';
+import { REMOVE_FROM_FAVORITES } from '../../state/ActionTypes';
+import {connect} from "react-redux";
 
-class Header extends Component {
+
+class FavoritesList extends Component {
 
     keyExtractor = (item) => item.id.toString();
 
+    renderItem = ({item}) => (
+        <TouchableOpacity
+            onPress={ () => {
+                this.props.dispatch({
+                    type: REMOVE_FROM_FAVORITES,
+                    payload: {item, favArray: this.props.favorites},
+                });
+            } }
+        >
+            <Text style={{margin: 10}}>{`${item.text}`}</Text>
+        </TouchableOpacity>
+    );
+
     render() {
         return (
             <View style={{ alignItems: 'center', justifyContent: 'center' }}>
@@ -14,7 +30,7 @@ class Header extends Component {
                 <FlatList
                     data={this.props.favorites}
                     keyExtractor={this.keyExtractor}
-                    renderItem={({item}) => <Text style={{margin: 10}}>{`${item.text}`}</Text>}
+                    renderItem={ this.renderItem }
                     onRefresh={() => refreshScreen()}
                     refreshing={this.props.refreshing}
                 />
@@ -28,7 +44,11 @@ class Header extends Component {
     }
 }
 
-export default Header;
+const mapDispatchToProps = dispatch => ({
+    dispatch,
+});
+
+export default connect(mapDispatchToProps)(FavoritesList);
 
 
 
diff --git a/src/state/ActionTypes.js b/src/state/ActionTypes.js
@@ -16,4 +16,7 @@ export const GET_RANDOM_TRIVIA_FAILURE = 'get_random_trivia_failure';
 // Favorites
 export const SAVE_TO_FAVORITES = 'save_to_favorites';
 export const SAVE_TO_FAVORITES_SUCCESS = 'save_to_favorites_success';
-export const SAVE_TO_FAVORITES_FAILURE = 'save_to_favorites_failure';
+export const SAVE_TO_FAVORITES_FAILURE = 'save_to_favorites_failure';
+export const REMOVE_FROM_FAVORITES = 'remove_from_favorites';
+export const REMOVE_FROM_FAVORITES_SUCCESS = 'remove_from_favorites_success';
+export const REMOVE_FROM_FAVORITES_FAILURE = 'remove_from_favorites_failure';
diff --git a/src/state/sagas/favoritesSaga/favoritesSaga.js b/src/state/sagas/favoritesSaga/favoritesSaga.js
@@ -1,12 +1,37 @@
 import React from 'react';
 import { call, takeLatest, put } from 'redux-saga/effects';
-import { SAVE_TO_FAVORITES, SAVE_TO_FAVORITES_SUCCESS, SAVE_TO_FAVORITES_FAILURE } from '../../ActionTypes';
+import _ from 'lodash';
+import {
+    SAVE_TO_FAVORITES,
+    SAVE_TO_FAVORITES_SUCCESS,
+    SAVE_TO_FAVORITES_FAILURE,
+    REMOVE_FROM_FAVORITES,
+    REMOVE_FROM_FAVORITES_SUCCESS,
+    REMOVE_FROM_FAVORITES_FAILURE,
+} from '../../ActionTypes';
 
 function* sagaWatcher() {
-  yield takeLatest(SAVE_TO_FAVORITES, saga);
+  yield takeLatest(SAVE_TO_FAVORITES, saveItem);
+  yield takeLatest(REMOVE_FROM_FAVORITES, deleteItem)
 }
 
-function* saga({ payload }) {
+function* deleteItem({ payload }) {
+    try {
+        const favArray = yield call(removeItemFromArray, payload);
+        yield put({ type: REMOVE_FROM_FAVORITES_SUCCESS, favArray});
+    } catch (err) {
+        yield put({ type: REMOVE_FROM_FAVORITES_FAILURE });
+    }
+}
+
+function removeItemFromArray(payload) {
+    console.log('del', payload);
+    _.remove(payload.favArray, function(itemInArray) {
+        return itemInArray === payload.item;
+    });
+}
+
+function* saveItem({ payload }) {
     console.log('saga', payload);
     try {
         const favArray = yield call(saveItemToArray, payload);

diff --git a/src/state/sagas/historySaga/historySaga.js b/src/state/sagas/historySaga/historySaga.js
@@ -29,7 +29,7 @@ function getHistoryFact() {
             unfilteredEventArray.map((item) => {
                 data.filteredEvents.push({
                     type: 'history',
-                    id: index,
+                    id: `h${index}`,
                     year: item.year,
                     text: item.text,
                 });

diff --git a/src/state/sagas/triviaSaga/triviaSaga.js b/src/state/sagas/triviaSaga/triviaSaga.js
@@ -26,7 +26,7 @@ function getRandomTrivia() {
             results.map((item) => {
                 filteredTrivia.push({
                     type: 'trivia',
-                    id: index,
+                    id: `t${index}`,
                     category: item.category,
                     question: item.question,
                     correctAnswer: item.correct_answer,