feat: render custom emoji on status cards (closes #21)

Author: aitorres

lib/data/custom_emoji.dart

@@ -0,0 +1,27 @@
+/// The [CustomEmoji] class represents a custom emoji that can be used in
+/// Mastodon statuses.
+class CustomEmoji {
+  /// The shortcode of the custom emoji.
+  final String shortcode;
+
+  /// The URL of the custom emoji.
+  final String url;
+
+  /// The static URL of the custom emoji.
+  final String staticUrl;
+
+  CustomEmoji({
+    required this.shortcode,
+    required this.url,
+    required this.staticUrl,
+  });
+
+  /// Creates a [CustomEmoji] instance from a JSON object.
+  factory CustomEmoji.fromJson(Map<String, dynamic> json) {
+    return CustomEmoji(
+      shortcode: json['shortcode'] as String,
+      url: json['url'] as String,
+      staticUrl: json['static_url'] as String,
+    );
+  }
+}

lib/data/status.dart

@@ -1,6 +1,7 @@
 import 'dart:ui';
 
 import 'package:feathr/data/account.dart';
+import 'package:feathr/data/custom_emoji.dart';
 import 'package:relative_time/relative_time.dart';
 
 /// The [StatusVisibility] enum represents the visibility of a status
@@ -52,6 +53,9 @@ class Status {
   // Spoiler text (content warning)
   final String spoilerText;
 
+  // Custom emojis
+  final List<CustomEmoji> customEmojis;
+
   Status({
     required this.id,
     required this.createdAt,
@@ -65,6 +69,7 @@ class Status {
     required this.repliesCount,
     required this.visibility,
     required this.spoilerText,
+    required this.customEmojis,
     this.reblog,
   });
 
@@ -85,15 +90,36 @@ class Status {
       visibility: StatusVisibility.values.byName(data["visibility"]!),
       spoilerText: data["spoiler_text"]!,
       reblog: data["reblog"] == null ? null : Status.fromJson(data["reblog"]),
+      customEmojis:
+          ((data["emojis"] ?? []) as List)
+              .map(
+                (emoji) => CustomEmoji.fromJson(emoji as Map<String, dynamic>),
+              )
+              .toList(),
     );
   }
 
+  /// Returns the processed and augmented content of the [Status] instance,
+  /// including a note about the reblogged status if applicable,
+  /// and replacing custom emojis with their respective HTML tags.
   String getContent() {
+    // If this status is a reblog, show the original user's account name
     if (reblog != null) {
       // TODO: display original user's avatar on reblogs
       return "Reblogged from ${reblog!.account.acct}: ${reblog!.getContent()}";
     }
-    return content;
+
+    String processedContent = content;
+
+    // Replacing custom emojis with their respective HTML tags
+    for (var emoji in customEmojis) {
+      processedContent = processedContent.replaceAll(
+        ":${emoji.shortcode}:",
+        '<img src="${emoji.staticUrl}" alt="${emoji.shortcode}" />',
+      );
+    }
+
+    return processedContent;
   }
 
   String getRelativeDate() {

lib/services/api.dart

@@ -1,5 +1,4 @@
 import 'dart:convert';
-import 'dart:collection';
 
 import 'package:http/http.dart' as http;
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
@@ -47,9 +46,6 @@ class ApiService {
   /// [http.Client] instance to perform queries (is overriden for tests)
   http.Client httpClient = http.Client();
 
-  /// Cache for custom emojis per Mastodon instance
-  final Map<String, Map<String, String>> _customEmojisCache = HashMap();
-
   /// Performs a GET request to the specified URL through the API helper
   Future<http.Response> _apiGet(String url) async {
     return await helper!.get(url, httpClient: httpClient);
@@ -361,46 +357,6 @@ class ApiService {
     );
   }
 
-  /// Given a Mastodon instance's base URL, requests the Mastodon API to
-  /// return custom emojis available on that server.
-  /// The returned data is a map of shortcode to URL for each custom emoji.
-  /// Note that this request is not tied to the current user or its instance,
-  /// as it's a public endpoint. Returns a list of custom emojis, if any.
-  Future<Map<String, String>> getCustomEmojis(
-    String mastodonInstanceUrl,
-  ) async {
-    final apiUrl = "$mastodonInstanceUrl/api/v1/custom_emojis";
-    http.Response resp = await _apiGet(apiUrl);
-
-    if (resp.statusCode == 200) {
-      List<dynamic> jsonDataRaw = jsonDecode(resp.body);
-      List<Map<String, dynamic>> jsonData =
-          jsonDataRaw.map((item) => item as Map<String, dynamic>).toList();
-
-      return {
-        for (var item in jsonData)
-          item['shortcode'] as String: item['url'] as String,
-      };
-    }
-
-    throw ApiException(
-      "Unexpected status code ${resp.statusCode} on `getCustomEmojis`",
-    );
-  }
-
-  /// Fetches custom emojis for a Mastodon instance, using cache if available
-  Future<Map<String, String>> getCachedCustomEmojis(
-    String mastodonInstanceUrl,
-  ) async {
-    if (_customEmojisCache.containsKey(mastodonInstanceUrl)) {
-      return _customEmojisCache[mastodonInstanceUrl]!;
-    }
-
-    final customEmojis = await getCustomEmojis(mastodonInstanceUrl);
-    _customEmojisCache[mastodonInstanceUrl] = customEmojis;
-    return customEmojis;
-  }
-
   /// Given a [Status]'s ID, requests the Mastodon API to un-boost
   /// the status. Note that this is idempotent: a non-boosted
   /// status will remain non-boosted. Returns the (new) [Status] instance

test/data_test/custom_emoji_test.dart

@@ -0,0 +1,52 @@
+import 'package:flutter_test/flutter_test.dart';
+
+import 'package:feathr/data/custom_emoji.dart';
+
+void main() {
+  group('CustomEmoji', () {
+    test('constructor creates an instance with the correct properties', () {
+      const shortcode = 'thinking';
+      const url = 'https://example.com/emoji/thinking.gif';
+      const staticUrl = 'https://example.com/emoji/thinking.png';
+
+      final emoji = CustomEmoji(
+        shortcode: shortcode,
+        url: url,
+        staticUrl: staticUrl,
+      );
+
+      expect(emoji.shortcode, shortcode);
+      expect(emoji.url, url);
+      expect(emoji.staticUrl, staticUrl);
+    });
+
+    test('fromJson creates a CustomEmoji from a valid JSON map', () {
+      final jsonMap = {
+        'shortcode': 'party',
+        'url': 'https://example.com/emoji/party.gif',
+        'static_url': 'https://example.com/emoji/party.png',
+      };
+
+      final emoji = CustomEmoji.fromJson(jsonMap);
+
+      expect(emoji.shortcode, 'party');
+      expect(emoji.url, 'https://example.com/emoji/party.gif');
+      expect(emoji.staticUrl, 'https://example.com/emoji/party.png');
+    });
+
+    test('fromJson correctly handles JSON keys', () {
+      final jsonMap = {
+        'shortcode': 'smile',
+        'url': 'https://mastodon.example/emoji/smile.gif',
+        'static_url': 'https://mastodon.example/emoji/smile.png',
+        'additional_field': 'should be ignored',
+      };
+
+      final emoji = CustomEmoji.fromJson(jsonMap);
+
+      expect(emoji.shortcode, 'smile');
+      expect(emoji.url, 'https://mastodon.example/emoji/smile.gif');
+      expect(emoji.staticUrl, 'https://mastodon.example/emoji/smile.png');
+    });
+  });
+}

test/data_test/status_test.dart

@@ -25,6 +25,13 @@ void main() {
       "avatar": "avatar-url",
       "header": "header-url",
     },
+    "emojis": [
+      {
+        "shortcode": "smile",
+        "static_url": "https://example.com/static/smile.png",
+        "url": "https://example.com/smile.png",
+      },
+    ],
     "reblog": null,
   };
 
@@ -96,6 +103,13 @@ void main() {
     expect(status.account.isBot, isTrue);
     expect(status.account.avatarUrl, equals("avatar-url"));
     expect(status.account.headerUrl, equals("header-url"));
+    expect(status.customEmojis.length, equals(1));
+    expect(status.customEmojis[0].shortcode, equals("smile"));
+    expect(
+      status.customEmojis[0].staticUrl,
+      equals("https://example.com/static/smile.png"),
+    );
+    expect(status.customEmojis[0].url, equals("https://example.com/smile.png"));
     expect(status.reblog, isNull);
   });
 
@@ -136,6 +150,7 @@ void main() {
     expect(reblog.account.isBot, isTrue);
     expect(reblog.account.avatarUrl, equals("avatar-url-2"));
     expect(reblog.account.headerUrl, equals("header-url-2"));
+    expect(reblog.customEmojis, equals([]));
   });
 
   testWidgets(
@@ -157,4 +172,28 @@ void main() {
       );
     },
   );
+
+  testWidgets('Status.getContent properly handles custom emoji in the content', (
+    WidgetTester tester,
+  ) async {
+    final statusWithEmoji = Status.fromJson({
+      ...testStatusNoReblog,
+      "content": "<p>I am a toot! :smile:</p>",
+      "emojis": [
+        {
+          "shortcode": "smile",
+          "static_url": "https://example.com/static/smile.png",
+          "url": "https://example.com/smile.png",
+        },
+      ],
+    });
+
+    expect(statusWithEmoji.content, equals("<p>I am a toot! :smile:</p>"));
+    expect(
+      statusWithEmoji.getContent(),
+      equals(
+        "<p>I am a toot! <img src=\"https://example.com/static/smile.png\" alt=\"smile\" /></p>",
+      ),
+    );
+  });
 }