Merge pull request #27 from texttree/develop

Clean code + add OBS in bibles

Author: Valyukhov

src/components/BibleBookList/BibleBookList.js

@@ -1,7 +1,14 @@
 import React, { useState } from 'react';
 import BookList from '../BookList';
 import PropTypes from 'prop-types';
-import { BIBLE_LIST, BIBLE_BOOKS } from './config';
+import {
+  OLD_TESTAMENT_LIST,
+  NEW_TESTAMENT_LIST,
+  OBS_LIST,
+  OLD_TESTAMENT,
+  NEW_TESTAMENT,
+  OBS,
+} from './config';
 import Checkbox from '@material-ui/core/Checkbox';
 import { FormControlLabel } from '@material-ui/core';
 
@@ -13,25 +20,39 @@ function BibleBookList({
   selectedBookId,
   titleOT,
   titleNT,
+  titleOBS,
   availableBookList,
   titleBooks,
   BibleBookListClasses,
   bookClasses,
   testaments,
   sortFirstNT,
+  showOBS,
 }) {
   const [checkState, setCheckState] = useState(!showInactive);
-  const currentBookList = BIBLE_LIST.map((el) => {
+  let bibleList;
+  if (showOBS) {
+    bibleList = OLD_TESTAMENT_LIST.concat(NEW_TESTAMENT_LIST).concat(OBS_LIST);
+  } else {
+    bibleList = OLD_TESTAMENT_LIST.concat(NEW_TESTAMENT_LIST);
+  }
+  let bibleBooks;
+  if (showOBS) {
+    bibleBooks = { ...OLD_TESTAMENT, ...NEW_TESTAMENT, ...OBS };
+  } else {
+    bibleBooks = { ...OLD_TESTAMENT, ...NEW_TESTAMENT };
+  }
+  const currentBookList = bibleList.map((el) => {
     return {
       ...el,
-      text: titleBooks[el.identifier] ?? BIBLE_BOOKS[el.identifier],
+      text: titleBooks[el.identifier] ?? bibleBooks[el.identifier],
       isset: availableBookList.includes(el.identifier),
     };
   });
 
   const currentBookListOT = currentBookList.filter((el) => el.categories === 'bible-ot');
-
   const currentBookListNT = currentBookList.filter((el) => el.categories === 'bible-nt');
+  const currentBookListOBS = currentBookList.filter((el) => el.categories === 'obs');
   const handleChange = () => {
     setCheckState((prev) => !prev);
   };
@@ -85,6 +106,16 @@ function BibleBookList({
       break;
   }
 
+  if (showOBS) {
+    testamentList = testamentList.concat({
+      title: titleOBS,
+      bookList: currentBookListOBS,
+    });
+    if (showCheckbox) {
+      showCheckbox = allBooksIsSet(currentBookListOBS);
+    }
+  }
+
   const checkboxRender = showCheckbox ? (
     <FormControlLabel
       classes={{
@@ -96,11 +127,7 @@ function BibleBookList({
   ) : (
     ''
   );
-
-  return (
-    <>
-      {checkboxRender}
-      {testamentList.map((el, index) => {
+const bookListRender = testamentList.map((el, index) => {
         return (
           <BookList
             bookClasses={bookClasses}
@@ -117,17 +144,24 @@ function BibleBookList({
             title={el.title}
           />
         );
-      })}
+      })
+
+  return (
+    <>
+      {checkboxRender}
+      {bookListRender}
     </>
   );
 }
 
 BibleBookList.defaultProps = {
   showCheckbox: true,
+  showOBS: false,
   sortFirstNT: false,
   testaments: 'all',
   titleOT: '',
   titleNT: '',
+  titleOBS: '',
   showInactive: true,
   onClickBook: (bookId) => {},
   labelForCheckbox: 'Show only existing books',
@@ -139,6 +173,8 @@ BibleBookList.propTypes = {
   testaments: PropTypes.oneOf(['all', 'nt', 'ot']),
   /** block header of "New Testament" */
   titleNT: PropTypes.string,
+  /** block header of "OBS" */
+  titleOBS: PropTypes.string,
   /** block header of "Old Testament" */
   titleOT: PropTypes.string,
   /** when true, show first New Testament, second - Old Testament */
@@ -149,6 +185,8 @@ BibleBookList.propTypes = {
   titleBooks: PropTypes.object,
   /** show or hide checkbox that show only existing books */
   showCheckbox: PropTypes.bool,
+  /** show or hide OBS block */
+  showOBS: PropTypes.bool,
   /** whether to display inactive books */
   showInactive: PropTypes.bool,
   /** label of checkbox */

src/components/BibleBookList/BibleBookList.md

@@ -9,13 +9,14 @@ const titleBooks = {
   mrk: 'Марк',
   luk: 'Лука',
   tit: 'Титу',
+  obs: 'Открытые Библейские Истории',
 };
 
 const [selectedBookId, setSelectedBookId] = React.useState('exo');
 
 const onClickBook = (bookId) => setSelectedBookId(bookId);
 
-const availableBookList = ['gen', 'exo', 'lev', 'num', 'mat', 'mrk', 'luk', 'tit'];
+const availableBookList = ['gen', 'exo', 'lev', 'num', 'mat', 'mrk', 'luk', 'tit', 'obs'];
 
 const NTBookList = [
   'mat',
@@ -53,6 +54,8 @@ const NTBookList = [
   showInactive={false}
   titleOT="Old Testament"
   titleNT="New Testament"
+  titleOBS="Other"
+  showOBS={true}
   titleBooks={titleBooks}
   availableBookList={availableBookList} // replace to NTBookList
   selectedBookId={selectedBookId}

src/components/BibleBookList/config.js

@@ -69,11 +69,19 @@ export const NEW_TESTAMENT = {
   rev: 'Revelation',
 };
 
-export const BIBLE_BOOKS = {
-  ...NEW_TESTAMENT,
-  ...OLD_TESTAMENT,
+export const OBS = {
+  obs: 'Open Bible Story',
 };
 
+export const OBS_LIST = [
+  {
+    identifier: 'obs',
+    isset: false,
+    sort: 70,
+    categories: 'obs',
+  },
+];
+
 export const OLD_TESTAMENT_LIST = [
   {
     identifier: 'gen',
@@ -474,4 +482,3 @@ export const NEW_TESTAMENT_LIST = [
     categories: 'bible-nt',
   },
 ];
-export const BIBLE_LIST = OLD_TESTAMENT_LIST.concat(NEW_TESTAMENT_LIST);

src/components/BibleChapterList/config.js

@@ -1320,4 +1320,56 @@ export const BOOK_CHAPTERS = {
     21: '27',
     22: '21',
   },
+  obs: {
+    1: '1',
+    2: '1',
+    3: '1',
+    4: '1',
+    5: '1',
+    6: '1',
+    7: '1',
+    8: '1',
+    9: '1',
+    10: '1',
+    11: '1',
+    12: '1',
+    13: '1',
+    14: '1',
+    15: '1',
+    16: '1',
+    17: '1',
+    18: '1',
+    19: '1',
+    20: '1',
+    21: '1',
+    22: '1',
+    23: '1',
+    24: '1',
+    25: '1',
+    26: '1',
+    27: '1',
+    28: '1',
+    29: '1',
+    30: '1',
+    31: '1',
+    32: '1',
+    33: '1',
+    34: '1',
+    35: '1',
+    36: '1',
+    37: '1',
+    38: '1',
+    39: '1',
+    40: '1',
+    41: '1',
+    42: '1',
+    43: '1',
+    44: '1',
+    45: '1',
+    46: '1',
+    47: '1',
+    48: '1',
+    49: '1',
+    50: '1',
+  },
 };

src/components/Book/Book.js

@@ -3,6 +3,7 @@ import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
 
 function Book({ isset, bookId, classes, className, isSelected, text, onClick }) {
+
   return (
     <Button
       className={className}

src/components/BookList/BookList.js

@@ -12,11 +12,8 @@ function BookList({
   onClickBook,
   showInactive,
 }) {
-  return (
-    <>
-      <div className={bookListClasses?.title}>{title}</div>
-      <Box className={bookListClasses?.bookList}>
-        {bookList.map(
+
+  bookListRender = bookList.map(
           (el, index) =>
             (showInactive || el.isset) && (
               <Book
@@ -30,7 +27,13 @@ function BookList({
                 text={el.text}
               />
             )
-        )}
+        )
+
+  return (
+    <>
+      <div className={bookListClasses?.title}>{title}</div>
+      <Box className={bookListClasses?.bookList}>
+        {bookListRender}
       </Box>
     </>
   );

src/components/Chapter/Chapter.js

@@ -3,6 +3,7 @@ import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
 
 function Chapter({ isSelected, classes, className, chapterId, chapterPrefix, onClick }) {
+
   return (
     <Button
       className={className}

src/components/ChapterList/ChapterList.js

@@ -11,9 +11,7 @@ function ChapterList({
   selectedChapter,
   onClickChapter,
 }) {
-  return (
-    <Box className={chapterListClasses?.chapterList}>
-      {chapterList.map((el, index) => (
+  chapterListRender = chapterList.map((el, index) => (
         <Chapter
           chapterId={el}
           chapterPrefix={chapterPrefix}
@@ -23,7 +21,11 @@ function ChapterList({
           key={index}
           onClick={onClickChapter}
         />
-      ))}
+      ))
+
+  return (
+    <Box className={chapterListClasses?.chapterList}>
+      {chapterListRender}
     </Box>
   );
 }