| 1 |
import * as React from "react"; |
| 2 |
import URLSearchParams from "@ungap/url-search-params"; |
| 3 |
import { MemoryRouter as Router, Switch, Route } from "react-router-dom"; |
| 4 |
|
| 5 |
import { QueryClient, QueryClientProvider } from "react-query"; |
| 6 |
const queryClient = new QueryClient(); |
| 7 |
|
| 8 |
import ThemesProvider from "../providers/Themes"; |
| 9 |
import GalleryProvider from "../providers/Gallery"; |
| 10 |
import NotificationProvider from "../providers/Notification"; |
| 11 |
import GalleryEditor from "../components/GalleryEditor/GalleryEditor"; |
| 12 |
|
| 13 |
import ListGalleries from "../pages/ListGalleries/ListGalleries"; |
| 14 |
|
| 15 |
const App = () => { |
| 16 |
const params = new URLSearchParams(document.location.search.substring(1)); |
| 17 |
|
| 18 |
const id = params.get(`id`); |
| 19 |
const page = params.get(`page`); |
| 20 |
|
| 21 |
// Need to fake a top-level router here since |
| 22 |
// these subcomponents implement a MemoryRouter |
| 23 |
const isListGalleries = page === `vimeography-edit-galleries` && id === null; |
| 24 |
const isEditGallery = page === `vimeography-edit-galleries` && id !== null; |
| 25 |
|
| 26 |
return ( |
| 27 |
<QueryClientProvider client={queryClient}> |
| 28 |
<NotificationProvider> |
| 29 |
<ThemesProvider> |
| 30 |
<Router> |
| 31 |
{isListGalleries && <ListGalleries />} |
| 32 |
|
| 33 |
{isEditGallery && ( |
| 34 |
<GalleryProvider id={id}> |
| 35 |
<GalleryEditor /> |
| 36 |
</GalleryProvider> |
| 37 |
)} |
| 38 |
</Router> |
| 39 |
</ThemesProvider> |
| 40 |
</NotificationProvider> |
| 41 |
</QueryClientProvider> |
| 42 |
); |
| 43 |
}; |
| 44 |
|
| 45 |
export default App; |
| 46 |
|
