-
Notifications
You must be signed in to change notification settings - Fork 10.7k
/
index.tsx
88 lines (80 loc) · 2.31 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* External dependencies
*/
import { useMachine, useSelector } from '@xstate/react';
import { AnyInterpreter, Sender } from 'xstate';
import { useEffect, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { customizeStoreStateMachineEvents } from '..';
import {
CustomizeStoreComponent,
customizeStoreStateMachineContext,
} from '../types';
import { designWithNoAiStateMachineDefinition } from './state-machine';
import { findComponentMeta } from '~/utils/xstate/find-component';
import { AssembleHubLoader } from './pages/ApiCallLoader';
export type DesignWithoutAiComponent = typeof AssembleHubLoader;
export type DesignWithoutAiComponentMeta = {
component: DesignWithoutAiComponent;
};
export const DesignWithNoAiController = ( {
parentMachine,
parentContext,
}: {
parentMachine?: AnyInterpreter;
sendEventToParent?: Sender< customizeStoreStateMachineEvents >;
parentContext?: customizeStoreStateMachineContext;
} ) => {
const [ , send, service ] = useMachine(
designWithNoAiStateMachineDefinition,
{
devTools: process.env.NODE_ENV === 'development',
parent: parentMachine,
context: {
...designWithNoAiStateMachineDefinition.context,
isFontLibraryAvailable:
parentContext?.isFontLibraryAvailable ?? false,
},
}
);
// eslint-disable-next-line react-hooks/exhaustive-deps -- false positive due to function name match, this isn't from react std lib
const currentNodeMeta = useSelector( service, ( currentState ) =>
findComponentMeta< DesignWithoutAiComponentMeta >(
currentState?.meta ?? undefined
)
);
const [ CurrentComponent, setCurrentComponent ] =
useState< DesignWithoutAiComponent | null >( null );
useEffect( () => {
if ( currentNodeMeta?.component ) {
setCurrentComponent( () => currentNodeMeta?.component );
}
}, [ CurrentComponent, currentNodeMeta?.component ] );
return (
<>
<div className={ `woocommerce-design-without-ai__container` }>
{ CurrentComponent ? (
<CurrentComponent sendEvent={ send } />
) : (
<div />
) }
</div>
</>
);
};
//loader should send event 'THEME_SUGGESTED' when it's done
export const DesignWithoutAi: CustomizeStoreComponent = ( {
parentMachine,
context,
} ) => {
return (
<>
<DesignWithNoAiController
parentMachine={ parentMachine }
parentContext={ context }
/>
</>
);
};