chore: make ratings request on client side

Author: M7mdisk

static/js/public/snap-details/ratings.ts

@@ -0,0 +1,103 @@
+interface RatingsData {
+  snap_id: string;
+  total_votes: number;
+  ratings_band: string;
+}
+
+async function fetchSnapRatings(snapId: string): Promise<RatingsData | null> {
+  try {
+    const response = await fetch(`/api/snap/${snapId}/ratings`);
+
+    if (!response.ok) {
+      console.error(
+        `Failed to fetch ratings for snap ${snapId}:`,
+        response.status,
+      );
+      return null;
+    }
+
+    const data = await response.json();
+
+    return data;
+  } catch (error) {
+    console.error(`Error fetching ratings for snap ${snapId}:`, error);
+    return null;
+  }
+}
+
+function renderRatingsInfo(
+  ratingsData: RatingsData | null,
+  containerSelector: string,
+): void {
+  const container = document.querySelector(containerSelector) as HTMLElement;
+
+  if (!container) {
+    return;
+  }
+
+  if (!ratingsData) {
+    return;
+  }
+
+  const ratingsBand = ratingsData.ratings_band;
+  let icon = "";
+  let text = "";
+
+  switch (ratingsBand) {
+    case "very-good":
+      icon = "p-icon--thumbs-up";
+      text = "Very good";
+      break;
+    case "good":
+      icon = "p-icon--thumbs-up";
+      text = "Good";
+      break;
+    case "neutral":
+      icon = "p-icon--minus";
+      text = "Neutral";
+      break;
+    case "poor":
+      icon = "p-icon--thumbs-down";
+      text = "Poor";
+      break;
+    case "very-poor":
+      icon = "p-icon--thumbs-down";
+      text = "Very poor";
+      break;
+    default:
+      return;
+  }
+
+  const title = text.charAt(0).toUpperCase() + text.slice(1) + " rating";
+  const html = `
+    <span class="p-snap-ratings">
+      <span title="${title}"><i class="${icon}"></i> ${text}</span>
+      <span> (${ratingsData.total_votes} votes)</span>
+    </span>
+  `;
+
+  const list = document.querySelector(containerSelector);
+  if (list) {
+    const li = document.createElement("li");
+    li.className = "p-inline-list__item";
+    li.innerHTML = html;
+    list.appendChild(li);
+  }
+}
+
+export default function initSnapRatings(
+  snapId: string,
+  containerSelectors: string[],
+): void {
+  if (!snapId) {
+    return;
+  }
+
+  fetchSnapRatings(snapId).then((ratingsData) => {
+    containerSelectors.forEach((selector) => {
+      renderRatingsInfo(ratingsData, selector);
+    });
+  });
+}
+
+export { fetchSnapRatings, renderRatingsInfo, RatingsData };

static/js/public/store-details.ts

@@ -7,6 +7,7 @@ import initEmbeddedCardModal from "./snap-details/embeddedCard";
 import { snapDetailsPosts } from "./snap-details/blog-posts";
 import initExpandableArea from "./expandable-area";
 import initCopyCommand from "./snap-details/copyCommand";
+import initSnapRatings from "./snap-details/ratings";
 import declareGlobal from "../libs/declare";
 import { trackPageView } from "@canonical/analytics-events";
 
@@ -25,4 +26,5 @@ declareGlobal("snapcraft.public.storeDetails", {
   initExpandableArea,
   initReportSnap,
   videos,
+  initSnapRatings,
 });

templates/store/package_header/_package_header_data.html

@@ -47,9 +47,8 @@ <h1 class="u-sv-1" data-live="title">{{ package_title }}</h1>
         {{ developer_info(name=developer[0], url=developer[1]) }}
       {% endif %}
       {{ publisher_info(publisher, username, developer_validation, display_name, VERIFIED_PUBLISHER, STAR_DEVELOPER) }}
-      {{ ratings_info(ratings) }}
     </div>
-    <ul class="p-inline-list--vertical-divider">
+    <ul class="p-inline-list--vertical-divider" id="js-snap-details-list">
       {% if developer %}
         <li class="p-inline-list__item u-hide--small">{{ developer_info(name=developer[0], url=developer[1]) }}</li>
       {% endif %}
@@ -59,9 +58,6 @@ <h1 class="u-sv-1" data-live="title">{{ package_title }}</h1>
           <a href="/search?categories={{ category.slug }}">{{ category.name }}</a>
         </li>
       {% endfor %}
-      {% if ratings and ratings.total_votes > 0 %}
-        <li class="p-inline-list__item u-hide--small">{{ ratings_info(ratings) }}</li>
-      {% endif %}
     </ul>
   </div>
 {%- endmacro -%}

templates/store/snap-details.html

@@ -368,6 +368,12 @@ <h5 class="p-notification__title">Error</h5>
         Sentry.captureException(e);
       }
 
+      try {
+        snapcraft.public.storeDetails.initSnapRatings('{{ snap_id }}', ['#js-snap-details-list']);
+      } catch(e) {
+        Sentry.captureException(e);
+      }
+
       {% if not is_preview %}
       try {
         snapcraft.public.storeDetails.initReportSnap(