| 1 |
/** |
| 2 |
* Elementor App |
| 3 |
*/ |
| 4 |
import { useContext } from 'react'; |
| 5 |
import router from '@elementor/router'; |
| 6 |
import { Router, LocationProvider, createHistory } from '@reach/router'; |
| 7 |
import { createHashSource } from 'reach-router-hash-history'; |
| 8 |
import NotFound from 'elementor-app/pages/not-found'; |
| 9 |
import Index from 'elementor-app/pages/index'; |
| 10 |
import ErrorBoundary from 'elementor-app/organisms/error-boundary'; |
| 11 |
import './app.scss'; |
| 12 |
|
| 13 |
import { AppContext } from 'elementor-app/app-context'; |
| 14 |
|
| 15 |
import { ThemeProvider } from 'styled-components'; |
| 16 |
|
| 17 |
const { Suspense } = React; |
| 18 |
|
| 19 |
export default function App() { |
| 20 |
const appContext = useContext( AppContext ), |
| 21 |
{ isDarkMode } = appContext.state, |
| 22 |
theme = { |
| 23 |
config: { |
| 24 |
variants: { |
| 25 |
light: ! isDarkMode, |
| 26 |
dark: isDarkMode, |
| 27 |
}, |
| 28 |
}, |
| 29 |
}; |
| 30 |
|
| 31 |
// Use hash route because it's actually rendered on a WP Admin page. |
| 32 |
// Make it public for external uses. |
| 33 |
router.appHistory = createHistory( createHashSource() ); |
| 34 |
|
| 35 |
return ( |
| 36 |
<ErrorBoundary> |
| 37 |
<LocationProvider history={ router.appHistory }> |
| 38 |
<ThemeProvider theme={ theme }> |
| 39 |
<Suspense fallback={ null }> |
| 40 |
<Router> |
| 41 |
{ router.getRoutes() } |
| 42 |
<Index path="/" /> |
| 43 |
<NotFound default /> |
| 44 |
</Router> |
| 45 |
</Suspense> |
| 46 |
</ThemeProvider> |
| 47 |
</LocationProvider> |
| 48 |
</ErrorBoundary> |
| 49 |
); |
| 50 |
} |
| 51 |
|
