Implement scripture text panel

react-electron-poc/.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
 
         // TJ's rules
         indent: 'off',
-        'react/jsx-indent': ['warn', 4],
         'react/jsx-indent-props': ['warn', 4],
         'comma-dangle': ['error', 'always-multiline'],
         'prettier/prettier': ['warn', { tabWidth: 4, trailingComma: 'all' }],

react-electron-poc/src/main/main.ts

@@ -13,7 +13,7 @@ import fs from 'fs';
 import { app, BrowserWindow, shell, IpcMainInvokeEvent } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
-import { ResourceInfo, ScriptureContent } from '@shared/data/ScriptureTypes';
+import { ResourceInfo, ScriptureChapter } from '@shared/data/ScriptureTypes';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
 import { ipcMain } from './electron-extensions';
@@ -38,6 +38,7 @@ const isDebug =
 
 if (isDebug) {
     require('electron-debug')();
+    console.log('Debug start!');
 }
 
 const installExtensions = async () => {
@@ -186,11 +187,22 @@ async function handleGetScriptureBook(
     fileExtension: string,
     shortName: string,
     bookNum: number,
-): Promise<(ScriptureContent | string)[]> {
-    return getFilesText(
-        [`testScripture/${shortName}/${bookNum}.${fileExtension}`],
-        getScriptureDelay,
-    );
+): Promise<ScriptureChapter[]> {
+    // TODO: If we want to implement this, parse file and split out into actual chapters
+    try {
+        return await getFilesText(
+            [`testScripture/${shortName}/${bookNum}.${fileExtension}`],
+            getScriptureDelay,
+        ).then((filesContents) =>
+            filesContents.map((fileContents, ind) => ({
+                chapter: ind,
+                contents: fileContents,
+            })),
+        );
+    } catch (e) {
+        console.log(e);
+        throw new Error(`No data for ${shortName} ${bookNum}`);
+    }
 }
 
 /**
@@ -212,11 +224,19 @@ async function handleGetScriptureChapter(
     shortName: string,
     bookNum: number,
     chapter: number,
-): Promise<ScriptureContent | string> {
-    return getFileText(
-        `testScripture/${shortName}/${bookNum}-${chapter}.${fileExtension}`,
-        getScriptureDelay,
-    );
+): Promise<ScriptureChapter> {
+    try {
+        return await getFileText(
+            `testScripture/${shortName}/${bookNum}-${chapter}.${fileExtension}`,
+            getScriptureDelay,
+        ).then((fileContents) => ({
+            chapter,
+            contents: fileContents,
+        }));
+    } catch (e) {
+        console.log(e);
+        throw new Error(`No data for ${shortName} ${bookNum} ${chapter}`);
+    }
 }
 
 /** These test files are from breakpointing at UsfmSinglePaneControl.cs at the line that gets Css in LoadUsfm. */
@@ -239,8 +259,7 @@ async function handleGetResourceInfo(
     }, getResourceInfoDelay);
 }
 
-async function handleGetAllResourceInfo(
-): Promise<ResourceInfo[]> {
+async function handleGetAllResourceInfo(): Promise<ResourceInfo[]> {
     return delayPromise<ResourceInfo[]>((resolve, reject) => {
         const start = performance.now();
         fs.readdir(

react-electron-poc/src/main/preload.ts

@@ -1,5 +1,9 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
-import { ResourceInfo, ScriptureContent } from '@shared/data/ScriptureTypes';
+import {
+    ResourceInfo,
+    ScriptureChapterContent,
+    ScriptureChapterString,
+} from '@shared/data/ScriptureTypes';
 
 /**
  * Whitelisted channel names through which the main and renderer processes can communicate.
@@ -17,7 +21,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
         getScriptureBook: (
             shortName: string,
             bookNum: number,
-        ): Promise<ScriptureContent[]> =>
+        ): Promise<ScriptureChapterContent[]> =>
             ipcRenderer.invoke(
                 'ipc-scripture:getScriptureBook',
                 shortName,
@@ -27,7 +31,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
             shortName: string,
             bookNum: number,
             chapter: number,
-        ): Promise<ScriptureContent> =>
+        ): Promise<ScriptureChapterContent> =>
             ipcRenderer.invoke(
                 'ipc-scripture:getScriptureChapter',
                 shortName,
@@ -37,7 +41,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
         getScriptureBookRaw: (
             shortName: string,
             bookNum: number,
-        ): Promise<string[]> =>
+        ): Promise<ScriptureChapterString[]> =>
             ipcRenderer.invoke(
                 'ipc-scripture:getScriptureBookRaw',
                 shortName,
@@ -47,7 +51,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
             shortName: string,
             bookNum: number,
             chapter: number,
-        ): Promise<string> =>
+        ): Promise<ScriptureChapterString> =>
             ipcRenderer.invoke(
                 'ipc-scripture:getScriptureChapterRaw',
                 shortName,
@@ -57,7 +61,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
         getScriptureBookHtml: (
             shortName: string,
             bookNum: number,
-        ): Promise<string[]> =>
+        ): Promise<ScriptureChapterString[]> =>
             ipcRenderer.invoke(
                 'ipc-scripture:getScriptureBookHtml',
                 shortName,
@@ -67,7 +71,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
             shortName: string,
             bookNum: number,
             chapter: number,
-        ): Promise<string> =>
+        ): Promise<ScriptureChapterString> =>
             ipcRenderer.invoke(
                 'ipc-scripture:getScriptureChapterHtml',
                 shortName,

react-electron-poc/src/renderer/components/Components.css

@@ -0,0 +1,84 @@
+.scrref-form {
+    padding: 7px;
+    background-color: #1c1c2a;
+}
+
+.scrref-form button {
+    font-size: 11pt;
+}
+
+.scrref-form .selector-area {
+    color: white;
+}
+
+.scrref-form .selector-area span {
+    margin: 0px 5px;
+}
+
+.scrref-form .selector-area .change-btn {
+    padding: 2px 1px;
+    border-right: 1px solid #505070;
+    border-top: 1px solid #505070;
+    border-bottom: 1px solid #505070;
+    border-radius: 0px 5px 5px 0px;
+    background-color: #505070;
+    color: #1c1c2a;
+    box-sizing: border-box;
+}
+
+.scrref-form .selector-area .change-btn.left {
+    border-radius: 5px 0px 0px 5px;
+    border-left: 1px solid #505070;
+    border-right: 0px;
+}
+
+.scrref-form .selector-area .splitter {
+    margin: 0px;
+    width: 1px;
+    display: inline-block;
+    box-sizing: border-box;
+}
+
+.scrref-form .selector-area .splitter.changed {
+    border-right: 1px solid #505070;
+    display: inline;
+}
+
+.scrref-form input {
+    width: 120px;
+    margin: 4px;
+    padding: 4px;
+    border-radius: 5px;
+    transition: all ease-in 0.1s;
+}
+
+.scrref-form input:focus,
+.scrref-form input:hover,
+.scrref-form input.changed {
+    background-color: #505070;
+    color: white;
+}
+
+.scrref-form .enter-button {
+    padding: 5px 10px;
+    background-color: #505070;
+    color: white;
+}
+
+.scrref-form input,
+.scrref-form .enter-button:disabled,
+.scrref-form .selector-area .change-btn:disabled {
+    background-color: #1c1c2a;
+    color: #505070;
+}
+
+.scrref-form input,
+.scrref-form .enter-button:disabled {
+    border: 1px solid #505070;
+}
+
+.scrref-form .selector-area .change-btn:hover:enabled,
+.scrref-form .enter-button:hover:enabled {
+    background-color: #8a8aac;
+    color: white;
+}

react-electron-poc/src/renderer/components/ScrRefSelector.tsx

@@ -0,0 +1,125 @@
+import { ScriptureReference } from '@shared/data/ScriptureTypes';
+import {
+    getTextFromScrRef,
+    getScrRefFromText,
+    getBookLongNameFromNum,
+    areScrRefsEqual,
+    offsetBook,
+    offsetChapter,
+    offsetVerse,
+} from '@util/ScriptureUtil';
+import React, { useCallback, useEffect, useState } from 'react';
+import './Components.css';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ScrRefSelectorProps {
+    scrRef: ScriptureReference;
+    handleSubmit: (scrRef: ScriptureReference) => void;
+}
+
+export default ({ scrRef, handleSubmit }: ScrRefSelectorProps) => {
+    const [currentRefText, setCurrentRefText] = useState<string>(
+        getTextFromScrRef(scrRef),
+    );
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            setCurrentRefText(e.currentTarget.value);
+        },
+        [],
+    );
+
+    useEffect(() => {
+        setCurrentRefText(getTextFromScrRef(scrRef));
+    }, [scrRef]);
+
+    const isScrRefChanged = !areScrRefsEqual(currentRefText, scrRef);
+
+    return (
+        <form
+            className="scrref-form"
+            onSubmit={(e: React.FormEvent) => {
+                e.preventDefault();
+                handleSubmit(getScrRefFromText(currentRefText));
+            }}
+        >
+            <span
+                className={`selector-area${isScrRefChanged ? ' changed' : ''}`}
+            >
+                <span>{getBookLongNameFromNum(scrRef.book)}</span>
+                <button
+                    type="button"
+                    className="change-btn left"
+                    onClick={() => handleSubmit(offsetBook(scrRef, -1))}
+                    disabled={isScrRefChanged}
+                >
+                    &lt;
+                </button>
+                <span
+                    className={`splitter${isScrRefChanged ? ' changed' : ''}`}
+                />
+                <button
+                    type="button"
+                    className="change-btn"
+                    onClick={() => handleSubmit(offsetBook(scrRef, 1))}
+                    disabled={isScrRefChanged}
+                >
+                    &gt;
+                </button>
+                <span>{scrRef.chapter}:</span>
+                <button
+                    type="button"
+                    className="change-btn left"
+                    onClick={() => handleSubmit(offsetChapter(scrRef, -1))}
+                    disabled={isScrRefChanged}
+                >
+                    &lt;
+                </button>
+                <span
+                    className={`splitter${isScrRefChanged ? ' changed' : ''}`}
+                />
+                <button
+                    type="button"
+                    className="change-btn"
+                    onClick={() => handleSubmit(offsetChapter(scrRef, 1))}
+                    disabled={isScrRefChanged}
+                >
+                    &gt;
+                </button>
+                <span>{scrRef.verse}</span>
+                <button
+                    type="button"
+                    className="change-btn left"
+                    onClick={() => handleSubmit(offsetVerse(scrRef, -1))}
+                    disabled={isScrRefChanged}
+                >
+                    &lt;
+                </button>
+                <span
+                    className={`splitter${isScrRefChanged ? ' changed' : ''}`}
+                />
+                <button
+                    type="button"
+                    className="change-btn"
+                    onClick={() => handleSubmit(offsetVerse(scrRef, 1))}
+                    disabled={isScrRefChanged}
+                >
+                    &gt;
+                </button>
+            </span>
+            <input
+                type="text"
+                className={`${isScrRefChanged ? 'changed' : ''}`}
+                value={currentRefText}
+                onChange={handleChange}
+            />
+            <button
+                type="submit"
+                className="enter-button"
+                disabled={!isScrRefChanged}
+            >
+                Go!
+            </button>
+        </form>
+    );
+};