woocommerce/plugins/woocommerce-admin/client/marketplace/contexts/marketplace-context.tsx

37 lines
778 B
TypeScript
Raw Normal View History

[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
/**
* External dependencies
*/
import { useState, createContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import { MarketplaceContextType } from './types';
export const MarketplaceContext = createContext< MarketplaceContextType >( {
isLoading: false,
setIsLoading: () => {},
Marketplace Themes: Feature Branch (#40159) * Support for themes in in-app marketplace. Contains the changes from: https://github.com/woocommerce/woocommerce/pull/40247 https://github.com/woocommerce/woocommerce/pull/40272 https://github.com/woocommerce/woocommerce/pull/40302 https://github.com/woocommerce/woocommerce/pull/40303 https://github.com/woocommerce/woocommerce/pull/40333 https://github.com/woocommerce/woocommerce/pull/40368 https://github.com/woocommerce/woocommerce/pull/40375 https://github.com/woocommerce/woocommerce/pull/40375 https://github.com/woocommerce/woocommerce/pull/40389 * `.woocommerce-marketplace__discover`: changed `align-items` `flex-start` to `stretch` to properly display products on large and very large viewports. * Delete plugins/woocommerce/changelog/add-18026-marketplace-theme-cards Removing from feature branch before final review * Delete plugins/woocommerce/changelog/add-18027-themes-to-in-app-search Removing from feature branch before final review * Delete plugins/woocommerce/changelog/add-marketplace-theme-discover-section Removing from feature branch before final review * Delete plugins/woocommerce/changelog/update-in-app-multiple-category-filters Removing from feature branch before final review * Delete plugins/woocommerce/changelog/update-theme-no-result-style Removing from feature branch before final review * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: And Finally <andfinally@users.noreply.github.com> Co-authored-by: Dan Q <dan@danq.me> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Dan Q <danq@automattic.com>
2023-10-04 16:59:34 +00:00
selectedTab: '',
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
setSelectedTab: () => {},
} );
export function MarketplaceContextProvider( props: {
children: JSX.Element;
} ): JSX.Element {
const [ isLoading, setIsLoading ] = useState( true );
Marketplace Themes: Feature Branch (#40159) * Support for themes in in-app marketplace. Contains the changes from: https://github.com/woocommerce/woocommerce/pull/40247 https://github.com/woocommerce/woocommerce/pull/40272 https://github.com/woocommerce/woocommerce/pull/40302 https://github.com/woocommerce/woocommerce/pull/40303 https://github.com/woocommerce/woocommerce/pull/40333 https://github.com/woocommerce/woocommerce/pull/40368 https://github.com/woocommerce/woocommerce/pull/40375 https://github.com/woocommerce/woocommerce/pull/40375 https://github.com/woocommerce/woocommerce/pull/40389 * `.woocommerce-marketplace__discover`: changed `align-items` `flex-start` to `stretch` to properly display products on large and very large viewports. * Delete plugins/woocommerce/changelog/add-18026-marketplace-theme-cards Removing from feature branch before final review * Delete plugins/woocommerce/changelog/add-18027-themes-to-in-app-search Removing from feature branch before final review * Delete plugins/woocommerce/changelog/add-marketplace-theme-discover-section Removing from feature branch before final review * Delete plugins/woocommerce/changelog/update-in-app-multiple-category-filters Removing from feature branch before final review * Delete plugins/woocommerce/changelog/update-theme-no-result-style Removing from feature branch before final review * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: And Finally <andfinally@users.noreply.github.com> Co-authored-by: Dan Q <dan@danq.me> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Dan Q <danq@automattic.com>
2023-10-04 16:59:34 +00:00
const [ selectedTab, setSelectedTab ] = useState( '' );
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
const contextValue = {
isLoading,
setIsLoading,
selectedTab,
setSelectedTab,
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
};
return (
<MarketplaceContext.Provider value={ contextValue }>
{ props.children }
</MarketplaceContext.Provider>
);
}