From fca109087570b3274e616adebfec3622eeef15b8 Mon Sep 17 00:00:00 2001 From: Steve Rydz Date: Wed, 29 Nov 2023 14:18:49 +0000 Subject: [PATCH] Showing featured categories --- package.json | 2 +- .../js/store/components/Packages/Packages.tsx | 72 +- static/js/store/types/index.d.ts | 7 - static/js/store/types/shared.ts | 22 - templates/store/beta.html | 6 - webapp/store/views.py | 10 +- yarn.lock | 681 +++++++++--------- 7 files changed, 355 insertions(+), 445 deletions(-) delete mode 100644 static/js/store/types/index.d.ts diff --git a/package.json b/package.json index 69e7b40f9a..0ce20ba32d 100644 --- 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 index e18862c82a..b3bcd22037 100644 --- 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(null); const searchSummaryRef = useRef(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() { - {featuredSnaps.length > 0 && - !searchParams.get("q") && - !searchParams.get("categories") && ( - <> -
-

Featured snaps

-
- {topFeaturedSnap && topFeaturedSnapBanner && ( -
-

- - {topFeaturedSnap.package_name} - -

-
- )} - - {featuredSnaps.map((featuredSnap: FeaturedPackage) => ( - - - - ))} - -
- - )} - {!searchParams.get("q") && !searchParams.get("categories") && ( -

All snaps

- )} {data?.packages && data?.packages.length > 0 && (
{searchParams.get("q") ? (

Showing {currentPage === "1" ? "1" : firstResultNumber} to{" "} - {lastResultNumber} of {data?.total_items} results for{" "} - "{searchParams.get("q")}".{" "} + {lastResultNumber} of{" "} + {data?.total_items < 100 ? data?.total_items : "over 100"}{" "} + items