Improved invite UX

This commit is contained in:
Christian Pauly 2020-02-16 12:07:48 +01:00
parent 59628bd0c6
commit 32cf2e245a

View File

@ -1,3 +1,5 @@
import 'dart:async';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/components/adaptive_page_layout.dart'; import 'package:fluffychat/components/adaptive_page_layout.dart';
import 'package:fluffychat/components/avatar.dart'; import 'package:fluffychat/components/avatar.dart';
@ -8,13 +10,24 @@ import 'package:toast/toast.dart';
import 'chat_list.dart'; import 'chat_list.dart';
class InvitationSelection extends StatelessWidget { class InvitationSelection extends StatefulWidget {
final Room room; final Room room;
const InvitationSelection(this.room, {Key key}) : super(key: key); const InvitationSelection(this.room, {Key key}) : super(key: key);
@override
_InvitationSelectionState createState() => _InvitationSelectionState();
}
class _InvitationSelectionState extends State<InvitationSelection> {
TextEditingController controller = TextEditingController();
String currentSearchTerm;
bool loading = false;
List<Map<String, dynamic>> foundProfiles = [];
Timer coolDown;
Future<List<User>> getContacts(BuildContext context) async { Future<List<User>> getContacts(BuildContext context) async {
final Client client = Matrix.of(context).client; final Client client = Matrix.of(context).client;
List<User> participants = await room.requestParticipants(); List<User> participants = await widget.room.requestParticipants();
List<User> contacts = []; List<User> contacts = [];
Map<String, bool> userMap = {}; Map<String, bool> userMap = {};
for (int i = 0; i < client.rooms.length; i++) { for (int i = 0; i < client.rooms.length; i++) {
@ -36,7 +49,7 @@ class InvitationSelection extends StatelessWidget {
void inviteAction(BuildContext context, String id) async { void inviteAction(BuildContext context, String id) async {
final success = await Matrix.of(context).tryRequestWithLoadingDialog( final success = await Matrix.of(context).tryRequestWithLoadingDialog(
room.invite(id), widget.room.invite(id),
); );
if (success != false) { if (success != false) {
Toast.show( Toast.show(
@ -47,18 +60,117 @@ class InvitationSelection extends StatelessWidget {
} }
} }
void searchUserWithCoolDown(BuildContext context, String text) async {
coolDown?.cancel();
coolDown = Timer(
Duration(seconds: 1),
() => searchUser(context, text),
);
}
void searchUser(BuildContext context, String text) async {
coolDown?.cancel();
if (text.isEmpty) {
setState(() {
foundProfiles = [];
});
}
currentSearchTerm = text;
if (currentSearchTerm.isEmpty) return;
if (loading) return;
setState(() => loading = true);
final MatrixState matrix = Matrix.of(context);
final response = await matrix.tryRequestWithErrorToast(
matrix.client.jsonRequest(
type: HTTPType.POST,
action: "/client/r0/user_directory/search",
data: {
"search_term": text,
"limit": 10,
}),
);
setState(() => loading = false);
if (response == false ||
!(response is Map) ||
(response["results"] == null)) return;
setState(() {
foundProfiles = List<Map<String, dynamic>>.from(response["results"]);
if ("@$text".isValidMatrixId &&
foundProfiles
.indexWhere((profile) => "@$text" == profile["user_id"]) ==
-1) {
setState(() => foundProfiles = [
{"user_id": "@$text"}
]);
}
foundProfiles.removeWhere((profile) =>
widget.room
.getParticipants()
.indexWhere((u) => u.id == profile["user_id"]) !=
-1);
});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final String groupName = final String groupName = widget.room.name?.isEmpty ?? false
room.name?.isEmpty ?? false ? I18n.of(context).group : room.name; ? I18n.of(context).group
: widget.room.name;
return AdaptivePageLayout( return AdaptivePageLayout(
primaryPage: FocusPage.SECOND, primaryPage: FocusPage.SECOND,
firstScaffold: ChatList(activeChat: room.id), firstScaffold: ChatList(activeChat: widget.room.id),
secondScaffold: Scaffold( secondScaffold: Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text(I18n.of(context).inviteContactToGroup(groupName)), title: Text(I18n.of(context).inviteContact),
bottom: PreferredSize(
preferredSize: Size.fromHeight(68),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: controller,
autofocus: true,
autocorrect: false,
textInputAction: TextInputAction.search,
onChanged: (String text) =>
searchUserWithCoolDown(context, text),
onSubmitted: (String text) => searchUser(context, text),
decoration: InputDecoration(
border: OutlineInputBorder(),
prefixText: "@",
hintText: I18n.of(context).username,
labelText: I18n.of(context).inviteContactToGroup(groupName),
suffixIcon: loading
? Container(
padding: const EdgeInsets.all(8.0),
width: 12,
height: 12,
child: CircularProgressIndicator(),
)
: Icon(Icons.search),
), ),
body: FutureBuilder<List<User>>( ),
),
),
),
body: foundProfiles.isNotEmpty
? ListView.builder(
itemCount: foundProfiles.length,
itemBuilder: (BuildContext context, int i) => ListTile(
leading: Avatar(
MxContent(foundProfiles[i]["avatar_url"] ?? ""),
foundProfiles[i]["display_name"] ??
foundProfiles[i]["user_id"],
),
title: Text(
foundProfiles[i]["display_name"] ??
(foundProfiles[i]["user_id"] as String).localpart,
),
subtitle: Text(foundProfiles[i]["user_id"]),
onTap: () =>
inviteAction(context, foundProfiles[i]["user_id"]),
),
)
: FutureBuilder<List<User>>(
future: getContacts(context), future: getContacts(context),
builder: (BuildContext context, snapshot) { builder: (BuildContext context, snapshot) {
if (!snapshot.hasData) { if (!snapshot.hasData) {