fix/s5-error

fix previous file rendering when current file is erroring out
bible-technology · Nov 7, 2024 · 6b1c903 · 6b1c903
1 parent b1da00c
commit 6b1c903
Show file tree

Hide file tree

Showing 9 changed files with 314 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -225,7 +225,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
-    "sj-usfm-grammar": "^3.0.4",
+    "sj-usfm-grammar": "3.0.7",
     "styled-components": "^5.3.6",
     "tc-ui-toolkit": "5.3.3",
     "terser-webpack-plugin": "^5.3.10",

diff --git a/renderer/src/components/EditorPage/TextEditor/BibleNavigationX/index.js b/renderer/src/components/EditorPage/TextEditor/BibleNavigationX/index.js
@@ -11,7 +11,7 @@ import SelectChapter from './SelectChapter';
 
 export default function BibleNavigationX(props) {
   const {
-    chapterNumber, setChapterNumber, setBook, loading, bookAvailable, booksInProject,
+    chapterNumber, setChapterNumber, setBook, loading, bookAvailable, booksInProject, parseError,
   } = props;
 
   const {
@@ -60,6 +60,13 @@ export default function BibleNavigationX(props) {
     setReference();
   }, [bookId, chapter]);
 
+  useEffect(() => {
+    if (parseError) {
+      setOpenBook(false);
+      setOpenChapter(false);
+    }
+  }, [parseError]);
+
   useEffect(() => {
     if (openBook === false && openChapter === false) {
       setCloseNavigation(true);

diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -22,6 +22,7 @@ export default function EditorMenuBar(props) {
     loading,
     bookAvailable,
     booksInProject,
+    parseError,
   } = props;
 
   const { t } = useTranslation();
@@ -53,6 +54,7 @@ export default function EditorMenuBar(props) {
           loading={loading}
           bookAvailable={bookAvailable}
           booksInProject={booksInProject}
+          parseError={parseError}
         />
         <div
           aria-label="editor-pane"

diff --git a/renderer/src/components/EditorPage/TextEditor/ErrorScreen.jsx b/renderer/src/components/EditorPage/TextEditor/ErrorScreen.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { ArrowSquareOut } from 'phosphor-react';
+
+export default function ErrorScreen() {
+  return (
+    <div className="h-full w-full items-center justify-center flex">
+      <div className="mx-auto px-4">
+        <section className="py-8 px-4 text-center">
+          <div className="max-w-auto mx-auto">
+            <div className="color:red md:max-w-lg w-10 h-10 text-center mx-auto">
+              <svg
+                version="1.1"
+                id="Capa_1"
+                xmlns="http://www.w3.org/2000/svg"
+                x="0px"
+                y="0px"
+                fill="#FF5500"
+                viewBox="0 0 486.463 486.463"
+                xmlSpace="preserve"
+              >
+                <g>
+                  <g>
+                    <path d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z" />
+                    <path d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z" />
+                    <path d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z" />
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <p className="mt-8 font-black flex items-center gap-4">
+              Some USFM tags appear to be in unexpected locations. Kindly check the
+              <a
+                href="https://ubsicap.github.io/usfm/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline flex items-center gap-1"
+              >
+                USFM documentation
+                <ArrowSquareOut size={16} />
+              </a>
+            </p>
+            {/* <h2 className="mt-8 uppercase text-xl text-primary  font-black">Kindly check for errors in the USFM file</h2> */}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/cacheUtils.js b/renderer/src/components/EditorPage/TextEditor/cacheUtils.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import * as path from 'path';
 import * as crypto from 'crypto';
 import { convertUsfmToUsj } from './conversionUtils';
@@ -84,32 +85,40 @@ export async function handleCache(filePath, usfmContent, projectCachePath, fileC
   const oldHash = fileCacheMap[filePath];
 
   async function processAndCacheUSJ() {
-    const { usj, error } = await convertUsfmToUsj(usfmContent);
-    if (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error parsing USFM', error);
-      return { error };
+    try {
+      const { usj, error } = await convertUsfmToUsj(usfmContent);
+      if (error) {
+        console.error('Error parsing USFM:', error);
+        return { error, usj: null }; // Return consistent error object
+      }
+      writeCache(newHash, usj, projectCachePath);
+      updateCacheMapToFile(fileCacheMapPath, filePath, newHash);
+      return { usj, error: null }; // Always include error field
+    } catch (err) {
+      console.error('Error in processAndCacheUSJ:', err);
+      return { error: err.message, usj: null };
     }
-    writeCache(newHash, usj, projectCachePath);
-    updateCacheMapToFile(fileCacheMapPath, filePath, newHash);
-    return { usj };
   }
 
-  if (!oldHash) {
-    // eslint-disable-next-line no-console
-    console.log('No existing hash found. Creating new cache entry.');
-    return processAndCacheUSJ();
-  }
+  try {
+    if (!oldHash) {
+      console.log('No existing hash found. Creating new cache entry.');
+      return processAndCacheUSJ();
+    }
 
-  if (isCacheValid(oldHash, projectCachePath) && oldHash === newHash) {
-    // eslint-disable-next-line no-console
-    console.log('Cache hit');
-    return { usj: await readCache(oldHash, projectCachePath) };
+    if (isCacheValid(oldHash, projectCachePath) && oldHash === newHash) {
+      console.log('Cache hit');
+      const cachedUsj = await readCache(oldHash, projectCachePath);
+      return { usj: cachedUsj, error: null };
+    }
+
+    console.log('Cache miss or content changed');
+    deleteOldCacheFile(oldHash, projectCachePath);
+    return processAndCacheUSJ();
+  } catch (err) {
+    console.error('Error in handleCache:', err);
+    return { error: err.message, usj: null };
   }
-  // eslint-disable-next-line no-console
-  console.log('Cache miss or content changed');
-  deleteOldCacheFile(oldHash, projectCachePath);
-  return processAndCacheUSJ();
 }
 
 export async function updateCache(filePath, usj, usfm, fileCacheMapPath, projectCachePath) {

diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -3,13 +3,15 @@ import React, {
 } from 'react';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { debounce } from 'lodash';
-
 import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { useAutoSnackbar } from '@/components/SnackBar';
+import { useTranslation } from 'react-i18next';
 import { useReadUsfmFile } from './hooks/useReadUsfmFile';
 import EditorMenuBar from './EditorMenuBar';
 import LexicalEditor from './LexicalEditor';
 import { updateCacheNSaveFile } from './updateAndSave';
 import EmptyScreen from './EmptyScreen';
+import ErrorScreen from './ErrorScreen';
 
 const defaultScrRef = {
   bookCode: 'PSA',
@@ -24,32 +26,61 @@ export default function TextEditor() {
   const [usjInput, setUsjInput] = useState();
   const [scrRef, setScrRef] = useState(defaultScrRef);
   const [navRef, setNavRef] = useState();
+  const [parseError, setParseError] = useState(false);
   const {
     state: {
-      bookId: defaultBookId, selectedFont, editorFontSize, projectScriptureDir,
-      // chapter,
-      // verse,
+      bookId: defaultBookId,
+      selectedFont,
+      editorFontSize,
+      projectScriptureDir,
     },
     actions: {
-      handleSelectedFont, onChangeChapter, onChangeVerse, handleEditorFontSize,
+      handleSelectedFont,
+      onChangeChapter,
+      onChangeVerse,
+      handleEditorFontSize,
     },
   } = useContext(ReferenceContext);
+  const { showSnackbar } = useAutoSnackbar();
+  const { t } = useTranslation();
   const [book, setBook] = useState(defaultBookId);
 
   const {
     cachedData, loading, bookAvailable, booksInProject,
   } = useReadUsfmFile(book);
 
   useEffect(() => {
-    if (cachedData.error) {
-      console.error('Error parsing USFM', cachedData.error);
+    if (loading) {
+      showSnackbar(`Preparing ${book.toUpperCase()} file`, 'update');
+    }
+    const { usj, error } = cachedData;
+    if (!loading) {
+      if (error) {
+        console.error('Error parsing USFM:', error);
+        setParseError(true);
+        showSnackbar(
+          t('dynamic-msg-load-ref-bible-snack-fail', {
+            refName: book.toUpperCase(),
+          }),
+          'failure',
+        );
+        setUsjInput(null);
+        return;
+      }
+    }
+    if (!usj || Object.entries(usj).length === 0) {
+      setParseError(false);
+      setUsjInput(null);
       return;
     }
-    const { usj } = cachedData;
-    if (!usj && usj?.entries(usj).length === 0) { return; }
-    // console.log(usj);
+    setParseError(false);
     setUsjInput(usj);
-  }, [book, cachedData]);
+    !loading
+      && showSnackbar(
+        t('dynamic-msg-load-ref-bible-snack', { refName: book.toUpperCase() }),
+        'success',
+      );
+  }, [cachedData, loading]);
 
   useEffect(() => {
     setScrRef({
@@ -93,6 +124,7 @@ export default function TextEditor() {
     handleEditorFontSize,
     bookAvailable,
     booksInProject,
+    parseError,
   };
 
   const props = {
@@ -105,7 +137,6 @@ export default function TextEditor() {
     scrRef,
     setScrRef,
     bookId: book,
-
   };
   return (
     <div className="flex flex-col h-editor rounded-md shadow overflow-hidden">
@@ -114,8 +145,11 @@ export default function TextEditor() {
         <LoadingSpinner />
       ) : (
         <>
-          {!bookAvailable && <EmptyScreen />}
-          {bookAvailable && usjInput && <LexicalEditor {...props} />}
+          {parseError && <ErrorScreen />}
+          {!parseError && !bookAvailable && <EmptyScreen />}
+          {!parseError && bookAvailable && usjInput && (
+            <LexicalEditor {...props} />
+          )}
         </>
       )}
     </div>