ParallelScripture withResources

unfoldingWord · Oct 17, 2019 · 7b994f8 · 7b994f8
1 parent 728d66f
commit 7b994f8
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 5 deletions.
diff --git a/src/components/parallel-scripture/ParallelScripture.js b/src/components/parallel-scripture/ParallelScripture.js
@@ -34,14 +34,18 @@ function ParallelScripture ({
   height,
   reference,
   onQuote,
-  quoteVerseObjects,
 }) {
   const classes = useStyles();
   const [filter, setFilter] = useState(!!reference);
   const [referenceIds, setReferenceIds] = useState([]);
   const [columns, setColumns] = useState([]);
   const [columnsMenuAnchorEl, setColumnsMenuAnchorEl] = useState();
 
+  let quoteVerseObjects = [];
+  if (reference && books[0]) {
+    quoteVerseObjects = books[0].chapters[reference.chapter][reference.verse].verseObjects;
+  }
+
   useEffect(() => {
     const _columns = titles.map((title, index) => ({id: index, label: title}));
     setColumns(_columns);
@@ -144,8 +148,6 @@ ParallelScripture.propTypes = {
   disableWordPopover: PropTypes.bool,
   /** filter the view to the reference */
   filter: PropTypes.bool,
-  /** the verseObjects of the verse to get the quote from */
-  quoteVerseObjects: PropTypes.array,
   /** callback to return the quote when selections made */
   onQuote: PropTypes.func,
 };

diff --git a/src/components/parallel-scripture/ParallelScripture.md b/src/components/parallel-scripture/ParallelScripture.md
@@ -1,3 +1,5 @@
+### Manually providing files
+
 ```js
 import {ParallelScripture} from "scripture-resources-rcl";
 import usfmJS from 'usfm-js';
@@ -32,7 +34,6 @@ const reference = {
 
 const [component, setComponent] = React.useState(<></>)
 const [quote, setQuote] = React.useState();
-const quoteVerseObjects = books[0].chapters[reference.chapter][reference.verse].verseObjects;
 
 React.useEffect(() => {
   setComponent(
@@ -41,7 +42,6 @@ React.useEffect(() => {
       books={books}
       title='Titus'
       reference={reference}
-      quoteVerseObjects={quoteVerseObjects}
       onQuote={setQuote}
       height='250px'
     />
@@ -55,3 +55,58 @@ React.useEffect(() => {
   </div>
 </>
 ```
+
+### withResources
+
+```js
+import {ParallelScripture, withResources} from "scripture-resources-rcl";
+import usfmJS from 'usfm-js';
+
+function Component ({resources, reference}) {
+  const [books, setBooks] = React.useState([]);
+  const [quote, setQuote] = React.useState();
+
+  React.useEffect(() => {
+    const promises = resources.map((resource, index) => resource.project.file() );
+    Promise.all(promises).then(files => {
+      const _books = files.map(file => usfmJS.toJSON(file));
+      setBooks(_books);
+    });
+  }, [resources]);
+
+  const titles = resources.map((resource) => {
+    const { manifest: { dublin_core: {title, version} } } = resource;
+    return `${title} v${version}`;
+  });
+
+  return (
+    <>
+      <p>Quote: {quote}</p>
+      <div style={{border: '1px #ebf1f3 solid'}}>
+        <ParallelScripture
+          titles={titles}
+          books={books}
+          title='Titus'
+          reference={reference}
+          onQuote={setQuote}
+          height='250px'
+        />
+      </div>
+    </>
+  );
+}
+
+const Resources = withResources(Component);
+
+const resourceLinks = [
+  'unfoldingWord/el-x-koine/ugnt/v0.8/tit',
+  'unfoldingWord/en/ult/v5/tit',
+  'unfoldingWord/en/ust/v5/tit',
+];
+
+const config = {server: 'https://git.door43.org'};
+
+const reference = {bookId: 'tit', chapter: 1, verse: 2};
+
+<Resources resourceLinks={resourceLinks} config={config} reference={reference} />
+```