From 0aa3c2686287c27760b4b90e35a508f5512d51a3 Mon Sep 17 00:00:00 2001
From: raicem <unalancem@gmail.com>
Date: Thu, 10 Aug 2023 10:16:56 +0300
Subject: [PATCH 1/2] Marketplace: Add product list context

---
 .../components/extensions/extensions.tsx      |  15 ++-
 .../product-list-content.scss                 |   1 +
 .../product-list-content.tsx                  |   2 +-
 .../components/product-list/product-list.tsx  |   4 -
 .../marketplace/components/search/search.tsx  |  33 +----
 .../contexts/product-list-context.tsx         | 116 ++++++++++++++++++
 .../client/marketplace/index.tsx              |  17 +--
 7 files changed, 143 insertions(+), 45 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx

diff --git a/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx b/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx
index b373015704c..98221d3deea 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx
@@ -1,23 +1,26 @@
 /**
  * External dependencies
  */
+import { useContext } from 'react';
 
 /**
  * Internal dependencies
  */
 import './extensions.scss';
 import CategorySelector from '../category-selector/category-selector';
+import { ProductListContext } from '../../contexts/product-list-context';
+import ProductListContent from '../product-list-content/product-list-content';
 
 export default function Extensions(): JSX.Element {
+	const productListContextValue = useContext( ProductListContext );
+
+	let { productList } = productListContextValue;
+	productList = productList.splice( 0, 21 );
+
 	return (
 		<div className="woocommerce-marketplace__extensions">
 			<CategorySelector />
-			<div className="woocommerce-marketplace__product-list-content">
-				<div className="woocommerce-marketplace__extension-card"></div>
-				<div className="woocommerce-marketplace__extension-card"></div>
-				<div className="woocommerce-marketplace__extension-card"></div>
-				<div className="woocommerce-marketplace__extension-card"></div>
-			</div>
+			<ProductListContent products={ productList } />
 		</div>
 	);
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.scss b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.scss
index 869cb402184..0161227a6f5 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.scss
@@ -9,6 +9,7 @@
 
 	&__extension-card {
 		background-color: #3c3c3c;
+		color: $white;
 		height: 270px;
 	}
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
index 840d21add22..90ba6fa6eb1 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import './product-list-content.scss';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, @woocommerce/dependency-group
 import ProductCard from '../product-card/product-card';
 
 export interface Product {
@@ -19,6 +18,7 @@ export interface Product {
 	reviewsCount?: number | null;
 	currency?: string;
 }
+
 interface ProductListContentProps {
 	products: Product[];
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx
index c28188c515b..37b6227da6b 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx
@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */
diff --git a/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx b/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
index 3932483ef25..a235b4d46df 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
@@ -3,18 +3,16 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, search } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
+import { useContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './search.scss';
-import { MARKETPLACE_URL } from '../constants';
+import { ProductListContext } from '../../contexts/product-list-context';
 
 const searchPlaceholder = __( 'Search extensions and themes', 'woocommerce' );
 
-const marketplaceAPI = MARKETPLACE_URL + '/wp-json/wccom-extensions/1.0/search';
-
 export interface SearchProps {
 	locale?: string | 'en_US';
 	country?: string | undefined;
@@ -23,25 +21,12 @@ export interface SearchProps {
 /**
  * Search component.
  *
- * @param {SearchProps} props - Search props: locale and country.
  * @return {JSX.Element} Search component.
  */
-function Search( props: SearchProps ): JSX.Element {
-	const locale = props.locale ?? 'en_US';
-	const country = props.country ?? '';
+function Search(): JSX.Element {
 	const [ searchTerm, setSearchTerm ] = useState( '' );
 
-	const build_parameter_string = (
-		query_string: string,
-		query_country: string,
-		query_locale: string
-	): string => {
-		const params = new URLSearchParams();
-		params.append( 'term', query_string );
-		params.append( 'country', query_country );
-		params.append( 'locale', query_locale );
-		return params.toString();
-	};
+	const productListContextValue = useContext( ProductListContext );
 
 	const runSearch = () => {
 		const query = searchTerm.trim();
@@ -49,14 +34,8 @@ function Search( props: SearchProps ): JSX.Element {
 			return [];
 		}
 
-		const params = build_parameter_string( query, country, locale );
-		fetch( marketplaceAPI + '?' + params, {
-			method: 'GET',
-		} )
-			.then( ( response ) => response.json() )
-			.then( ( response ) => {
-				return response;
-			} );
+		productListContextValue.setSearchTerm( query );
+
 		return [];
 	};
 
diff --git a/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx b/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
new file mode 100644
index 00000000000..67c704b3fd1
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Product } from '../components/product-list-content/product-list-content';
+
+type SearchAPIProductType = {
+	title: string;
+	image: string;
+	excerpt: string;
+	link: string;
+	demo_url: string;
+	price: string;
+	hash: string;
+	slug: string;
+	id: number;
+	rating: number | null;
+	reviews_count: number | null;
+	vendor_name: string;
+	vendor_url: string;
+	icon: string;
+};
+
+type ProductListContextType = {
+	productList: Product[];
+	setSearchTerm: ( searchTerm: string ) => void;
+	setCategory: ( category: string ) => void;
+	isLoading: boolean;
+};
+
+export const ProductListContext = createContext< ProductListContextType >( {
+	productList: [],
+	setSearchTerm: () => {},
+	setCategory: () => {},
+	isLoading: false,
+} );
+
+type ProductListContextProviderProps = {
+	children: JSX.Element;
+	country?: string;
+	locale?: string;
+};
+
+/**
+ * Internal dependencies
+ */
+export function ProductListContextProvider(
+	props: ProductListContextProviderProps
+): JSX.Element {
+	const [ isLoading, setIsLoading ] = useState( false );
+	const [ searchTerm, setSearchTerm ] = useState( '' );
+	const [ category, setCategory ] = useState( '' );
+	const [ productList, setProductList ] = useState< Product[] >( [] );
+
+	const contextValue = {
+		productList,
+		setSearchTerm,
+		setCategory,
+		isLoading,
+	};
+
+	useEffect( () => {
+		setIsLoading( true );
+		setProductList( [] );
+
+		// Build up a query string
+		const params = new URLSearchParams();
+
+		params.append( 'term', searchTerm );
+		params.append( 'country', props.country ?? '' );
+		params.append( 'locale', props.locale ?? '' );
+
+		const wccomSearchEndpoint =
+			'https://woocommerce.com/wp-json/wccom-extensions/1.0/search' +
+			'?' +
+			params.toString();
+
+		// Fetch data from WCCOM API
+		fetch( wccomSearchEndpoint )
+			.then( ( response ) => response.json() )
+			.then( ( response ) => {
+				const products = response.products.map(
+					( product: SearchAPIProductType ): Product => {
+						return {
+							id: product.id,
+							title: product.title,
+							description: product.excerpt,
+							vendorName: product.vendor_name,
+							vendorUrl: product.vendor_url,
+							icon: product.icon,
+							url: product.link,
+							price: product.price,
+							averageRating: product.rating ?? 0,
+							reviewsCount: product.reviews_count ?? 0,
+							currency: '',
+						};
+					}
+				);
+
+				setProductList( products );
+			} )
+			.finally( () => {
+				setIsLoading( false );
+			} );
+	}, [ searchTerm, category, props.country, props.locale ] );
+
+	return (
+		<ProductListContext.Provider value={ contextValue }>
+			{ props.children }
+		</ProductListContext.Provider>
+	);
+}
diff --git a/plugins/woocommerce-admin/client/marketplace/index.tsx b/plugins/woocommerce-admin/client/marketplace/index.tsx
index 2b1e528e9dc..95d6b99d81b 100644
--- a/plugins/woocommerce-admin/client/marketplace/index.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/index.tsx
@@ -10,17 +10,20 @@ import './marketplace.scss';
 import { DEFAULT_TAB_KEY } from './components/constants';
 import Header from './components/header/header';
 import Content from './components/content/content';
+import { ProductListContextProvider } from './contexts/product-list-context';
 
 export default function Marketplace() {
 	const [ selectedTab, setSelectedTab ] = useState( DEFAULT_TAB_KEY );
 
 	return (
-		<div className="woocommerce-marketplace">
-			<Header
-				selectedTab={ selectedTab }
-				setSelectedTab={ setSelectedTab }
-			/>
-			<Content selectedTab={ selectedTab } />
-		</div>
+		<ProductListContextProvider>
+			<div className="woocommerce-marketplace">
+				<Header
+					selectedTab={ selectedTab }
+					setSelectedTab={ setSelectedTab }
+				/>
+				<Content selectedTab={ selectedTab } />
+			</div>
+		</ProductListContextProvider>
 	);
 }

From 31aa9ebd59f63df8908a25a31894b2b69a1188fe Mon Sep 17 00:00:00 2001
From: raicem <unalancem@gmail.com>
Date: Wed, 9 Aug 2023 16:04:35 +0300
Subject: [PATCH 2/2] Marketplace: add category filtering

---
 .../category-selector/category-dropdown.tsx   |  47 ++++++-
 .../category-selector/category-link.tsx       |  27 +++-
 .../category-selector/category-selector.scss  |  17 +++
 .../category-selector/category-selector.tsx   | 129 ++++++++++++------
 .../components/category-selector/types.ts     |  10 ++
 .../components/discover/discover.scss         |   9 --
 .../components/extensions/extensions.tsx      |  27 +++-
 .../components/product-card/product-card.tsx  |   2 +-
 .../product-list-content.tsx                  |  24 +---
 .../product-list-header.scss                  |   5 +
 .../components/product-list/product-list.tsx  |   5 +-
 .../components/product-list/types.ts          |  31 +++++
 .../product-loader/product-loader.scss        |   4 +
 .../marketplace/components/search/search.tsx  |  28 ++--
 .../marketplace/components/tabs/tabs.scss     |   6 -
 .../contexts/product-list-context.tsx         |  58 ++++----
 .../client/marketplace/utils/functions.tsx    |  22 ++-
 17 files changed, 306 insertions(+), 145 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketplace/components/category-selector/types.ts
 create mode 100644 plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts

diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
index 8baf649898b..b4f8065bbc9 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
@@ -4,15 +4,39 @@
 import { Dropdown } from '@wordpress/components';
 import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { navigateTo, getNewPath } from '@woocommerce/navigation';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
-import { Category } from './category-selector';
+import { Category } from './types';
 
 function DropdownContent( props: {
 	readonly categories: Category[];
+	readonly selected?: Category;
+	readonly onClick: () => void;
 } ): JSX.Element {
+	function updateCategorySelection(
+		event: React.MouseEvent< HTMLButtonElement >
+	) {
+		const slug = event.currentTarget.value;
+
+		if ( ! slug ) {
+			return;
+		}
+
+		/**
+		 * Trigger the onClick event on the parent component to close the dropdown.
+		 * This closes the dropdown automatically when a user clicks on an item.
+		 */
+		props.onClick();
+
+		navigateTo( {
+			url: getNewPath( { category: slug } ),
+		} );
+	}
+
 	return (
 		<ul className="woocommerce-marketplace__category-dropdown-list">
 			{ props.categories.map( ( category ) => (
@@ -20,7 +44,17 @@ function DropdownContent( props: {
 					className="woocommerce-marketplace__category-dropdown-item"
 					key={ category.slug }
 				>
-					<button className="woocommerce-marketplace__category-dropdown-item-button">
+					<button
+						className={ classNames(
+							'woocommerce-marketplace__category-dropdown-item-button',
+							{
+								'woocommerce-marketplace__category-dropdown-item-button--selected':
+									category.slug === props.selected?.slug,
+							}
+						) }
+						value={ category.slug }
+						onClick={ updateCategorySelection }
+					>
 						{ category.label }
 					</button>
 				</li>
@@ -36,6 +70,7 @@ type CategoryDropdownProps = {
 	buttonClassName?: string;
 	contentClassName?: string;
 	arrowIconSize?: number;
+	selected?: Category;
 };
 
 export default function CategoryDropdown(
@@ -60,8 +95,12 @@ export default function CategoryDropdown(
 				</button>
 			) }
 			className={ props.className }
-			renderContent={ () => (
-				<DropdownContent categories={ props.categories } />
+			renderContent={ ( { onToggle } ) => (
+				<DropdownContent
+					categories={ props.categories }
+					selected={ props.selected }
+					onClick={ onToggle }
+				/>
 			) }
 			contentClassName={ props.contentClassName }
 		/>
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
index 0de23b40150..a3efb6cde61 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
@@ -2,13 +2,28 @@
  * External dependencies
  */
 import classNames from 'classnames';
+import { navigateTo, getNewPath } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
-import { Category } from './category-selector';
+import { Category } from './types';
 
 export default function CategoryLink( props: Category ): JSX.Element {
+	function updateCategorySelection(
+		event: React.MouseEvent< HTMLButtonElement >
+	) {
+		const slug = event.currentTarget.value;
+
+		if ( ! slug ) {
+			return;
+		}
+
+		navigateTo( {
+			url: getNewPath( { category: slug } ),
+		} );
+	}
+
 	const classes = classNames(
 		'woocommerce-marketplace__category-item-button',
 		{
@@ -17,5 +32,13 @@ export default function CategoryLink( props: Category ): JSX.Element {
 		}
 	);
 
-	return <button className={ classes }>{ props.label }</button>;
+	return (
+		<button
+			className={ classes }
+			onClick={ updateCategorySelection }
+			value={ props.slug }
+		>
+			{ props.label }
+		</button>
+	);
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.scss b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.scss
index 2e66b9d3895..83b58a66884 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.scss
@@ -3,6 +3,7 @@
 .woocommerce-marketplace__category-selector {
 	display: flex;
 	align-items: stretch;
+	margin: $grid-unit-20 0 0 0;
 }
 
 .woocommerce-marketplace__category-item {
@@ -29,6 +30,7 @@
 	&--selected {
 		color: $white;
 		background-color: $gray-900;
+		fill: $white;
 	}
 }
 
@@ -106,4 +108,19 @@
 	padding: 6px $grid-unit-10;
 	line-height: 20px;
 	width: 100%;
+
+	&--selected {
+		color: $white;
+		background-color: $gray-900;
+	}
+}
+
+.woocommerce-marketplace__category-selector-loading {
+	display: flex;
+	margin-top: $grid-unit-20;
+
+	p {
+		margin: 0;
+		line-height: $grid-unit-30;
+	}
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
index 6330bd63521..a551bad7e68 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
@@ -4,50 +4,50 @@
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Spinner } from '@wordpress/components';
+import { useQuery } from '@woocommerce/navigation';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import CategoryLink from './category-link';
-import './category-selector.scss';
 import CategoryDropdown from './category-dropdown';
-import { MARKETPLACE_URL } from '../constants';
+import { Category, CategoryAPIItem } from './types';
+import { fetchCategories } from '../../utils/functions';
+import './category-selector.scss';
 
-export type Category = {
-	readonly slug: string;
-	readonly label: string;
-	selected: boolean;
-};
-
-export type CategoryAPIItem = {
-	readonly slug: string;
-	readonly label: string;
-};
-
-function fetchCategories(): Promise< CategoryAPIItem[] > {
-	return fetch( MARKETPLACE_URL + '/wp-json/wccom-extensions/1.0/categories' )
-		.then( ( response ) => {
-			if ( ! response.ok ) {
-				throw new Error( response.statusText );
-			}
-
-			return response.json();
-		} )
-		.then( ( json ) => {
-			return json;
-		} )
-		.catch( () => {
-			return [];
-		} );
-}
+const ALL_CATEGORIES_SLUG = '_all';
 
 export default function CategorySelector(): JSX.Element {
-	const [ firstBatch, setFirstBatch ] = useState< Category[] >( [] );
-	const [ secondBatch, setSecondBatch ] = useState< Category[] >( [] );
+	const [ visibleItems, setVisibleItems ] = useState< Category[] >( [] );
+	const [ dropdownItems, setDropdownItems ] = useState< Category[] >( [] );
+	const [ selected, setSelected ] = useState< Category >();
 	const [ isLoading, setIsLoading ] = useState( false );
 
+	const query = useQuery();
+
+	useEffect( () => {
+		// If no category is selected, show All as selected
+		let categoryToSearch = ALL_CATEGORIES_SLUG;
+
+		if ( query.category ) {
+			categoryToSearch = query.category;
+		}
+
+		const allCategories = visibleItems.concat( dropdownItems );
+
+		const selectedCategory = allCategories.find(
+			( category ) => category.slug === categoryToSearch
+		);
+
+		if ( selectedCategory ) {
+			setSelected( selectedCategory );
+		}
+	}, [ query, visibleItems, dropdownItems ] );
+
 	useEffect( () => {
 		setIsLoading( true );
+
 		fetchCategories()
 			.then( ( categoriesFromAPI: CategoryAPIItem[] ) => {
 				const categories: Category[] = categoriesFromAPI.map(
@@ -61,7 +61,7 @@ export default function CategorySelector(): JSX.Element {
 
 				// Put the "All" category to the beginning
 				categories.sort( ( a ) => {
-					if ( a.slug === '_all' ) {
+					if ( a.slug === ALL_CATEGORIES_SLUG ) {
 						return -1;
 					}
 
@@ -69,55 +69,94 @@ export default function CategorySelector(): JSX.Element {
 				} );
 
 				// Split array into two from 7th item
-				const firstBatchCategories = categories.slice( 0, 7 );
-				const secondBatchCategories = categories.slice( 7 );
+				const visibleCategoryItems = categories.slice( 0, 7 );
+				const dropdownCategoryItems = categories.slice( 7 );
 
-				setFirstBatch( firstBatchCategories );
-				setSecondBatch( secondBatchCategories );
+				setVisibleItems( visibleCategoryItems );
+				setDropdownItems( dropdownCategoryItems );
+			} )
+			.catch( () => {
+				setVisibleItems( [] );
+				setDropdownItems( [] );
 			} )
 			.finally( () => {
 				setIsLoading( false );
 			} );
 	}, [] );
 
+	function mobileCategoryDropdownLabel() {
+		const allCategoriesText = __( 'All Categories', 'woocommerce' );
+
+		if ( ! selected ) {
+			return allCategoriesText;
+		}
+
+		if ( selected.label === 'All' ) {
+			return allCategoriesText;
+		}
+
+		return selected.label;
+	}
+
+	function isSelectedInDropdown() {
+		if ( ! selected ) {
+			return false;
+		}
+
+		return dropdownItems.find(
+			( category ) => category.slug === selected.slug
+		);
+	}
+
 	if ( isLoading ) {
 		return (
-			<>
-				{ __( 'Loading categories…', 'woocommerce' ) }
+			<div className="woocommerce-marketplace__category-selector-loading">
+				<p>{ __( 'Loading categories…', 'woocommerce' ) }</p>
 				<Spinner />
-			</>
+			</div>
 		);
 	}
 
 	return (
 		<>
 			<ul className="woocommerce-marketplace__category-selector">
-				{ firstBatch.map( ( category ) => (
+				{ visibleItems.map( ( category ) => (
 					<li
 						className="woocommerce-marketplace__category-item"
 						key={ category.slug }
 					>
-						<CategoryLink { ...category } />
+						<CategoryLink
+							{ ...category }
+							selected={ category.slug === selected?.slug }
+						/>
 					</li>
 				) ) }
 				<li className="woocommerce-marketplace__category-item">
 					<CategoryDropdown
 						label={ __( 'More', 'woocommerce' ) }
-						categories={ secondBatch }
-						buttonClassName="woocommerce-marketplace__category-item-button"
+						categories={ dropdownItems }
+						buttonClassName={ classNames(
+							'woocommerce-marketplace__category-item-button',
+							{
+								'woocommerce-marketplace__category-item-button--selected':
+									isSelectedInDropdown(),
+							}
+						) }
 						contentClassName="woocommerce-marketplace__category-item-content"
 						arrowIconSize={ 20 }
+						selected={ selected }
 					/>
 				</li>
 			</ul>
 
 			<div className="woocommerce-marketplace__category-selector--full-width">
 				<CategoryDropdown
-					label={ __( 'All Categories', 'woocommerce' ) }
-					categories={ firstBatch.concat( secondBatch ) }
+					label={ mobileCategoryDropdownLabel() }
+					categories={ visibleItems.concat( dropdownItems ) }
 					buttonClassName="woocommerce-marketplace__category-dropdown-button"
 					className="woocommerce-marketplace__category-dropdown"
 					contentClassName="woocommerce-marketplace__category-dropdown-content"
+					selected={ selected }
 				/>
 			</div>
 		</>
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/types.ts b/plugins/woocommerce-admin/client/marketplace/components/category-selector/types.ts
new file mode 100644
index 00000000000..9fd34be90d8
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/types.ts
@@ -0,0 +1,10 @@
+export type Category = {
+	readonly slug: string;
+	readonly label: string;
+	selected: boolean;
+};
+
+export type CategoryAPIItem = {
+	readonly slug: string;
+	readonly label: string;
+};
diff --git a/plugins/woocommerce-admin/client/marketplace/components/discover/discover.scss b/plugins/woocommerce-admin/client/marketplace/components/discover/discover.scss
index c0085e86638..a40a05a710e 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/discover/discover.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/discover/discover.scss
@@ -6,14 +6,5 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 40px;
-		padding: 0 $content-spacing-small;
-	}
-}
-
-@media screen and (min-width: $breakpoint-medium) {
-	.woocommerce-marketplace {
-		&__discover {
-			padding: 0 $content-spacing-large;
-		}
 	}
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx b/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx
index 98221d3deea..033d005e9bf 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useContext } from 'react';
+import { useContext } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -10,17 +11,35 @@ import './extensions.scss';
 import CategorySelector from '../category-selector/category-selector';
 import { ProductListContext } from '../../contexts/product-list-context';
 import ProductListContent from '../product-list-content/product-list-content';
+import ProductLoader from '../product-loader/product-loader';
 
 export default function Extensions(): JSX.Element {
 	const productListContextValue = useContext( ProductListContext );
 
-	let { productList } = productListContextValue;
-	productList = productList.splice( 0, 21 );
+	const { productList, isLoading } = productListContextValue;
+	const products = productList.slice( 0, 60 );
+
+	let title = __( 'Extensions', 'woocommerce' );
+
+	if ( products.length > 0 ) {
+		title = sprintf(
+			// translators: %s: number of extensions
+			__( '%s extensions', 'woocommerce' ),
+			products.length
+		);
+	}
 
 	return (
 		<div className="woocommerce-marketplace__extensions">
+			<h2 className="woocommerce-marketplace__product-list-title  woocommerce-marketplace__product-list-title--extensions">
+				{ title }
+			</h2>
 			<CategorySelector />
-			<ProductListContent products={ productList } />
+			{ isLoading ? (
+				<ProductLoader />
+			) : (
+				<ProductListContent products={ products } />
+			) }
 		</div>
 	);
 }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
index 0e4cafe9094..970426b2b79 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
@@ -8,7 +8,7 @@ import { Button, Card } from '@wordpress/components';
  * Internal dependencies
  */
 import './product-card.scss';
-import { Product } from '../product-list-content/product-list-content';
+import { Product } from '../product-list/types';
 import { getAdminSetting } from '../../../../client/utils/admin-settings';
 
 export interface ProductCardProps {
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
index 90ba6fa6eb1..0f2ce6f2bc8 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -3,29 +3,11 @@
  */
 import './product-list-content.scss';
 import ProductCard from '../product-card/product-card';
+import { Product } from '../product-list/types';
 
-export interface Product {
-	id?: number;
-	title: string;
-	description: string;
-	vendorName: string;
-	vendorUrl: string;
-	icon: string;
-	url: string;
-	price: string | number;
-	productType?: string;
-	averageRating?: number | null;
-	reviewsCount?: number | null;
-	currency?: string;
-}
-
-interface ProductListContentProps {
+export default function ProductListContent( props: {
 	products: Product[];
-}
-
-export default function ProductListContent(
-	props: ProductListContentProps
-): JSX.Element {
+} ): JSX.Element {
 	const { products } = props;
 	return (
 		<div className="woocommerce-marketplace__product-list-content">
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss b/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss
index 2aa5d4b0d5d..76b21aae5f5 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss
@@ -13,6 +13,11 @@
 		font-size: 20px;
 		font-style: normal;
 		font-weight: 500;
+		margin-top: $small-gap;
+	}
+
+	&__product-list-title--extensions {
+		margin-bottom: 0;
 	}
 
 	&__product-list-link {
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx
index 37b6227da6b..f547b09b937 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list/product-list.tsx
@@ -1,10 +1,9 @@
 /**
  * Internal dependencies
  */
-import ProductListContent, {
-	Product,
-} from '../product-list-content/product-list-content';
+import ProductListContent from '../product-list-content/product-list-content';
 import ProductListHeader from '../product-list-header/product-list-header';
+import { Product } from './types';
 
 interface ProductListProps {
 	title: string;
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts b/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
new file mode 100644
index 00000000000..910e4d096c8
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
@@ -0,0 +1,31 @@
+export type SearchAPIProductType = {
+	title: string;
+	image: string;
+	excerpt: string;
+	link: string;
+	demo_url: string;
+	price: string;
+	hash: string;
+	slug: string;
+	id: number;
+	rating: number | null;
+	reviews_count: number | null;
+	vendor_name: string;
+	vendor_url: string;
+	icon: string;
+};
+
+export interface Product {
+	id?: number;
+	title: string;
+	description: string;
+	vendorName: string;
+	vendorUrl: string;
+	icon: string;
+	url: string;
+	price: string | number;
+	productType?: string;
+	averageRating?: number | null;
+	reviewsCount?: number | null;
+	currency?: string;
+}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss b/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss
index e33965554bf..560b46cf014 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss
@@ -1,6 +1,10 @@
 @import '../../stylesheets/_variables.scss';
 
 .woocommerce-marketplace {
+	&__product-loader {
+		margin-top: $grid-unit-20;
+	}
+
 	&__product-loader-cards {
 		display: grid;
 		background: linear-gradient(to right, $gray-0 40%, $gray-5 60%, $gray-0 80%);
diff --git a/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx b/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
index a235b4d46df..7b7411ed3ac 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
@@ -3,21 +3,16 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, search } from '@wordpress/icons';
-import { useContext, useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
+import { navigateTo, getNewPath, useQuery } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
 import './search.scss';
-import { ProductListContext } from '../../contexts/product-list-context';
 
 const searchPlaceholder = __( 'Search extensions and themes', 'woocommerce' );
 
-export interface SearchProps {
-	locale?: string | 'en_US';
-	country?: string | undefined;
-}
-
 /**
  * Search component.
  *
@@ -26,15 +21,21 @@ export interface SearchProps {
 function Search(): JSX.Element {
 	const [ searchTerm, setSearchTerm ] = useState( '' );
 
-	const productListContextValue = useContext( ProductListContext );
+	const query = useQuery();
+
+	useEffect( () => {
+		if ( query.term ) {
+			setSearchTerm( query.term );
+		}
+	}, [ query.term ] );
 
 	const runSearch = () => {
-		const query = searchTerm.trim();
-		if ( ! query ) {
-			return [];
-		}
+		const term = searchTerm.trim();
 
-		productListContextValue.setSearchTerm( query );
+		// When the search term changes, we reset the category on purpose.
+		navigateTo( {
+			url: getNewPath( { term, category: null, tab: 'extensions' } ),
+		} );
 
 		return [];
 	};
@@ -49,6 +50,7 @@ function Search(): JSX.Element {
 		if ( event.key === 'Enter' ) {
 			runSearch();
 		}
+
 		if ( event.key === 'Escape' ) {
 			setSearchTerm( '' );
 		}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
index cc4ffc39bd7..0e843a4ecdd 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
@@ -34,9 +34,3 @@
 		border-bottom: 1px solid $gutenberg-gray-300;
 	}
 }
-
-@media screen and (min-width: $breakpoint-medium) {
-	.woocommerce-marketplace__tabs {
-		padding: 0 $content-spacing-large;
-	}
-}
diff --git a/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx b/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
index 67c704b3fd1..261f5def64f 100644
--- a/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
@@ -1,41 +1,25 @@
 /**
  * External dependencies
  */
+import { useQuery } from '@woocommerce/navigation';
 import { useState, useEffect, createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Product } from '../components/product-list-content/product-list-content';
-
-type SearchAPIProductType = {
-	title: string;
-	image: string;
-	excerpt: string;
-	link: string;
-	demo_url: string;
-	price: string;
-	hash: string;
-	slug: string;
-	id: number;
-	rating: number | null;
-	reviews_count: number | null;
-	vendor_name: string;
-	vendor_url: string;
-	icon: string;
-};
+import {
+	Product,
+	SearchAPIProductType,
+} from '../components/product-list/types';
+import { MARKETPLACE_URL } from '../components/constants';
 
 type ProductListContextType = {
 	productList: Product[];
-	setSearchTerm: ( searchTerm: string ) => void;
-	setCategory: ( category: string ) => void;
 	isLoading: boolean;
 };
 
 export const ProductListContext = createContext< ProductListContextType >( {
 	productList: [],
-	setSearchTerm: () => {},
-	setCategory: () => {},
 	isLoading: false,
 } );
 
@@ -45,44 +29,45 @@ type ProductListContextProviderProps = {
 	locale?: string;
 };
 
-/**
- * Internal dependencies
- */
 export function ProductListContextProvider(
 	props: ProductListContextProviderProps
 ): JSX.Element {
 	const [ isLoading, setIsLoading ] = useState( false );
-	const [ searchTerm, setSearchTerm ] = useState( '' );
-	const [ category, setCategory ] = useState( '' );
 	const [ productList, setProductList ] = useState< Product[] >( [] );
 
 	const contextValue = {
 		productList,
-		setSearchTerm,
-		setCategory,
 		isLoading,
 	};
 
+	const query = useQuery();
+
 	useEffect( () => {
 		setIsLoading( true );
-		setProductList( [] );
 
-		// Build up a query string
 		const params = new URLSearchParams();
 
-		params.append( 'term', searchTerm );
+		params.append( 'term', query.term ?? '' );
 		params.append( 'country', props.country ?? '' );
 		params.append( 'locale', props.locale ?? '' );
 
+		if ( query.category ) {
+			params.append( 'category', query.category );
+		}
+
 		const wccomSearchEndpoint =
-			'https://woocommerce.com/wp-json/wccom-extensions/1.0/search' +
-			'?' +
+			MARKETPLACE_URL +
+			'/wp-json/wccom-extensions/1.0/search?' +
 			params.toString();
 
 		// Fetch data from WCCOM API
 		fetch( wccomSearchEndpoint )
 			.then( ( response ) => response.json() )
 			.then( ( response ) => {
+				/**
+				 * Product card component expects a Product type.
+				 * So we build that object from the API response.
+				 */
 				const products = response.products.map(
 					( product: SearchAPIProductType ): Product => {
 						return {
@@ -103,10 +88,13 @@ export function ProductListContextProvider(
 
 				setProductList( products );
 			} )
+			.catch( () => {
+				setProductList( [] );
+			} )
 			.finally( () => {
 				setIsLoading( false );
 			} );
-	}, [ searchTerm, category, props.country, props.locale ] );
+	}, [ query, props.country, props.locale ] );
 
 	return (
 		<ProductListContext.Provider value={ contextValue }>
diff --git a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
index c285c4610e9..1d67664f654 100644
--- a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
@@ -1,8 +1,9 @@
 /**
  * Internal dependencies
  */
-import { Product } from '../components/product-list-content/product-list-content';
+import { Product } from '../components/product-list/types';
 import { MARKETPLACE_URL } from '../components/constants';
+import { CategoryAPIItem } from '../components/category-selector/types';
 
 interface ProductGroup {
 	id: number;
@@ -30,4 +31,21 @@ const fetchDiscoverPageData = async (): Promise< Array< ProductGroup > > => {
 		} );
 };
 
-export { fetchDiscoverPageData, ProductGroup };
+function fetchCategories(): Promise< CategoryAPIItem[] > {
+	return fetch( MARKETPLACE_URL + '/wp-json/wccom-extensions/1.0/categories' )
+		.then( ( response ) => {
+			if ( ! response.ok ) {
+				throw new Error( response.statusText );
+			}
+
+			return response.json();
+		} )
+		.then( ( json ) => {
+			return json;
+		} )
+		.catch( () => {
+			return [];
+		} );
+}
+
+export { fetchDiscoverPageData, fetchCategories, ProductGroup };