How to use the @wordpress/element.useContext function in @wordpress/element

export function ReaderThemesContextProvider( { wpAjaxUrl, children, readerThemesEndpoint, updatesNonce } ) {
	const [ themes, setThemes ] = useState( null );
	const [ fetchingThemes, setFetchingThemes ] = useState( false );
	const [ downloadingTheme, setDownloadingTheme ] = useState( false );

	const { setError } = useError();

	const { options, savingOptions } = useContext( Options );
	const { reader_theme: readerTheme, theme_support: themeSupport } = options || {};

	// This component sets state inside async functions. Use this ref to prevent state updates after unmount.
	const hasUnmounted = useRef( false );

	const selectedTheme = useMemo(
		() => themes ? themes.find( ( { slug } ) => slug === readerTheme ) : null,
		[ readerTheme, themes ],
	);

	/**
	 * Downloads the selected reader theme, if necessary, when options are saved.
	 */
	useEffect( () => {
		if ( ! selectedTheme ) {
			return;

MediaReplaceFlow => props => {
		const { name } = useBlockEditContext();
		const usableBlocksProps = getUsableBlockProps( name );

		const preUploadFile = useRef();
		if ( ! usableBlocksProps?.mediaReplaceFlow || ! isUpgradable( name ) ) {
			return ;
		}

		const { fileType } = usableBlocksProps;
		const onBannerVisibilityChange = useContext( PaidBlockContext );

		return (
			 {
					preUploadFile.current = files?.length ? files[ 0 ] : null;
					onBannerVisibilityChange( files?.length && isFileOfType( files[ 0 ], fileType ) );
				} }
				createNotice={ ( status, msg, options ) => {
					// Detect video file from callback and reference instance.
					if ( isFileOfType( preUploadFile.current, fileType ) ) {
						preUploadFile.current = null; // clean up the file reference.

						// Do not show Error notice when it's a video file.
						return null;
					}

export function MobileRedirection() {
	const { editedOptions } = useContext( Options );

	const { theme_support: themeSupport } = editedOptions || {};

	// Don't show if the mode is standard or the themeSupport is not yet set.
	if ( ! themeSupport || 'standard' === themeSupport ) {
		return null;
	}

	return (
		<section>
			<h2>
				{ __( 'Mobile Redirection', 'amp' ) }
			</h2>
			
		</section>
	);

export function SetupWizard( { exitLink } ) {
	const { activePageIndex, currentPage: { title, PageComponent, showTitle }, moveBack, moveForward, pages } = useContext( Navigation );

	const PageComponentWithSideEffects = useMemo( () => () => (
		
			
		
	// eslint-disable-next-line react-hooks/exhaustive-deps
	), [ PageComponent ] );

	return (
		<div>
			<div>
				<div>
					
					<div>
						{ __( 'Official AMP Plugin for WordPress', 'amp' ) }
					</div></div></div></div>

export function SettingsFooter() {
	const { didSaveOptions, editedOptions, hasOptionsChanges, savingOptions } = useContext( Options );
	const { downloadingTheme } = useContext( ReaderThemes );

	const { reader_theme: readerTheme, theme_support: themeSupport } = editedOptions;

	const disabled = ! themeSupport ||
		! hasOptionsChanges ||
		savingOptions ||
		didSaveOptions ||
		downloadingTheme ||
		( 'reader' === themeSupport && ! readerTheme );

	return (
		<section>
			<button type="submit" disabled="{">
				{ __( 'Save changes', 'amp' ) }
				<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg></button></section>

export function ThemesAPIError() {
	const { themesAPIError } = useContext( ReaderThemes );

	if ( ! themesAPIError ) {
		return null;
	}

	return (
		
			<p>
				{
					themesAPIError
				}
			</p>
		
	);
}

function Preview() {
	const [ iframeLoaded, setIframeLoaded ] = useState( false );

	const {
		editedOptions: { theme_support: themeSupport },
		originalOptions: { preview_permalink: previewPermalink, reader_theme: readerTheme },
	} = useContext( Options );

	const opacity = iframeLoaded ? '1' : '0';

	return (
		<>

export function TemplateModeOverrideContextProvider( { children } ) {
	const { editedOptions, originalOptions, updateOptions, readerModeWasOverridden, setReaderModeWasOverridden } = useContext( Options );
	const { currentPage: { slug: currentPageSlug } } = useContext( Navigation );
	const { selectedTheme, currentTheme } = useContext( ReaderThemes );
	const { developerToolsOption, fetchingUser, originalDeveloperToolsOption } = useContext( User );
	const [ respondedToDeveloperToolsOptionChange, setRespondedToDeveloperToolsOptionChange ] = useState( false );
	const [ mostRecentlySelectedThemeSupport, setMostRecentlySelectedThemeSupport ] = useState( null );
	const [ technicalQuestionChangedAtLeastOnce, setTechnicalQuestionChangedAtLeastOnce ] = useState( false );

	const { theme_support: themeSupport } = editedOptions || {};
	const { theme_support: originalThemeSupport } = originalOptions || {};

	const technicalQuestionChanged = ! fetchingUser && developerToolsOption !== originalDeveloperToolsOption;

	/**
	 * Persist the "previously selected" note if the technical question is changed, even if it is subsequently restored.
	 */
	useEffect( () => {
		if ( technicalQuestionChanged ) {
			setTechnicalQuestionChangedAtLeastOnce( true );

export function useEntityId( kind, type ) {
	return useContext( getEntity( kind, type ).context );
}

export const useSlot = ( name ) => {
	const { getSlot, subscribe } = useContext( SlotFillContext );
	const [ slot, setSlot ] = useState( getSlot( name ) );

	useEffect( () => {
		setSlot( getSlot( name ) );
		const unsubscribe = subscribe( () => {
			setSlot( getSlot( name ) );
		} );

		return unsubscribe;
	}, [ name ] );

	return slot;
};