finishing the meal app with all navigation module and redux

App.js

@@ -1,12 +1,21 @@
 import React, { useState } from "react";
 import * as Font from "expo-font";
 import AppLoading from "expo-app-loading";
-import { enableScreens } from 'react-native-screens'
+import { enableScreens } from "react-native-screens";
+import { createStore, combineReducers } from "redux";
+import { Provider } from "react-redux";
 
 import MealsNavigator from "./App/Routes/MealsNavigator";
+import mealReducer from './App/Store/Reducers/meals'
 
 enableScreens();
 
+const rootReducer = combineReducers({
+  meals: mealReducer
+});
+
+const store = createStore(rootReducer);
+
 const fetchFont = () => {
   return Font.loadAsync({
     "open-sans": require("./App/assets/Fonts/open-sans.regular.ttf"),
@@ -27,5 +36,9 @@ export default function App() {
     );
   }
 
-  return <MealsNavigator />;
+  return (
+    <Provider store={store}>
+      <MealsNavigator />
+    </Provider>
+  );
 }

App/Components/MealList.js

@@ -1,11 +1,19 @@
 import React from "react";
+import {useSelector} from "react-redux";
+
 import { FlatList, StyleSheet, View, Dimensions } from "react-native";
 import MealItem from "../Components/MealItem";
 
 const heightNew = Dimensions.get('window').height * 2 / 4 - 10
-console.log(heightNew);
+
 const MealList = (props) => {
+
+  const favMeals = useSelector((state) => state.meals.favoriteMeals)
+
   const flatListDataHandler = (itemData) => {
+
+    const isFavMeals = favMeals.some( (meal) => meal.id === itemData.item.id)
+
     return (
       <MealItem
         mealsData={itemData}
@@ -14,6 +22,8 @@ const MealList = (props) => {
             routeName: "MealsDetails",
             params: {
               mealDetailsId: itemData.item.id,
+              headerTitle: itemData.item.title,
+              isFav: isFavMeals
             },
           });
         }}

App/Routes/MealsNavigator.js

@@ -37,7 +37,10 @@ const MealsNavigator = createStackNavigator(
     CategoryMeals: {
       screen: CategoryMealsScreen,
     },
-    MealsDetails: MealsDetailsScreen,
+    MealsDetails: { 
+      screen: MealsDetailsScreen 
+    },
+
   },
   {
     defaultNavigationOptions: defaultNavOptions,
@@ -84,11 +87,11 @@ const mainNavigatorConfig = {
       },
       tabBarColor: Colors.accent,
       tabBarLabel:
-      Platform.OS === "android" ? (
-        <Text style={{ fontFamily: "open-sans" }}>Favorite</Text>
-      ) : (
-        "Favorite"
-      ),
+        Platform.OS === "android" ? (
+          <Text style={{ fontFamily: "open-sans" }}>Favorite</Text>
+        ) : (
+          "Favorite"
+        ),
     },
   },
 };

App/Screens/CategoriesScreen.js

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { StyleSheet, FlatList } from "react-native";
+import React from "react";
+import {FlatList} from "react-native";
+
+import DefaultText from "../Components/DefaultText";
 
 import { CATEGORY } from "../Models/Data/Dummy-data";
 import CategoryGrid from "../Components/CategoryGrid";
@@ -41,20 +43,16 @@ CategoriesScreen.navigationOptions = (navData) => {
     headerTitle: "Meal Category",
     headerLeft: () => (
       <HeaderButtons HeaderButtonComponent={HeaderButton}>
-        <Item title="Menu" iconName="ios-menu" onPress={() => {
+        <Item
+          title="Menu"
+          iconName="ios-menu"
+          onPress={() => {
             navData.navigation.toggleDrawer();
-        }} />
+          }}
+        />
       </HeaderButtons>
     ),
   };
 };
 
-const styles = StyleSheet.create({
-  Screen: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
 export default CategoriesScreen;

App/Screens/CategoryMealsScreen.js

@@ -1,17 +1,39 @@
 import React from "react";
+import { StyleSheet, View } from "react-native";
+import DefaultText from "../Components/DefaultText";
 
-import { CATEGORY, MEALS } from "../Models/Data/Dummy-data";
+//FOR REDUX
+import { useSelector } from "react-redux";
+
+import { CATEGORY } from "../Models/Data/Dummy-data";
 import MealList from "../Components/MealList";
 
 const CategoryMealsScreen = (props) => {
   const cateId = props.navigation.getParam("categoryId");
-  const mealList = MEALS.filter(
+  const availableData = useSelector((state) => state.meals.filteredMeals);
+  const mealList = availableData.filter(
     (mealObj) => mealObj.categoryIds.indexOf(cateId) >= 0
   );
 
+  if (mealList.length === 0) {
+    return (
+      <View style={styles.ViewRoot}>
+        <DefaultText>No meals found</DefaultText>
+      </View>
+    );
+  }
+
   return <MealList mealListData={mealList} navigation={props.navigation} />;
 };
 
+const styles = StyleSheet.create({
+  ViewRoot: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
 CategoryMealsScreen.navigationOptions = (navigationData) => {
   const cateId = navigationData.navigation.getParam("categoryId");
   const selectedTitle = CATEGORY.find((cat) => cat.id === cateId);

App/Screens/FavoritesScreen.js

@@ -1,13 +1,24 @@
 import React from "react";
-import { MEALS } from "../Models/Data/Dummy-data";
+import { View, Text, StyleSheet } from "react-native";
+
+//FOR REDUX
+import { useSelector } from "react-redux";
+
 import MealList from "../Components/MealList";
 import HeaderButton from "../Components/HeaderButton";
 import { HeaderButtons, Item } from "react-navigation-header-buttons";
+import DefaultText from '../Components/DefaultText'
 
 const FavoriteScreen = (props) => {
-  const favMeal = MEALS.filter(
-    (filterMeal) => filterMeal.id === "m1" || filterMeal.id === "m2"
-  );
+  const favMeal = useSelector((state) => state.meals.favoriteMeals);
+
+  if (favMeal.length === 0 || !favMeal) {
+    return (
+      <View style={styles.Screen}>
+        <DefaultText>No favorite data found, Adding some!</DefaultText>
+      </View>
+    );
+  }
 
   return <MealList mealListData={favMeal} navigation={props.navigation} />;
 };
@@ -29,4 +40,12 @@ FavoriteScreen.navigationOptions = (navData) => {
   };
 };
 
+const styles = StyleSheet.create({
+  Screen: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
 export default FavoriteScreen;

App/Screens/FilterScreen.js

@@ -1,10 +1,12 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { View, Text, StyleSheet, Switch, Platform } from "react-native";
+import { useDispatch } from "react-redux";
 import HeaderButton from "../Components/HeaderButton";
 import { HeaderButtons, Item } from "react-navigation-header-buttons";
 import Color from "../Utils/Constants/Colors";
 
 import DefaultText from "../Components/DefaultText";
+import { setFilter } from "../Store/Actions/mealsAction";
 
 const FilterSwitch = (props) => {
   return (
@@ -26,19 +28,22 @@ const FilterScreen = (props) => {
   const [isVegetarian, setIsVegetarian] = useState(false);
   const [isVegan, setIsVegan] = useState(false);
 
-  const saveFilterData = useCallback(() => {
-    const applied = {
-      GlutenFree: isGlutenFree,
-      LactoseFree: isLactoseFree,
-      Vegetarian: isVegetarian,
-      Vegan: isVegan,
+  const dispatch = useDispatch();
+
+  const saveFilters = useCallback(() => {
+    const appliedFilters = {
+      glutenFree: isGlutenFree,
+      lactoseFree: isLactoseFree,
+      vegan: isVegan,
+      vegetarian: isVegetarian,
     };
-    console.log(applied);
-  }, [isGlutenFree, isLactoseFree, isVegetarian, isVegan ]);
+
+    dispatch(setFilter(appliedFilters))
+  }, [isGlutenFree, isLactoseFree, isVegan, isVegetarian, dispatch]);
 
   useEffect(() => {
-    props.navigation.setParams({ save: saveFilterData });
-  }, [saveFilterData]);
+    props.navigation.setParams({ save: saveFilters });
+  }, [saveFilters]);
 
   return (
     <View style={styles.Screen}>

App/Screens/MealsDetailsScreen.js

@@ -1,12 +1,19 @@
-import React from "react";
-import { View, Text, StyleSheet, ScrollView, Image, Dimensions } from "react-native";
+import React, { useEffect, useCallback } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Image,
+  Dimensions,
+} from "react-native";
 import { HeaderButtons, Item } from "react-navigation-header-buttons";
+import { useSelector, useDispatch } from "react-redux";
 
-import { MEALS } from "../Models/Data/Dummy-data";
 import HeaderButton from "../Components/HeaderButton";
 import DefaultText from "../Components/DefaultText";
-
-const heightNew = Dimensions.get('window').height * 2 / 5
+import { toggleFavorite } from "../Store/Actions/mealsAction";
+const heightNew = (Dimensions.get("window").height * 2) / 5;
 
 const ListItem = (props) => {
   return (
@@ -18,7 +25,25 @@ const ListItem = (props) => {
 
 const MealsDetailsScreen = (props) => {
   const id = props.navigation.getParam("mealDetailsId");
-  const data = MEALS.find((detailsObj) => detailsObj.id === id);
+  const mealsDetails = useSelector((state) => state.meals.meals);
+  const data = mealsDetails.find((detailsObj) => detailsObj.id === id);
+  const currentFavMeal = useSelector((state) => {
+    state.meals.favoriteMeals.some((meal) => meal.id === id);
+  });
+
+  const dispatch = useDispatch();
+
+  const toggleFavoriteHandler = useCallback(() => {
+    dispatch(toggleFavorite(id));
+  }, [dispatch, id]);
+
+  useEffect(() => {
+    props.navigation.setParams({ toggleFav: toggleFavoriteHandler });
+  }, [toggleFavoriteHandler]);
+
+  useEffect(() => {
+    props.navigation.setParams({ isFav: currentFavMeal });
+  }, [currentFavMeal]);
 
   return (
     <ScrollView
@@ -44,18 +69,18 @@ const MealsDetailsScreen = (props) => {
 };
 
 MealsDetailsScreen.navigationOptions = (navigationData) => {
-  const id = navigationData.navigation.getParam("mealDetailsId");
-  const data = MEALS.find((detailsObj) => detailsObj.id === id);
+  const title = navigationData.navigation.getParam("headerTitle");
+  const toggleFavorite = navigationData.navigation.getParam("toggleFav");
+  const isFav = navigationData.navigation.getParam("isFav");
+
   return {
-    headerTitle: data.title,
+    headerTitle: title,
     headerRight: () => (
       <HeaderButtons HeaderButtonComponent={HeaderButton}>
         <Item
           title="Favorite"
-          iconName="ios-star"
-          onPress={() => {
-            console.log("Favorite");
-          }}
+          iconName={isFav ? "ios-star" : "ios-star-outline"}
+          onPress={toggleFavorite}
         />
       </HeaderButtons>
     ),
@@ -90,21 +115,20 @@ const styles = StyleSheet.create({
   },
 
   defaultData: {
-    color: 'black'
+    color: "black",
   },
 
   hard: {
-    color: 'red',
+    color: "red",
   },
 
   simple: {
-    color: 'blue'
+    color: "blue",
   },
 
   challenging: {
-    color: 'yellow'
-  }
-
+    color: "yellow",
+  },
 });
 
 export default MealsDetailsScreen;

App/Store/Actions/mealsAction.js

@@ -0,0 +1,10 @@
+export const TOGGLE_FAVORITE = 'TOGGLE_FAVORITE';
+export const SET_FILTER = "SET_FILTER";
+
+export const toggleFavorite = (id) => {
+    return { type: TOGGLE_FAVORITE, mealId: id };
+};
+
+export const setFilter = (filterSetting) => {
+    return { type: SET_FILTER, filter: filterSetting };
+};