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>