Add state actions

src/Modules/Common/api/SavedState.tsx

@@ -15,7 +15,7 @@ type State = {
 
 type Action = {
 	type: string;
-	data: any;
+	data: SavedRestaurant | { id: string };
 };
 
 const initialState = {
@@ -93,10 +93,28 @@ const useSavedRestaurantsDispatch = () => {
 function savedRestaurantReducer(state: State, action: Action): State {
 	switch (action.type) {
 		case "add": {
-			return state;
+			const newRestaurant = action.data;
+			if (
+				(newRestaurant as SavedRestaurant).name == undefined ||
+				state.saved.some((item) => item.id == newRestaurant.id)
+			) {
+				return state;
+			}
+
+			const saved = [...state.saved, newRestaurant as SavedRestaurant];
+			return {
+				...state,
+				saved,
+			};
 		}
 		case "remove": {
-			return state;
+			const { id } = action.data;
+
+			const saved = state.saved.filter((item) => item.id !== id);
+			return {
+				...state,
+				saved,
+			};
 		}
 		default:
 			return state;

src/Modules/Details/BottomBar.tsx

@@ -13,12 +13,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { AntDesign } from "@expo/vector-icons";
 
 type Props = {
+	onSave: () => void;
 	coordinates: { latitude: string; longitude: string };
 	phone: string;
 	style?: ViewStyle;
 };
 
-function BottomBar({ coordinates, phone, style }: Props) {
+function BottomBar({ coordinates, phone, style, onSave }: Props) {
 	const handleNavigate = async () => {
 		const { latitude, longitude } = coordinates;
 		const url = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`;
@@ -53,7 +54,7 @@ function BottomBar({ coordinates, phone, style }: Props) {
 			</TouchableOpacity>
 			<TouchableOpacity
 				style={[styles.callButton, styles.iconButton]}
-				onPress={() => {}}
+				onPress={onSave}
 			>
 				<AntDesign name="hearto" size={24} color="#ED4337" />
 				<Text style={styles.callButtonText}>Save</Text>

src/Modules/Details/Details.tsx

@@ -8,12 +8,14 @@ import Reviews from "./Reviews";
 import BusinessHeader from "./BusinessHeader";
 import ImageSlider from "./ImageSlider";
 import { useRestaurant } from "Modules/Common/hooks/";
+import { useSavedRestaurantsDispatch } from "Modules/Common/api/SavedState";
 
 type NavProp = NativeStackScreenProps<RootStackParamList, "Details">;
 
 function Details({ route }: NavProp) {
 	const { id } = route.params;
 	const business = useRestaurant(id);
+	const dispatch = useSavedRestaurantsDispatch();
 
 	if (!business) {
 		return (
@@ -36,6 +38,17 @@ function Details({ route }: NavProp) {
 				coordinates={business.coordinates}
 				phone={business.phone}
 				style={styles.bottomBar}
+				onSave={() => {
+					dispatch({
+						type: "add",
+						data: {
+							categories: business.categories,
+							id: business.id,
+							image_url: business.image_url,
+							name: business.name,
+						},
+					});
+				}}
 			/>
 		</>
 	);

src/Modules/Drawer/ListView.tsx

@@ -54,6 +54,7 @@ const styles = StyleSheet.create({
 	container: {
 		paddingHorizontal: 16,
 		paddingTop: 48,
+		paddingBottom: 100,
 	},
 	separator: {
 		borderColor: "#94a3b8",