Skip to content

Adding more routing options #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ajolipa wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

Adding more routing options #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7a79f3f
Merge pull request #153 from cu-mkp/dev
camdendotlol Dec 5, 2024
dfa728f
Merge pull request #156 from cu-mkp/dev
camdendotlol Jan 7, 2025
3c94d32
Merge pull request #157 from cu-mkp/dev
camdendotlol Jan 8, 2025
13cea3f
Merge pull request #162 from cu-mkp/dev
camdendotlol May 27, 2025
af94f61
Merge pull request #165 from cu-mkp/dev
camdendotlol May 28, 2025
8da7711
adding server routing ability
ajolipa Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 31 additions & 17 deletions editioncrafter/src/EditionCrafter/component/DiploMatic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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)
Expand All @@ -36,23 +39,34 @@ function DiploMatic(props) {
const { fixedFrameMode } = props.diplomatic
const fixedFrameModeClass = fixedFrameMode ? 'editioncrafter' : 'editioncrafter sticky'

const mainBody = (
<div id="diplomatic" className={fixedFrameModeClass} ref={containerRef} style={{ height: containerHeight }}>
<RouteListener />
<div id="content" style={{ height: '100%' }}>
<Routes>
<Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/" element={<Navigate to="/ec" />} exact />
</Routes>
</div>
</div>
)
const mainBody
= (
<div id="diplomatic" className={fixedFrameModeClass} ref={containerRef} style={{ height: containerHeight }}>
<RouteListener divider={props.config.divider} />
<div id="content" style={{ height: '100%' }}>
{
props.config.serverNav
? (
<DocumentView {...props} containerWidth={containerWidth} />
)
: (
<Routes>
<Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
<Route path="/" element={<Navigate to="/ec" />} exact />
</Routes>
)
}
</div>
</div>
)

const topLevel = !(props.tagExplorerMode === true) ? <HashRouter><TagFilterProvider>{mainBody}</TagFilterProvider></HashRouter> : mainBody
const topLevel = !(props.tagExplorerMode === true)
? <Router><TagFilterProvider>{mainBody}</TagFilterProvider></Router>
: mainBody

return (
<Provider store={props.store}>
Expand Down
54 changes: 48 additions & 6 deletions editioncrafter/src/EditionCrafter/component/DocumentView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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 = () => {
Expand Down Expand Up @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion editioncrafter/src/EditionCrafter/component/RouteListener.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
5 changes: 3 additions & 2 deletions editioncrafter/src/EditionCrafter/saga/RouteListenerSaga.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
10 changes: 6 additions & 4 deletions editioncrafter/src/TagExplore/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
Expand All @@ -96,12 +98,12 @@ function TagExplore(props) {

return (
<div className="tag-explore">
<HashRouter>
<Router>
<TagFilterProvider>
<TagExploreSidebar db={db} />
<EditionCrafter {...ecProps} />
</TagFilterProvider>
</HashRouter>
</Router>
</div>
)
}
Expand Down