97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useMachine } from '@xstate5/react';
|
|
import React, { useEffect } from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { useFullScreen } from '~/utils';
|
|
import { useComponentFromXStateService } from '~/utils/xstate/useComponentFromService';
|
|
|
|
import './styles.scss';
|
|
import {
|
|
SidebarMachineEvents,
|
|
sidebarMachine,
|
|
SidebarComponentProps,
|
|
SidebarContainer,
|
|
} from './sidebar/xstate';
|
|
import {
|
|
MainContentMachineEvents,
|
|
mainContentMachine,
|
|
MainContentComponentProps,
|
|
MainContentContainer,
|
|
} from './main-content/xstate';
|
|
import { useXStateInspect } from '~/xstate';
|
|
|
|
export type LaunchYourStoreComponentProps = {
|
|
sendEventToSidebar: ( arg0: SidebarMachineEvents ) => void;
|
|
sendEventToMainContent: ( arg0: MainContentMachineEvents ) => void;
|
|
className?: string;
|
|
};
|
|
|
|
const LaunchStoreController = () => {
|
|
useFullScreen( [ 'woocommerce-launch-your-store' ] );
|
|
useEffect( () => {
|
|
window.sessionStorage.setItem( 'lysWaiting', 'no' );
|
|
}, [] );
|
|
const { xstateV5Inspector: inspect } = useXStateInspect( 'V5' );
|
|
|
|
const [ mainContentState, sendToMainContent, mainContentMachineService ] =
|
|
useMachine( mainContentMachine, {
|
|
inspect,
|
|
} );
|
|
|
|
const [ sidebarState, sendToSidebar, sidebarMachineService ] = useMachine(
|
|
sidebarMachine,
|
|
{
|
|
inspect,
|
|
input: {
|
|
mainContentMachineRef: mainContentMachineService,
|
|
},
|
|
}
|
|
);
|
|
|
|
const isSidebarVisible = ! sidebarState.hasTag( 'fullscreen' );
|
|
|
|
const [ CurrentSidebarComponent ] =
|
|
useComponentFromXStateService< SidebarComponentProps >(
|
|
sidebarMachineService
|
|
);
|
|
|
|
const [ CurrentMainContentComponent ] =
|
|
useComponentFromXStateService< MainContentComponentProps >(
|
|
mainContentMachineService
|
|
);
|
|
|
|
return (
|
|
<div className={ 'launch-your-store-layout__container' }>
|
|
<SidebarContainer
|
|
className={ clsx( {
|
|
'is-sidebar-hidden': ! isSidebarVisible,
|
|
} ) }
|
|
>
|
|
{ CurrentSidebarComponent && (
|
|
<CurrentSidebarComponent
|
|
sendEventToSidebar={ sendToSidebar }
|
|
sendEventToMainContent={ sendToMainContent }
|
|
context={ sidebarState.context }
|
|
/>
|
|
) }
|
|
</SidebarContainer>
|
|
<MainContentContainer>
|
|
{ CurrentMainContentComponent && (
|
|
<CurrentMainContentComponent
|
|
sendEventToSidebar={ sendToSidebar }
|
|
sendEventToMainContent={ sendToMainContent }
|
|
context={ mainContentState.context }
|
|
/>
|
|
) }
|
|
</MainContentContainer>
|
|
</div>
|
|
);
|
|
};
|
|
export default LaunchStoreController;
|