Add details in novel updates & mal

This commit is contained in:
Rajarshee Chatterjee
2021-06-30 10:23:26 +05:30
parent 38b0097261
commit f5dd7153cc
6 changed files with 254 additions and 36 deletions
+4 -1
View File
@@ -69,7 +69,10 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
!showDownloadBadges && {
borderRadius: 4,
},
{ backgroundColor: theme.colorAccent },
{
backgroundColor: theme.colorAccent,
color: theme.colorButtonText,
},
]}
>
{item.chaptersUnread}
@@ -0,0 +1,134 @@
import React from "react";
import { StyleSheet, Pressable, Text, View, FlatList } from "react-native";
import FastImage from "react-native-fast-image";
import { Row } from "../../../components/Common";
const GenreChip = ({ children, theme }) => (
<View style={{ flexDirection: "row" }}>
<Text
style={[styles.genreChip, { color: theme.textColorSecondary }]}
numberOfLines={2}
>
<Text
style={[
styles.genreChip,
{
color: theme.textColorPrimary,
fontSize: 14,
},
]}
>
{`${"Score "}`}
</Text>
{children}
</Text>
</View>
);
const BrowseMalCard = ({ novel, theme, onPress }) => {
return (
<View
style={{
flex: 1,
backgroundColor: theme.colorPrimary,
borderRadius: 8,
elevation: 1,
marginVertical: 4,
marginHorizontal: 8,
}}
>
<Pressable
style={styles.novelUpdatesCard}
onPress={onPress}
android_ripple={{
color: theme.rippleColor,
borderless: true,
}}
>
<FastImage
source={{ uri: novel.novelCover }}
style={{
width: 130,
height: 180,
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
}}
/>
<View
style={{
flex: 1,
paddingHorizontal: 8,
paddingVertical: 8,
}}
>
<Text
style={{ color: theme.textColorPrimary, fontSize: 17 }}
>
{novel.novelName}
</Text>
<GenreChip theme={theme}>{novel.score}</GenreChip>
<View style={{ flexDirection: "row" }}>
<Text
style={[
styles.genreChip,
{ color: theme.textColorSecondary },
]}
>
<Text
style={[
styles.genreChip,
{
color: theme.textColorPrimary,
fontSize: 14,
},
]}
>
{`${"Type "}`}
</Text>
{novel.info[1]}
</Text>
</View>
<View style={{ flexDirection: "row", marginBottom: 4 }}>
<Text
style={[
styles.genreChip,
{ color: theme.textColorSecondary },
]}
>
<Text
style={[
styles.genreChip,
{
color: theme.textColorPrimary,
fontSize: 14,
},
]}
>
{`${"Published "}`}
</Text>
{novel.info[2]}
</Text>
</View>
</View>
</Pressable>
</View>
);
};
export default BrowseMalCard;
const styles = StyleSheet.create({
novelUpdatesCard: {
flex: 1,
flexDirection: "row",
},
contentContainer: {
flex: 1,
},
genreChip: {
marginTop: 4,
fontSize: 13,
// fontStyle: "italic",
},
});
+7 -5
View File
@@ -17,6 +17,7 @@ import { useTheme, useSettings } from "../../../hooks/reduxHooks";
import { showToast } from "../../../hooks/showToast";
import { getDeviceOrientation } from "../../../services/utils/helpers";
import { scrapeSearchResults, scrapeTopNovels } from "./MyAnimeListScraper";
import BrowseMalCard from "./BrowseMalCard";
const BrowseMalScreen = ({ navigation, route }) => {
const theme = useTheme();
@@ -72,8 +73,9 @@ const BrowseMalScreen = ({ navigation, route }) => {
}, []);
const renderItem = ({ item }) => (
<NovelCover
item={{ novelName: item.novelName, novelCover: item.novelCover }}
<BrowseMalCard
novel={item}
theme={theme}
onPress={() =>
navigation.navigate("GlobalSearch", {
novelName: item.novelName,
@@ -153,8 +155,8 @@ const BrowseMalScreen = ({ navigation, route }) => {
) : (
<FlatList
contentContainerStyle={styles.novelsContainer}
numColumns={getNovelsPerRow()}
key={getNovelsPerRow()}
// numColumns={getNovelsPerRow()}
// key={getNovelsPerRow()}
data={novels}
keyExtractor={(item) => item.novelName}
renderItem={renderItem}
@@ -189,7 +191,7 @@ const styles = StyleSheet.create({
},
novelsContainer: {
flexGrow: 1,
paddingVertical: 8,
paddingBottom: 8,
paddingHorizontal: 4,
},
});
@@ -22,7 +22,12 @@ const scrapeTopNovels = async (pageNo) => {
".jpg";
const novelName = $(this).find("h3").text();
const novel = { novelName, novelCover };
const score = $(this)
.find(".js-top-ranking-score-col > span.score-label")
.text();
const info = $(this).find("div.information").text().split(/\s\s+/);
const novel = { novelName, novelCover, score, info };
novels.push(novel);
});
@@ -4,53 +4,103 @@ import FastImage from "react-native-fast-image";
import { Row } from "../../../components/Common";
const GenreChip = ({ children, theme }) => (
<Text
style={[
styles.genreChip,
{
color: theme.colorAccent,
borderColor: theme.colorAccent,
},
]}
numberOfLines={1}
>
{children}
</Text>
<View style={{ flexDirection: "row" }}>
<Text
style={[styles.genreChip, { color: theme.textColorSecondary }]}
numberOfLines={2}
>
<Text
style={[
styles.genreChip,
{
color: theme.textColorPrimary,
fontSize: 14,
},
]}
>
{`${"Genre "}`}
</Text>
{children}
</Text>
</View>
);
const NovelUpdatesNovelCard = ({ novel, theme, onPress }) => {
return (
<Pressable
style={styles.novelUpdatesCard}
onPress={onPress}
android_ripple={{ color: theme.rippleColor }}
<View
style={{
flex: 1,
backgroundColor: theme.colorPrimary,
borderRadius: 8,
elevation: 1,
marginHorizontal: 12,
marginVertical: 4,
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<Pressable
style={styles.novelUpdatesCard}
onPress={onPress}
android_ripple={{ color: theme.rippleColor, borderless: true }}
>
<FastImage
source={{ uri: novel.novelCover }}
style={{ width: 85, height: 120, borderRadius: 4 }}
style={{
width: 130,
height: 180,
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
}}
/>
<View style={{ flex: 1, paddingLeft: 16 }}>
<View
style={{
flex: 1,
paddingHorizontal: 8,
paddingVertical: 8,
}}
>
<Text
style={{ color: theme.textColorPrimary, fontSize: 16 }}
style={{ color: theme.textColorPrimary, fontSize: 17 }}
>
{novel.novelName}
</Text>
<GenreChip theme={theme}>{novel.genres}</GenreChip>
<View style={{ flexDirection: "row", marginBottom: 4 }}>
<Text
style={[
styles.genreChip,
{ color: theme.textColorSecondary },
]}
numberOfLines={2}
>
<Text
style={[
styles.genreChip,
{
color: theme.textColorPrimary,
fontSize: 14,
},
]}
>
{`${"Chapter Count "}`}
</Text>
{novel.chapterCount}
</Text>
</View>
<Text
style={{
fontSize: 13,
color: theme.textColorPrimary,
fontSize: 12,
color: theme.textColorSecondary,
marginTop: 8,
}}
numberOfLines={3}
numberOfLines={4}
>
{novel.novelSummary}
</Text>
</View>
</View>
</Pressable>
</Pressable>
</View>
);
};
@@ -59,14 +109,14 @@ export default NovelUpdatesNovelCard;
const styles = StyleSheet.create({
novelUpdatesCard: {
flex: 1,
padding: 16,
flexDirection: "row",
},
contentContainer: {
flex: 1,
},
genreChip: {
marginVertical: 4,
fontSize: 12,
marginTop: 4,
fontSize: 13,
// fontStyle: "italic",
},
});
@@ -34,7 +34,31 @@ const scrapeTopNovels = async (pageNo) => {
const novelSummary =
$(this).find(".search_genre")[0].nextSibling.nodeValue;
const novel = { novelName, novelCover, genres, novelSummary };
let chapterCount = "";
$(this)
.find(".search_stats > span")
.each(function () {
let detail = $(this).text();
if (detail.includes("Chapters")) {
chapterCount = detail.replace(" Chapters", "");
}
});
// const chapterCount = $(this)
// .find('i[title="Chapter Count"]')
// const updateFrequency = $(this)
// .find('i[title="Updates Frequency"]')
const novel = {
novelName,
novelCover,
genres,
novelSummary,
chapterCount,
// updateFrequency,
};
novels.push(novel);
});