Export to EPUB improvements + bug fixes

package.json

@@ -16,7 +16,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@cd-z/react-native-epub-creator": "^2.0.0",
+    "@cd-z/react-native-epub-creator": "^2.0.4",
     "@gorhom/bottom-sheet": "^4.4.5",
     "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-native-community/clipboard": "^1.5.1",
@@ -89,10 +89,11 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react-native": "^3.11.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react-native": "^4.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.3.7",
+    "prettier": "^2.8.8",
     "typescript": "^4.6.3"
   },
   "resolutions": {

src/components/BottomSheet/BottomSheet.tsx

@@ -6,13 +6,16 @@ import {
   BottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@hooks/useTheme';
+import { overlay } from 'react-native-paper';
 
 interface BottomSheetProps extends Omit<BottomSheetModalProps, 'ref'> {
   bottomSheetRef: Ref<BottomSheetModal> | null;
 }
 
 const BottomSheet: React.FC<BottomSheetProps> = props => {
   const { bottom } = useSafeAreaInsets();
+  const theme = useTheme();
 
   const renderBackdrop = useCallback(
     (backdropProps: BottomSheetBackdropProps) => (
@@ -31,6 +34,7 @@ const BottomSheet: React.FC<BottomSheetProps> = props => {
       backdropComponent={renderBackdrop}
       handleComponent={null}
       containerStyle={{ paddingBottom: bottom }}
+      backgroundStyle={{ backgroundColor: overlay(2, theme.surface) }}
       {...props}
     >
       {props.children}

src/components/Switch/Switch.tsx

@@ -25,7 +25,7 @@ const SwitchSetting: React.FC<SwitchProps> = ({
       paddingHorizontal: 16,
       flexDirection: 'row',
       justifyContent: 'space-between',
-      paddingVertical: description ? 16 : 12,
+      paddingVertical: 12,
     },
     row: {
       flexDirection: 'row',
@@ -39,7 +39,6 @@ const SwitchSetting: React.FC<SwitchProps> = ({
     },
     text: {
       fontSize: 16,
-      flex: 1,
       textAlignVertical: 'center',
     },
     switch: { marginLeft: 8 },

src/hooks/useBoolean.ts

@@ -1,14 +1,14 @@
 import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 
-interface ReturnType {
+export interface booleanHookType {
   value: boolean;
   setValue: Dispatch<SetStateAction<boolean>>;
   setTrue: () => void;
   setFalse: () => void;
   toggle: () => void;
 }
 
-const useBoolean = (defaultValue?: boolean): ReturnType => {
+const useBoolean = (defaultValue?: boolean): booleanHookType => {
   const [value, setValue] = useState(!!defaultValue);
 
   const setTrue = useCallback(() => setValue(true), []);

src/screens/novel/components/EpubIconButton.tsx

@@ -11,6 +11,7 @@ import { ChapterItem, LibraryNovelInfo } from '@database/types';
 import { showToast } from '@hooks/showToast';
 import { getChapterFromDb } from '@database/queries/DownloadQueries';
 import { useReaderSettings } from '@redux/hooks';
+import { useSettings } from '@hooks/reduxHooks';
 
 interface extendedNovelInfo extends LibraryNovelInfo {
   chapters: ChapterItem[];
@@ -28,7 +29,15 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
 }) => {
   const chooseEpubLocationModal = useBoolean(false);
   const readerSettings = useReaderSettings();
-  const epubStyle = `html {
+  const {
+    epubUseAppTheme = false,
+    epubUseCustomCSS = false,
+    epubUseCustomJS = false,
+  } = useSettings();
+
+  const epubStyle = `${
+    epubUseAppTheme
+      ? `html {
     scroll-behavior: smooth;
     overflow-x: hidden;
     padding-top: ${StatusBar.currentHeight};
@@ -43,6 +52,7 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
     text-align: ${readerSettings.textAlign};
     line-height: ${readerSettings.lineHeight};
     font-family: "${readerSettings.fontFamily}";
+    background-color: "${readerSettings.theme}";
   }
   hr {
     margin-top: 20px;
@@ -56,9 +66,25 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
     width: auto;
     height: auto;
     max-width: 100%;
+  }`
+      : ''
   }
-
-  ${readerSettings.customCSS}`;
+  ${
+    epubUseCustomCSS
+      ? readerSettings.customCSS
+          .replace(RegExp(`\#sourceId-${novel.sourceId}\\s*\\{`, 'g'), 'body {')
+          .replace(RegExp(`\#sourceId-${novel.sourceId}[^\.\#A-Z]*`, 'gi'), '')
+      : ''
+  }`;
+
+  const epubJS = `let novelName = "${novel.novelName}";
+    let chapterName = "";
+    let sourceId =${novel.sourceId};
+    let chapterId ="";
+    let novelId =${novel.novelId};
+    let html = document.querySelector("chapter").innerHTML;
+    ${readerSettings.customJS}
+  `;
 
   const createEpub = async (uri: string) => {
     var epub = new EpubBuilder(
@@ -70,7 +96,8 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
         description: novel.novelSummary,
         author: novel.author,
         bookId: novel.novelId.toString(),
-        stylesheet: epubStyle,
+        stylesheet: epubStyle || undefined,
+        js: epubUseCustomJS ? epubJS : undefined,
       },
       uri,
     );
@@ -85,21 +112,17 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
           await epub.addChapter({
             title: downloaded.chapterName?.trim() ?? 'Chapter ' + i,
             fileName: 'Chapter' + i,
-            htmlBody: downloaded.chapterText,
+            htmlBody: `<chapter data-novel-id='${chapter.novelId}' data-chapter-id='${chapter.chapterId}'>${downloaded.chapterText}</chapter>`,
           });
         }
       }
       var epubFilePath = await epub.save();
       showToast('Epub file saved at: ' + epubFilePath);
     } catch (error) {
-      // remove the temp created folder
       showToast('Cannot create because: ' + error);
-      console.error(error);
-
       await epub.discardChanges();
     }
   };
-
   return (
     <>
       <IconButton