Improve handling of component props updating

.gitignore

@@ -9,4 +9,4 @@ __tests__/integration/editioncrafter/css/
 .cache/
 storybook-static
 .DS_Store
-.github
+.github

editioncrafter/src/component/DocumentView.js

@@ -30,6 +30,11 @@ const DocumentView = (props) => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  //"reload" the page if the config props change
+  useEffect(() => {
+    dispatchAction(props, 'RouteListenerSaga.userNavigatation', location);
+  }, [props.config]);
+
   useEffect(() => {
     setSinglePaneMode(props.containerWidth < 960);
   }, [props.containerWidth]);
@@ -62,19 +67,21 @@ const DocumentView = (props) => {
         }
       };
     }
-
-    const leftFolioID = folioID;
+    const leftFolioValid = Object.keys(document.folioIndex).includes(folioID);
+    const leftFolioID = leftFolioValid ? folioID : '-1';
     let leftTranscriptionType; let rightFolioID; let
       rightTranscriptionType; let thirdFolioID; let thirdTranscriptionType;
     if (folioID2) {
       // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2
-      leftTranscriptionType = transcriptionType;
-      rightFolioID = folioID2;
-      rightTranscriptionType = transcriptionType2 || firstTranscriptionType;
+      const rightFolioValid = Object.keys(document.folioIndex).includes(folioID2);
+      leftTranscriptionType = leftFolioValid ? transcriptionType : 'g';
+      rightFolioID = rightFolioValid ? folioID2 : '-1';
+      rightTranscriptionType = rightFolioValid ? transcriptionType2 ? transcriptionType2 : firstTranscriptionType : 'g';
       if (folioID3) {
         // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3
-        thirdFolioID = folioID3;
-        thirdTranscriptionType = transcriptionType3 || firstTranscriptionType;
+        const thirdFolioValid = Object.keys(document.folioIndex).includes(folioID3);
+        thirdFolioID = thirdFolioValid ? folioID3 : '-1';
+        thirdTranscriptionType = thirdFolioValid ? transcriptionType3 ? transcriptionType3 : firstTranscriptionType : 'g';
       } else {
         thirdFolioID = '-1';
         thirdTranscriptionType = 'g';
@@ -83,8 +90,8 @@ const DocumentView = (props) => {
       // route /ec/:folioID
       // route /ec/:folioID/:transcriptionType
       leftTranscriptionType = 'f';
-      rightFolioID = folioID;
-      rightTranscriptionType = transcriptionType || firstTranscriptionType;
+      rightFolioID = leftFolioValid ? folioID : '-1';
+      rightTranscriptionType = leftFolioValid ? transcriptionType ? transcriptionType : firstTranscriptionType : 'g';
       thirdFolioID = '-1';
       thirdTranscriptionType = 'g';
     }
@@ -504,6 +511,7 @@ const DocumentView = (props) => {
 function mapStateToProps(state) {
   return {
     document: state.document,
+    glossary: state.glossary
   };
 }
 

editioncrafter/stories/EditionCrafter.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import EditionCrafter from '../src/index';
 
 export const BowInTheCloud = () => (
@@ -131,6 +131,31 @@ export const fullScreen = () => (
   </div>
 )
 
+export const stateChange = () => {
+  const [manifest, setManifest] = useState('https://cu-mkp.github.io/editioncrafter/taos-baptisms-example/iiif/manifest.json');
+  const [glossary, setGlossary] = useState(undefined);
+  const [title, setTitle] = useState('FHL_007548733_TAOS_BAPTISMS_BATCH_2')
+
+  useEffect(() => {
+    setTimeout(() => {
+      //setManifest('https://cu-mkp.github.io/dyngleyfamily-editioncrafter-data/O_8_35/iiif/manifest.json');
+      setGlossary('https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/glossary.json');
+      setTitle('Taos Baptisms Batch 2');
+    }, 10000);
+  }, [])
+
+  return (<EditionCrafter
+  documentName={title}
+  transcriptionTypes={{
+    translation: 'Translation',
+    transcription: 'Transcription',
+  }}
+  iiifManifest={manifest}
+  glossaryURL={glossary}
+/>)
+
+}
+
 export default {
   title: 'EditionCrafter',
 };