diff --git a/src/blocks/remote-data-container/components/modals/ItemListModal.tsx b/src/blocks/remote-data-container/components/modals/ItemListModal.tsx new file mode 100644 index 000000000..b42b38624 --- /dev/null +++ b/src/blocks/remote-data-container/components/modals/ItemListModal.tsx @@ -0,0 +1,47 @@ +import { ItemList } from '@/blocks/remote-data-container/components/item-list/ItemList'; +import { ModalWithButtonTrigger } from '@/blocks/remote-data-container/components/modals/BaseModal'; +import { useModalState } from '@/blocks/remote-data-container/hooks/useModalState'; +import { __ } from '@/utils/i18n'; + +export interface ItemListModalProps { + blockName: string; + buttonText: string; + headerActions?: JSX.Element; + headerImage?: string; + loading: boolean; + onOpen?: () => void; + onSelect: ( data: RemoteDataQueryInput ) => void; + results?: RemoteData[ 'results' ]; + title: string; +} + +export function ItemListModal( props: ItemListModalProps ) { + const { close, isOpen, open } = useModalState( props.onOpen ); + + function wrappedOnSelect( data: RemoteDataQueryInput ): void { + // console.log( { wrappedOnSelectData: data } ); + props.onSelect( data ); + close(); + } + + return ( + + + + ); +} diff --git a/src/blocks/remote-data-container/edit.tsx b/src/blocks/remote-data-container/edit.tsx index 2eb305d14..d90ea16b6 100644 --- a/src/blocks/remote-data-container/edit.tsx +++ b/src/blocks/remote-data-container/edit.tsx @@ -14,7 +14,6 @@ import { } from '@/blocks/remote-data-container/config/constants'; import { usePatterns } from '@/blocks/remote-data-container/hooks/usePatterns'; import { useRemoteData } from '@/blocks/remote-data-container/hooks/useRemoteData'; -import { hasRemoteDataChanged } from '@/utils/block-binding'; import { getBlockConfig } from '@/utils/localized-block-data'; import './editor.scss'; import { migrateRemoteData } from '@/utils/remote-data'; @@ -50,6 +49,27 @@ export function Edit( props: BlockEditProps< RemoteDataBlockAttributes > ) { function refreshRemoteData(): void { void fetch( remoteDataAttribute?.queryInputs ?? [ {} ] ); + + // updateRemoteData( + // { blockName, queryKey: DISPLAY_QUERY_KEY, queryInput: remoteData.query_input ?? remoteData.queryInput }, + // insertBlocks + // ); + // setInitialLoad( false ); + // queryInputOverrides: props.attributes.remoteData?.queryInputOverrides as any, + // execute( input, true ) + // .then( remoteData => { + // if ( remoteData ) { + // updateRemoteData( + // { + // queryInputOverrides: props.attributes.remoteData?.queryInputOverrides, + // ...remoteData, + // }, + // insertBlocks + // );bn + // } + // } ) + // .catch( () => {} ) + // .finally( () => setInitialLoad( false ) ); } function resetPatternSelection(): void { @@ -78,9 +98,9 @@ export function Edit( props: BlockEditProps< RemoteDataBlockAttributes > ) { } function updateRemoteData( remoteData?: RemoteData ): void { - if ( hasRemoteDataChanged( remoteDataAttribute, remoteData ) ) { + // if ( hasRemoteDataChanged( remoteDataAttribute, remoteData ) ) { props.setAttributes( { remoteData } ); - } + // } } // No remote data has been selected yet, show a placeholder. @@ -93,7 +113,7 @@ export function Edit( props: BlockEditProps< RemoteDataBlockAttributes > ) { } if ( showPatternSelection ) { - const supportedPatterns = getSupportedPatterns( data.results[ 0 ] ); + const supportedPatterns = getSupportedPatterns( props.attributes.remoteData?.results?.[ 0 ] ); return (
@@ -131,6 +151,7 @@ export function Edit( props: BlockEditProps< RemoteDataBlockAttributes > ) { width: '50px', } } /> +

Loading remote data

) } { // If the block has a binding and the attributes do not match their expected // values, update and merge the attributes. - const mergedAttributes = { - ...attributes, - ...getMismatchedAttributes( attributes, remoteData.results, remoteData.blockName, index ), - }; + // const mergedAttributes = { + // ...attributes, + // ...getMismatchedAttributes( attributes, remoteData.results, remoteData.blockName, index ), + // }; // If the block is not writable, render it as usual. if ( isInSyncedPattern && ! hasEnabledOverrides ) { - return ; + return ; } return ( - + ); }; diff --git a/src/blocks/remote-data-container/hooks/useRemoteData.ts b/src/blocks/remote-data-container/hooks/useRemoteData.ts index d880af65b..fb15f09b3 100644 --- a/src/blocks/remote-data-container/hooks/useRemoteData.ts +++ b/src/blocks/remote-data-container/hooks/useRemoteData.ts @@ -23,6 +23,8 @@ async function unmemoizedfetchRemoteData( data: requestData, } ); + console.log( { body, requestData } ); + if ( ! body ) { return null; } @@ -43,7 +45,8 @@ async function unmemoizedfetchRemoteData( }; } -const fetchRemoteData = memoizeFn< typeof unmemoizedfetchRemoteData >( unmemoizedfetchRemoteData ); +export const fetchRemoteData = + memoizeFn< typeof unmemoizedfetchRemoteData >( unmemoizedfetchRemoteData ); interface UseRemoteData { data?: RemoteData; diff --git a/src/blocks/remote-data-container/index.ts b/src/blocks/remote-data-container/index.ts index b0b5a4fc9..202e4ac11 100644 --- a/src/blocks/remote-data-container/index.ts +++ b/src/blocks/remote-data-container/index.ts @@ -1,7 +1,10 @@ import { registerBlockBindingsSource, registerBlockType } from '@wordpress/blocks'; +import { createReduxStore, register } from '@wordpress/data'; +import { ReduxStoreConfig } from '@wordpress/data/build-types/types'; import { addFilter } from '@wordpress/hooks'; import { registerFormatType } from '@wordpress/rich-text'; +import { fetchRemoteData } from './hooks/useRemoteData'; import { formatTypeSettings } from '@/blocks/remote-data-container/components/field-shortcode'; import { FieldShortcodeButton } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeButton'; import { Edit } from '@/blocks/remote-data-container/edit'; @@ -10,6 +13,7 @@ import { withBlockBindingShim } from '@/blocks/remote-data-container/filters/wit import { Save } from '@/blocks/remote-data-container/save'; import { getBlocksConfig } from '@/utils/localized-block-data'; import './style.scss'; +import * as constants from './config/constants'; // Register a unique block definition for each of the context blocks. Object.values( getBlocksConfig() ).forEach( blockConfig => { @@ -52,11 +56,109 @@ addFilter( */ addFilter( 'blocks.registerBlockType', 'remote-data-blocks/addUsesContext', addUsesContext, 10 ); +interface State {} + +type Actions = { + GET_DATA: () => void; +}; + +interface Selectors {} + +const queryDataStateKey = (queryKey: string, blockName: string, queryInputs: Record) => `${blockName}:${queryKey}:${JSON.stringify(queryInputs ?? {})}`; + +const remoteDataBlocksStoreConfig: ReduxStoreConfig< State, Actions, Selectors > = { + reducer: ( state = {}, action ) => { + switch ( action.type ) { + case 'RECEIVE_REMOTE_DATA': + // console.log('store: RECEIVED REMOTE DATA') + // console.log({action}); + // console.log(`key: ${queryDataStateKey(action.queryKey, action.blockName, action.queryInput)}`); + return { ...state, [ queryDataStateKey(action.queryKey, action.blockName, action.queryInputs) ]: action.data }; + case 'RECEIVE_REMOTE_DATA_ERROR': + // console.log('store: RECEIVED REMOTE DATA ERROR') + return { ...state, [ queryDataStateKey(action.queryKey, action.blockName, action.queryInputs) ]: action.error }; + } + return state; + }, + selectors: { + getRemoteData: ( state, queryKey, blockName, queryInputs = {} ) => { + // console.log( 'store: CALLED SELECTOR' ); + console.log( { state, queryKey, blockName, queryInputs } ); + return state[ queryDataStateKey(queryKey, blockName, queryInputs) ]; + }, + }, + resolvers: { + getRemoteData: + ( queryKey: string, blockName: string, queryInputs: Record< string, string > ) => + async ( { dispatch } ) => { + console.log( 'store: CALLED RESOLVER', { queryKey, blockName, queryInputs } ); + try { + console.log({FETCH:{blockName, queryKey, queryInputs }}); + const data = await fetchRemoteData( { + block_name: blockName, + query_key: queryKey, + query_inputs: [ queryInputs ], + } ); + // console.log('store: DISPATCHING RECEIVE_REMOTE_DATA') + console.log( { retrievedData: data } ); + dispatch( { type: 'RECEIVE_REMOTE_DATA', blockName, queryKey, data, queryInputs } ); + } catch ( err: unknown ) { + console.error(err); + dispatch( { type: 'RECEIVE_REMOTE_DATA_ERROR', blockName, queryKey, error: err } ); + } + }, + }, +}; + +const remoteDataBlocksStore = createReduxStore( + 'remote-data-blocks-store', + remoteDataBlocksStoreConfig +); + +register( remoteDataBlocksStore ); + registerBlockBindingsSource( { name: 'remote-data/binding', label: 'Remote Data Binding', usesContext: [ 'remote-data-blocks/remoteData' ], - getValues() { - return {}; + getValues( { context, clientId, bindings, select, ...other } ) { + // console.log({other}); + const remoteDataContext = context[ 'remote-data-blocks/remoteData' ]; + console.log({CONTEXT:remoteDataContext}); + + if ( remoteDataContext === undefined ) { + const nullValues = {}; + for ( const [ attributeName, source ] of Object.entries( bindings ) ) { + const { key, field } = source.args; + // const { gravatar_id: id } = + // getEditedEntityRecord( 'postType', context?.postType, context?.postId ).meta || {}; + // const data = select( gravatarStore ).getGravatarData( id ); + nullValues[ attributeName ] = '123'; // data?.[ key || field ]; + } + // console.log( remoteDataContext?.results?.[ 0 ] ); + return nullValues; + } + + const data = select( remoteDataBlocksStore ).getRemoteData( + constants.DISPLAY_QUERY_KEY, + remoteDataContext.blockName, + remoteDataContext.queryInputs?.[0] + ); + + const result = data?.results?.[0].result; + + const newValues = {}; + + for ( const [ attributeName, source ] of Object.entries( bindings ) ) { + console.log({source}); + const { block, field } = source.args; + // const { gravatar_id: id } = + // getEditedEntityRecord( 'postType', context?.postType, context?.postId ).meta || {}; + // const data = select( gravatarStore ).getGravatarData( id ); + console.log({block, field,result,data}); + newValues[ attributeName ] = result?.[ field ]?.value?.toString() ?? 'TEST'; // data?.[ key || field ]; + } + // console.log( remoteDataContext?.results?.[ 0 ] ); + return newValues; }, } );