596c8cc4eb
Work already done: - moving the New Room screen to a different endpoint - fetching public rooms using the post API - displaying public rooms Suggestion for user interaction: 1. click on room 2. open bottomSheet with information and join button 3. click "join" to join room
108 lines
3 KiB
Dart
108 lines
3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:outbag_app/backend/request.dart';
|
|
import 'package:outbag_app/backend/room.dart';
|
|
import 'package:outbag_app/backend/user.dart';
|
|
import 'package:routemaster/routemaster.dart';
|
|
|
|
class JoinRoomPage extends StatefulWidget {
|
|
const JoinRoomPage({super.key});
|
|
|
|
@override
|
|
State<StatefulWidget> createState() => _JoinRoomPageState();
|
|
}
|
|
|
|
class _JoinRoomPageState extends State {
|
|
List<Room> rooms = [];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
(() async {
|
|
User user;
|
|
try {
|
|
user = await User.fromDisk();
|
|
} catch (_) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
final resp = await postWithCreadentials(
|
|
path: 'listPublicRooms',
|
|
credentials: user,
|
|
target: user.server,
|
|
body: {});
|
|
if (resp.res == Result.ok) {
|
|
// parse rooms
|
|
final List<Room> list = resp.body['data'].map<Room>((json) {
|
|
return Room.fromJSON(json);
|
|
}).toList();
|
|
setState(() {
|
|
rooms = list;
|
|
});
|
|
} else {
|
|
throw Error();
|
|
}
|
|
} catch (_) {
|
|
// network error
|
|
// unable to load room list
|
|
// NOTE: might want to show snackbar
|
|
// with warning
|
|
}
|
|
})();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('Join Room'),
|
|
leading: IconButton(
|
|
onPressed: () {
|
|
// go back
|
|
Routemaster.of(context).history.back();
|
|
},
|
|
icon: const Icon(Icons.arrow_back),
|
|
tooltip: "Go back",
|
|
),
|
|
),
|
|
body: ListView.builder(
|
|
itemCount: rooms.length,
|
|
itemBuilder: (ctx, i) {
|
|
final room = rooms[i];
|
|
return Card(
|
|
margin: const EdgeInsets.all(8.0),
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
semanticContainer: true,
|
|
child: InkWell(
|
|
onTap: () {
|
|
// TODO: show modalBottomSheet
|
|
// with room information
|
|
// and join button
|
|
},
|
|
child: Container(
|
|
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
|
|
child: ListTile(
|
|
title: Text(room.name),
|
|
visualDensity: const VisualDensity(vertical: 3),
|
|
subtitle: Text(room.description),
|
|
leading: AspectRatio(
|
|
aspectRatio: 1 / 1,
|
|
child: SvgPicture.asset("${room.icon?.img}"),
|
|
),
|
|
hoverColor: Colors.transparent,
|
|
))));
|
|
},
|
|
),
|
|
floatingActionButton: FloatingActionButton.extended(
|
|
label: const Text('New'),
|
|
icon: const Icon(Icons.add),
|
|
onPressed: () {
|
|
// create new room
|
|
Routemaster.of(context).push("/new-room");
|
|
},
|
|
tooltip: 'Create Room',
|
|
),
|
|
);
|
|
}
|
|
}
|