Added Favorites Feature, Search Functionality, and Grid/List View Modes to the Main Page

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

src/screens/Home/HomeScreen.js

@@ -1,12 +1,26 @@
-import React, { useLayoutEffect } from "react";
-import { FlatList, Text, View, TouchableHighlight, Image } from "react-native";
-import styles from "./styles";
-import { recipes } from "../../data/dataArrays";
-import MenuImage from "../../components/MenuImage/MenuImage";
-import { getCategoryName } from "../../data/MockDataAPI";
+import React, { useState, useLayoutEffect } from 'react';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import {
+  FlatList,
+  Text,
+  View,
+  TouchableHighlight,
+  TouchableOpacity,
+  Image,
+  TextInput,
+  Button,
+} from 'react-native';
+import styles from './styles';
+import { recipes } from '../../data/dataArrays';
+import MenuImage from '../../components/MenuImage/MenuImage';
+import { getCategoryName } from '../../data/MockDataAPI';
 
 export default function HomeScreen(props) {
   const { navigation } = props;
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredRecipes, setFilteredRecipes] = useState(recipes);
+  const [favorites, setFavorites] = useState([]);
+  const [isGridView, setIsGridView] = useState(true);
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -21,23 +35,81 @@ export default function HomeScreen(props) {
     });
   }, []);
 
+  const handleSearch = (text) => {
+    setSearchQuery(text);
+    const newFilteredRecipes = recipes.filter((item) =>
+      item.title.toLowerCase().includes(text.toLowerCase()),
+    );
+    setFilteredRecipes(newFilteredRecipes);
+  };
+
+  const toggleFavorite = (recipeId) => {
+    setFavorites((prevFavorites) =>
+      prevFavorites.includes(recipeId)
+        ? prevFavorites.filter((id) => id !== recipeId)
+        : [...prevFavorites, recipeId],
+    );
+  };
+
   const onPressRecipe = (item) => {
-    navigation.navigate("Recipe", { item });
+    navigation.navigate('Recipe', { item });
   };
 
   const renderRecipes = ({ item }) => (
-    <TouchableHighlight underlayColor="rgba(73,182,77,0.9)" onPress={() => onPressRecipe(item)}>
-      <View style={styles.container}>
-        <Image style={styles.photo} source={{ uri: item.photo_url }} />
-        <Text style={styles.title}>{item.title}</Text>
-        <Text style={styles.category}>{getCategoryName(item.categoryId)}</Text>
+    <TouchableHighlight
+      underlayColor="rgba(73,182,77,0.9)"
+      onPress={() => onPressRecipe(item)}
+    >
+      <View style={isGridView ? styles.container : styles.listViewContainer}>
+        <Image
+          style={isGridView ? styles.photo : styles.listPhoto}
+          source={{ uri: item.photo_url }}
+        />
+        <View style={{ flex: 1 }}>
+          <Text style={styles.title}>{item.title}</Text>
+          <Text style={styles.category}>
+            {getCategoryName(item.categoryId)}
+          </Text>
+        </View>
+        <TouchableHighlight onPress={() => toggleFavorite(item.recipeId)}>
+          <View style={styles.favoriteContainer}>
+            <Icon
+              name={favorites.includes(item.recipeId) ? 'heart' : 'heart-o'}
+              size={24}
+              color="#ff0000"
+            />
+            <Text style={styles.favorite}>{item.favoriteCount}</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     </TouchableHighlight>
   );
 
   return (
     <View>
-      <FlatList vertical showsVerticalScrollIndicator={false} numColumns={2} data={recipes} renderItem={renderRecipes} keyExtractor={(item) => `${item.recipeId}`} />
+      <TextInput
+        value={searchQuery}
+        placeholder="Look for a recipe..."
+        onChangeText={handleSearch}
+        style={styles.inputContainer}
+      />
+      <TouchableOpacity
+        style={styles.switchViewButton}
+        onPress={() => setIsGridView(!isGridView)}
+      >
+        <Text style={styles.switchViewButtonText}>
+          {isGridView ? 'List Mode' : 'Grid Mode'}
+        </Text>
+      </TouchableOpacity>
+      <FlatList
+        vertical
+        showsVerticalScrollIndicator={false}
+        numColumns={isGridView ? 2 : 1}
+        data={filteredRecipes}
+        renderItem={renderRecipes}
+        keyExtractor={(item) => `${item.recipeId}`}
+        key={isGridView ? 'GRID' : 'LIST'}
+      />
     </View>
   );
 }

src/screens/Home/styles.js

@@ -2,10 +2,71 @@ import { StyleSheet } from 'react-native';
 import { RecipeCard } from '../../AppStyles';
 
 const styles = StyleSheet.create({
-  container: RecipeCard.container,
-  photo: RecipeCard.photo,
-  title: RecipeCard.title,
-  category: RecipeCard.category
+  container: {
+    ...RecipeCard.container,
+    margin: 10,
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  listViewContainer: {
+    flexDirection: 'row',
+    margin: 10,
+    flex: 1,
+    padding: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  photo: {
+    width: '100%',
+    height: 150,
+    resizeMode: 'cover',
+  },
+  listPhoto: {
+    width: 100,
+    height: 100,
+    resizeMode: 'cover',
+  },
+  title: {
+    textAlign: 'center',
+    fontSize: 14,
+    flexWrap: 'wrap',
+  },
+  category: {
+    ...RecipeCard.category,
+    textAlign: 'center',
+  },
+  favoriteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 2,
+  },
+  inputContainer: {
+    padding: 10,
+    backgroundColor: '#f1f1f1',
+    borderColor: 'gray',
+    borderWidth: 1,
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  switchViewButton: {
+    padding: 10,
+    backgroundColor: 'transparent',
+    borderRadius: 5,
+    margin: 5,
+    borderWidth: 2,
+    borderColor: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  switchViewButtonPressed: {
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  switchViewButtonText: {
+    color: '#000',
+    fontSize: 16,
+  },
 });
 
 export default styles;