lib/presentation/views/main_menu/game_history_view.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
-import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/data/db/database.dart';
+import 'package:game_tracker/data/dto/game.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
 import 'package:game_tracker/presentation/widgets/tiles/game_history_tile.dart';
-import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
+import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class GameHistoryView extends StatefulWidget {
   const GameHistoryView({super.key});
@@ -11,194 +15,92 @@ class GameHistoryView extends StatefulWidget {
 }
 
 class _GameHistoryViewState extends State<GameHistoryView> {
-  final allGameData = [
-    {
-      'game': 'Schach',
-      'title': 'Abendpartie',
-      'players': 2,
-      'group': 'Familie',
-      'date': '01.06.2024',
-    },
-    {
-      'game': 'Monopoly',
-      'title': 'Wochenendspaß mit Gras du Saas',
-      'players': 4,
-      'group': 'Freunde',
-      'date': '28.05.2024',
-    },
-    {
-      'game': 'Catan',
-      'title': 'Strategieabend',
-      'players': 3,
-      'group': 'Brettspieler',
-      'date': '25.05.2024',
-    },
-    {
-      'game': 'Uno',
-      'title': 'Schnelle Runde',
-      'players': 5,
-      'group': 'Kollegen',
-      'date': '22.05.2024',
-    },
-    {
-      'game': 'Poker',
-      'title': 'Freitagspoker',
-      'players': 6,
-      'group': 'Pokerclub',
-      'date': '20.05.2024',
-    },
-    {
-      'game': 'Scrabble',
-      'title': 'Wortschlacht',
-      'players': 4,
-      'group': 'Familie',
-      'date': '18.05.2024',
-    },
-    {
-      'game': 'Risiko',
-      'title': 'Weltherrschaft',
-      'players': 5,
-      'group': 'Strategiegruppe',
-      'date': '15.05.2024',
-    },
-    {
-      'game': 'Zug um Zug',
-      'title': 'Zug-Abenteuer',
-      'players': 4,
-      'group': 'Reisende',
-      'date': '12.05.2024',
-    },
-    {
-      'game': 'Carcassonne',
-      'title': 'Plättchenlegen',
-      'players': 3,
-      'group': 'Brettspieler',
-      'date': '10.05.2024',
-    },
-    {
-      'game': 'Pandemie',
-      'title': 'Welt retten',
-      'players': 4,
-      'group': 'Koop-Team',
-      'date': '08.05.2024',
-    },
-    {
-      'game': 'Cluedo',
-      'title': 'Krimiabend',
-      'players': 6,
-      'group': 'Detektive',
-      'date': '05.05.2024',
-    },
-    {
-      'game': 'Dixit',
-      'title': 'Fantasiespiel',
-      'players': 5,
-      'group': 'Künstler',
-      'date': '02.05.2024',
-    },
-    {
-      'game': 'Azul',
-      'title': 'Plättchenmeister',
-      'players': 4,
-      'group': 'Familie',
-      'date': '30.04.2024',
-    },
-    {
-      'game': 'Splendor',
-      'title': 'Edelsteinhändler',
-      'players': 3,
-      'group': 'Freunde',
-      'date': '28.04.2024',
-    },
-    {
-      'game': '7 Wonders',
-      'title': 'Antike Reiche',
-      'players': 7,
-      'group': 'Geschichtsfreunde',
-      'date': '25.04.2024',
-    },
-  ];
-  late List<Map<String, dynamic>> suggestedGameData;
+  late Future<List<Game>> _gameListFuture;
+  late final AppDatabase db;
+
+  late final List<Game> skeletonData = List.filled(
+    2,
+    Game(
+      name: 'Skeleton Game',
+      group: Group(
+        name: 'Skeleton Group',
+        members: [
+          Player(name: 'Skeleton Player 1'),
+          Player(name: 'Skeleton Player 2'),
+        ],
+      ),
+      winner: Player(name: 'Skeleton Player 1'),
+    ),
+  );
 
   @override
   void initState() {
     super.initState();
-    suggestedGameData = List.from(allGameData);
+    db = Provider.of<AppDatabase>(context, listen: false);
+    _gameListFuture = Future.delayed(
+      const Duration(milliseconds: 250),
+          () => db.gameDao.getAllGames(),
+    );
   }
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: CustomTheme.backgroundColor,
-      body: Stack(
-        children: [
-          Column(
-            children: [
-              Container(margin: const EdgeInsets.only(bottom: 75)),
-              Expanded(
-                child: gameHistoryListView(allGameData, suggestedGameData),
-              ),
-            ],
-          ),
-          Container(
-            margin: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
-            child: SearchBar(
-              leading: const Icon(Icons.search),
-              onChanged: (value) {
-                if (value.isEmpty) {
-                  setState(() {
-                    suggestedGameData.clear();
-                    suggestedGameData.addAll(allGameData);
-                  });
-                  return;
-                }
-                final suggestions = allGameData.where((currentGame) {
-                  return currentGame['game'].toString().toLowerCase().contains(
-                        value.toLowerCase(),
-                      ) ||
-                      currentGame['title'].toString().toLowerCase().contains(
-                        value.toLowerCase(),
-                      ) ||
-                      currentGame['group'].toString().toLowerCase().contains(
-                        value.toLowerCase(),
-                      );
-                });
-                setState(() {
-                  suggestedGameData.clear();
-                  suggestedGameData.addAll(suggestions);
-                });
-              },
+    return FutureBuilder<List<Game>>(
+      future: _gameListFuture,
+      builder: (BuildContext context, AsyncSnapshot<List<Game>> snapshot) {
+        if (snapshot.hasError) {
+          return const Center(
+            heightFactor: 4,
+            child: Text(
+              'Error while loading recent games.',
             ),
+          );
+        }
+        if (snapshot.connectionState == ConnectionState.done &&
+            (!snapshot.hasData || snapshot.data!.isEmpty)) {
+          return const Center(
+            heightFactor: 4,
+            child: Text('No recent games available.'),
+          );
+        }
+
+        final bool isLoading = snapshot.connectionState == ConnectionState.waiting;
+        final List<Game> games = (isLoading
+            ? skeletonData
+            : (snapshot.data ?? [])
+          ..sort((a, b) => b.createdAt.compareTo(a.createdAt)))
+            .take(2)
+            .toList();
+
+        return Skeletonizer(
+          effect: PulseEffect(
+            from: Colors.grey[800]!,
+            to: Colors.grey[600]!,
+            duration: const Duration(milliseconds: 800),
           ),
-        ],
-      ),
+          enabled: isLoading,
+          enableSwitchAnimation: true,
+          switchAnimationConfig: const SwitchAnimationConfig(
+            duration: Duration(milliseconds: 200),
+            switchInCurve: Curves.linear,
+            switchOutCurve: Curves.linear,
+            transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
+            layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+          ),
+          child: ListView.builder(
+            padding: const EdgeInsets.only(bottom: 85),
+            itemCount: games.length + 1,
+            itemBuilder: (BuildContext context, int index) {
+              if (index == games.length) {
+                return SizedBox(
+                  height: MediaQuery.paddingOf(context).bottom - 20,
+                );
+              }
+              return GameHistoryTile(game: games[index]);
+            },
+          ),
+        );
+      },
     );
   }
-}
-
-Widget gameHistoryListView(allGameData, suggestedGameData) {
-  if (suggestedGameData.isEmpty && allGameData.isEmpty) {
-    return const TopCenteredMessage(icon: Icons.error, title: 'Keine Spiele erstellt', message: '',);
-  } else if (suggestedGameData.isEmpty) {
-    return const TopCenteredMessage(icon: Icons.error, title: 'Keine Spiele mit den Suchparametern gefunden', message: '',);
-  }
-
-  return ListView.separated(
-    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
-    itemCount: suggestedGameData.length,
-    separatorBuilder: (context, index) => const Padding(
-      padding: EdgeInsets.symmetric(vertical: 8.0),
-      child: Divider(),
-    ),
-    itemBuilder: (context, index) {
-      final currentGame = suggestedGameData[index];
-      return GameHistoryTile(
-        gameTitle: currentGame['title'],
-        gameType: currentGame['game'],
-        date: currentGame['date'],
-        groupName: currentGame['group'],
-        winner: 'ich',
-      );
-    },
-  );
-}
+}