@cu-mkp/editioncrafter 1.3.0 → 1.3.1-beta.1

package/dist/es/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 = (
-    <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}>

package/dist/es/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) => {

package/dist/es/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(() => {

package/dist/es/src/EditionCrafter/component/TranscriptionView.js

@@ -107,8 +107,6 @@ function htmlToReactParserOptions(selectedZone, selectedTags) {
 function TranscriptionView(props) {
   const [searchParams] = useSearchParams()
 
-  const { tags } = useContext(TagFilterContext)
-
   const {
     side,
     folioID,
@@ -118,6 +116,9 @@ function TranscriptionView(props) {
     documentViewActions,
   } = props
 
+  const { tagsLeft, tagsRight } = useContext(TagFilterContext)
+  const tags = side === 'left' ? tagsLeft : tagsRight
+
   if (folioID === '-1') {
     return (
       <Watermark

package/dist/es/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()

package/dist/es/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 (
     <div className="tag-explore">
-      <HashRouter>
+      <Router>
         <TagFilterProvider>
           <TagExploreSidebar db={db} />
           <EditionCrafter {...ecProps} />
         </TagFilterProvider>
-      </HashRouter>
+      </Router>
     </div>
   )
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cu-mkp/editioncrafter",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1-beta.1",
   "private": false,
   "description": "A simple digital critical edition publication tool",
   "license": "MIT",