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

76 lines
1.7 KiB
TypeScript

/**
* External dependencies
*/
import { useState, createContext, useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import { SubscriptionsContextType } from './types';
import { Subscription } from '../components/my-subscriptions/types';
import {
fetchSubscriptions,
refreshSubscriptions as fetchSubscriptionsFromWooCom,
} from '../utils/functions';
export const SubscriptionsContext = createContext< SubscriptionsContextType >( {
subscriptions: [],
setSubscriptions: () => {},
loadSubscriptions: () => new Promise( () => {} ),
refreshSubscriptions: () => new Promise( () => {} ),
isLoading: true,
setIsLoading: () => {},
} );
export function SubscriptionsContextProvider( props: {
children: JSX.Element;
} ): JSX.Element {
const [ subscriptions, setSubscriptions ] = useState<
Array< Subscription >
>( [] );
const [ isLoading, setIsLoading ] = useState( true );
const loadSubscriptions = ( toggleLoading?: boolean ) => {
if ( toggleLoading === true ) {
setIsLoading( true );
}
return fetchSubscriptions()
.then( ( subscriptionResponse ) => {
setSubscriptions( subscriptionResponse );
} )
.finally( () => {
if ( toggleLoading ) {
setIsLoading( false );
}
} );
};
const refreshSubscriptions = () => {
return fetchSubscriptionsFromWooCom().then(
( subscriptionResponse ) => {
setSubscriptions( subscriptionResponse );
}
);
};
useEffect( () => {
loadSubscriptions( true );
}, [] );
const contextValue = {
subscriptions,
setSubscriptions,
loadSubscriptions,
refreshSubscriptions,
isLoading,
setIsLoading,
};
return (
<SubscriptionsContext.Provider value={ contextValue }>
{ props.children }
</SubscriptionsContext.Provider>
);
}