Redo previous changes

src/navigation/Router.js

@@ -9,14 +9,14 @@ import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityI
 
 import Library from "../screens/Library/Library";
 import History from "../screens/History/History";
-import Browse from "../screens/Browse";
+import Browse from "../screens/Browse/Browse";
 
 import More from "../screens/More/More";
 import About from "../screens/More/About";
 import Settings from "../screens/More/Settings";
 
-import NovelItem from "../screens/NovelItem";
-import ChapterItem from "../screens/ChapterItem";
+import NovelItem from "../screens/Novel/Novel";
+import ChapterItem from "../screens/Chapter/Chapter";
 
 // Extensions
 import BoxNovel from "../screens/extensions/boxnovel/BoxNovel";

src/screens/Browse.js → src/screens/Browse/Browse.js

@@ -9,7 +9,7 @@ import {
     ActivityIndicator,
 } from "react-native";
 import { TouchableRipple, Button } from "react-native-paper";
-import { CustomAppbar } from "../components/common/Appbar";
+import { CustomAppbar } from "../../components/common/Appbar";
 
 import { useSelector } from "react-redux";
 

src/screens/ChapterItem.js → src/screens/Chapter/Chapter.js

@@ -2,17 +2,17 @@ import React, { useState, useEffect } from "react";
 import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
 
 import { Appbar, Provider, Portal } from "react-native-paper";
-import { theme } from "../theme/theme";
+import { theme } from "../../theme/theme";
 import { CollapsibleHeaderScrollView } from "react-native-collapsible-header-views";
 
-import BottomSheet from "../components/chapter/BottomSheet";
+import BottomSheet from "./components/BottomSheet";
 
 import * as SQLite from "expo-sqlite";
 const db = SQLite.openDatabase("lnreader.db");
 
-import { fetchChapterFromSource } from "../services/api";
+import { fetchChapterFromSource } from "../../services/api";
 
-import { getReaderTheme } from "../services/asyncStorage";
+import { getReaderTheme } from "../../services/asyncStorage";
 
 const ChapterItem = ({ route, navigation }) => {
     const { extensionId, chapterUrl, novelUrl, chapterName } = route.params;

src/components/chapter/BottomSheet.js → src/screens/Chapter/components/BottomSheet.js

@@ -7,7 +7,7 @@ import Bottomsheet from "rn-sliding-up-panel";
 
 import { useSelector } from "react-redux";
 
-import { saveReaderTheme } from "../../services/asyncStorage";
+import { saveReaderTheme } from "../../../services/asyncStorage";
 
 const ChapterBottomSheet = ({
     bottomSheetRef,

src/screens/History/History.js

@@ -10,15 +10,16 @@ import {
 } from "react-native";
 
 import { CustomAppbar } from "../../components/common/Appbar";
-import HistoryCard from "../../components/history/HistoryCard";
+import HistoryCard from "./components/HistoryCard";
 
 import { getHistoryFromDb, deleteChapterHistory } from "../../services/db";
 
 import { useSelector } from "react-redux";
+import EmptyView from "./components/EmptyView";
 
 const History = ({ navigation }) => {
     const [loading, setLoading] = useState(true);
-    const [history, setHistory] = useState();
+    const [history, setHistory] = useState([]);
 
     const theme = useSelector((state) => state.themeReducer.theme);
 
@@ -38,6 +39,14 @@ const History = ({ navigation }) => {
         }, [])
     );
 
+    const renderHistoryCard = ({ item }) => (
+        <HistoryCard
+            item={item}
+            deleteHistory={deleteHistory}
+            navigation={navigation}
+        />
+    );
+
     return (
         <>
             <CustomAppbar title="History" />
@@ -51,13 +60,7 @@ const History = ({ navigation }) => {
                     contentContainerStyle={{ flex: 1 }}
                     data={history}
                     keyExtractor={(item) => item.historyId.toString()}
-                    renderItem={({ item }) => (
-                        <HistoryCard
-                            item={item}
-                            deleteHistory={deleteHistory}
-                            navigation={navigation}
-                        />
-                    )}
+                    renderItem={renderHistoryCard}
                     ListFooterComponent={
                         loading && (
                             <ActivityIndicator
@@ -66,38 +69,7 @@ const History = ({ navigation }) => {
                             />
                         )
                     }
-                    ListEmptyComponent={
-                        !loading && (
-                            <View
-                                style={{
-                                    flex: 1,
-                                    justifyContent: "center",
-                                    alignItems: "center",
-                                }}
-                            >
-                                <Text
-                                    style={{
-                                        color: theme.textColorSecondaryDark,
-                                        fontSize: 45,
-                                        fontWeight: "bold",
-                                    }}
-                                >
-                                    (˘･_･˘)
-                                </Text>
-                                <Text
-                                    style={{
-                                        color: theme.textColorSecondaryDark,
-                                        fontWeight: "bold",
-                                        marginTop: 10,
-                                        textAlign: "center",
-                                        paddingHorizontal: 30,
-                                    }}
-                                >
-                                    Nothing read recently.
-                                </Text>
-                            </View>
-                        )
-                    }
+                    ListEmptyComponent={!loading && <EmptyView />}
                 />
             </View>
         </>
@@ -111,10 +83,4 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 10,
     },
-    historyCard: {
-        marginTop: 10,
-        borderRadius: 4,
-        flexDirection: "row",
-        alignItems: "center",
-    },
 });

src/screens/History/components/EmptyView.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+const EmptyView = () => {
+    const theme = useSelector((state) => state.themeReducer.theme);
+
+    return (
+        <View style={styles.emptyViewContainer}>
+            <Text
+                style={[
+                    styles.emptyViewIcon,
+                    {
+                        color: theme.textColorSecondaryDark,
+                    },
+                ]}
+            >
+                (˘･_･˘)
+            </Text>
+            <Text
+                style={[
+                    styles.emptyViewText,
+                    {
+                        color: theme.textColorSecondaryDark,
+                    },
+                ]}
+            >
+                Nothing read recently.
+            </Text>
+        </View>
+    );
+};
+
+export default EmptyView;
+
+const styles = StyleSheet.create({
+    emptyViewContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    emptyViewIcon: {
+        fontSize: 45,
+        fontWeight: "bold",
+    },
+    emptyViewText: {
+        fontWeight: "bold",
+        marginTop: 10,
+        textAlign: "center",
+        paddingHorizontal: 30,
+    },
+});

src/components/history/HistoryCard.js → src/screens/History/components/HistoryCard.js

@@ -12,10 +12,7 @@ const HistoryCard = ({ item, deleteHistory, navigation }) => {
 
     return (
         <TouchableRipple
-            style={[
-                styles.historyCard,
-                // { backgroundColor: theme.colorDarkPrimary },
-            ]}
+            style={styles.historyCard}
             rippleColor={theme.rippleColorDark}
             borderless
             onPress={() =>
@@ -31,20 +28,9 @@ const HistoryCard = ({ item, deleteHistory, navigation }) => {
             <>
                 <Image
                     source={{ uri: item.novelCover }}
-                    style={{
-                        height: 80,
-                        width: 57,
-                        borderRadius: 4,
-                    }}
+                    style={styles.historyCover}
                 />
-                <View
-                    style={{
-                        marginLeft: 15,
-                        flex: 1,
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                    }}
-                >
+                <View style={styles.historyText}>
                     <View style={{ flex: 0.9 }}>
                         <Text
                             style={{
@@ -110,13 +96,20 @@ export default HistoryCard;
 
 const styles = StyleSheet.create({
     historyCard: {
-        // backgroundColor: theme.colorDarkPrimary,
-        // paddingVertical: 10,
-        // marginVertical: 5,
-        // paddingHorizontal: 20,
         marginBottom: 15,
         borderRadius: 4,
         flexDirection: "row",
         alignItems: "center",
     },
+    historyCover: {
+        height: 80,
+        width: 57,
+        borderRadius: 4,
+    },
+    historyText: {
+        marginLeft: 15,
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
 });