Merge pull request #451 from bounswe/feature/MB/313/custom-widget-and…

…-games-page

Feature/mb/313/custom-widget-and-games-page

ludos/mobile/lib/games_page.dart

@@ -0,0 +1,168 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'helper/colors.dart';
+import 'reusable_widgets/game_summary.dart';
+import 'helper/APIService.dart';
+import 'create_game.dart';
+
+class GamesPage extends StatefulWidget {
+  const GamesPage({Key? key}) : super(key: key);
+
+  @override
+  State<GamesPage> createState() => _GamesPageState();
+}
+
+class _GamesPageState extends State<GamesPage> {
+  late Future<List<GameSummary>> games;
+  final TextEditingController searchInputController = TextEditingController();
+  String searchText = '';
+
+  @override
+  void initState() {
+    super.initState();
+    games = fetchData();
+  }
+
+  Future<List<GameSummary>> fetchData() async {
+    final response = await APIService().listGames();
+    try {
+      //print(json.decode(response.body));
+      if (response.statusCode == 200) {
+        final Map<String, dynamic> responseData = json.decode(response.body);
+
+        List<dynamic> gamesList = responseData['items'];
+
+        return gamesList.map((dynamic item) => GameSummary(
+          title: item['title'],
+          averageRating: item['averageRating'].toDouble(),
+          coverLink: item['coverLink'],
+          numOfFollowers: item['followers'],
+          gameStory: 'gameStory',
+          tags: item['tags'],
+          textColor: MyColors.white,
+          backgroundColor: MyColors.red,
+          fontSize: 20,
+        )).toList();
+      } else {
+        print("Error: ${response.statusCode} - ${response.body}");
+        throw Exception('Failed to load games');
+      }
+    } catch (error) {
+      print("Error: $error");
+      throw Exception('Failed to load games');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: MyColors.darkBlue,
+      appBar: AppBar(
+        backgroundColor: const Color(0xFFf89c34),
+        title: const Text('Games'),
+      ),
+      body: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            const SizedBox(height: 10),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                const SizedBox(width: 10.0),
+                Expanded(
+                  child: TextFormField(
+                    controller: searchInputController,
+                    style: const TextStyle(color: MyColors.white),
+                    obscureText: false,
+                    decoration: const InputDecoration(
+                      labelText: 'Search',
+                      labelStyle: TextStyle(
+                          color: MyColors.lightBlue, fontWeight: FontWeight.bold),
+                      border: UnderlineInputBorder(
+                          borderSide:
+                          BorderSide(color: MyColors.lightBlue, width: 2.0)),
+                      focusedBorder: UnderlineInputBorder(
+                        borderSide:
+                        BorderSide(color: MyColors.lightBlue, width: 2.0),
+                      ),
+                    ),
+                    cursorColor: MyColors.lightBlue,
+                  ),
+                ),
+                Container(
+                  decoration: BoxDecoration(
+                    color: MyColors.lightBlue, // Set the background color
+                    borderRadius: BorderRadius.circular(5.0), // Optional: Add border radius for rounded corners
+                  ),
+                  child: IconButton(
+                    onPressed: () {
+                      setState(() {
+                         searchText = searchInputController.text;
+                         //print(searchText);
+                       });
+                    },
+                    icon: const Icon(Icons.search, color: MyColors.white),
+                  ),
+                ),
+                const SizedBox(width: 5.0),
+                Container(
+                  decoration: BoxDecoration(
+                    color: MyColors.lightBlue, // Set the background color
+                    borderRadius: BorderRadius.circular(5.0), // Optional: Add border radius for rounded corners
+                  ),
+                  child: TextButton(
+                    style: TextButton.styleFrom(
+                        backgroundColor: MyColors.lightBlue,
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(5.0),
+                        )
+                    ),
+                    onPressed: () {
+                      Navigator.of(context).push(MaterialPageRoute(
+                        builder: (context) => const CreateGamePage(),
+                      ));
+                    }, child: const Text(
+                      'Create Game',
+                          style: TextStyle(
+                            color: MyColors.white,
+                            fontSize: 16.0,
+                          ),
+                  ),
+                  ),
+                ),
+
+              ],
+            ),
+            //const SafeArea(child: SizedBox(height: 10)),
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: FutureBuilder<List<GameSummary>>(
+                future: games,
+                builder: (context, snapshot) {
+                  if (snapshot.connectionState == ConnectionState.waiting) {
+                    // Show a loading indicator while fetching data
+                    return const Center(child: CircularProgressIndicator());
+                  } else if (snapshot.hasError) {
+                    // Handle errors
+                    return Center(child: Text('Error: ${snapshot.error}'));
+                  } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+                    // Handle the case when there is no data
+                    return const Center(child: Text('No games available.'));
+                  } else {
+                    // Display the fetched data
+                    return Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: snapshot.data!,
+                    );
+                  }
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

ludos/mobile/lib/helper/APIService.dart

@@ -2,7 +2,6 @@ import 'package:http/http.dart' as http;
 import 'dart:async';
 import 'dart:convert';
 
-
 class APIService {
   var baseURL = "http://3.125.225.39:8080";
   Future<(String?, int)> login(String username, String password) async {
@@ -39,7 +38,7 @@ class APIService {
     final response = await http.put(uri, body: body, headers: {'content-type': "application/json", 'Authorization': 'Bearer $authToken'});
     return response;
   }
-  
+
   Future<http.Response> createGame(String title, String coverLink, 
   String systemRequirements, List<String> predecessors, List<String> successors, 
   String gameGuide, String gameStory, List<String> platforms, String ageRestriction, 
@@ -90,15 +89,11 @@ class APIService {
     return response;
   }
 
-    Future<http.Response> changePassword(String newPassword, String oldPassword) async {
-    var uri = Uri.parse("$baseURL/user/change-password");
-    final body = jsonEncode(<String, Object>{
-      'newPassword': newPassword,
-      'oldPassword': oldPassword,
-    });
-    final response = await http.put(uri, body: body, headers: {'content-type': "application/json"});
+  Future<http.Response> listGames() async {
+    var uri = Uri.parse("$baseURL/game?limit=10");
+    final response = await http.get(uri, headers: {'content-type': "application/json"});
 
     return response;
   }
 
-}
+}

ludos/mobile/lib/main.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:ludos_mobile_app/change_password.dart';
 import 'login_page.dart';
+import 'games_page.dart';
 import 'userProvider.dart';
 import 'package:provider/provider.dart';
 import 'helper/colors.dart';
@@ -414,9 +415,15 @@ class Home extends StatelessWidget {
               IconButton(
                   color: Colors.white,
                   onPressed: () {
-                     Navigator.of(context).push(MaterialPageRoute(
+/*
+                    Navigator.of(context).push(MaterialPageRoute(
                     builder: (context) => const CreateGamePage(key: null,),
                   ));
+                 */
+                    Navigator.of(context).push(MaterialPageRoute(
+                      builder: (context) => const GamesPage(),
+                    ));
+
                   },
                   icon: const Icon(Icons.games)),
               IconButton(