diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
index a55db8cd474..7d9794992fa 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
@@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useContext, useEffect } from '@wordpress/element';
import { Button } from '@wordpress/components';
import classNames from 'classnames';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
@@ -12,10 +12,10 @@ import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
*/
import './tabs.scss';
import { DEFAULT_TAB_KEY, MARKETPLACE_PATH } from '../constants';
+import { MarketplaceContext } from '../../contexts/marketplace-context';
+import { MarketplaceContextType } from '../../contexts/types';
export interface TabsProps {
- selectedTab?: string | undefined;
- setSelectedTab: ( value: string ) => void;
additionalClassNames?: Array< string > | undefined;
}
@@ -63,8 +63,8 @@ const setUrlTabParam = ( tabKey: string ) => {
} );
};
-const renderTabs = ( props: TabsProps ) => {
- const { selectedTab, setSelectedTab } = props;
+const renderTabs = ( contextValue: MarketplaceContextType ) => {
+ const { selectedTab, setSelectedTab } = contextValue;
const tabContent = [];
for ( const tabKey in tabs ) {
tabContent.push(
@@ -104,14 +104,16 @@ const renderTabs = ( props: TabsProps ) => {
};
const Tabs = ( props: TabsProps ): JSX.Element => {
- const { setSelectedTab, additionalClassNames } = props;
+ const { additionalClassNames } = props;
+ const marketplaceContextValue = useContext( MarketplaceContext );
+ const { setSelectedTab } = marketplaceContextValue;
interface Query {
path?: string;
tab?: string;
}
- const query: Query = useQuery();
+ const query: Record
= useQuery();
useEffect( () => {
if ( query?.tab && tabs[ query.tab ] ) {
@@ -128,7 +130,7 @@ const Tabs = ( props: TabsProps ): JSX.Element => {
additionalClassNames || []
) }
>
- { renderTabs( props ) }
+ { renderTabs( marketplaceContextValue ) }
);
};
diff --git a/plugins/woocommerce-admin/client/marketplace/contexts/marketplace-context.tsx b/plugins/woocommerce-admin/client/marketplace/contexts/marketplace-context.tsx
new file mode 100644
index 00000000000..e61b145dc67
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketplace/contexts/marketplace-context.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { useState, createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_TAB_KEY } from '../components/constants';
+import { MarketplaceContextType } from './types';
+
+export const MarketplaceContext = createContext< MarketplaceContextType >( {
+ isLoading: false,
+ setIsLoading: () => {},
+ selectedTab: DEFAULT_TAB_KEY,
+ setSelectedTab: () => {},
+} );
+
+export function MarketplaceContextProvider( props: {
+ children: JSX.Element;
+} ): JSX.Element {
+ const [ isLoading, setIsLoading ] = useState( true );
+ const [ selectedTab, setSelectedTab ] = useState( DEFAULT_TAB_KEY );
+
+ const contextValue = {
+ isLoading,
+ setIsLoading,
+ selectedTab,
+ setSelectedTab
+ };
+
+ return (
+
+ { props.children }
+
+ );
+}
diff --git a/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx b/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
deleted file mode 100644
index 9104602391d..00000000000
--- a/plugins/woocommerce-admin/client/marketplace/contexts/product-list-context.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import { useQuery } from '@woocommerce/navigation';
-import { useState, useEffect, createContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
- Product,
- SearchAPIProductType,
-} from '../components/product-list/types';
-import { MARKETPLACE_URL } from '../components/constants';
-
-type ProductListContextType = {
- productList: Product[];
- isLoading: boolean;
-};
-
-export const ProductListContext = createContext< ProductListContextType >( {
- productList: [],
- isLoading: false,
-} );
-
-export function ProductListContextProvider( props: {
- children: JSX.Element;
-} ): JSX.Element {
- const [ isLoading, setIsLoading ] = useState( false );
- const [ productList, setProductList ] = useState< Product[] >( [] );
-
- const contextValue = {
- productList,
- isLoading,
- };
-
- const query = useQuery();
-
- useEffect( () => {
- setIsLoading( true );
-
- const params = new URLSearchParams();
-
- if ( query.term ) {
- params.append( 'term', query.term );
- }
-
- if ( query.category ) {
- params.append( 'category', query.category );
- }
-
- const wccomSearchEndpoint =
- 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 {
- id: product.id,
- title: product.title,
- description: product.excerpt,
- vendorName: product.vendor_name,
- vendorUrl: product.vendor_url,
- icon: product.icon,
- url: product.link,
- // Due to backwards compatibility, raw_price is from search API, price is from featured API
- price: product.raw_price ?? product.price,
- averageRating: product.rating ?? 0,
- reviewsCount: product.reviews_count ?? 0,
- };
- }
- );
-
- setProductList( products );
- } )
- .catch( () => {
- setProductList( [] );
- } )
- .finally( () => {
- setIsLoading( false );
- } );
- }, [ query ] );
-
- return (
-
- { props.children }
-
- );
-}
diff --git a/plugins/woocommerce-admin/client/marketplace/contexts/types.ts b/plugins/woocommerce-admin/client/marketplace/contexts/types.ts
new file mode 100644
index 00000000000..cb836abc679
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketplace/contexts/types.ts
@@ -0,0 +1,6 @@
+export type MarketplaceContextType = {
+ isLoading: boolean;
+ setIsLoading: ( isLoading: boolean ) => void;
+ selectedTab: string;
+ setSelectedTab: ( tab: string ) => void;
+};
diff --git a/plugins/woocommerce-admin/client/marketplace/index.tsx b/plugins/woocommerce-admin/client/marketplace/index.tsx
index 95d6b99d81b..a5bf6e3543d 100644
--- a/plugins/woocommerce-admin/client/marketplace/index.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/index.tsx
@@ -1,29 +1,22 @@
-/**
- * External dependencies
- */
-import { useState } from '@wordpress/element';
-
/**
* Internal dependencies
*/
import './marketplace.scss';
-import { DEFAULT_TAB_KEY } from './components/constants';
+import { MarketplaceContextProvider } from './contexts/marketplace-context';
import Header from './components/header/header';
import Content from './components/content/content';
-import { ProductListContextProvider } from './contexts/product-list-context';
+import Footer from './components/footer/footer';
+import FeedbackModal from './components/feedback-modal/feedback-modal';
export default function Marketplace() {
- const [ selectedTab, setSelectedTab ] = useState( DEFAULT_TAB_KEY );
-
return (
-
+
-
-
+
+
+
+
-
+
);
}
diff --git a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
index 39b9d39d828..c5d543f234f 100644
--- a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
@@ -7,7 +7,7 @@ import apiFetch from '@wordpress/api-fetch';
* Internal dependencies
*/
import { Product } from '../components/product-list/types';
-import { MARKETPLACE_URL } from '../components/constants';
+import { MARKETPLACE_API_HOST, MARKETPLACE_CATEGORY_API_PATH } from '../components/constants';
import { CategoryAPIItem } from '../components/category-selector/types';
import { LOCALE } from '../../utils/admin-settings';
@@ -34,7 +34,7 @@ async function fetchDiscoverPageData(): Promise< ProductGroup[] > {
}
function fetchCategories(): Promise< CategoryAPIItem[] > {
- let url = MARKETPLACE_URL + '/wp-json/wccom-extensions/1.0/categories';
+ let url = MARKETPLACE_API_HOST + MARKETPLACE_CATEGORY_API_PATH;
if ( LOCALE.userLocale ) {
url = `${ url }?locale=${ LOCALE.userLocale }`;