FIX: Footnote reference and content should be jumpable back and forth.

Author: benel

frontend/scenarios/open_uri.feature

@@ -13,11 +13,11 @@ Scénario: d'un document
 
 Scénario: d'un document en regard d'une de ses gloses
 
-  Quand j'essaie d'ouvrir l'URI "/c2b9f52285ce11edbd0aff9b25defbab#146e6e8442f0405b721b79357d00d0a1" reçue par courriel
+  Quand j'essaie d'ouvrir l'URI "/c2b9f52285ce11edbd0aff9b25defbab/146e6e8442f0405b721b79357d00d0a1" reçue par courriel
   Alors "Analyse de l'entretien" est le document principal
   Et "Flux de l'Institut (diagramme d'activité)" est la glose ouverte
 
 Scénario: d'un document avec une URI invalide
 
-  Quand j'essaie d'ouvrir l'URI "/document-inexistant#glose-inexistante" reçue par courriel
+  Quand j'essaie d'ouvrir l'URI "/document-inexistant/glose-inexistante" reçue par courriel
   Alors je peux lire "Le document que vous cherchez a été supprimé par les co-éditeurs ou l'URI fournie est incorrecte"

frontend/src/App.jsx

@@ -37,7 +37,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Bookshelf {...{backend, user}} />} />
             <Route path="/registration" element={<Registration {...{backend}}/>} />
-            <Route path="/:id" element={<Lectern {...{backend, user}} />} />
+            <Route path="/:id/:margin?" element={<Lectern {...{backend, user}} />} />
           </Routes>
         </TypesContext.Provider>
       </BrowserRouter>

frontend/src/components/BrowseTools.jsx

@@ -10,7 +10,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-edit">Edit this document</Tooltip>}
         >
-          <Link to={`../${id}#${id}`} className="icon edit">
+          <Link to={id} className="icon edit">
             <PencilSquare />
           </Link>
         </OverlayTrigger>
@@ -21,7 +21,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-close">Close this document</Tooltip>}
         >
-          <Link to="#" className="icon close">
+          <Link to=".." relative="path" className="icon close">
             <ChevronBarDown />
           </Link>
         </OverlayTrigger>
@@ -32,7 +32,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-open">Open this document</Tooltip>}
         >
-          <Link to={`#${id}`} className="icon open">
+          <Link to={id} className="icon open">
             <ChevronExpand />
           </Link>
         </OverlayTrigger>
@@ -43,7 +43,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-focus">Focus on this document</Tooltip>}
         >
-          <Link to={`../${id}`} className="icon focus">
+          <Link to={`/${id}`} className="icon focus">
             <Bookmark />
           </Link>
         </OverlayTrigger>

frontend/src/components/ExistingDocument.jsx

@@ -29,7 +29,7 @@ function ExistingDocument({ document, relatedTo, verb, setLastUpdate, backend })
       .then(x => Promise.all(x))
       .then(() => {
         setLastUpdate(document._id);
-        navigate('#' + document._id);
+        navigate(document._id);
       })
       .catch(console.error);
   };

frontend/src/components/FutureDocument.jsx

@@ -66,7 +66,7 @@ const FutureDocument = ({ relatedTo, setLastUpdate, backend, user }) => {
           : relatedTo.map((object) => ({ verb, object }))
       });
       setLastUpdate(_id);
-      navigate((relatedTo.length ? '#' : `/${_id}#`) + _id);
+      navigate((relatedTo.length ? '' : `/${_id}/`) + _id);
     } catch (error) {
       console.error('Error creating document:', error);
     }

frontend/src/menu-items/DeleteDocumentAction.jsx

@@ -10,7 +10,7 @@ function DeleteDocumentAction({metadata, isFromScratch, backend, setLastUpdate})
   const handleClick = () => {
     backend.deleteDocument(metadata)
       .then(x => setLastUpdate(x.rev))
-      .then(() => navigate(isFromScratch ? '/' : '#'));
+      .then(() => navigate(isFromScratch ? '/' : '..', {relative: 'path'}));
   };
 
   return (

frontend/src/menu-items/DeleteReferenceToDocumentAction.jsx

@@ -11,7 +11,7 @@ function DeleteReferenceToDocumentAction({id, margin, backend, metadata, content
     metadata.links = metadata.links.filter(link => ![id, ...new Set([...content.filter((row) => row.value.isPartOf === id).map(({id, value}) => value._id || id)])].includes(link.object));
     backend.putDocument({...metadata})
       .then(x => setLastUpdate(x.rev))
-      .then(() => navigate('/' + margin + '#' + margin))
+      .then(() => navigate('/' + margin + '/' + margin))
       .catch(console.error);
   };
 

frontend/src/routes/Lectern.jsx

@@ -5,7 +5,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useState, useEffect } from 'react';
-import { useParams, useLocation } from 'react-router';
+import { useParams } from 'react-router';
 import Context from '../context';
 import ParallelDocuments from '../parallelDocuments';
 import OpenedDocuments from '../components/OpenedDocuments';
@@ -19,8 +19,7 @@ function Lectern({backend, user}) {
   const [lastUpdate, setLastUpdate] = useState();
   const [rawEditMode, setRawEditMode] = useState(false);
   const [loading, setLoading] = useState(true);
-  let {id} = useParams();
-  let margin = useLocation().hash.slice(1);
+  let {id, margin} = useParams();
   const getCaption = ({dc_title, dc_spatial}) => [dc_title, dc_spatial].filter(Boolean).join(', ');
 
   if (metadata) {

frontend/tests/context.js

@@ -172,7 +172,7 @@ Soit("un document sans champ {string} affiché comme document principal", (field
   cy.sign_in('alice', '/');
   cy.create_document_from_scratch();
   cy.url().then((url) => {
-    const id = url.split('#')[1];
+    const id = url.split('/').pop();
     cy.request(`/api/${id}`)
       .then(({ body: doc }) => {
         delete doc[field];

frontend/tests/support.js

@@ -34,7 +34,7 @@ Cypress.Commands.add('click_on_text', (type, text) => {
 
 Cypress.Commands.add('create_glose', (random = false) => {
   cy.get('.create-document').click();
-  cy.url().should('contain', '#');
+  cy.url().should('match', /[0-9a-f]+\/[0-9a-f]+$/);
   if (random) {
     cy.set_random_name();
   }
@@ -43,7 +43,7 @@ Cypress.Commands.add('create_glose', (random = false) => {
 Cypress.Commands.add('create_glose_of_type', (random = false, option = "Adaptation") => {
   cy.get('#select-dropdown').select(option);
   cy.get('.create-document').click();
-  cy.url().should('contain', '#');
+  cy.url().should('match', /[0-9a-f]+\/[0-9a-f]+$/);
   if (random) {
     cy.set_random_name();
   }