fix: Export to EPUB Improvements (#670)

* Test config

* update react-native-epub-creator

* updated deps

* option for export to epub

* added prettier to dev deps since I couldn't push

* removed white background when pulling up bottomsheet

* added options to the export to epub feature

* support for customCSS -JS and inchapter images

* package update

* fixed weird typing

* fixed weird KeyboardAvoidingView

* remove test config

* logic fix

* removed styles2

* fixed package problems

* fixed package problems

* notification icons

* package reinstallation

* package reinstallation

* customFileModal fix

* fixed ChapterItem alignment

* added github suggestions

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",
@@ -91,10 +91,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/ChapterItem.tsx

@@ -1,5 +1,6 @@
 import React, { memo, ReactNode, useState } from 'react';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { Text } from 'react-native-paper';
 import color from 'color';
 
 import { Row } from '../../../components/Common';
@@ -73,10 +74,10 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
       onLongPress={() => onSelectLongPress?.(chapter)}
       android_ripple={{ color: theme.rippleColor }}
     >
+      {left && <View style={styles.flex}>{left}</View>}
       <Row style={styles.row}>
-        {left}
         {!!bookmark && <ChapterBookmarkButton theme={theme} />}
-        <View>
+        <View style={styles.textContainer}>
           {isUpdateCard && (
             <Text
               style={[
@@ -131,16 +132,18 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
           </View>
         </View>
       </Row>
-      <DownloadButton
-        downloadQueue={downloadQueue}
-        chapter={chapter}
-        theme={theme}
-        deleteChapter={deleteChapter}
-        downloadChapter={downloadChapter}
-        hideDeleteChapterMenu={hideDeleteChapterMenu}
-        showDeleteChapterMenu={showDeleteChapterMenu}
-        deleteChapterMenuVisible={deleteChapterMenuVisible}
-      />
+      <View style={styles.flex}>
+        <DownloadButton
+          downloadQueue={downloadQueue}
+          chapter={chapter}
+          theme={theme}
+          deleteChapter={deleteChapter}
+          downloadChapter={downloadChapter}
+          hideDeleteChapterMenu={hideDeleteChapterMenu}
+          showDeleteChapterMenu={showDeleteChapterMenu}
+          deleteChapterMenuVisible={deleteChapterMenuVisible}
+        />
+      </View>
     </Pressable>
   );
 };
@@ -155,13 +158,28 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    columnGab: 8,
   },
   text: {
     fontSize: 12,
   },
   textRow: {
     flexDirection: 'row',
-    marginTop: 5,
   },
-  row: { flex: 1, overflow: 'hidden' },
+  flex: {
+    flexBasis: 'auto',
+    flexShrink: 9,
+  },
+  textContainer: {
+    flex: 1,
+    marginVertical: '10%',
+    height: '80%',
+    justifyContent: 'space-evenly',
+  },
+  row: {
+    flexBasis: 10,
+    flexGrow: 1,
+    overflow: 'hidden',
+    height: '100%',
+  },
 });

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