Commentary (#156)

* refactor: move PostId to a new file

This prevents in import cycle.

* feat: begin wiring up comments

* refactor: set `postServiceProvider` by parent

This lets us get comments.

* feat: support rendering comments

* feat: write comments

* fix: image provider logging

* fix: post view path param

* feat: remove card from post view page

* feat: switch to fab

* fix: fetch posts 1-by-1 sometimes

* fix: autoleadingbutton only works when scope is poppable

* wip: pretty comments

* feat: awesome comment stuff

Co-authored-by: Matthew Wasser <[email protected]>

* feat: more comment stuff

Co-authored-by: Matthew Wasser <[email protected]>

* feat: fix a ton of bugs

Co-authored-by: Eli <[email protected]>

* ci: correct generated restoration keys

Co-authored-by: Matthew Wasser <[email protected]>

* fix: comment duplication

---------

Co-authored-by: Matthew Wasser <[email protected]>

Author: lishaduck

.github/workflows/ci.yaml

@@ -62,7 +62,8 @@ jobs:
             packages/*/lib/src/app/*.gm.dart
             packages/*/lib/src/l10n/app_localizations.dart
             packages/*/lib/src/l10n/app_localizations_*.dart
-          key: ${{ runner.os }}-${{ steps.flutter.outputs.CHANNEL }}-dart-${{ hashFiles('**/build.yaml') }}
+          key: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-${{ hashFiles('**/build.yaml') }}-${{ hashFiles('packages/*/lib/**.dart') }}
+          restore-keys: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-
       - name: 📦 Install dependencies
         uses: bluefireteam/melos-action@c7dcb921b23cc520cace360b95d02b37bf09cdaa # v3
         with:
@@ -143,7 +144,8 @@ jobs:
             packages/*/lib/src/app/*.gm.dart
             packages/*/lib/src/l10n/app_localizations.dart
             packages/*/lib/src/l10n/app_localizations_*.dart
-          key: ${{ runner.os }}-${{ steps.flutter.outputs.CHANNEL }}-dart-${{ hashFiles('**/build.yaml') }}
+          key: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-${{ hashFiles('**/build.yaml') }}-${{ hashFiles('packages/*/lib/**.dart') }}
+          restore-keys: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-
       - name: 📦 Install dependencies
         run: dart pub get --enforce-lockfile
       - name: 🔧 Build
@@ -195,7 +197,8 @@ jobs:
             packages/*/lib/src/app/*.gm.dart
             packages/*/lib/src/l10n/app_localizations.dart
             packages/*/lib/src/l10n/app_localizations_*.dart
-          key: ${{ runner.os }}-${{ steps.flutter.outputs.CHANNEL }}-dart-${{ hashFiles('**/build.yaml') }}
+          key: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-${{ hashFiles('**/build.yaml') }}-${{ hashFiles('packages/*/lib/**.dart') }}
+          restore-keys: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-
       - name: 🌋 Install Melos
         uses: bluefireteam/melos-action@c7dcb921b23cc520cace360b95d02b37bf09cdaa # v3
         with:
@@ -244,10 +247,8 @@ jobs:
             packages/*/lib/src/app/*.gm.dart
             packages/*/lib/src/l10n/app_localizations.dart
             packages/*/lib/src/l10n/app_localizations_*.dart
-          key: ${{ runner.os }}-${{ steps.flutter.outputs.CHANNEL }}-dart-${{ hashFiles('**/build.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ steps.flutter.outputs.CHANNEL }}-dart-
-            ${{ runner.os }}-
+          key: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-${{ hashFiles('**/build.yaml') }}-${{ hashFiles('packages/*/lib/**.dart') }}
+          restore-keys: generated-${{ steps.flutter.outputs.CHANNEL }}-${{ runner.os }}-
       - name: 🌋 Install Melos
         uses: bluefireteam/melos-action@c7dcb921b23cc520cace360b95d02b37bf09cdaa # v3
         with:

packages/app/lib/src/app/bootstrap.dart

@@ -6,6 +6,7 @@ library;
 
 import 'dart:developer';
 
+import 'package:fast_immutable_collections/fast_immutable_collections.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
@@ -127,6 +128,7 @@ String _normalizedValue(Object? value) {
     Uint8List _ => 'Uint8List(${value.length})',
     AsyncData<Uint8List>(:final value) =>
       'AsyncData<Uint8List>(value: ${_normalizedValue(value)})',
+    final IList<Uint8List> list => '[${list.map(_normalizedValue).join(', ')}]',
     _ => value.toString(),
   };
 }

packages/app/lib/src/app/create_post.dart

@@ -11,10 +11,13 @@ import 'package:image_picker/image_picker.dart';
 import 'package:path_provider/path_provider.dart';
 
 import '../features/auth/application/auth_service.dart';
+import '../features/home/application/feed_service.dart';
 import '../features/home/application/location_service.dart';
 import '../features/home/application/uploaded_image_service.dart';
 import '../features/home/data/post_repository.dart';
+import '../features/home/domain/feed_entity.dart';
 import '../features/home/domain/post_entity.dart';
+import '../features/home/domain/post_id.dart';
 import '../features/home/domain/uploaded_image_entity.dart';
 import '../utils/hooks.dart';
 import '../utils/responsive.dart';
@@ -33,11 +36,11 @@ class CreatePost extends HookConsumerWidget {
     final formKey = useGlobalKey<FormState>();
     final title = useState('');
     final description = useState('');
-    final userId = ref.watch(idProvider);
-    final userName = ref.watch(userNameProvider);
 
     final handleSubmit = useCallback(() async {
-      final uploadedImages = ref.watch(uploadedImagesServiceProvider);
+      final userId = ref.read(idProvider);
+      final userName = ref.read(userNameProvider);
+      final uploadedImages = ref.read(uploadedImagesServiceProvider);
       final location = await ref.read(locationServiceProvider.future);
       var lat = location.latitude.roundToDouble();
       var lng = location.longitude.roundToDouble();
@@ -51,7 +54,7 @@ class CreatePost extends HookConsumerWidget {
 
       formKey.currentState?.save();
 
-      // Create a list off all uploaded images ids
+      // Create a list of all uploaded images ids
 
       await ref
           .read(postRepositoryProvider)
@@ -69,10 +72,16 @@ class CreatePost extends HookConsumerWidget {
               imageIds:
                   // Read in the list of uploaded images ids.
                   uploadedImages.map((image) => image.imageId).toIList(),
+              comments: const IList.empty(),
             ),
             uploadedImages,
           );
 
+      // Clear the uploaded images list.
+      ref
+        ..invalidate(feedServiceProvider(FeedEntity.local(lat, lng)))
+        ..invalidate(feedServiceProvider(const FeedEntity.world()));
+
       if (!context.mounted) return;
       await context.router.maybePop();
 

packages/app/lib/src/app/router.dart

@@ -68,7 +68,7 @@ class AppRouter extends RootStackRouter {
     ),
     AutoRoute(
       page: PostViewRoute.page,
-      path: '/post',
+      path: '/post/:id',
       title: (context, data) => 'Post',
     ),
     AutoRoute(

packages/app/lib/src/features/home/application/feed_service.dart

@@ -13,6 +13,7 @@ import '../data/post_repository.dart';
 import '../domain/feed_entity.dart';
 import '../domain/feed_model.dart';
 import '../domain/post_entity.dart';
+import '../domain/post_id.dart';
 
 part 'feed_service.g.dart';
 
@@ -42,8 +43,12 @@ base class FeedService extends _$FeedService {
       // Store the post in the provider
       ref.watch(singlePostProvider(post.id).notifier).setPost(post);
 
-      // Collect the post ID
-      newPostIds.add(post.id);
+      // Collect the post ID if it's not already in the state
+      if (!state.ids.contains(post.id)) {
+        newPostIds.add(post.id);
+      } else {
+        throw Exception('Post ${post.id} already exists in the feed state.');
+      }
     }
 
     // Update the state with the new batch of post IDs and cursor
@@ -68,16 +73,20 @@ FutureOr<PostId?> feedPost(Ref ref, FeedEntity feed, int postIndex) async {
     ref.watch(feedPostProvider(feed, postIndex - 1));
   }
 
-  var next = ref
-      .read(feedServiceProvider(feed).select((s) => s.ids))
-      .elementAtOrNull(postIndex);
-  var moreToGet = true;
+  var next = ref.watch(
+    feedServiceProvider(feed).select((s) => s.ids.elementAtOrNull(postIndex)),
+  );
+
+  if (next == null) {
+    await ref.watch(feedServiceProvider(feed).notifier).fetchMore();
 
-  while (moreToGet && next == null) {
-    moreToGet = await ref.watch(feedServiceProvider(feed).notifier).fetchMore();
     next = ref
-        .read(feedServiceProvider(feed).select((s) => s.ids))
+        .watch(feedServiceProvider(feed).select((s) => s.ids))
         .elementAtOrNull(postIndex);
+
+    if (next == null) {
+      return null;
+    }
   }
 
   return next;
@@ -139,6 +148,24 @@ base class SinglePost extends _$SinglePost {
   }
 }
 
+/// Fetch a single post from the database.
+@Riverpod(keepAlive: true)
+Future<PostEntity?> getPost(Ref ref, PostId postId) async {
+  var post = ref.watch(singlePostProvider(postId));
+
+  if (post == null) {
+    final postRepo = ref.read(postRepositoryProvider);
+
+    post = await postRepo.readPost(postId);
+
+    if (post == null) return null;
+
+    ref.read(singlePostProvider(postId).notifier).setPost(post);
+  }
+
+  return post;
+}
+
 /// Image provider for posts
 @Riverpod(keepAlive: true)
 Future<Uint8List> image(Ref ref, String id) async {

packages/app/lib/src/features/home/application/post_service.dart

@@ -7,7 +7,8 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 import '../../auth/domain/user.dart';
-import '../domain/post_entity.dart';
+import '../domain/comment_entity.dart';
+import '../domain/post_id.dart';
 import '../domain/post_model_entity.dart';
 import 'avatar_service.dart';
 import 'feed_service.dart';
@@ -20,19 +21,42 @@ part 'post_service.g.dart';
 /// This lets us emulate a "suspense"-like UI, where the UI doesn’t show until all data is loaded.
 @Riverpod(keepAlive: true)
 Future<PostModelEntity?> postService(Ref ref, PostId postId) async {
-  final post = ref.watch(singlePostProvider(postId));
+  final post = await ref.watch(getPostProvider(postId).future);
 
   if (post == null) return null;
 
-  final (avatar, images) =
+  final (avatar, images, commentsAvatars) =
       await (
         ref.watch(avatarServiceProvider(post.authorName).future),
         Future.wait(
           // TODO(MattsAttack): Could we grab all images with a single call?
           post.imageIds.map((image) => ref.watch(imageProvider(image).future)),
         ),
+        Future.wait(
+          post.comments.map(
+            (comment) =>
+                ref.watch(avatarServiceProvider(comment.authorName).future),
+          ),
+        ),
       ).wait;
 
+  if (post.comments.length != commentsAvatars.length) {
+    throw Exception('The number of comments and comment avatars do not match.');
+  }
+
+  final commentsWithAvatars = post.comments.zip(commentsAvatars);
+  final comments =
+      [
+        for (final (comment, commentAvatar) in commentsWithAvatars)
+          CommentEntity(
+            author: comment.author,
+            comment: comment.comment,
+            avatar: commentAvatar,
+            authorName: comment.authorName,
+            timestamp: comment.timestamp,
+          ),
+      ].lockUnsafe;
+
   return PostModelEntity(
     id: post.id,
     authorName: post.authorName,
@@ -42,6 +66,7 @@ Future<PostModelEntity?> postService(Ref ref, PostId postId) async {
     description: post.description,
     images: images.lockUnsafe,
     likes: post.likes,
+    comments: comments,
   );
 }
 
@@ -100,3 +125,11 @@ IList<Uint8List> currentPostImages(Ref ref) {
 IList<UserId> currentPostLikes(Ref ref) {
   return ref.watch(currentPostProvider.select((value) => value.likes));
 }
+
+/// Provide the number comments of the [currentPost].
+@Riverpod(dependencies: [currentPost])
+int currentPostCommentsCount(Ref ref) {
+  return ref.watch(
+    currentPostProvider.select((value) => value.comments.length),
+  );
+}

packages/app/lib/src/features/home/data/post_repository.dart

@@ -1,9 +1,10 @@
 /// This library contains post fetchers.
 library;
 
+import 'dart:typed_data';
+
 import 'package:appwrite/appwrite.dart';
 import 'package:fast_immutable_collections/fast_immutable_collections.dart';
-import 'package:flutter/foundation.dart' show Uint8List;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
@@ -12,6 +13,7 @@ import '../../../utils/api.dart';
 import '../../auth/domain/user.dart';
 import '../domain/feed_entity.dart';
 import '../domain/post_entity.dart';
+import '../domain/post_id.dart';
 import '../domain/uploaded_image_entity.dart';
 
 part 'post_repository.g.dart';
@@ -24,6 +26,9 @@ abstract interface class PostRepository {
   /// Read all the posts.
   Future<IList<PostEntity>> readPosts(FeedEntity feed, PostId? cursor);
 
+  /// Read a single post.
+  Future<PostEntity?> readPost(PostId postId);
+
   /// Create a new post.
   ///
   /// Returns the created post.
@@ -40,6 +45,9 @@ abstract interface class PostRepository {
 
   /// Fetch images from Appwrite.
   Future<Uint8List> getImage(String id);
+
+  /// Post a comment.
+  Future<void> updatePost(PostId postId, Map<String, Object?> updatedData);
 }
 
 final class _AppwritePostRepository implements PostRepository {
@@ -86,6 +94,32 @@ final class _AppwritePostRepository implements PostRepository {
     }).toIList();
   }
 
+  @override
+  Future<PostEntity?> readPost(PostId postId) async {
+    try {
+      final document = await database.getDocument(
+        databaseId: databaseId,
+        collectionId: collectionId,
+        documentId: postId.id,
+      );
+
+      assert(
+        !document.data.containsKey('id'),
+        'ID should not have been redundantly stored.',
+      );
+
+      document.data['id'] = document.$id;
+
+      return PostEntity.fromJson(document.data);
+    } on AppwriteException catch (e) {
+      if (e.code == 404) {
+        return null;
+      }
+
+      rethrow;
+    }
+  }
+
   @override
   Future<Uint8List> getImage(String id) async {
     return await storage.getFileView(bucketId: 'post-media', fileId: id);
@@ -133,6 +167,16 @@ final class _AppwritePostRepository implements PostRepository {
       file: InputFile.fromBytes(bytes: bytes, filename: fileName),
     );
   }
+
+  @override
+  Future<void> updatePost(PostId id, Map<String, Object?> updatedData) async {
+    await database.updateDocument(
+      databaseId: databaseId,
+      collectionId: collectionId,
+      documentId: id.id,
+      data: updatedData,
+    );
+  }
 }
 
 /// Get a [PostRepository] for a specific author and feed.

packages/app/lib/src/features/home/domain/comment_dto_entity.dart

@@ -0,0 +1,35 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+import '../../../utils/json.dart';
+import '../../auth/domain/user.dart';
+
+part 'comment_dto_entity.freezed.dart';
+part 'comment_dto_entity.g.dart';
+
+/// {@template nexus.features.home.domain.comment_dto_entity}
+/// Represent a comment on a post.
+/// {@endtemplate}
+@immutable
+@freezed
+sealed class CommentDtoEntity with _$CommentDtoEntity {
+  /// {@macro nexus.features.home.domain.comment_dto_entity}
+  ///
+  /// Create a new, immutable instance of [CommentDtoEntity].
+  const factory CommentDtoEntity({
+    /// The textual content of the comment.
+    required String comment,
+
+    /// The [UserId] of the author of the comment.
+    required UserId author,
+
+    /// The author of the comment’s display name.
+    required String authorName,
+
+    /// When the comment was created.
+    @DataTimeJsonConverter() required DateTime timestamp,
+  }) = _CommentDtoEntity;
+
+  /// Deserialize a JSON [Map] into a new, immutable instance of [CommentDtoEntity].
+  factory CommentDtoEntity.fromJson(Map<String, dynamic> json) =>
+      _$CommentDtoEntityFromJson(json);
+}