lemmur-app-android/lib/widgets/user_profile.dart

410 lines
13 KiB
Dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:intl/intl.dart';
import 'package:lemmy_api_client/v3.dart';
import '../hooks/memo_future.dart';
import '../hooks/stores.dart';
import '../l10n/l10n.dart';
import '../pages/manage_account.dart';
import '../util/extensions/api.dart';
import '../util/extensions/datetime.dart';
import '../util/goto.dart';
import '../util/text_color.dart';
import 'avatar.dart';
import 'fullscreenable_image.dart';
import 'markdown_text.dart';
import 'sortable_infinite_list.dart';
/// Shared widget of UserPage and ProfileTab
class UserProfile extends HookWidget {
final String instanceHost;
final int userId;
final FullPersonView? _fullUserView;
const UserProfile({required this.userId, required this.instanceHost})
: _fullUserView = null;
UserProfile.fromFullPersonView(FullPersonView this._fullUserView)
: userId = _fullUserView.personView.person.id,
instanceHost = _fullUserView.instanceHost;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final accountsStore = useAccountsStore();
final userDetailsSnap = useMemoFuture(() async {
if (_fullUserView != null) return _fullUserView;
return await LemmyApiV3(instanceHost).run(GetPersonDetails(
personId: userId,
savedOnly: false,
sort: SortType.active,
auth: accountsStore.defaultUserDataFor(instanceHost)?.jwt.raw,
));
}, [userId, instanceHost]);
if (!userDetailsSnap.hasData) {
return const Center(child: CircularProgressIndicator());
} else if (userDetailsSnap.hasError) {
return Center(
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
const Icon(Icons.error),
Padding(
padding: const EdgeInsets.all(8),
child: Text('ERROR: ${userDetailsSnap.error}'),
)
]),
);
}
final fullPersonView = userDetailsSnap.data!;
final userView = fullPersonView.personView;
return DefaultTabController(
length: 3,
child: NestedScrollView(
headerSliverBuilder: (_, __) => [
SliverAppBar(
pinned: true,
expandedHeight: 300,
toolbarHeight: 0,
forceElevated: true,
backgroundColor: theme.cardColor,
flexibleSpace:
FlexibleSpaceBar(background: _UserOverview(userView)),
bottom: PreferredSize(
preferredSize: const TabBar(tabs: []).preferredSize,
child: Material(
color: theme.cardColor,
child: TabBar(
tabs: [
Tab(text: L10n.of(context)!.posts),
Tab(text: L10n.of(context)!.comments),
const Tab(text: 'About'),
],
),
),
),
),
],
body: TabBarView(children: [
// TODO: first batch is already fetched on render
// TODO: comment and post come from the same endpoint, could be shared
InfinitePostList(
fetcher: (page, batchSize, sort) => LemmyApiV3(instanceHost)
.run(GetPersonDetails(
personId: userView.person.id,
savedOnly: false,
sort: SortType.active,
page: page,
limit: batchSize,
auth: accountsStore.defaultUserDataFor(instanceHost)?.jwt.raw,
))
.then((val) => val.posts),
),
InfiniteCommentList(
fetcher: (page, batchSize, sort) => LemmyApiV3(instanceHost)
.run(GetPersonDetails(
personId: userView.person.id,
savedOnly: false,
sort: SortType.active,
page: page,
limit: batchSize,
auth: accountsStore.defaultUserDataFor(instanceHost)?.jwt.raw,
))
.then((val) => val.comments),
),
_AboutTab(fullPersonView),
]),
),
);
}
}
/// Content in the sliver flexible space
/// Renders general info about the given user.
/// Such as his nickname, no. of posts, no. of posts,
/// banner, avatar etc.
class _UserOverview extends HookWidget {
final PersonViewSafe userView;
const _UserOverview(this.userView);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorOnTopOfAccentColor =
textColorBasedOnBackground(theme.accentColor);
return Stack(
children: [
if (userView.person.banner != null)
// TODO: for some reason doesnt react to presses
FullscreenableImage(
url: userView.person.banner!,
child: CachedNetworkImage(
imageUrl: userView.person.banner!,
errorWidget: (_, __, ___) => const SizedBox.shrink(),
),
)
else
Container(
width: double.infinity,
height: 200,
color: theme.accentColor,
),
Container(
height: 200,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Colors.black26,
Colors.transparent,
],
),
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 60),
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
color: theme.cardColor,
),
),
),
),
),
SafeArea(
child: Column(
children: [
if (userView.person.avatar != null)
SizedBox(
width: 80,
height: 80,
child: Container(
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(blurRadius: 6, color: Colors.black54)
],
borderRadius: const BorderRadius.all(Radius.circular(15)),
border: Border.all(color: Colors.white, width: 3),
),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(12)),
child: FullscreenableImage(
url: userView.person.avatar!,
child: CachedNetworkImage(
imageUrl: userView.person.avatar!,
errorWidget: (_, __, ___) => const SizedBox.shrink(),
),
),
),
),
),
if (userView.person.avatar != null)
const SizedBox(height: 8)
else
const SizedBox(height: 80),
Text(
userView.person.displayName,
style: theme.textTheme.headline6,
),
const SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'@${userView.person.name}@',
style: theme.textTheme.caption,
),
InkWell(
onTap: () => goToInstance(
context, userView.person.originInstanceHost),
child: Text(
userView.person.originInstanceHost,
style: theme.textTheme.caption,
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Chip(
label: Row(
children: [
Icon(
Icons.article,
size: 15,
color: colorOnTopOfAccentColor,
),
const SizedBox(width: 4),
Text(
L10n.of(context)!
.number_of_posts(userView.counts.postCount),
style: TextStyle(color: colorOnTopOfAccentColor),
),
],
),
),
const SizedBox(width: 16),
Chip(
label: Row(
children: [
Icon(
Icons.comment,
size: 15,
color: colorOnTopOfAccentColor,
),
const SizedBox(width: 4),
Text(
L10n.of(context)!
.number_of_comments(userView.counts.commentCount),
style: TextStyle(color: colorOnTopOfAccentColor),
),
],
),
),
],
),
const SizedBox(height: 15),
Text(
'Joined ${userView.person.published.fancy}',
style: theme.textTheme.bodyText1,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.cake,
size: 13,
),
Padding(
padding: const EdgeInsets.only(left: 4),
child: Text(
DateFormat('MMM dd, yyyy')
.format(userView.person.published),
style: theme.textTheme.bodyText1,
),
),
],
),
const SizedBox(height: 8),
],
),
),
],
);
}
}
class _AboutTab extends HookWidget {
final FullPersonView userDetails;
const _AboutTab(this.userDetails);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final instanceHost = userDetails.personView.person.instanceHost;
final accStore = useAccountsStore();
final isOwnedAccount = accStore.loggedInInstances.contains(instanceHost) &&
accStore
.usernamesFor(instanceHost)
.contains(userDetails.personView.person.name);
const wallPadding = EdgeInsets.symmetric(horizontal: 15);
final divider = Padding(
padding: EdgeInsets.symmetric(
horizontal: wallPadding.horizontal / 2, vertical: 10),
child: const Divider(),
);
communityTile(String name, String? icon, int id) => ListTile(
dense: true,
onTap: () => goToCommunity.byId(context, instanceHost, id),
title: Text('!$name'),
leading: Avatar(
url: icon,
radius: 20,
),
);
return ListView(
padding: const EdgeInsets.symmetric(vertical: 20),
children: [
if (isOwnedAccount)
ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.edit),
SizedBox(width: 10),
Text('edit profile'),
],
),
onTap: () => goTo(
context,
(_) => ManageAccountPage(
instanceHost: userDetails.instanceHost,
username: userDetails.personView.person.name),
),
),
if (userDetails.personView.person.bio != null) ...[
Padding(
padding: wallPadding,
child: MarkdownText(userDetails.personView.person.bio!,
instanceHost: instanceHost)),
divider,
],
if (userDetails.moderates.isNotEmpty) ...[
ListTile(
title: Center(
child: Text(
'Moderates:',
style: theme.textTheme.headline6?.copyWith(fontSize: 18),
),
),
),
for (final comm
in userDetails.moderates
..sort((a, b) => a.community.name.compareTo(b.community.name)))
communityTile(
comm.community.name, comm.community.icon, comm.community.id),
divider,
],
if (userDetails.follows.isNotEmpty) ...[
ListTile(
title: Center(
child: Text(
'Subscribed:',
style: theme.textTheme.headline6?.copyWith(fontSize: 18),
),
),
),
for (final comm
in userDetails.follows
..sort((a, b) => a.community.name.compareTo(b.community.name)))
communityTile(
comm.community.name, comm.community.icon, comm.community.id)
]
],
);
}
}