Multy like is added now many items can be saved to list

app/components/FavCard.js

@@ -10,13 +10,15 @@ import {
   Platform,
   Dimensions,
   DeviceEventEmitter,
+  AsyncStorage,
+  Alert,
 } from 'react-native';
 import { Icon, Header, Button } from 'react-native-elements';
 import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
 import { LinearGradient } from 'expo';
-import { Ionicons } from '@expo/vector-icons';
+import { MaterialIcons } from '@expo/vector-icons';
 
-export default class FavCard extends React.Component{
+export default class FavCard extends React.Component {
   constructor(props) {
     super(props);
 
@@ -26,48 +28,93 @@ export default class FavCard extends React.Component{
       isFavorited: false,
     };
   }
-
-
-
-  // renderImage(item) {
-  //   var urlImage = item.replace(/=s90-c/i, "=s1080")
-
-  //   // console.log(urlImage)
-  //   return (
-  //     <Image style={styles.images} source={ {uri: urlImage}} />
-  //   )
-  // }
+
+  _showAlert = () => {
+    Alert.alert(
+      'Warning',
+      'Are you sure you want to remove this food from your list?',
+      [
+        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+        {text: 'Yes', onPress: () => {console.log('Yes Pressed'), this.onRemoveButtonPress()}},
+      ],
+      { cancelable: false }
+    )
+  }
+
+
+  onRemoveButtonPress = async () => {
+    const { item } = this.props;
+
+      try {
+        const posts = await AsyncStorage.getItem('foodIds');
+        let postsFav = JSON.parse(posts);
+        const postsItems = postsFav.filter(function(e){ return e.foodId !== item.id });
+
+        // updating 'posts' with the updated 'postsItems'
+        await AsyncStorage.setItem('foodIds', JSON.stringify(postsItems));
+        DeviceEventEmitter.emit('new_food_liked', {})
+
+      } catch(error) {
+        alert(error)
+        console.log('error: ', error);
+      };
+
+  }
+
+  renderRemoveButton = () => {
+    const { item } = this.props;
+
+    return (
+      <TouchableOpacity onPress={this._showAlert}>
+        <MaterialIcons
+          name={'delete-forever'}
+          color={'white'} size={35}
+
+        />
+      </TouchableOpacity>
+    );
+
+  }
+  renderImage(item) {
+    var urlImage = item.replace(/=s90-c/i, "=s1080")
+
+    // console.log(urlImage)
+    return (
+      <Image style={styles.images} source={{ uri: urlImage }} />
+    )
+  }
   render = () => {
     const { item } = this.props;
     const { navigate } = this.props.navigation
     // console.log(item.id)
-    console.log("name should be here"+item )
     return (
       <View style={styles.slide}>
         <TouchableOpacity
           activeOpacity={1}
           onPress={() =>
-            this.props.navigation.navigate('FoodDetails', 
-           )
+            this.props.navigation.navigate('FoodDetails', { foodID: item.id }
+            )
           }
         >
-          {/* {this.renderImage(item.images[0].hostedLargeUrl)} */}
-          
+          {this.renderImage(item.images[0].hostedLargeUrl)}
+
 
           <View style={styles.foodInfo}>
             <Text style={styles.foodName} numberOfLines={2}>
               {item.name}
-              {conole.log("in favCard: " + item.name)}
             </Text>
           </View>
-
-
         </TouchableOpacity>
+        <View style={styles.buttonContainer}>
+          {this.renderRemoveButton()}
+        </View>
       </View>
     );
   };
 
 }
+const padding = 0;
+const { width } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   loadingView: {
@@ -82,12 +129,8 @@ const styles = StyleSheet.create({
 
 
 
-  foodInfo: {
-
-    // marginRight: '55%',
-    // position: 'absolute',
-    // bottom: Platform.OS === 'ios' ? -1 : 1,
-    // alignSelf: 'center',
+  slide: {
+    flex: 1,
   },
   foodName: {
     fontSize: 20,
@@ -97,24 +140,13 @@ const styles = StyleSheet.create({
 
   },
   buttonContainer: {
-    // flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    width: 45,
+    width: 72,
     height: 56,
     paddingRight: 0,
     position: 'absolute',
-    bottom: Platform.OS === 'ios' ? 55 : 30,
-    right: 0,
-
+    bottom: Platform.OS === 'ios' ? width/15 : width/14,
+    right: padding,
   },
-});
-
-
-
-
-/**
- * 
- *  const itemId = item.id;
-   AsyncStorage.setItem('foodId', itemId);
- */
+});

app/components/FavSlide.js

@@ -32,10 +32,49 @@ export default class FavSlide extends React.Component{
     const { isFavorited } = this.state;
     const { onFavoriteButtonPressEmit } = this.props;
 
-    // DeviceEventEmitter.emit('setMyFoodUpdated');
     this.setState({ isFavorited: !isFavorited });
-    const itemId = item.id;
-    AsyncStorage.setItem('foodId', itemId);
+
+
+    try {
+      let con = {
+        foodId: item.id,
+      }
+
+      function containsObject(obj, list) {
+        var i;
+        for (i = 0; i < list.length; i++) {
+          if (list[i].foodId === obj) {
+            return true;
+          }
+        }
+
+        return false;
+      }
+
+      AsyncStorage.getItem('foodIds')
+        .then((foodIds) => {
+          const c = foodIds ? JSON.parse(foodIds) : [];
+          // console.log("Display the list", c)
+          // console.log("item id", item.id)
+          if (containsObject(item.id, c)) {
+            console.log("in the list", true);
+            Alert.alert(
+              "It's there",
+              "You've already addded this food to your list before"
+            )
+
+          }
+          else {
+            c.push(con);
+
+          }
+          AsyncStorage.setItem('foodIds', JSON.stringify(c));
+          DeviceEventEmitter.emit('new_food_liked', {})
+        });
+
+    } catch (error) {
+      alert(error)
+    }
 
   }
 
@@ -151,10 +190,3 @@ const styles = StyleSheet.create({
 
   },
 });
-
-
-/**
- *   { food.ingredientLines.map((item, key)=>(
-         <Text key={key} style={styles.textNameContainer}> { item } </Text>)
-         )}
- */