add location favorites

Maroon-Rides · Aug 31, 2024 · 7b84e7e · 7b84e7e
1 parent 0265038
commit 7b84e7e
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 6 deletions.
diff --git a/app/components/sheets/route_planning/InputRoute.tsx b/app/components/sheets/route_planning/InputRoute.tsx
@@ -5,7 +5,7 @@ import Ionicons from '@expo/vector-icons/Ionicons';
 import useAppStore from "../../../data/app_state";
 import SheetHeader from "../../ui/SheetHeader";
 import { MyLocationSuggestion, SearchSuggestion } from "utils/interfaces";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { FontAwesome, MaterialCommunityIcons } from "@expo/vector-icons";
 import SuggestionInput from "app/components/ui/SuggestionInput";
 import SegmentedControl from "@react-native-segmented-control/segmented-control";
 import TimeInput from "app/components/ui/TimeInput";
@@ -14,6 +14,8 @@ import { useQueryClient } from "@tanstack/react-query";
 import TripPlanCell from "app/components/ui/TripPlanCell";
 import * as Location from 'expo-location';
 import { Linking } from "react-native";
+import { addFavoriteLocationMutation, removeFavoriteLocationMutation, useFavoriteLocations } from "app/data/storage_query";
+import { suggestionEqual } from "app/utils";
 
 interface SheetProps {
     sheetRef: React.RefObject<BottomSheetModal>
@@ -55,6 +57,21 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
         return false
     })
 
+    // Favorite Location
+    const { data: favoriteLocations } = useFavoriteLocations();
+    const addLocationFavorite = addFavoriteLocationMutation();
+    const removeLocationFavorite = removeFavoriteLocationMutation();
+
+    function toggleFavoriteLocation(location: SearchSuggestion) {
+        if (favoriteLocations && 
+            (favoriteLocations as SearchSuggestion[]).find((item) => suggestionEqual(item, location))) 
+        {
+            removeLocationFavorite.mutate(location)
+        } else {
+            addLocationFavorite.mutate(location)
+        }
+    }
+
     useEffect(() => {
 
         if (suggestionOutput) {
@@ -267,6 +284,24 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
                                     {/* Subtitle */}
                                     { suggestion.subtitle && <Text style={{ color: theme.subtitle, fontSize: 14 }}>{suggestion.subtitle}</Text> }
                                 </View>
+
+                                {/* Favorite Location */}
+                                { suggestion.type != "my-location" &&
+                                    <TouchableOpacity 
+                                        onPress={(e) => {
+                                            e.stopPropagation()
+                                            toggleFavoriteLocation(suggestion)
+                                        }} 
+                                        style={{ paddingLeft: 16, zIndex: 10000 }}
+                                    >
+                                        { (favoriteLocations as SearchSuggestion[]).find((item) => suggestionEqual(item, suggestion)) ?
+                                            <FontAwesome name="star" size={24} color="#ffcc01" />
+                                        :
+                                            <FontAwesome name="star-o" size={24} color={theme.subtitle} />
+                                        }
+                                    </TouchableOpacity>
+                                }
+
                             </TouchableOpacity>
                         )}
                     />

diff --git a/app/components/ui/SuggestionInput.tsx b/app/components/ui/SuggestionInput.tsx
@@ -1,5 +1,6 @@
 import { useSearchSuggestion } from "app/data/api_query"
 import useAppStore from "app/data/app_state"
+import { useFavoriteLocations } from "app/data/storage_query"
 import { memo, useEffect, useState } from "react"
 import { View, TextInput, Keyboard, Platform } from "react-native"
 import { MyLocationSuggestion, SearchSuggestion } from "utils/interfaces"
@@ -21,6 +22,7 @@ const SuggestionInput: React.FC<Props> = ({ location, icon, onFocus, outputName,
     const [searchTerm, setSearchTerm] = useState("");
 
     const { data: suggestions, isLoading } = useSearchSuggestion(searchTerm);
+    const { data: favoriteLocations } = useFavoriteLocations();
 
     useEffect(() => {
         setSuggestionLoading(isLoading);
@@ -40,11 +42,12 @@ const SuggestionInput: React.FC<Props> = ({ location, icon, onFocus, outputName,
 
     useEffect(() => {
         if (searchTerm.trim() == "" && suggestionsOutput) {
-            setSuggestions([MyLocationSuggestion]);
+            setSuggestions([MyLocationSuggestion, ...favoriteLocations]);
             return
         }
+
         suggestionsOutput && setSuggestions(suggestions ?? []);
-    }, [suggestions])
+    }, [suggestions, favoriteLocations])
 
     return (
         <View 
@@ -85,7 +88,7 @@ const SuggestionInput: React.FC<Props> = ({ location, icon, onFocus, outputName,
                     setSearchTerm(text);
                     setSuggestionsOutput(outputName);
                     if (text.trim() == "") {
-                        setSuggestions([MyLocationSuggestion]);
+                        setSuggestions([MyLocationSuggestion, ...favoriteLocations]);
                         return
                     }
                     setSuggestions([]);
@@ -96,7 +99,7 @@ const SuggestionInput: React.FC<Props> = ({ location, icon, onFocus, outputName,
                         setSearchTerm("");                        
                     }
                     if (searchTerm.trim() == "") {
-                        setSuggestions([MyLocationSuggestion]);
+                        setSuggestions([MyLocationSuggestion, ...favoriteLocations]);
                     } else {
                         setSuggestions(suggestions ?? [])
                     }

diff --git a/app/data/storage_query.ts b/app/data/storage_query.ts
@@ -1,7 +1,8 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { IMapRoute } from "utils/interfaces";
+import { IMapRoute, SearchSuggestion } from "utils/interfaces";
 import { useRoutes } from "./api_query";
+import { suggestionEqual } from "app/utils";
 
 export const useFavorites = (allowUpdate: boolean = true) => {
     const routesQuery = useRoutes();
@@ -145,5 +146,63 @@ export const defaultGroupMutation = () => {
         }
     });
 
+    return mutation;
+}
+
+export const useFavoriteLocations = () => {
+    const query = useQuery({
+        queryKey: ["favoriteLocations"],
+        queryFn: async () => {
+            const favorites = await AsyncStorage.getItem("favoriteLocations")
+            if (!favorites) return [];
+
+            return JSON.parse(favorites);
+        },
+        staleTime: Infinity
+    });
+
+    return query;
+}
+
+export const addFavoriteLocationMutation = () => {
+    const queryClient = useQueryClient();
+
+    const mutation = useMutation({
+        mutationKey: ["addFavoriteLocation"],
+        mutationFn: async (location: SearchSuggestion) => {
+            const favorites = await AsyncStorage.getItem('favoriteLocations')
+
+            var favoritesArray = JSON.parse(favorites ?? "[]");
+
+            favoritesArray.push(location);
+            console.log(favoritesArray.length)
+
+            await AsyncStorage.setItem('favoriteLocations', JSON.stringify(favoritesArray));
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["favoriteLocations"] });
+        }
+    });
+
+    return mutation;
+}
+
+export const removeFavoriteLocationMutation = () => {
+    const queryClient = useQueryClient();
+
+    const mutation = useMutation({
+        mutationKey: ["removeFavoriteLocations"],
+        mutationFn: async (location: SearchSuggestion) => {
+            const favorites = await AsyncStorage.getItem('favoriteLocations')
+
+            var favoritesArray = JSON.parse(favorites ?? "[]");
+            const newFavorites = favoritesArray.filter((fav: SearchSuggestion) => !suggestionEqual(fav, location));
+            await AsyncStorage.setItem('favoriteLocations', JSON.stringify(newFavorites));
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["favoriteLocations"] });
+        }
+    });
+
     return mutation;
 }
diff --git a/app/utils.ts b/app/utils.ts
@@ -1,5 +1,6 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { Appearance } from "react-native";
+import { SearchSuggestion } from "utils/interfaces";
 
 // given a hex code without the #, return a lighter version of it
 export function getLighterColor(color: string): string {
@@ -40,4 +41,13 @@ export async function getColorScheme(): Promise<string> {
         default:
             return colorScheme == "dark" ? "dark" : "light"
     }    
+}
+
+export function suggestionEqual(lhs: SearchSuggestion, rhs: SearchSuggestion) {
+    if (lhs.type != rhs.type) return false
+
+    if (lhs.type == "map") return rhs.placeId == lhs.placeId
+    if (lhs.type == "stop") return rhs.stopCode == lhs.stopCode
+
+    return false
 }