Like button in is:liked-by-me search results. (#8942)

Author: isoos

app/lib/account/like_backend.dart

@@ -75,6 +75,7 @@ class LikeBackend {
       tx.queueMutations(inserts: [p, newLike]);
       return newLike;
     });
+    await cache.packageView(package).purge();
     await purgeAccountCache(userId: user.userId);
     return res;
   }
@@ -100,6 +101,7 @@ class LikeBackend {
       p.likes--;
       tx.queueMutations(inserts: [p], deletes: [likeKey]);
     });
+    await cache.packageView(package).purge();
     await cache.userPackageLikes(user.userId).purge();
   }
 }

app/lib/frontend/templates/views/pkg/liked_package_list.dart

@@ -72,22 +72,20 @@ d.Node renderLikeButtonAndLabel(
   return d.div(
     classes: ['like-button-and-label'],
     children: [
-      _renderLikeButton(package, isLiked),
+      renderLikeButton(package, likeCount: likeCount, isLiked: isLiked),
       d.span(
         classes: ['like-button-and-label--count-wrapper'],
         child: d.span(
           classes: ['like-button-and-label--count'],
           text: _formatPackageLikes(likeCount),
-          attributes: {
-            'data-value': likeCount.toString(),
-          },
         ),
       ),
     ],
   );
 }
 
-d.Node _renderLikeButton(String package, bool isLiked) {
+d.Node renderLikeButton(String package,
+    {required int likeCount, required bool isLiked}) {
   return material.iconButton(
     classes: ['like-button-and-label--button'],
     isOn: isLiked,
@@ -108,6 +106,7 @@ d.Node _renderLikeButton(String package, bool isLiked) {
       'data-ga-click-event': 'toggle-like',
       'aria-pressed': isLiked ? 'true' : 'false',
       'data-package': package,
+      'data-value': likeCount.toString(),
     },
   );
 }

app/lib/frontend/templates/views/pkg/package_list.dart

@@ -6,6 +6,8 @@ import 'package:_pub_shared/format/x_ago_format.dart';
 import 'package:_pub_shared/search/search_form.dart';
 import 'package:_pub_shared/search/tags.dart';
 import 'package:clock/clock.dart';
+import 'package:pub_dev/frontend/request_context.dart';
+import 'package:pub_dev/frontend/templates/views/pkg/liked_package_list.dart';
 
 import '../../../../package/models.dart';
 import '../../../../package/screenshots/backend.dart';
@@ -31,6 +33,11 @@ d.Node listOfPackagesNode({
 }) {
   final bestNameMatch =
       (nameMatches == null || nameMatches.isEmpty) ? null : nameMatches.first;
+  final listingPackagesLikedByMe =
+      requestContext.experimentalFlags.useMyLikedSearch &&
+          (searchForm?.parsedQuery.tagsPredicate
+                  .isRequiredTag(AccountTag.isLikedByMe) ??
+              false);
   return d.div(
     classes: ['packages'],
     children: [
@@ -39,6 +46,7 @@ d.Node listOfPackagesNode({
             hit,
             searchForm: searchForm,
             isNameMatch: hit.name == bestNameMatch,
+            isLiked: listingPackagesLikedByMe,
           )),
       imageCarousel(),
     ],
@@ -77,6 +85,7 @@ d.Node _packageItem(
   PackageView view, {
   required SearchForm? searchForm,
   required bool isNameMatch,
+  required bool isLiked,
 }) {
   final isFlutterFavorite = view.tags.contains(PackageTags.isFlutterFavorite);
   final isNullSafe = view.tags.contains(PackageVersionTags.isNullSafe);
@@ -188,6 +197,9 @@ d.Node _packageItem(
     labeledScoresNode: labeledScoresNodeFromPackageView(view),
     description: view.ellipsizedDescription ?? '',
     metadataNode: metadataNode,
+    likeIcon: isLiked
+        ? renderLikeButton(view.name, likeCount: view.likes, isLiked: isLiked)
+        : null,
     copyIcon:
         copyIcon(package: view.name, version: view.releases.stable.version),
     tagsNode: tagsNodeFromPackageView(searchForm: searchForm, package: view),
@@ -220,6 +232,7 @@ d.Node _item({
   required String description,
   required d.Node metadataNode,
   required d.Node? tagsNode,
+  d.Node? likeIcon,
   d.Node? copyIcon,
   required String? replacedBy,
   required List<_ApiPageUrl>? apiPages,
@@ -237,6 +250,7 @@ d.Node _item({
             'pub-monochrome-icon-hoverable',
           ], children: [
             d.a(href: url, text: name),
+            if (likeIcon != null) ...[d.text(' '), likeIcon],
             if (copyIcon != null) copyIcon,
             d.text(' '),
             if (isNameMatch) nameMatchBadgeNode,

app/test/frontend/golden/pkg_activity_log_page.html

@@ -186,12 +186,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>

app/test/frontend/golden/pkg_admin_page.html

@@ -186,12 +186,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>

app/test/frontend/golden/pkg_changelog_page.html

@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>

app/test/frontend/golden/pkg_example_page.html

@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>

app/test/frontend/golden/pkg_install_page.html

@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>

app/test/frontend/golden/pkg_score_page.html

@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>

app/test/frontend/golden/pkg_score_page_with_downloads_chart.html

@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
+                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
                       <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                       <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
-                      <span class="like-button-and-label--count" data-value="0">0</span>
+                      <span class="like-button-and-label--count">0</span>
                     </span>
                   </div>
                 </div>