web feed intermediate
This commit is contained in:
Fabian Freund
@@ -0,0 +1,261 @@
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:lensai/core/providers/format.dart';
|
||||
import 'package:lensai/core/routing/routes.dart';
|
||||
import 'package:lensai/extensions/nullable.dart';
|
||||
import 'package:lensai/features/geckoview/domain/repositories/tab.dart';
|
||||
import 'package:lensai/features/web_feed/data/models/feed_link.dart';
|
||||
import 'package:lensai/features/web_feed/domain/providers.dart';
|
||||
import 'package:lensai/features/web_feed/extensions/feed_article.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/widgets/authors_horizontal_list.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/widgets/tags_horizontal_list.dart';
|
||||
import 'package:lensai/presentation/widgets/failure_widget.dart';
|
||||
import 'package:lensai/utils/markdown/image_extractor.dart';
|
||||
import 'package:lensai/utils/ui_helper.dart';
|
||||
|
||||
enum _Pages { summary, content }
|
||||
|
||||
class FeedArticleScreen extends HookConsumerWidget {
|
||||
final String articleId;
|
||||
|
||||
const FeedArticleScreen({super.key, required this.articleId});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final articleAsync = ref.watch(feedArticleProvider(articleId));
|
||||
|
||||
return Scaffold(
|
||||
body: articleAsync.when(
|
||||
data: (article) {
|
||||
if (article == null) {
|
||||
return SizedBox.shrink();
|
||||
}
|
||||
|
||||
return HookBuilder(
|
||||
builder: (context) {
|
||||
final hasArticleCreated = article.created != null;
|
||||
final hasArticleUpdated =
|
||||
article.updated != null && article.updated != article.created;
|
||||
final hasAuthors = article.authors.isNotEmpty;
|
||||
final hasTags = article.tags.isNotEmpty;
|
||||
|
||||
final tabs = useMemoized(
|
||||
() => [
|
||||
if (article.summaryMarkdown.isNotEmpty) _Pages.summary,
|
||||
if (article.contentMarkdown.isNotEmpty) _Pages.content,
|
||||
],
|
||||
);
|
||||
|
||||
final tabController = useTabController(
|
||||
initialLength: tabs.length,
|
||||
);
|
||||
|
||||
final articleLink = useMemoized(
|
||||
() => article.links?.firstWhereOrNull(
|
||||
(link) => link.relation == FeedLinkRelation.alternate,
|
||||
),
|
||||
);
|
||||
|
||||
final articleImages = useMemoized(
|
||||
() => (article.contentMarkdown ?? article.summaryMarkdown)
|
||||
.mapNotNull(extractImagesFromMarkdown),
|
||||
);
|
||||
|
||||
final bottomHeight = useMemoized(() {
|
||||
var height = 0.0;
|
||||
|
||||
if (hasArticleCreated) {
|
||||
height += 20;
|
||||
}
|
||||
if (hasArticleUpdated) {
|
||||
height += 20;
|
||||
}
|
||||
if (hasAuthors) {
|
||||
height += 56;
|
||||
}
|
||||
if (hasTags) {
|
||||
height += 56;
|
||||
}
|
||||
|
||||
return height;
|
||||
});
|
||||
|
||||
return NestedScrollView(
|
||||
headerSliverBuilder:
|
||||
(context, innerBoxIsScrolled) => [
|
||||
SliverAppBar.large(
|
||||
pinned: false,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
centerTitle: false,
|
||||
titlePadding: EdgeInsetsDirectional.only(
|
||||
start: 72,
|
||||
end: 72,
|
||||
bottom: bottomHeight + 16,
|
||||
),
|
||||
title: Text(
|
||||
article.displayTitle,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
background: articleImages?.firstOrNull.mapNotNull(
|
||||
(img) => Image.network(
|
||||
img.toString(),
|
||||
fit: BoxFit.cover,
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.surface.withAlpha(200),
|
||||
colorBlendMode: BlendMode.darken,
|
||||
),
|
||||
),
|
||||
),
|
||||
bottom: PreferredSize(
|
||||
preferredSize: Size(double.infinity, bottomHeight),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16.0,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Divider(),
|
||||
Text(
|
||||
'Published: ${hasArticleCreated ? ref.read(formatProvider.notifier).fullDateTimeWithTimezone(article.created!) : 'N/A'}',
|
||||
style: Theme.of(context).textTheme.bodySmall
|
||||
?.copyWith(fontStyle: FontStyle.italic),
|
||||
),
|
||||
if (hasArticleUpdated)
|
||||
Text(
|
||||
'Updated: ${ref.read(formatProvider.notifier).fullDateTimeWithTimezone(article.updated!)}',
|
||||
style: Theme.of(context).textTheme.bodySmall
|
||||
?.copyWith(fontStyle: FontStyle.italic),
|
||||
),
|
||||
if (hasAuthors)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8.0),
|
||||
child: Row(
|
||||
children: [
|
||||
const Text('Authors:'),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: AuthorsHorizontalList(
|
||||
authors: article.authors!,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (hasTags)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8.0),
|
||||
child: Row(
|
||||
children: [
|
||||
const Text('Tags:'),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TagsHorizontalList(
|
||||
tags: article.tags!,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
if (articleLink != null)
|
||||
IconButton(
|
||||
onPressed: () async {
|
||||
await ref
|
||||
.read(tabRepositoryProvider.notifier)
|
||||
.addTab(url: articleLink.uri);
|
||||
|
||||
if (context.mounted) {
|
||||
context.go(BrowserRoute().location);
|
||||
}
|
||||
},
|
||||
icon: const Icon(Icons.open_in_browser),
|
||||
),
|
||||
],
|
||||
),
|
||||
// SliverToBoxAdapter(
|
||||
// child: Padding(
|
||||
// padding: const EdgeInsets.all(8.0),
|
||||
// child: TabBar(
|
||||
// controller: tabController,
|
||||
// tabs: [
|
||||
// ...tabs.map(
|
||||
// (tab) => switch (tab) {
|
||||
// _Pages.summary => const Tab(text: 'Summary'),
|
||||
// _Pages.content => const Tab(text: 'Article'),
|
||||
// },
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
],
|
||||
body: TabBarView(
|
||||
controller: tabController,
|
||||
children: [
|
||||
...tabs.map(
|
||||
(tab) => Markdown(
|
||||
selectable: true,
|
||||
onTapLink: (text, href, title) async {
|
||||
if (href.mapNotNull(Uri.tryParse)
|
||||
case final Uri url) {
|
||||
await ref
|
||||
.read(tabRepositoryProvider.notifier)
|
||||
.addTab(url: url);
|
||||
|
||||
if (context.mounted) {
|
||||
showTabOpenedMessage(
|
||||
context,
|
||||
tabName: title.whenNotEmpty,
|
||||
onShow: () {
|
||||
context.go(BrowserRoute().location);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
styleSheet: MarkdownStyleSheet.fromTheme(
|
||||
Theme.of(context),
|
||||
).copyWith(
|
||||
blockquoteDecoration: BoxDecoration(
|
||||
color:
|
||||
Theme.of(
|
||||
context,
|
||||
).colorScheme.secondaryContainer,
|
||||
borderRadius: BorderRadius.circular(2.0),
|
||||
),
|
||||
),
|
||||
data: switch (tab) {
|
||||
_Pages.summary => article.summaryMarkdown!,
|
||||
_Pages.content => article.contentMarkdown!,
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
error:
|
||||
(error, stackTrace) => Center(
|
||||
child: FailureWidget(
|
||||
title: 'Failed reading article',
|
||||
exception: error,
|
||||
),
|
||||
),
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:lensai/domain/entities/equatable_iterable.dart';
|
||||
import 'package:lensai/extensions/nullable.dart';
|
||||
import 'package:lensai/features/web_feed/data/models/feed_filter.dart';
|
||||
import 'package:lensai/features/web_feed/domain/providers.dart';
|
||||
import 'package:lensai/features/web_feed/domain/providers/article_filter.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/controllers/fetch_articles.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/widgets/feed_article_card.dart';
|
||||
import 'package:lensai/presentation/widgets/failure_widget.dart';
|
||||
|
||||
class FeedArticleListScreen extends HookConsumerWidget {
|
||||
final Uri? feedId;
|
||||
|
||||
const FeedArticleListScreen({required this.feedId});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final articlesAsync = ref.watch(
|
||||
// ignore: provider_parameters
|
||||
feedArticleListProvider(FeedFilter(feedId: feedId)),
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: NestedScrollView(
|
||||
floatHeaderSlivers: true,
|
||||
headerSliverBuilder: (context, innerBoxIsScrolled) {
|
||||
return [
|
||||
Consumer(
|
||||
builder: (context, ref, child) {
|
||||
final tags = ref.watch(articleFilterProvider);
|
||||
|
||||
return SliverAppBar(floating: true, title: Text('Articles'));
|
||||
},
|
||||
),
|
||||
];
|
||||
},
|
||||
body: articlesAsync.when(
|
||||
data: (articles) {
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
if (feedId != null) {
|
||||
await ref
|
||||
.read(fetchArticlesControllerProvider.notifier)
|
||||
.fetchFeedArticles(feedId!);
|
||||
} else {
|
||||
await ref
|
||||
.read(fetchArticlesControllerProvider.notifier)
|
||||
.fetchAllArticles();
|
||||
}
|
||||
},
|
||||
child: ListView.builder(
|
||||
itemCount: articles.length,
|
||||
itemBuilder: (context, i) {
|
||||
final article = articles[i];
|
||||
|
||||
return Consumer(
|
||||
key: ValueKey(article.id),
|
||||
builder: (context, ref, child) {
|
||||
final tags = ref.watch(
|
||||
articleFilterProvider.select(
|
||||
(value) => EquatableCollection(
|
||||
value.tags ?? const {},
|
||||
immutable: false,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return FeedArticleCard(
|
||||
selectedTags: tags.collection,
|
||||
onTagSelected: (tagId, value) {
|
||||
if (value) {
|
||||
ref
|
||||
.read(articleFilterProvider.notifier)
|
||||
.addTag(tagId);
|
||||
} else {
|
||||
ref
|
||||
.read(articleFilterProvider.notifier)
|
||||
.removeTag(tagId);
|
||||
}
|
||||
},
|
||||
article: article,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
error:
|
||||
(error, stackTrace) => Center(
|
||||
child: FailureWidget(
|
||||
title: 'Failed to load Articles',
|
||||
exception: error,
|
||||
),
|
||||
),
|
||||
loading: () => const SizedBox.shrink(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:lensai/extensions/nullable.dart';
|
||||
import 'package:lensai/extensions/uri.dart';
|
||||
import 'package:lensai/features/web_feed/data/database/database.dart';
|
||||
import 'package:lensai/features/web_feed/data/models/feed_category.dart';
|
||||
import 'package:lensai/features/web_feed/domain/repositories/feed_repository.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/widgets/tag_field.dart';
|
||||
import 'package:lensai/presentation/widgets/url_icon.dart';
|
||||
|
||||
enum _DialogMode { create, edit }
|
||||
|
||||
class FeedEditScreen extends HookConsumerWidget {
|
||||
final _DialogMode _mode;
|
||||
|
||||
final FeedData initialFeed;
|
||||
|
||||
const FeedEditScreen._({required _DialogMode mode, required this.initialFeed})
|
||||
: _mode = mode;
|
||||
|
||||
factory FeedEditScreen.create({required FeedData initialFeed}) {
|
||||
return FeedEditScreen._(mode: _DialogMode.create, initialFeed: initialFeed);
|
||||
}
|
||||
|
||||
factory FeedEditScreen.edit({required FeedData initialFeed}) {
|
||||
return FeedEditScreen._(mode: _DialogMode.edit, initialFeed: initialFeed);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final formKey = useMemoized(() => GlobalKey<FormState>());
|
||||
final initialTags = useMemoized(
|
||||
() => initialFeed.tags?.map((tag) => tag.id).toSet(),
|
||||
);
|
||||
final tags = useRef(initialTags ?? {});
|
||||
|
||||
final titleTextController = useTextEditingController(
|
||||
text: initialFeed.title ?? initialFeed.url.host,
|
||||
);
|
||||
final descriptionTextController = useTextEditingController(
|
||||
text: initialFeed.description,
|
||||
);
|
||||
final urlTextController = useTextEditingController(
|
||||
text: initialFeed.url.toString(),
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(switch (_mode) {
|
||||
_DialogMode.create => 'New Feed',
|
||||
_DialogMode.edit => 'Edit Feed',
|
||||
}),
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () async {
|
||||
if (formKey.currentState?.validate() ?? false) {
|
||||
final feedData = FeedData(
|
||||
url: Uri.parse(urlTextController.text),
|
||||
authors: initialFeed.authors,
|
||||
description: descriptionTextController.text.whenNotEmpty,
|
||||
tags: tags.value.map((tag) => FeedCategory(id: tag)).toList(),
|
||||
title: titleTextController.text.whenNotEmpty,
|
||||
);
|
||||
|
||||
await ref
|
||||
.read(feedRepositoryProvider.notifier)
|
||||
.upsertFeed(feedData);
|
||||
|
||||
if (context.mounted) {
|
||||
context.pop();
|
||||
}
|
||||
}
|
||||
},
|
||||
icon: const Icon(Icons.check),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Form(
|
||||
key: formKey,
|
||||
child: ListView(
|
||||
children: [
|
||||
TextFormField(
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: Padding(
|
||||
padding: const EdgeInsets.all(10.0),
|
||||
child: UrlIcon(
|
||||
initialFeed.url.base,
|
||||
iconSize: 24.0,
|
||||
),
|
||||
),
|
||||
label: const Text('Title'),
|
||||
),
|
||||
controller: titleTextController,
|
||||
),
|
||||
TextFormField(
|
||||
decoration: const InputDecoration(
|
||||
label: Text('Description'),
|
||||
),
|
||||
minLines: 1,
|
||||
maxLines: 3,
|
||||
controller: descriptionTextController,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TagField(
|
||||
initialTags: tags.value,
|
||||
onTagsUpdate: (newTags) {
|
||||
tags.value = newTags;
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextFormField(
|
||||
decoration: const InputDecoration(
|
||||
label: Text('Address'),
|
||||
),
|
||||
keyboardType: TextInputType.url,
|
||||
controller: urlTextController,
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
validator: (value) {
|
||||
if (value.isEmpty) {
|
||||
return 'Address must be provided';
|
||||
}
|
||||
|
||||
if (Uri.tryParse(value!) case final Uri url) {
|
||||
if (url.isScheme('https') ||
|
||||
url.isScheme('http') &&
|
||||
url.authority.isNotEmpty) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return 'Inavlid URL';
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (_mode == _DialogMode.edit)
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: BorderSide(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
foregroundColor: Theme.of(context).colorScheme.error,
|
||||
iconColor: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
label: const Text('Delete'),
|
||||
icon: const Icon(Icons.delete),
|
||||
onPressed: () async {
|
||||
final result = await showDialog<bool?>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Delete Feed'),
|
||||
content: const Text(
|
||||
'Are you sure you want to delete this feed and delete all related articles?',
|
||||
),
|
||||
actions: <Widget>[
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context, false);
|
||||
},
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context, true);
|
||||
},
|
||||
child: const Text('Delete'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
if (result == true) {
|
||||
await ref
|
||||
.read(feedRepositoryProvider.notifier)
|
||||
.deleteFeed(initialFeed.url);
|
||||
|
||||
if (context.mounted) {
|
||||
context.pop();
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:lensai/features/web_feed/domain/providers.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/controllers/fetch_articles.dart';
|
||||
import 'package:lensai/features/web_feed/presentation/widgets/feed_card.dart';
|
||||
import 'package:lensai/presentation/widgets/failure_widget.dart';
|
||||
|
||||
class FeedListScreen extends HookConsumerWidget {
|
||||
const FeedListScreen();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final feeds = ref.watch(feedListProvider);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Feeds')),
|
||||
body: feeds.when(
|
||||
data: (feeds) {
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
await ref
|
||||
.read(fetchArticlesControllerProvider.notifier)
|
||||
.fetchAllArticles();
|
||||
},
|
||||
child: ListView.builder(
|
||||
itemCount: feeds.length,
|
||||
itemBuilder: (context, i) {
|
||||
return FeedCard(feed: feeds[i]);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
error:
|
||||
(error, stackTrace) => Center(
|
||||
child: FailureWidget(
|
||||
title: 'Failed to load Feeds',
|
||||
exception: error,
|
||||
),
|
||||
),
|
||||
loading: () => const SizedBox.shrink(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user