Merge pull request #619 from GetStream/cds-405

refactor(ui): use channel `.nameStream` and `.imageStream` instead of `.extraDataStream`
This commit is contained in:
Salvatore Giordano
2021-08-23 11:26:20 +02:00
committed by GitHub
7 changed files with 127 additions and 147 deletions
@@ -90,57 +90,54 @@ class ChannelAvatar extends StatelessWidget {
final colorTheme = chatThemeData.colorTheme; final colorTheme = chatThemeData.colorTheme;
final previewTheme = chatThemeData.channelPreviewTheme.avatarTheme; final previewTheme = chatThemeData.channelPreviewTheme.avatarTheme;
return BetterStreamBuilder<Map<String, dynamic>>( return BetterStreamBuilder<String>(
stream: channel.extraDataStream, stream: channel.imageStream,
initialData: channel.extraData, initialData: channel.image,
builder: (context, extraData) { builder: (context, channelImage) {
final channelImage = extraData['image']; Widget child = ClipRRect(
borderRadius: borderRadius ?? previewTheme?.borderRadius,
if (channelImage != null) { child: Container(
Widget child = ClipRRect( constraints: constraints ?? previewTheme?.constraints,
borderRadius: borderRadius ?? previewTheme?.borderRadius, decoration: BoxDecoration(color: colorTheme.accentPrimary),
child: Container( child: InkWell(
constraints: constraints ?? previewTheme?.constraints, onTap: onTap,
decoration: BoxDecoration(color: colorTheme.accentPrimary), child: CachedNetworkImage(
child: InkWell( imageUrl: channelImage,
onTap: onTap, errorWidget: (_, __, ___) => Center(
child: CachedNetworkImage( child: Text(
imageUrl: channelImage, channel.name?[0] ?? '',
errorWidget: (_, __, ___) => Center( style: TextStyle(
child: Text( color: colorTheme.barsBg,
extraData['name']?[0] ?? '', fontWeight: FontWeight.bold,
style: TextStyle(
color: colorTheme.barsBg,
fontWeight: FontWeight.bold,
),
), ),
), ),
fit: BoxFit.cover,
), ),
fit: BoxFit.cover,
),
),
),
);
if (selected) {
child = ClipRRect(
key: const Key('selectedImage'),
borderRadius: BorderRadius.circular(selectionThickness) +
(borderRadius ??
previewTheme?.borderRadius ??
BorderRadius.zero),
child: Container(
constraints: constraints ?? previewTheme?.constraints,
color: selectionColor ?? colorTheme.accentPrimary,
child: Padding(
padding: EdgeInsets.all(selectionThickness),
child: child,
), ),
), ),
); );
if (selected) {
child = ClipRRect(
key: const Key('selectedImage'),
borderRadius: BorderRadius.circular(selectionThickness) +
(borderRadius ??
previewTheme?.borderRadius ??
BorderRadius.zero),
child: Container(
constraints: constraints ?? previewTheme?.constraints,
color: selectionColor ?? colorTheme.accentPrimary,
child: Padding(
padding: EdgeInsets.all(selectionThickness),
child: child,
),
),
);
}
return child;
} }
return child;
},
noDataBuilder: (context) {
final currentUser = streamChat.currentUser!; final currentUser = streamChat.currentUser!;
final otherMembers = channel.state!.members final otherMembers = channel.state!.members
.where((it) => it.userId != currentUser.id) .where((it) => it.userId != currentUser.id)
@@ -27,40 +27,46 @@ class ChannelName extends StatelessWidget {
final client = StreamChat.of(context); final client = StreamChat.of(context);
final channel = StreamChannel.of(context).channel; final channel = StreamChannel.of(context).channel;
return BetterStreamBuilder<Map<String, Object?>>( assert(channel.state != null, 'Channel ${channel.id} is not initialized');
stream: channel.extraDataStream,
initialData: channel.extraData, return BetterStreamBuilder<String>(
builder: (context, data) => _buildName( stream: channel.nameStream,
data, initialData: channel.name,
channel.state?.members, builder: (context, channelName) => Text(
client, channelName,
style: textStyle,
overflow: textOverflow,
),
noDataBuilder: (context) => _generateName(
client.currentUser!,
channel.state!.members,
), ),
); );
} }
Widget _buildName( Widget _generateName(
Map<String, dynamic> extraData, User currentUser,
List<Member>? members, List<Member> members,
StreamChatState client,
) => ) =>
LayoutBuilder( LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
var title = context.translations.noTitleText; var channelName = context.translations.noTitleText;
if (extraData['name'] != null) { final otherMembers = members.where(
title = extraData['name']; (member) => member.userId != currentUser.id,
} else { );
final otherMembers = members
?.where((member) => member.userId != client.currentUser!.id); if (otherMembers.isNotEmpty) {
if (otherMembers?.length == 1) { if (otherMembers.length == 1) {
if (otherMembers!.first.user != null) { final user = otherMembers.first.user;
title = otherMembers.first.user!.name; if (user != null) {
channelName = user.name;
} }
} else if (otherMembers?.isNotEmpty == true) { } else {
final maxWidth = constraints.maxWidth; final maxWidth = constraints.maxWidth;
final maxChars = maxWidth / (textStyle?.fontSize ?? 1); final maxChars = maxWidth / (textStyle?.fontSize ?? 1);
var currentChars = 0; var currentChars = 0;
final currentMembers = <Member>[]; final currentMembers = <Member>[];
otherMembers!.forEach((element) { otherMembers.forEach((element) {
final newLength = final newLength =
currentChars + (element.user?.name.length ?? 0); currentChars + (element.user?.name.length ?? 0);
if (newLength < maxChars) { if (newLength < maxChars) {
@@ -71,13 +77,14 @@ class ChannelName extends StatelessWidget {
final exceedingMembers = final exceedingMembers =
otherMembers.length - currentMembers.length; otherMembers.length - currentMembers.length;
title = '${currentMembers.map((e) => e.user?.name).join(', ')} ' channelName =
'${currentMembers.map((e) => e.user?.name).join(', ')} '
'${exceedingMembers > 0 ? '+ $exceedingMembers' : ''}'; '${exceedingMembers > 0 ? '+ $exceedingMembers' : ''}';
} }
} }
return Text( return Text(
title, channelName,
style: textStyle, style: textStyle,
overflow: textOverflow, overflow: textOverflow,
); );
@@ -26,12 +26,11 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream)
when(() => channel.extraData).thenReturn({ .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
'name': 'test', when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => client.wsConnectionStatusStream) when(() => client.wsConnectionStatusStream)
.thenAnswer((_) => Stream.value(ConnectionStatus.connected)); .thenAnswer((_) => Stream.value(ConnectionStatus.connected));
@@ -91,12 +90,11 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream)
when(() => channel.extraData).thenReturn({ .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
'name': 'test', when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => channelState.unreadCountStream) when(() => channelState.unreadCountStream)
.thenAnswer((i) => Stream.value(1)); .thenAnswer((i) => Stream.value(1));
@@ -159,12 +157,11 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream)
when(() => channel.extraData).thenReturn({ .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
'name': 'test', when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => channelState.unreadCountStream) when(() => channelState.unreadCountStream)
.thenAnswer((i) => Stream.value(1)); .thenAnswer((i) => Stream.value(1));
@@ -305,12 +302,11 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream)
when(() => channel.extraData).thenReturn({ .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
'name': 'test', when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => channelState.unreadCountStream) when(() => channelState.unreadCountStream)
.thenAnswer((i) => Stream.value(1)); .thenAnswer((i) => Stream.value(1));
@@ -373,12 +369,11 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream)
when(() => channel.extraData).thenReturn({ .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
'name': 'test', when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => channelState.unreadCountStream) when(() => channelState.unreadCountStream)
.thenAnswer((i) => Stream.value(1)); .thenAnswer((i) => Stream.value(1));
@@ -20,14 +20,11 @@ void main() {
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id')); when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
when(() => channel.state).thenReturn(channelState); when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
'image': 'imagetest', when(() => channel.imageStream)
})); .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
when(() => channel.extraData).thenReturn({ when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
'name': 'test',
'image': 'imagetest',
});
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(MaterialApp(
home: StreamChat( home: StreamChat(
@@ -43,7 +40,7 @@ void main() {
final image = final image =
tester.widget<CachedNetworkImage>(find.byType(CachedNetworkImage)); tester.widget<CachedNetworkImage>(find.byType(CachedNetworkImage));
expect(image.imageUrl, 'imagetest'); expect(image.imageUrl, 'https://bit.ly/321RmWb');
}, },
); );
@@ -59,12 +56,10 @@ void main() {
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id')); when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
when(() => channel.state).thenReturn(channelState); when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream).thenAnswer((i) => Stream.value(null));
when(() => channel.extraData).thenReturn({ when(() => channel.image).thenReturn(null);
'name': 'test',
});
when(() => channelState.membersStream).thenAnswer((i) => Stream.value([ when(() => channelState.membersStream).thenAnswer((i) => Stream.value([
Member( Member(
userId: 'user-id', userId: 'user-id',
@@ -132,12 +127,9 @@ void main() {
when(() => clientState.currentUser).thenReturn(currentUser); when(() => clientState.currentUser).thenReturn(currentUser);
when(() => channel.state).thenReturn(channelState); when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
})); when(() => channel.imageStream).thenAnswer((i) => Stream.value(null));
when(() => channel.extraData).thenReturn({
'name': 'test',
});
final members = [ final members = [
Member( Member(
userId: 'user-id', userId: 'user-id',
@@ -198,14 +190,11 @@ void main() {
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id')); when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
when(() => channel.state).thenReturn(channelState); when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
'image': 'imagetest', when(() => channel.imageStream)
})); .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
when(() => channel.extraData).thenReturn({ when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
'name': 'test',
'image': 'imagetest',
});
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(MaterialApp(
home: StreamChat( home: StreamChat(
@@ -21,17 +21,13 @@ void main() {
when(() => channel.state).thenReturn(channelState); when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((_) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream).thenAnswer((_) => Stream.value('test'));
'name': 'test', when(() => channel.name).thenReturn('test');
}));
when(() => channel.extraData).thenReturn({
'name': 'test',
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => channelState.unreadCountStream) when(() => channelState.unreadCountStream)
.thenAnswer((i) => Stream.value(1)); .thenAnswer((i) => Stream.value(1));
when(() => channelState.membersStream).thenAnswer((i) => Stream.value([ when(() => channelState.membersStream).thenAnswer((_) => Stream.value([
Member( Member(
userId: 'user-id', userId: 'user-id',
user: User(id: 'user-id'), user: User(id: 'user-id'),
@@ -28,12 +28,12 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.nameStream)
'name': 'test name', .thenAnswer((i) => Stream.value('test name'));
})); when(() => channel.name).thenReturn('test name');
when(() => channel.extraData).thenReturn({ when(() => channel.imageStream)
'name': 'test name', .thenAnswer((i) => Stream.value('https://bit.ly/321RmWb'));
}); when(() => channel.image).thenReturn('https://bit.ly/321RmWb');
when(() => clientState.channels).thenReturn({ when(() => clientState.channels).thenReturn({
channel.cid!: channel, channel.cid!: channel,
}); });
@@ -22,12 +22,8 @@ void main() {
when(() => channel.client).thenReturn(client); when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false); when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false)); when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer((i) => Stream.value({ when(() => channel.name).thenReturn('test');
'name': 'test', when(() => channel.nameStream).thenAnswer((i) => Stream.value('test'));
}));
when(() => channel.extraData).thenReturn({
'name': 'test',
});
when(() => channelState.unreadCount).thenReturn(1); when(() => channelState.unreadCount).thenReturn(1);
when(() => channelState.unreadCountStream) when(() => channelState.unreadCountStream)
.thenAnswer((i) => Stream.value(1)); .thenAnswer((i) => Stream.value(1));