diff --git a/editioncrafter/src/EditionCrafter/component/DiploMatic.js b/editioncrafter/src/EditionCrafter/component/DiploMatic.js index f3f8dae3..20b8f617 100644 --- a/editioncrafter/src/EditionCrafter/component/DiploMatic.js +++ b/editioncrafter/src/EditionCrafter/component/DiploMatic.js @@ -1,9 +1,10 @@ import withWidth from '@material-ui/core/withWidth' import { createBrowserHistory } from 'history' import PropTypes from 'prop-types' -import React, { useEffect, useRef, useState } from 'react' +import React, { useEffect, useMemo, useRef, useState } from 'react' import { connect, Provider } from 'react-redux' import { + BrowserRouter, HashRouter, Navigate, Route, @@ -24,6 +25,8 @@ function DiploMatic(props) { }) }, []) + const Router = useMemo(() => props.config.serverNav ? BrowserRouter : HashRouter, [props.config.serverNav]) + useEffect(() => { if (containerRef.current) { setContainerWidth(containerRef.current.offsetWidth) @@ -36,23 +39,34 @@ function DiploMatic(props) { const { fixedFrameMode } = props.diplomatic const fixedFrameModeClass = fixedFrameMode ? 'editioncrafter' : 'editioncrafter sticky' - const mainBody = ( -
- -
- - } exact /> - } exact /> - } exact /> - } exact /> - } exact /> - } exact /> - -
-
- ) + const mainBody + = ( +
+ +
+ { + props.config.serverNav + ? ( + + ) + : ( + + } exact /> + } exact /> + } exact /> + } exact /> + } exact /> + } exact /> + + ) + } +
+
+ ) - const topLevel = !(props.tagExplorerMode === true) ? {mainBody} : mainBody + const topLevel = !(props.tagExplorerMode === true) + ? {mainBody} + : mainBody return ( diff --git a/editioncrafter/src/EditionCrafter/component/DocumentView.js b/editioncrafter/src/EditionCrafter/component/DocumentView.js index 691e5f87..53fd442c 100644 --- a/editioncrafter/src/EditionCrafter/component/DocumentView.js +++ b/editioncrafter/src/EditionCrafter/component/DocumentView.js @@ -1,5 +1,5 @@ import withWidth, { isWidthUp } from '@material-ui/core/withWidth' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useMemo, useState } from 'react' import { connect } from 'react-redux' import { useLocation, @@ -30,13 +30,55 @@ function DocumentView(props) { const [third, setThird] = useState(paneDefaults) const [singlePaneMode, setSinglePaneMode] = useState(props.containerWidth < 960) - const params = useParams() - const navigate = useNavigate() + const navigateRouter = useNavigate() + const navigateWindow = (path) => { + window.location.href = path + } + /** + * Memoize the navigation method + */ + const navigate = useMemo(() => (props.config.serverNav + ? (props.config.navigate || navigateWindow) + : navigateRouter), [props.config.serverNav, props.config.navigate, navigateRouter]) + + /** + * Memoize the URL divider ('ec' by default) + */ + const divider = useMemo(() => (props.config.divider || '/ec'), [props.config.divider]) const location = useLocation() + /** + * Memoize the base URL of the current page (before the divider) + */ + const baseUrl = useMemo(() => ( + props.config.serverNav + ? location.pathname.split(divider)[0] + : null + ), [props.config.serverNav, location, divider]) + + const routerParams = useParams() + + /** + * Memoize the folio parameters + */ + const params = useMemo(() => { + if (!props.config.serverNav) { + return routerParams + } + const suffix = location.pathname.split(divider)[1]?.split('/') + return ({ + folioID: suffix[1], + transcriptionType: suffix[2], + folioID2: suffix[3], + transcriptionType2: suffix[4], + folioID3: suffix[5], + transcriptionType3: suffix[6], + }) + }, [location, routerParams, props.config.serverNav, divider]) + // "reload" the page if the config props change useEffect(() => { - dispatchAction(props, 'RouteListenerSaga.userNavigation', location.pathname) + dispatchAction(props, 'RouteListenerSaga.userNavigation', location.pathname, divider.replaceAll('/', '')) }, [props.config]) useEffect(() => { @@ -45,7 +87,7 @@ function DocumentView(props) { // Navigate while keeping existing search params const navigateWithParams = (pathname) => { - navigate(pathname + location.search) + navigate(baseUrl + pathname + location.search) } const getViewports = () => { @@ -125,7 +167,7 @@ function DocumentView(props) { useEffect(() => { dispatchAction(props, 'DiplomaticActions.setFixedFrameMode', true) - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const setXMLMode = (side, xmlMode) => { diff --git a/editioncrafter/src/EditionCrafter/component/RouteListener.js b/editioncrafter/src/EditionCrafter/component/RouteListener.js index 17b843fc..3e3646de 100644 --- a/editioncrafter/src/EditionCrafter/component/RouteListener.js +++ b/editioncrafter/src/EditionCrafter/component/RouteListener.js @@ -10,7 +10,7 @@ function RouteListener(props) { const { pathname } = useLocation() const userNavigated = () => { - dispatchAction(props, 'RouteListenerSaga.userNavigation', pathname) + dispatchAction(props, 'RouteListenerSaga.userNavigation', pathname, props.divider && props.divider.replaceAll('/', '')) } useEffect(() => { diff --git a/editioncrafter/src/EditionCrafter/saga/RouteListenerSaga.js b/editioncrafter/src/EditionCrafter/saga/RouteListenerSaga.js index b2c3b422..c13e415c 100644 --- a/editioncrafter/src/EditionCrafter/saga/RouteListenerSaga.js +++ b/editioncrafter/src/EditionCrafter/saga/RouteListenerSaga.js @@ -55,11 +55,12 @@ function* parseTags(headerUrl) { function* userNavigation(action) { const pathname = action.payload.params[0] + const divider = action.payload.params[1] || 'ec' const pathSegments = pathname.split('/') if (pathSegments.length > 1) { - switch (pathSegments[1]) { - case 'ec': + switch (pathSegments.includes(divider)) { + case true: { yield resolveDocumentManifest() yield resolveDocumentTags() diff --git a/editioncrafter/src/TagExplore/index.jsx b/editioncrafter/src/TagExplore/index.jsx index 8a4de598..a5b1c96f 100644 --- a/editioncrafter/src/TagExplore/index.jsx +++ b/editioncrafter/src/TagExplore/index.jsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from 'react' -import { HashRouter } from 'react-router-dom' +import { useEffect, useMemo, useState } from 'react' +import { BrowserRouter, HashRouter } from 'react-router-dom' import initSqlJs from 'sql.js' import sqlJsInfo from 'sql.js/package.json' import Loading from '../common/components/Loading' @@ -71,6 +71,8 @@ function TagExplore(props) { const [ecProps, setECProps] = useState(null) const [filters, setFilters] = useState(initialFilters) + const Router = useMemo(() => props.serverNav ? BrowserRouter : HashRouter, [props.serverNav]) + useEffect(() => { const loadDb = async () => { const db = await initDb(props.dbUrl) @@ -96,12 +98,12 @@ function TagExplore(props) { return (
- + - +
) }