Implement adding/removing favorite from location info menu

Mobile/lib/favorites.dart

@@ -63,7 +63,7 @@ class _FavoritesPage extends State<FavoritesPage> {
   Widget build(BuildContext context) {
     return SideMenu(
       selectedIndex: 1,
-      body: Container(
+      body: SingleChildScrollView(child: Container(
         decoration: const BoxDecoration(color: Color(0xFFF9F9F9)),
         width: MediaQuery.of(context).size.width,
         padding: const EdgeInsets.all(20.0),
@@ -106,6 +106,6 @@ class _FavoritesPage extends State<FavoritesPage> {
           )).toList(),
         ),
       ),
-    );
+    ));
   }
 }

Mobile/lib/main.dart

@@ -47,13 +47,14 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+  final GlobalKey<ScaffoldState> _locationScaffoldKey = GlobalKey<ScaffoldState>();
   List<Favorite> _favorites = [];
   LatLng? _selectedPoint;
 
   void _showLocation(TapPosition _, LatLng point) async {
     setState(() => _selectedPoint = point);
 
-    final location;
+    final dynamic location;
     try {
       final response = await http.get(
         Uri.parse('https://nominatim.openstreetmap.org/reverse.php?lat=${point.latitude}&lon=${point.longitude}&zoom=18&format=jsonv2'),
@@ -77,6 +78,7 @@ class _MyHomePageState extends State<MyHomePage> {
       barrierColor: Colors.black.withOpacity(0.3),
       context: context,
       builder: (builder) {
+        return StatefulBuilder(builder: (BuildContext context, StateSetter setModalState) {
           return Wrap(children: [
             Container(
               color: Colors.white,
@@ -91,26 +93,62 @@ class _MyHomePageState extends State<MyHomePage> {
                     Text(location['display_name']),
                   ],
                 )),
-              const Column(children: [
+                Column(children: [
-                IconButton(icon: Icon(Icons.star), iconSize: 32, onPressed: null),
+                  IconButton(
-                IconButton(icon: Icon(Icons.rate_review), iconSize: 32, onPressed: null),
+                    icon: const Icon(Icons.star),
+                    iconSize: 32,
+                    color: _favorites.where((fav) => fav.lat == point.latitude && fav.lng == point.longitude).isEmpty ? Colors.grey : Colors.yellow,
+                    onPressed: () => _toggleFavorite(point, location['name'], location['display_name'], setModalState, context)
+                  ),
+                  const IconButton(icon: Icon(Icons.rate_review), iconSize: 32, onPressed: null),
                 ]),
               ]),
             ),
           ]);
+        });
       },
     );
 
     setState(() => _selectedPoint = null);
   }
 
-  @override
+  void _toggleFavorite(LatLng point, String name, String description, StateSetter setModalState, BuildContext context) async {
-  void didChangeDependencies() {
+    final messenger = ScaffoldMessenger.of(context);
-    super.didChangeDependencies();
+    final favorite = _favorites.where((fav) => fav.lat == point.latitude && fav.lng == point.longitude).firstOrNull;
 
-    api.isLoggedIn(context).then((isLoggedIn) async {
+    if (!await api.isLoggedIn(context)) {
-      if (!isLoggedIn || !mounted) return;
+      messenger.showSnackBar(const SnackBar(content: Text('You need to login to do that')));
+      return;
+    }
 
+    if (!context.mounted) return;
+
+    if (favorite == null) {
+      if (await api.request(context, api.ApiService.app, 'POST', '/favorites', {'lat': point.latitude, 'lng': point.longitude}) == null) {
+        return;
+      }
+
+      _fetchFavorites();
+      setModalState(() {});
+
+      messenger.showSnackBar(const SnackBar(content: Text('Added to favorites')));
+
+      return;
+    }
+
+    if (await api.request(context, api.ApiService.app, 'DELETE', '/favorites/${favorite.id}', null) == null) {
+      return;
+    }
+
+    setState(() {
+      _favorites = _favorites.where((fav) => fav.id != favorite.id).toList();
+    });
+    setModalState(() {});
+
+    messenger.showSnackBar(const SnackBar(content: Text('Removed from favorites')));
+  }
+
+  void _fetchFavorites() async {
     final response = await api.request(context, api.ApiService.app, 'GET', '/favorites', null);
     if (response == null) return;
 
@@ -118,6 +156,16 @@ class _MyHomePageState extends State<MyHomePage> {
     setState(() {
       _favorites = favorites.map((favorite) => Favorite(favorite['id'], favorite['user_id'], favorite['lat'], favorite['lng'], favorite['name'], favorite['description'])).toList();
     });
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    api.isLoggedIn(context).then((isLoggedIn) {
+      if (!isLoggedIn || !mounted) return;
+
+      _fetchFavorites();
     });
   }
 
@@ -136,22 +184,6 @@ class _MyHomePageState extends State<MyHomePage> {
           ),
           children: [
             openStreetMapTileLayer,
-            ..._favorites.map((favorite) =>
-              MarkerLayer(markers: [
-                Marker(
-                  point: LatLng(favorite.lat, favorite.lng),
-                  width: 30,
-                  height: 50,
-                  alignment: Alignment.center,
-                  child: const Stack(
-                    children: [
-                      Icon(Icons.location_pin, size: 30, color: Colors.yellow),
-                      Icon(Icons.location_on_outlined, size: 30, color: Colors.black),
-                    ]
-                  ),
-                )
-              ]),
-            ),
             ...(
                 _selectedPoint != null ? [
                   MarkerLayer(markers: [
@@ -170,6 +202,22 @@ class _MyHomePageState extends State<MyHomePage> {
                   ]),
                 ] : []
             ),
+            ..._favorites.map((favorite) =>
+              MarkerLayer(markers: [
+                Marker(
+                  point: LatLng(favorite.lat, favorite.lng),
+                  width: 30,
+                  height: 50,
+                  alignment: Alignment.center,
+                  child: const Stack(
+                    children: [
+                      Icon(Icons.location_pin, size: 30, color: Colors.yellow),
+                      Icon(Icons.location_on_outlined, size: 30, color: Colors.black),
+                    ]
+                  ),
+                )
+              ]),
+            ),
           ],
         ),
       ),