diff options
author | Leandro Alves <leandroalves@yahooinc.com> | 2022-06-24 13:15:30 +0200 |
---|---|---|
committer | Leandro Alves <leandroalves@yahooinc.com> | 2022-06-24 13:15:30 +0200 |
commit | bfe567cb66b6341d4872c4f38c49a77379d5d4e4 (patch) | |
tree | 62a4d9f601f10bc5d6245a9a9aabe089ae8c364a /client/js/app/src | |
parent | 137acdd6a2af47d90c541730a24425ef77292eea (diff) |
Rename app-router to router and use new router
Diffstat (limited to 'client/js/app/src')
-rw-r--r-- | client/js/app/src/app/app.jsx | 15 | ||||
-rw-r--r-- | client/js/app/src/app/components/link/link.jsx | 2 | ||||
-rw-r--r-- | client/js/app/src/app/libs/app-router.jsx | 8 | ||||
-rw-r--r-- | client/js/app/src/app/libs/router.jsx | 52 |
4 files changed, 59 insertions, 18 deletions
diff --git a/client/js/app/src/app/app.jsx b/client/js/app/src/app/app.jsx index cb7441a2969..9fa912c89a5 100644 --- a/client/js/app/src/app/app.jsx +++ b/client/js/app/src/app/app.jsx @@ -1,25 +1,24 @@ import React from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; -import { Error, Layout } from 'app/components'; +import { Layout } from 'app/components'; import { Home } from 'app/pages/home/home'; import { QueryBuilder } from 'app/pages/querybuilder/query-builder'; import { QueryTracer } from 'app/pages/querytracer/query-tracer'; -import { AppProvider } from 'app/libs/app-provider'; -import { AppRouter } from 'app/libs/app-router'; +import { ThemeProvider } from 'app/libs/theme-provider'; +import { Router } from 'app/libs/router'; export function App() { return ( <BrowserRouter> - <AppProvider> + <ThemeProvider> <Layout> - <AppRouter> + <Router> <Route path="/" element={<Home />} /> <Route path="querybuilder" element={<QueryBuilder />} /> <Route path="querytracer" element={<QueryTracer />} /> - <Route path="*" element={<Error code={404} />} /> - </AppRouter> + </Router> </Layout> - </AppProvider> + </ThemeProvider> </BrowserRouter> ); } diff --git a/client/js/app/src/app/components/link/link.jsx b/client/js/app/src/app/components/link/link.jsx index dc454b347d7..288174d21be 100644 --- a/client/js/app/src/app/components/link/link.jsx +++ b/client/js/app/src/app/components/link/link.jsx @@ -2,8 +2,6 @@ import React from 'react'; import { Link as InternalLink } from 'react-router-dom'; import { Anchor } from '@mantine/core'; -// TODO: adapt it according to new Console link component - export const isInternalLink = (link) => { if (!link) return false; return !/^[a-z]+:\/\//.test(link); diff --git a/client/js/app/src/app/libs/app-router.jsx b/client/js/app/src/app/libs/app-router.jsx deleted file mode 100644 index 2cb1c339bbf..00000000000 --- a/client/js/app/src/app/libs/app-router.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Routes } from 'react-router'; - -// TODO: add page title back once we fix in Console - -export function AppRouter(props) { - return <Routes {...props} />; -} diff --git a/client/js/app/src/app/libs/router.jsx b/client/js/app/src/app/libs/router.jsx new file mode 100644 index 00000000000..df6df135ea9 --- /dev/null +++ b/client/js/app/src/app/libs/router.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { Routes, Route, useParams, Navigate } from 'react-router-dom'; +import { Error } from 'app/components'; + +const mainTitle = 'Vespa Console'; + +function TitledRoute({ element, title, default: isDefault, ...props }) { + const params = useParams(); + const clone = React.cloneElement(element, Object.assign(props, params)); + if (title != null) { + const titleStr = typeof title === 'function' ? title(params) : title; + document.title = titleStr.endsWith(mainTitle) + ? titleStr + : `${titleStr} - ${mainTitle}`; + } else if (isDefault) { + // Reset the title if title is not set and this is a default router + document.title = mainTitle; + } + + return clone; +} + +export function Router({ children }) { + // If there is only one route then this comes as an object. + if (!Array.isArray(children)) children = [children]; + children = children.filter(({ props }) => props.enabled ?? true); + + if (!children.some((child) => child.props.default)) + children.push(<Error code={404} default />); + + return ( + <Routes> + {children.map(({ props, ...element }, i) => ( + <Route + key={`${i}-${props.path}`} + path={props.default ? '*' : props.path} + element={ + element.type === Redirect ? ( + Object.assign({ props }, element) + ) : ( + <TitledRoute element={element} {...props} /> + ) + } + /> + ))} + </Routes> + ); +} + +export function Redirect({ to, replace }) { + return <Navigate {...{ to, replace }} />; +} |