Merge pull request #15 from performant-software/RB-state-change-fix

Improving the handling of component state changes

.gitignore

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

editioncrafter/src/component/DocumentView.js

@@ -39,6 +39,49 @@ const DocumentView = (props) => {
     navigate(pathname + location.search);
   };
 
+  useEffect(() => {
+    const reloadDocument = async (document) => {
+      if (!document.loaded) {
+        // handle the case where we've passed in an array of manifest URLs, in which case the `variorum` parameter should be set to `true`
+        if (document.variorum) {
+          const variorumData = {};
+          for (const key of Object.keys(document.manifestURL)) {
+            const response = await fetch(document.manifestURL[key]).then((res) => (res.json()));
+            variorumData[key] = response.data;
+          }
+          const variorumManifest = {
+            type: 'variorum',
+            documentData: variorumData,
+          };
+          return variorumManifest;
+        }
+        const singleResponse = await fetch(document.manifestURL).then((res) => (res.json()));
+        return singleResponse;
+      }
+
+      return null;
+    };
+
+    const reloadGlossary = async (glossary) => {
+      if (!glossary.loaded && glossary.URL) {
+        const glossaryData = fetch(glossary.URL).then((res) => (res.json()));
+        return glossaryData;
+      }
+    }
+    // if the top-level component props have been updated such that the document initial state has been reinitialized, dispatch the loadDocument action with the new data
+    if (!props.document.loaded) {
+      reloadDocument(props.document).then((res) => {
+        dispatchAction(props, 'DocumentActions.loadDocument', res);
+      });
+    }
+    // update the glossary as well if necessary
+    if (!props.glossary.loaded && props.glossary.URL) {
+      reloadGlossary(props.glossary).then((res) => {
+        dispatchAction(props, 'GlossaryActions.loadGlossary', res);
+      })
+    }
+  }, [props.config]);
+
   const getViewports = () => {
     const {
       folioID, transcriptionType, folioID2, transcriptionType2, folioID3, transcriptionType3
@@ -62,19 +105,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 +128,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 +549,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,29 @@ 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);
+
+  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');
+    }, 10000);
+  }, [])
+
+  return (<EditionCrafter
+  documentName='FHL_007548733_TAOS_BAPTISMS_BATCH_2'
+  transcriptionTypes={{
+    translation: 'Translation',
+    transcription: 'Transcription',
+  }}
+  iiifManifest={manifest}
+  glossaryURL={glossary}
+/>)
+
+}
+
 export default {
   title: 'EditionCrafter',
 };