import './app.scss' ; import React , { useEffect } from 'react' ; import { Route , Switch , useLocation } from 'react-router-dom' ; import { AppMountParameters } from 'opensearch-dashboards/public' ; import { syncQueryStateWithUrl } from '../../../data/public' ; import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public' ; import { VisualizeServices } from './types' ; import { VisualizeEditor , VisualizeListing , VisualizeNoMatch , VisualizeByValueEditor , } from './components' ; import { VisualizeConstants } from './visualize_constants' ; export interface VisualizeAppProps { onAppLeave : AppMountParameters [ 'onAppLeave' ] ; } export const VisualizeApp = ( { onAppLeave } ) => { const { services : { data : { query } , osdUrlStateStorage , } , } = useOpenSearchDashboards < VisualizeServices > ( ) ; const { pathname } = useLocation ( ) ; useEffect ( ( ) => { const { stop } = syncQueryStateWithUrl ( query , osdUrlStateStorage ) ; return ( ) => stop ( ) ; } , [ query , osdUrlStateStorage , pathname ] ) ; return ( < Switch > < Route exact path = { `${ VisualizeConstants . EDIT_BY_VALUE_PATH }` } > < VisualizeByValueEditor onAppLeave = { onAppLeave } /> < /Route> < Route path = { [ VisualizeConstants . CREATE_PATH , `${ VisualizeConstants . EDIT_PATH }/:id` ] } > < VisualizeEditor onAppLeave = { onAppLeave } /> < /Route> < Route exact path = { [ VisualizeConstants . LANDING_PAGE_PATH , VisualizeConstants . WIZARD_STEP_1_PAGE_PATH ] } > < VisualizeListing /> < /Route> < VisualizeNoMatch / > < /Switch>); } ;