diff --git a/App.js b/App.js index 0741bf8f..04a99b6d 100644 --- a/App.js +++ b/App.js @@ -32,14 +32,14 @@ export default function App() { (tx, error) => console.log(error) ); tx.executeSql( - "CREATE TABLE IF NOT EXISTS HistoryTable (historyId INTEGER PRIMARY KEY AUTOINCREMENT, chapterUrl VARCHAR(255) UNIQUE, novelUrl VARCHAR(255), chapterName VARCHAR(255), lastRead DATETIME DEFAULT CURRENT_TIMESTAMP)", + "CREATE TABLE IF NOT EXISTS HistoryTable (historyId INTEGER PRIMARY KEY AUTOINCREMENT, chapterUrl VARCHAR(255) UNIQUE, novelUrl VARCHAR(255) UNIQUE, chapterName VARCHAR(255), lastRead DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (novelUrl) REFERENCES LibraryTable(novelUrl) ON DELETE CASCADE)", null, (tx, results) => console.log("History Table Created"), (tx, error) => console.log(error) ); tx.executeSql( - "CREATE TABLE IF NOT EXISTS DownloadsTable (downloadId INTEGER PRIMARY KEY AUTOINCREMENT, chapterUrl VARCHAR(255) UNIQUE, novelUrl VARCHAR(255), chapterName VARCHAR(255), chapterText VARCHAR(255), nextChapter VARCHAR(255), prevChapter VARCHAR(255))", + "CREATE TABLE IF NOT EXISTS DownloadsTable (downloadId INTEGER PRIMARY KEY AUTOINCREMENT, chapterUrl VARCHAR(255) UNIQUE, novelUrl VARCHAR(255), chapterName VARCHAR(255), chapterText VARCHAR(255), nextChapter VARCHAR(255), prevChapter VARCHAR(255), FOREIGN KEY (novelUrl) REFERENCES LibraryTable(novelUrl) ON DELETE CASCADE)", null, (tx, results) => console.log("Downloads Table Created"), (tx, error) => console.log(error) diff --git a/assets/sourceCovers/BoxNovel.png b/assets/sourceCovers/BoxNovel.png new file mode 100644 index 00000000..2952c369 Binary files /dev/null and b/assets/sourceCovers/BoxNovel.png differ diff --git a/assets/sourceCovers/ReadLightNovel.png b/assets/sourceCovers/ReadLightNovel.png new file mode 100644 index 00000000..a8229e1b Binary files /dev/null and b/assets/sourceCovers/ReadLightNovel.png differ diff --git a/src/components/Appbar.js b/src/components/Appbar.js new file mode 100644 index 00000000..147e42aa --- /dev/null +++ b/src/components/Appbar.js @@ -0,0 +1,13 @@ +import React from "react"; +import { Appbar } from "react-native-paper"; +import { theme } from "../theming/theme"; + +export const CustomAppbar = ({ title, onBackAction }) => ( + + {onBackAction && } + + +); diff --git a/src/components/ChapterCard.js b/src/components/ChapterCard.js new file mode 100644 index 00000000..510a20f8 --- /dev/null +++ b/src/components/ChapterCard.js @@ -0,0 +1,88 @@ +import React from "react"; +import { View, Text } from "react-native"; +import { TouchableRipple, IconButton } from "react-native-paper"; +import { theme } from "../theming/theme"; + +const ChapterCard = ({ + navigation, + novelUrl, + chapter, + downloadChapter, + extensionId, +}) => ( + + navigation.navigate("ChapterItem", { + chapterUrl: chapter.chapterUrl, + extensionId, + novelUrl: novelUrl, + chapterName: chapter.chapterName, + }) + } + rippleColor={theme.rippleColorDark} + > + <> + + + {chapter.chapterName.substring(0, 50) + "..."} + + + {chapter.releaseDate ? chapter.releaseDate : "release-date"} + + + + { + downloadChapter( + chapter.downloaded ? chapter.downloaded : 0, + chapter.chapterUrl + ); + }} + /> + + + +); + +export default ChapterCard; diff --git a/src/components/HistoryCard.js b/src/components/HistoryCard.js new file mode 100644 index 00000000..d2a363d7 --- /dev/null +++ b/src/components/HistoryCard.js @@ -0,0 +1,118 @@ +import React from "react"; +import { theme } from "../theming/theme"; +import moment from "moment"; +import { StyleSheet, View, Text, FlatList, Image } from "react-native"; +import { TouchableRipple, IconButton, Appbar } from "react-native-paper"; + +const HistoryCard = ({ item, deleteHistory, navigation }) => ( + + navigation.navigate("NovelItem", { + novelName: item.novelName, + novelCover: item.novelCover, + extensionId: item.extensionId, + novelUrl: item.novelUrl, + }) + } + > + <> + + + + + {item.novelName} + + + {`Ch. ${item.chapterName + .replace(/^\D+/g, "") + .substring(0, 4)} - ${moment( + item.lastRead + ).calendar()}`} + + + + deleteHistory(item.novelUrl)} + /> + + navigation.navigate("ChapterItem", { + chapterUrl: item.chapterUrl, + extensionId: item.extensionId, + novelUrl: item.novelUrl, + novelName: item.novelName, + novelCover: item.novelCover, + chapterName: item.chapterName, + }) + } + /> + + + + +); + +export default HistoryCard; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#202125", + backgroundColor: "#000000", + padding: 10, + }, + historyCard: { + // backgroundColor: "pink", + // paddingVertical: 10, + // marginVertical: 5, + // paddingHorizontal: 20, + marginTop: 10, + borderRadius: 4, + flexDirection: "row", + alignItems: "center", + }, +}); diff --git a/src/components/NovelInfoHeader.js b/src/components/NovelInfoHeader.js new file mode 100644 index 00000000..20d12be8 --- /dev/null +++ b/src/components/NovelInfoHeader.js @@ -0,0 +1,423 @@ +import React, { useState } from "react"; +import { + View, + Text, + ImageBackground, + StyleSheet, + Image, + FlatList, +} from "react-native"; +import { TouchableRipple, IconButton, Button } from "react-native-paper"; +import { LinearGradient } from "expo-linear-gradient"; + +import { theme } from "../theming/theme"; + +const NovelInfoHeader = ({ + item, + novel, + loading, + libraryStatus, + noOfChapters, + insertToLibrary, + sortChapters, +}) => { + const [more, setMore] = useState(false); + + const renderGenreChip = ({ item }) => ( + + {item} + + ); + + return ( + <> + + + + + + + {item.novelName} + + {!loading ? ( + <> + + {novel.Alternative && + novel.Alternative.replace( + ",", + ", " + )} + + + {novel["Author(s)"].replace(",", ", ")} + + + {novel["Release"]} + + + {novel["Status"] + + " • " + + novel["Type"]} + + + ) : ( + <> + + {item.Alternative && + item.Alternative.replace(",", ", ")} + + + {item["Author(s)"] && + item["Author(s)"].replace( + ",", + ", " + )} + + + {item["Release"] && item["Release"]} + + + {item["Status"] && + item["Type"] && + item["Status"] + + " • " + + item["Type"]} + + + )} + + + + + + {!loading ? ( + <> + + {novel.novelSummary.length > 0 && ( + + + About + + setMore(!more)} + ellipsizeMode="clip" + > + {novel.novelSummary} + + setMore(!more)} + > + {more ? "Less" : "More"} + + + )} + item} + renderItem={renderGenreChip} + /> + sortChapters()} + rippleColor={theme.rippleColorDark} + > + <> + + {noOfChapters + " Chapters"} + + sortChapters()} + /> + + + + ) : ( + <> + {item.libraryStatus && ( + + )} + {item.novelSummary && item.novelSummary.length > 0 && ( + + + About + + setMore(!more)} + ellipsizeMode="clip" + > + {item.novelSummary} + + setMore(!more)} + > + {more ? "Less" : "More"} + + + )} + item} + renderItem={({ item }) => ( + + {item} + + )} + /> + + )} + + ); +}; + +export default NovelInfoHeader; + +const styles = StyleSheet.create({ + nameContainer: { + flex: 1, + width: "100%", + marginHorizontal: 15, + // justifyContent: "center", + }, + background: { + height: 240, + }, + linearGradient: { + height: "100%", + backgroundColor: "rgba(256, 256, 256, 0.5)", + }, + detailsContainer: { + flex: 1, + flexDirection: "row", + margin: 15, + }, + logo: { + height: 180, + width: 120, + margin: 3.2, + borderRadius: 6, + }, + genre: { + borderRadius: 24, + borderWidth: 1, + paddingHorizontal: 10, + marginHorizontal: 2, + fontSize: 13, + paddingVertical: 2, + justifyContent: "center", + flex: 1, + }, + name: { + fontWeight: "bold", + fontSize: 20, + }, +}); diff --git a/src/navigation/Router.js b/src/navigation/Router.js index fe978eaf..66c9532e 100644 --- a/src/navigation/Router.js +++ b/src/navigation/Router.js @@ -1,108 +1,53 @@ import React from "react"; -import { createStackNavigator } from "@react-navigation/stack"; + +import { + createStackNavigator, + TransitionPresets, +} from "@react-navigation/stack"; import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs"; -import { TransitionPresets } from "@react-navigation/stack"; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; import Library from "../screens/Library"; +import History from "../screens/History/History"; import Browse from "../screens/Browse"; -import Latest from "../screens/Latest"; -import More from "../screens/More"; -import BoxNovelSearch from "../screens/Sources/BoxNovel/BoxNovelSearch"; + +import More from "../screens/More/More"; +import About from "../screens/More/About"; + import NovelItem from "../screens/NovelItem"; import ChapterItem from "../screens/ChapterItem"; -import About from "../screens/About"; -import HistoryScreen from "../screens/History/History"; -import Updates from "../screens/Updates/Updates"; -import BoxNovel from "../screens/Sources/BoxNovel/BoxNovel"; -import { theme } from "../theming/theme"; +// Sources +import BoxNovel from "../screens/Sources/BoxNovel/BoxNovel"; +import BoxNovelSearch from "../screens/Sources/BoxNovel/BoxNovelSearch"; import ReadLightNovel from "../screens/Sources/ReadLightNovel/ReadLightNovel"; import ReadLightNovelSearch from "../screens/Sources/ReadLightNovel/ReadLightNovelSearch"; +import { theme } from "../theming/theme"; + const Stack = createStackNavigator(); const Tab = createMaterialBottomTabNavigator(); -const LibraryStack = () => { - return ( - - - - ); +const stackNavigatorConfig = { + headerShown: false, + ...TransitionPresets.RevealFromBottomAndroid, }; -// const UpdatesStack = () => { -// return ( -// -// -// -// ); -// }; - -const SearchStack = () => { - return ( - - - - ); -}; - -const BrowseStack = () => { - return ( - - - - ); -}; const MoreStack = () => { return ( - + + ); }; const BoxNovelStack = () => { return ( - + @@ -111,12 +56,7 @@ const BoxNovelStack = () => { const ReadLightNovelStack = () => { return ( - + { ); }; -const Router = () => { +const BottomNavigator = () => { return ( ( { /> */} ( { /> ( { ); }; -const MainStack = () => { +const Router = () => { return ( - - + + - { ); }; -export default MainStack; +export default Router; diff --git a/src/screens/Browse.js b/src/screens/Browse.js index a7b42d77..012ee6fc 100644 --- a/src/screens/Browse.js +++ b/src/screens/Browse.js @@ -1,84 +1,90 @@ import React, { useEffect, useState } from "react"; import { StyleSheet, View, Text, FlatList, Image } from "react-native"; import { TouchableRipple, IconButton } from "react-native-paper"; +import { CustomAppbar } from "../components/Appbar"; import { theme } from "../theming/theme"; import { sources } from "../utils/sources"; const Browse = ({ navigation }) => { return ( - - item.sourceId.toString()} - renderItem={({ item }) => ( - - navigation.navigate(item.sourceName + "Stack") - } - rippleColor={theme.rippleColorDark} - > - <> - - - - - {item.sourceName} - - - {item.sourceLanguage} - + <> + + + item.sourceId.toString()} + renderItem={({ item }) => ( + + navigation.navigate(item.sourceName + "Stack") + } + rippleColor={theme.rippleColorDark} + > + <> + + + + + {item.sourceName} + + + {item.sourceLanguage} + + + + + navigation.navigate( + item.sourceName + "Stack", + { + screen: + item.sourceName + + "Search", + } + ) + } + /> + - - - navigation.navigate( - item.sourceName + "Stack", - { - screen: - item.sourceName + - "Search", - } - ) - } - /> - - - - - )} - /> - + + + )} + /> + + ); }; diff --git a/src/screens/History/History.js b/src/screens/History/History.js index 1d014538..d8178a9e 100644 --- a/src/screens/History/History.js +++ b/src/screens/History/History.js @@ -1,16 +1,16 @@ -import React, { useEffect, useState, useCallback } from "react"; -import { StyleSheet, View, Text, FlatList, Image } from "react-native"; -import { TouchableRipple, IconButton, Appbar } from "react-native-paper"; +import React, { useState, useCallback, useEffect } from "react"; +import { StyleSheet, View, Text, FlatList } from "react-native"; import { theme } from "../../theming/theme"; -import moment from "moment"; import { useFocusEffect } from "@react-navigation/native"; +import { CustomAppbar } from "../../components/Appbar"; +import HistoryCard from "../../components/HistoryCard"; + import * as SQLite from "expo-sqlite"; const db = SQLite.openDatabase("lnreader.db"); const History = ({ navigation }) => { - const [loading, setLoading] = useState(true); - const [novels, setNovels] = useState(); + const [history, setHistory] = useState(); const getHistory = () => { db.transaction((tx) => { @@ -18,21 +18,19 @@ const History = ({ navigation }) => { "SELECT HistoryTable.chapterUrl, HistoryTable.historyId, HistoryTable.chapterName, HistoryTable.lastRead, LibraryTable.novelName, LibraryTable.novelCover, LibraryTable.novelUrl, LibraryTable.extensionId FROM HistoryTable INNER JOIN LibraryTable ON HistoryTable.novelUrl = LibraryTable.novelUrl ORDER BY HistoryTable.lastRead DESC", null, (txObj, { rows: { _array } }) => { - setNovels(_array); - // console.log(_array); - setLoading(false); + setHistory(_array); }, (txObj, error) => console.log("Error ", error) ); }); }; - const deleteHistory = (name) => { + const deleteHistory = (novelId) => { db.transaction((tx) => { tx.executeSql( "DELETE FROM HistoryTable WHERE novelUrl = ?", - [name], - (txObj, { rows: { _array } }) => { + [novelId], + (txObj, res) => { getHistory(); }, (txObj, error) => console.log("Error ", error) @@ -48,118 +46,18 @@ const History = ({ navigation }) => { return ( <> - - - + item.historyId.toString()} renderItem={({ item }) => ( - - navigation.navigate("NovelItem", { - novelName: item.novelName, - novelCover: item.novelCover, - extensionId: item.extensionId, - novelUrl: item.novelUrl, - }) - } - > - <> - - - - - {item.novelName} - - - {`Ch. ${item.chapterName - .replace(/^\D+/g, "") - .substring(0, 4)} - ${moment( - item.lastRead - ).calendar()}`} - - - - - deleteHistory(item.novelUrl) - } - /> - - navigation.navigate( - "ChapterItem", - { - chapterUrl: - item.chapterUrl, - extensionId: - item.extensionId, - novelUrl: item.novelUrl, - novelName: - item.novelName, - novelCover: - item.novelCover, - chapterName: - item.chapterName, - } - ) - } - /> - - - - + )} ListEmptyComponent={ { }; return ( - - item.novelUrl} - renderItem={({ item }) => ( - navigation.navigate("NovelItem", item)} - /> - )} - refreshControl={ - - } - ListEmptyComponent={ - - + + + + item.novelUrl} + renderItem={({ item }) => ( + + navigation.navigate("NovelItem", item) + } + /> + )} + refreshControl={ + + } + ListEmptyComponent={ + - Σ(ಠ_ಠ) - - - Your library is empty. Add series to your library - from Browse. - - - } - /> - {/* */} - + + Σ(ಠ_ಠ) + + + Your library is empty. Add series to your + library from Browse. + + + } + /> + {/* */} + + ); }; diff --git a/src/screens/More.js b/src/screens/More.js deleted file mode 100644 index 3ec69ed0..00000000 --- a/src/screens/More.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { StyleSheet } from "react-native"; -import { List } from "react-native-paper"; -import { theme } from "../theming/theme"; - -const MoreScreen = ({ navigation }) => { - return ( - - ( - - )} - onPress={() => navigation.navigate("About")} - /> - - ); -}; - -export default MoreScreen; - -const styles = StyleSheet.create({ - container: { - flex: 1, - // backgroundColor: "#202125", - backgroundColor: "#000000", - }, -}); diff --git a/src/screens/About.js b/src/screens/More/About.js similarity index 86% rename from src/screens/About.js rename to src/screens/More/About.js index 829385a3..65f3d58e 100644 --- a/src/screens/About.js +++ b/src/screens/More/About.js @@ -1,11 +1,16 @@ import React from "react"; import { List, Divider } from "react-native-paper"; import * as Linking from "expo-linking"; -import { theme } from "../theming/theme"; +import { theme } from "../../theming/theme"; +import { CustomAppbar } from "../../components/Appbar"; const AboutScreen = ({ navigation }) => { return ( <> + navigation.goBack()} + /> { "https://github.com/rajarsheechatterjee/LNReader/commits/master" ) } + rippleColor={theme.rippleColorDark} /> @@ -48,6 +54,7 @@ const AboutScreen = ({ navigation }) => { "https://github.com/rajarsheechatterjee/lnreader" ) } + rippleColor={theme.rippleColorDark} /> { "https://github.com/rajarsheechatterjee/lnreader-extensions" ) } + rippleColor={theme.rippleColorDark} /> diff --git a/src/screens/More/More.js b/src/screens/More/More.js new file mode 100644 index 00000000..cd56bcbb --- /dev/null +++ b/src/screens/More/More.js @@ -0,0 +1,54 @@ +import React from "react"; +import { StyleSheet } from "react-native"; +import { List } from "react-native-paper"; +import { CustomAppbar } from "../../components/Appbar"; +import { theme } from "../../theming/theme"; + +const MoreScreen = ({ navigation }) => { + return ( + <> + + + ( + + )} + onPress={() => navigation.navigate("About")} + /> + ( + + )} + onPress={() => navigation.navigate("About")} + /> + + + ); +}; + +export default MoreScreen; + +const styles = StyleSheet.create({ + container: { + flex: 1, + // backgroundColor: "#202125", + backgroundColor: "#000000", + }, +}); diff --git a/src/screens/NovelItem.js b/src/screens/NovelItem.js index 057fdb7e..6b69881a 100644 --- a/src/screens/NovelItem.js +++ b/src/screens/NovelItem.js @@ -1,27 +1,21 @@ -import React, { useState, useCallback, useEffect } from "react"; +import React, { useState, useCallback } from "react"; +import { useFocusEffect } from "@react-navigation/native"; + import { StyleSheet, View, - Image, - ImageBackground, - Text, FlatList, RefreshControl, ToastAndroid, + ActivityIndicator, } from "react-native"; -import { - Appbar, - TouchableRipple, - IconButton, - Button, - FAB, - ProgressBar, -} from "react-native-paper"; -import { LinearGradient } from "expo-linear-gradient"; -import { useFocusEffect } from "@react-navigation/native"; +import { Appbar, FAB, ProgressBar } from "react-native-paper"; import { theme } from "../theming/theme"; +import ChapterCard from "../components/ChapterCard"; +import NovelInfoHeader from "../components/NovelInfoHeader"; + import * as SQLite from "expo-sqlite"; const db = SQLite.openDatabase("lnreader.db"); @@ -35,9 +29,8 @@ const NovelItem = ({ route, navigation }) => { const [novel, setNovel] = useState(item); const [chapters, setChapters] = useState(); - const [more, setMore] = useState(false); - const [libraryStatus, setlibraryStatus] = useState(0); + const [libraryStatus, setlibraryStatus] = useState(item.libraryStatus); const [sort, setSort] = useState("ASC"); const [readingStatus, setReadingStatus] = useState(); @@ -63,21 +56,8 @@ const NovelItem = ({ route, navigation }) => { }); }; - const getNovelFromDb = () => { + const getChaptersFromDb = () => { db.transaction((tx) => { - tx.executeSql( - "SELECT * FROM LibraryTable WHERE novelUrl=?", - [item.novelUrl], - (txObj, results) => { - let len = results.rows.length; - for (let i = 0; i < len; i++) { - let row = results.rows.item(i); - setNovel(row); - setlibraryStatus(row.libraryStatus); - } - }, - (txObj, error) => console.log("Error ", error) - ); tx.executeSql( `SELECT * FROM ChapterTable WHERE novelUrl=? ORDER BY chapterId ${sort}`, [item.novelUrl], @@ -109,14 +89,12 @@ const NovelItem = ({ route, navigation }) => { (txObj, results) => { let len = results.rows.length; if (len > 0) { - for (let i = 0; i < len; i++) { - let row = results.rows.item(i); - setReadingStatus({ - chapterUrl: row.chapterUrl, - chapterName: row.chapterName, - fabLabel: "Resume", - }); - } + let row = results.rows.item(0); + setReadingStatus({ + chapterUrl: row.chapterUrl, + chapterName: row.chapterName, + fabLabel: "Resume", + }); } else { setReadingStatus({ chapterUrl: chapUrl, @@ -149,7 +127,7 @@ const NovelItem = ({ route, navigation }) => { 0, ], (tx, res) => { - console.log("Inserted into DB"); + // console.log("Inserted into DB"); }, (txObj, error) => console.log("Error ", error) ); @@ -181,9 +159,9 @@ const NovelItem = ({ route, navigation }) => { `UPDATE ChapterTable SET downloaded = 1 WHERE chapterUrl = ?`, [cdUrl], (tx, res) => { - console.log( - "Updated Download Status to downloaded" - ); + // console.log( + // "Updated Download Status to downloaded" + // ); }, (txObj, error) => console.log("Error ", error) ); @@ -202,7 +180,7 @@ const NovelItem = ({ route, navigation }) => { `Downloaded ${json.chapterName}`, ToastAndroid.SHORT ); - console.log("Inserted into Downloads Table"); + // console.log("Inserted into Downloads Table"); }, (txObj, error) => console.log("Error ", error) ); @@ -218,7 +196,7 @@ const NovelItem = ({ route, navigation }) => { `UPDATE ChapterTable SET downloaded = 0 WHERE chapterUrl = ?`, [cdUrl], (tx, res) => { - console.log("Updated Download Status to downloaded"); + // console.log("Updated Download Status to downloaded"); }, (txObj, error) => console.log("Error ", error) ); @@ -226,7 +204,7 @@ const NovelItem = ({ route, navigation }) => { `DELETE FROM DownloadsTable WHERE chapterUrl = ?`, [cdUrl], (tx, res) => { - console.log("Deleted Download"); + // console.log("Deleted Download"); checkIfExistsInDB(); ToastAndroid.show( `Chapter deleted`, @@ -250,7 +228,7 @@ const NovelItem = ({ route, navigation }) => { "Added to library", ToastAndroid.SHORT ); - console.log("Inserted into Library"); + // console.log("Inserted into Library"); setlibraryStatus(1); }, @@ -267,7 +245,7 @@ const NovelItem = ({ route, navigation }) => { "Removed from library", ToastAndroid.SHORT ); - console.log("Removed From Library"); + // console.log("Removed From Library"); setlibraryStatus(0); }, (txObj, error) => console.log("Error ", error) @@ -284,12 +262,15 @@ const NovelItem = ({ route, navigation }) => { (txObj, res) => { if (res.rows.length === 0) { setRefreshing(true); - console.log("Not In Database"); + setlibraryStatus(0); + // console.log("Not In Database"); getNovel(); } else { // setRefreshing(true); - console.log("In Database"); - getNovelFromDb(); + // console.log("In Database"); + setlibraryStatus(res.rows.item(0).libraryStatus); + setNovel(res.rows.item(0)); + getChaptersFromDb(); } }, (txObj, error) => console.log("Error ", error) @@ -313,6 +294,16 @@ const NovelItem = ({ route, navigation }) => { checkIfExistsInDB(); }; + const renderChapterCard = ({ item }) => ( + + ); + return ( <> @@ -324,10 +315,10 @@ const NovelItem = ({ route, navigation }) => { size={26} style={{ marginRight: 0 }} /> - {/* */} + /> @@ -344,312 +335,18 @@ const NovelItem = ({ route, navigation }) => { removeClippedSubviews={true} maxToRenderPerBatch={10} initialNumToRender={10} - renderItem={({ item }) => ( - - navigation.navigate("ChapterItem", { - chapterUrl: item.chapterUrl, - extensionId, - novelUrl: novelUrl, - chapterName: item.chapterName, - }) - } - rippleColor={theme.rippleColorDark} - > - <> - - - {item.chapterName} - - - {item.releaseDate - ? item.releaseDate - : "release-date"} - - - - { - downloadChapter( - item.downloaded - ? item.downloaded - : 0, - item.chapterUrl - ); - }} - /> - - - + renderItem={renderChapterCard} + ListHeaderComponent={() => ( + )} - ListHeaderComponent={ - <> - - - - - - - {item.novelName} - - {!loading && ( - <> - - {novel.Alternative && - novel.Alternative.replace( - ",", - ", " - )} - - - {novel[ - "Author(s)" - ].replace(",", ", ")} - - - {novel["Release"]} - - - {novel["Status"] + - " • " + - novel["Type"]} - - - )} - - - - - - {!loading && ( - <> - - {novel.novelSummary.length > 0 && ( - - - About - - setMore(!more)} - ellipsizeMode="clip" - > - {novel.novelSummary} - - setMore(!more)} - > - {more ? "Less" : "More"} - - - )} - item} - renderItem={({ item }) => ( - - {item} - - )} - /> - sortChapters()} - rippleColor={theme.rippleColorDark} - > - <> - - {chapters.length + " Chapters"} - - sortChapters()} - /> - - - - )} - - } refreshControl={ { label={readingStatus.fabLabel} color={theme.textColorPrimaryDark} onPress={() => { - // console.log(readingStatus); navigation.navigate("ChapterItem", { chapterUrl: readingStatus.chapterUrl, extensionId,