Showing featured categories (#4469)

canonical · Dec 5, 2023 · a75da59 · a75da59
1 parent 0801dd4
commit a75da59
Show file tree

Hide file tree

Showing 7 changed files with 355 additions and 445 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@canonical/global-nav": "3.6.1",
     "@canonical/latest-news": "1.4.1",
     "@canonical/react-components": "0.47.1",
-    "@canonical/store-components": "0.37.1",
+    "@canonical/store-components": "0.38.0",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",

diff --git a/static/js/store/components/Packages/Packages.tsx b/static/js/store/components/Packages/Packages.tsx
@@ -12,13 +12,14 @@ import { DefaultCard, LoadingCard, Filters } from "@canonical/store-components";
 
 import Banner from "../Banner";
 
-import type { Package, FeaturedPackage } from "../../types/shared";
+import type { Package } from "../../types/shared";
 
 function Packages() {
   const ITEMS_PER_PAGE = 15;
 
   const getData = async () => {
-    const response = await fetch(`/beta/store.json${search}`);
+    const queryString = search || "?categories=featured";
+    const response = await fetch(`/beta/store.json${queryString}`);
     const data = await response.json();
     const packagesWithId = data.packages.map((item: Package) => {
       return {
@@ -45,27 +46,6 @@ function Packages() {
   const searchRef = useRef<HTMLInputElement | null>(null);
   const searchSummaryRef = useRef<HTMLDivElement>(null);
 
-  const topFeaturedSnap: FeaturedPackage = window.featuredSnaps[0];
-  const topFeaturedSnapBanner = topFeaturedSnap.media.find(
-    (media) => media.type === "banner"
-  );
-
-  const featuredSnaps = window.featuredSnaps.slice(1);
-
-  function formatFeaturedSnap(featuredSnap: FeaturedPackage) {
-    const iconUrl = featuredSnap.media.find((media) => media.type === "icon");
-    const snap = {
-      package: {
-        description: featuredSnap.summary,
-        display_name: featuredSnap.title,
-        name: featuredSnap.package_name,
-        icon_url: iconUrl ? iconUrl.url : "",
-      },
-    };
-
-    return snap;
-  }
-
   useEffect(() => {
     refetch();
   }, [searchParams]);
@@ -119,7 +99,7 @@ function Packages() {
                 <Filters
                   categories={data?.categories || []}
                   selectedCategories={
-                    searchParams.get("categories")?.split(",") || []
+                    searchParams.get("categories")?.split(",") || ["featured"]
                   }
                   setSelectedCategories={(
                     items: Array<{
@@ -137,56 +117,20 @@ function Packages() {
                     setSearchParams(searchParams);
                   }}
                   disabled={isFetching}
+                  showFeatured={true}
                 />
               </div>
             </div>
           </Col>
           <Col size={9}>
-            {featuredSnaps.length > 0 &&
-              !searchParams.get("q") &&
-              !searchParams.get("categories") && (
-                <>
-                  <div className="u-fixed-width">
-                    <h2 className="p-muted-heading">Featured snaps</h2>
-                  </div>
-                  {topFeaturedSnap && topFeaturedSnapBanner && (
-                    <div className="u-fixed-width">
-                      <p className="u-no-max-width">
-                        <a href={`/${topFeaturedSnap.package_name}`}>
-                          <img
-                            src={topFeaturedSnapBanner.url}
-                            alt={topFeaturedSnap.package_name}
-                            width="1920"
-                            height="640"
-                          />
-                        </a>
-                      </p>
-                    </div>
-                  )}
-                  <Row>
-                    {featuredSnaps.map((featuredSnap: FeaturedPackage) => (
-                      <Col
-                        size={3}
-                        style={{ marginBottom: "1.5rem" }}
-                        key={featuredSnap.package_name}
-                      >
-                        <DefaultCard data={formatFeaturedSnap(featuredSnap)} />
-                      </Col>
-                    ))}
-                  </Row>
-                  <hr className="p-rule" />
-                </>
-              )}
-            {!searchParams.get("q") && !searchParams.get("categories") && (
-              <h2 className="p-muted-heading">All snaps</h2>
-            )}
             {data?.packages && data?.packages.length > 0 && (
               <div className="u-fixed-width" ref={searchSummaryRef}>
                 {searchParams.get("q") ? (
                   <p>
                     Showing {currentPage === "1" ? "1" : firstResultNumber} to{" "}
-                    {lastResultNumber} of {data?.total_items} results for{" "}
-                    <strong>"{searchParams.get("q")}"</strong>.{" "}
+                    {lastResultNumber} of{" "}
+                    {data?.total_items < 100 ? data?.total_items : "over 100"}{" "}
+                    items
                     <Button
                       appearance="link"
                       onClick={() => {

diff --git a/static/js/store/types/index.d.ts b/static/js/store/types/index.d.ts
diff --git a/static/js/store/types/shared.ts b/static/js/store/types/shared.ts
@@ -26,25 +26,3 @@ export type Package = {
     count: number | null;
   };
 };
-
-export type FeaturedPackage = {
-  apps: Array<string>;
-  architecture: Array<string>;
-  developer_id: string;
-  developer_name: string;
-  developer_validation: string;
-  media: Array<{
-    height: number;
-    type: string;
-    url: string;
-    width: number;
-  }>;
-  origin: string;
-  package_name: string;
-  sections: Array<{
-    featured: Boolean;
-    name: string;
-  }>;
-  summary: string;
-  title: string;
-};
diff --git a/templates/store/beta.html b/templates/store/beta.html
@@ -25,11 +25,5 @@
 
 {% block content %}
 <main id="root"></main>
-
-{% if featured_snaps %}
-<script>
-  window.featuredSnaps = {{ featured_snaps | safe }}
-</script>
-{% endif %}
 <script src="{{ versioned_static('js/dist/beta-store.js') }}" defer></script>
 {% endblock %}
diff --git a/webapp/store/views.py b/webapp/store/views.py
@@ -1,7 +1,6 @@
 from math import ceil, floor
 import talisker.requests
 import flask
-from flask import json
 from dateutil import parser
 import webapp.helpers as helpers
 import webapp.store.logic as logic
@@ -272,14 +271,7 @@ def brand_search_snap():
 
     @store.route("/beta-store")
     def beta_store_view():
-        featured_snaps = api.get_featured_items()["results"]
-
-        if not featured_snaps:
-            featured_snaps = []
-
-        return flask.render_template(
-            "store/beta.html", featured_snaps=json.dumps(featured_snaps)
-        )
+        return flask.render_template("store/beta.html")
 
     @store.route("/youtube", methods=["POST"])
     def get_video_thumbnail_data():