Release v1.0.16

App.js

@@ -1,58 +1,42 @@
-import React, { useState, useEffect } from "react";
-import { StatusBar } from "expo-status-bar";
+import React, { useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
-import * as Font from "expo-font";
-import AppLoading from "expo-app-loading";
+import { useFonts } from "expo-font";
+import { Provider as PaperProvider } from "react-native-paper";
+import Main from "./src/Navigators/Main";
 
-import Router from "./src/navigation/Router";
-
-import { createTables, createIndexes } from "./src/services/db";
-import { setStatusBar } from "./src/services/asyncStorage";
-
-// Redyx
 import { Provider } from "react-redux";
-import { persistor, store } from "./src/redux/store/configureStore";
+import { persistor, store } from "./src/redux/store";
 import { PersistGate } from "redux-persist/lib/integration/react";
-
-const getFonts = () =>
-    Font.loadAsync({
-        "pt-sans-bold": require("./assets/fonts/PTSansNarrow-Bold.ttf"),
-    });
+import { createDB, deleteDb } from "./src/database/DBHelper";
 
 const App = () => {
-    const [fontsLoaded, setFontsLoaded] = useState(false);
+    const [loaded] = useFonts({
+        "pt-sans-bold": require("./assets/fonts/PTSansNarrow-Bold.ttf"),
+        "arbutus-slab": require("./assets/fonts/ArbutusSlab-Regular.ttf"),
+        domine: require("./assets/fonts/Domine-VariableFont_wght.ttf"),
+        lato: require("./assets/fonts/Lato-Regular.ttf"),
+        "noto-sans": require("./assets/fonts/NotoSans-Regular.ttf"),
+        "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
+        "pt-serif": require("./assets/fonts/PTSerif-Regular.ttf"),
+    });
 
-    setStatusBar();
+    useEffect(() => createDB(), []);
 
-    const createDb = () => {
-        createTables();
-        createIndexes();
-    };
-
-    useEffect(() => {
-        createDb();
-    }, []);
-
-    if (fontsLoaded) {
-        return (
-            <Provider store={store}>
-                <PersistGate loading={null} persistor={persistor}>
-                    <StatusBar />
-                    <NavigationContainer>
-                        <Router />
-                    </NavigationContainer>
-                </PersistGate>
-            </Provider>
-        );
-    } else {
-        return (
-            <AppLoading
-                startAsync={getFonts}
-                onError={() => warn(error)}
-                onFinish={() => setFontsLoaded(true)}
-            />
-        );
+    if (!loaded) {
+        return null;
     }
+
+    return (
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <PaperProvider>
+                    <NavigationContainer>
+                        <Main />
+                    </NavigationContainer>
+                </PaperProvider>
+            </PersistGate>
+        </Provider>
+    );
 };
 
 export default App;

app.json

@@ -2,7 +2,8 @@
     "expo": {
         "name": "LNReader",
         "slug": "LNReader",
-        "version": "1.0.0",
+        "scheme": "lnreader",
+        "version": "1.0.16",
         "orientation": "portrait",
         "icon": "./assets/icon.png",
         "splash": {
@@ -11,7 +12,8 @@
             "backgroundColor": "#000000"
         },
         "updates": {
-            "fallbackToCacheTimeout": 0
+            "fallbackToCacheTimeout": 0,
+            "enabled": false
         },
         "assetBundlePatterns": ["**/*"],
         "ios": {

package.json

@@ -1,51 +1,58 @@
 {
-    "main": "node_modules/expo/AppEntry.js",
-    "scripts": {
-        "start": "expo start",
-        "android": "expo start --android",
-        "ios": "expo start --ios",
-        "web": "expo start --web",
-        "eject": "expo eject"
-    },
-    "dependencies": {
-        "@react-native-async-storage/async-storage": "^1.13.2",
-        "@react-native-community/masked-view": "0.1.10",
-        "@react-native-community/netinfo": "^5.9.7",
-        "@react-native-community/slider": "^3.0.3",
-        "@react-navigation/material-bottom-tabs": "^5.3.10",
-        "@react-navigation/native": "^5.8.10",
-        "@react-navigation/stack": "^5.12.8",
-        "expo": "~40.0.0",
-        "expo-app-loading": "^1.0.1",
-        "expo-font": "^8.4.0",
-        "expo-linear-gradient": "^8.4.0",
-        "expo-sharing": "~8.5.0",
-        "expo-sqlite": "~8.5.0",
-        "expo-status-bar": "~1.0.3",
-        "expo-web-browser": "~8.6.0",
-        "moment": "^2.29.1",
-        "react": "16.13.1",
-        "react-color-extractor": "^1.1.2",
-        "react-dom": "16.13.1",
-        "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
-        "react-native-collapsible-header-views": "^1.1.2",
-        "react-native-gesture-handler": "^1.8.0",
-        "react-native-offline": "^5.7.0",
-        "react-native-paper": "^4.5.0",
-        "react-native-reanimated": "^1.13.2",
-        "react-native-safe-area-context": "3.1.9",
-        "react-native-screens": "~2.15.0",
-        "react-native-vector-icons": "^7.1.0",
-        "react-native-web": "~0.13.12",
-        "react-native-webview": "11.0.0",
-        "react-redux": "^7.2.2",
-        "redux": "^4.0.5",
-        "redux-persist": "^6.0.0",
-        "redux-thunk": "^2.3.0",
-        "rn-sliding-up-panel": "^2.4.4"
-    },
-    "devDependencies": {
-        "@babel/core": "~7.9.0"
-    },
-    "private": true
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.13.0",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/netinfo": "6.0.0",
+    "@react-native-community/slider": "3.0.3",
+    "@react-navigation/material-bottom-tabs": "^5.3.10",
+    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/stack": "^5.12.8",
+    "expo": "^41.0.1",
+    "expo-app-loading": "^1.0.1",
+    "expo-document-picker": "^9.1.2",
+    "expo-file-system": "~11.0.2",
+    "expo-font": "~9.1.0",
+    "expo-linear-gradient": "~9.1.0",
+    "expo-linking": "~2.2.3",
+    "expo-media-library": "~12.0.2",
+    "expo-permissions": "^12.0.1",
+    "expo-sharing": "~9.1.2",
+    "expo-sqlite": "~9.1.0",
+    "expo-status-bar": "~1.0.4",
+    "expo-web-browser": "~9.1.0",
+    "moment": "^2.29.1",
+    "qs": "^6.10.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-collapsible-header-views": "^1.1.2",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-offline": "^5.7.0",
+    "react-native-paper": "^4.5.0",
+    "react-native-picker-scrollview": "^1.0.1",
+    "react-native-reanimated": "~2.1.0",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.0.0",
+    "react-native-vector-icons": "^7.1.0",
+    "react-native-web": "~0.13.12",
+    "react-native-webview": "11.2.3",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0",
+    "rn-sliding-up-panel": "^2.4.4"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0"
+  },
+  "private": true
 }

src/Hooks/githubUpdateChecker.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+export const githubUpdateChecker = () => {
+    const latestReleaseUrl =
+        "https://api.github.com/repos/rajarsheechatterjee/lnreader/releases/latest";
+
+    const [checking, setChecking] = useState(true);
+    const [latestRelease, setLatestRelease] = useState();
+
+    const checkForRelease = async () => {
+        let res = await fetch(latestReleaseUrl);
+        res = await res.json();
+
+        const release = {
+            tag_name: res.tag_name,
+            body: res.body,
+            downloadUrl: res.assets[0].browser_download_url,
+        };
+
+        setLatestRelease(release);
+        setChecking(false);
+    };
+
+    const isNewVersion = (versionTag) => {
+        let currentVersion = "v1.0.16";
+        const regex = /[^\\d.]/;
+
+        let newVersion = versionTag.replace(regex, "");
+        currentVersion = currentVersion.replace(regex, "");
+
+        return newVersion !== currentVersion;
+    };
+
+    useEffect(() => {
+        checkForRelease();
+    }, []);
+
+    if (!checking) {
+        const data = {
+            latestRelease,
+            isNewVersion: isNewVersion(latestRelease.tag_name),
+        };
+
+        return data;
+    }
+};

src/Hooks/setStatusBarStyle.js

@@ -0,0 +1,7 @@
+import { setStatusBarStyle as setExpoStatusBarStyle } from "expo-status-bar";
+import { useTheme } from "../Hooks/useTheme";
+
+export const setStatusBarStyle = () => {
+    const theme = useTheme();
+    setExpoStatusBarStyle(theme.id === 1 ? "dark" : "light");
+};

src/Hooks/showToast.js

@@ -0,0 +1,5 @@
+import { ToastAndroid } from "react-native";
+
+export const showToast = (message) => {
+    ToastAndroid.show(message, ToastAndroid.SHORT);
+};

src/Hooks/useLibrary.js

@@ -0,0 +1,7 @@
+import { useSelector } from "react-redux";
+
+export const useLibrary = () => {
+    const library = useSelector((state) => state.libraryReducer.novels);
+
+    return library;
+};

src/Hooks/useReaderSettings.js

@@ -0,0 +1,7 @@
+import { useSelector } from "react-redux";
+
+export const useReaderSettings = () => {
+    const readerSettings = useSelector((state) => state.settingsReducer.reader);
+
+    return readerSettings;
+};

src/Hooks/useTheme.js

@@ -0,0 +1,7 @@
+import { useSelector } from "react-redux";
+
+export const useTheme = () => {
+    const currentTheme = useSelector((state) => state.themeReducer.theme);
+
+    return currentTheme;
+};

src/Navigators/BottomNavigator.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import { useTheme } from "../Hooks/useTheme";
+
+import Library from "../Screens/Library/Library";
+import Updates from "../Screens/Updates/Updates";
+import History from "../Screens/History/History";
+import Browse from "../Screens/Browse/Browse";
+import More from "../Screens/More/More";
+
+const Tab = createMaterialBottomTabNavigator();
+
+const BottomNavigator = () => {
+    const theme = useTheme();
+
+    return (
+        <Tab.Navigator
+            shifting={false}
+            barStyle={{ backgroundColor: theme.colorPrimary }}
+            activeColor={theme.colorAccentDark}
+        >
+            <Tab.Screen
+                name="Library"
+                component={Library}
+                options={{
+                    tabBarIcon: ({ color }) => (
+                        <MaterialCommunityIcons
+                            name="book-variant-multiple"
+                            color={color}
+                            size={24}
+                        />
+                    ),
+                }}
+            />
+            <Tab.Screen
+                name="Updates"
+                component={Updates}
+                options={{
+                    tabBarIcon: ({ color }) => (
+                        <MaterialCommunityIcons
+                            name="alert-decagram-outline"
+                            color={color}
+                            size={24}
+                        />
+                    ),
+                }}
+            />
+            <Tab.Screen
+                name="History"
+                component={History}
+                options={{
+                    tabBarIcon: ({ color }) => (
+                        <MaterialCommunityIcons
+                            name="history"
+                            color={color}
+                            size={24}
+                        />
+                    ),
+                }}
+            />
+            <Tab.Screen
+                name="Browse"
+                component={Browse}
+                options={{
+                    tabBarIcon: ({ color }) => (
+                        <MaterialCommunityIcons
+                            name="compass-outline"
+                            color={color}
+                            size={24}
+                        />
+                    ),
+                }}
+            />
+            <Tab.Screen
+                name="More"
+                component={More}
+                options={{
+                    tabBarIcon: ({ color }) => (
+                        <MaterialCommunityIcons
+                            name="dots-horizontal"
+                            color={color}
+                            size={24}
+                        />
+                    ),
+                }}
+            />
+        </Tab.Navigator>
+    );
+};
+
+export default BottomNavigator;

src/Navigators/Main.js

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+    createStackNavigator,
+    TransitionPresets,
+} from "@react-navigation/stack";
+
+import BottomNavigator from "./BottomNavigator";
+import Novel from "../Screens/Novel/Novel";
+import Chapter from "../Screens/Chapter/Chapter";
+import Extension from "../Screens/Extension/Extension";
+import MoreStack from "./More";
+
+import { setStatusBarStyle } from "../Hooks/setStatusBarStyle";
+import { View } from "react-native";
+import { useTheme } from "../Hooks/useTheme";
+import { githubUpdateChecker } from "../Hooks/githubUpdateChecker";
+import NewUpdateDialog from "../Components/NewUpdateDialog";
+
+const Stack = createStackNavigator();
+
+const stackNavigatorConfig = {
+    headerShown: false,
+};
+
+const MainNavigator = () => {
+    const theme = useTheme();
+    setStatusBarStyle();
+    const { isNewVersion, latestRelease } = githubUpdateChecker() || {};
+
+    return (
+        <View style={{ flex: 1, backgroundColor: theme.colorPrimary }}>
+            {isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
+            <Stack.Navigator screenOptions={stackNavigatorConfig}>
+                <Stack.Screen
+                    name="BottomNavigator"
+                    component={BottomNavigator}
+                />
+                <Stack.Screen
+                    name="Novel"
+                    component={Novel}
+                    options={{
+                        headerTitle: "",
+                        headerShown: true,
+                        headerTransparent: true,
+                        headerTintColor: "white",
+                        ...TransitionPresets.RevealFromBottomAndroid,
+                    }}
+                />
+                <Stack.Screen
+                    name="Chapter"
+                    component={Chapter}
+                    options={{ ...TransitionPresets.SlideFromRightIOS }}
+                />
+                <Stack.Screen name="MoreStack" component={MoreStack} />
+                <Stack.Screen name="Extension" component={Extension} />
+            </Stack.Navigator>
+        </View>
+    );
+};
+
+export default MainNavigator;

src/Navigators/More.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+
+import About from "../Screens/More/About";
+import Settings from "../Screens/More/Settings";
+import Trackers from "../Screens/More/Trackers";
+import { View } from "react-native";
+import { useTheme } from "../Hooks/useTheme";
+
+const Stack = createStackNavigator();
+
+const stackNavigatorConfig = { headerShown: false };
+
+const MoreStack = () => {
+    const theme = useTheme();
+
+    return (
+        <View style={{ flex: 1, backgroundColor: theme.colorPrimary }}>
+            <Stack.Navigator screenOptions={stackNavigatorConfig}>
+                <Stack.Screen name="Settings" component={Settings} />
+                <Stack.Screen name="Trackers" component={Trackers} />
+                <Stack.Screen name="About" component={About} />
+            </Stack.Navigator>
+        </View>
+    );
+};
+
+export default MoreStack;

src/components/Appbar.js

@@ -0,0 +1,141 @@
+import React, { useRef } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import {
+    TouchableRipple,
+    IconButton,
+    Appbar as MaterialAppbar,
+} from "react-native-paper";
+import Constants from "expo-constants";
+
+import { useNavigation } from "@react-navigation/native";
+import { useSelector } from "react-redux";
+
+export const Appbar = ({ title, onBackAction, style }) => {
+    const theme = useSelector((state) => state.themeReducer.theme);
+
+    return (
+        <MaterialAppbar.Header
+            style={[{ backgroundColor: theme.colorPrimary }, style]}
+        >
+            {onBackAction && (
+                <MaterialAppbar.BackAction onPress={onBackAction} />
+            )}
+            <MaterialAppbar.Content
+                title={title}
+                titleStyle={{ color: theme.textColorPrimary }}
+            />
+        </MaterialAppbar.Header>
+    );
+};
+
+export const SearchAppbar = ({
+    placeholder,
+    getSearchResults,
+    setSearchText,
+    searchText,
+    getNovels,
+    setLoading,
+    screen,
+    openWebView,
+}) => {
+    const searchRef = useRef(null);
+
+    const navigation = useNavigation();
+
+    const theme = useSelector((state) => state.themeReducer.theme);
+
+    return (
+        <TouchableRipple
+            borderless
+            onPress={() => searchRef.current.focus()}
+            style={[
+                styles.searchAppbarContainer,
+                { backgroundColor: theme.searchBarColor },
+            ]}
+        >
+            <View
+                style={{
+                    flex: 1,
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                }}
+            >
+                <View style={{ flex: 1, flexDirection: "row" }}>
+                    {screen === "Library" ? (
+                        <IconButton
+                            icon="magnify"
+                            color={theme.textColorSecondary}
+                            style={{ marginLeft: 0 }}
+                            size={23}
+                        />
+                    ) : (
+                        <IconButton
+                            icon="arrow-left"
+                            color={theme.textColorSecondary}
+                            style={{ marginLeft: 0 }}
+                            size={23}
+                            onPress={() => navigation.goBack()}
+                        />
+                    )}
+                    <TextInput
+                        ref={searchRef}
+                        style={{
+                            fontSize: 16,
+                            color: theme.textColorSecondary,
+                        }}
+                        placeholder={placeholder}
+                        placeholderTextColor={theme.textColorSecondary}
+                        onChangeText={(text) => {
+                            setSearchText(text);
+                            if (screen === "Library") {
+                                getSearchResults(text);
+                            }
+                        }}
+                        onSubmitEditing={() => {
+                            if (screen === "Extension") {
+                                getSearchResults(searchText);
+                            }
+                        }}
+                        defaultValue={searchText}
+                    />
+                </View>
+                {searchText !== "" && (
+                    <IconButton
+                        icon="close"
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={() => {
+                            setLoading?.(true);
+                            getNovels();
+                            setSearchText("");
+                        }}
+                    />
+                )}
+                {openWebView && (
+                    <IconButton
+                        icon="earth"
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={openWebView}
+                    />
+                )}
+            </View>
+        </TouchableRipple>
+    );
+};
+
+const styles = StyleSheet.create({
+    searchAppbarContainer: {
+        marginTop: Constants.statusBarHeight + 8,
+        height: 48,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        marginBottom: 12,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        elevation: 2,
+    },
+});

src/components/BottomSheetHandle.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { View } from "react-native";
+import { useSelector } from "react-redux";
+
+const BottomSheetHandle = () => {
+    const theme = useSelector((state) => state.themeReducer.theme);
+    return (
+        <>
+            <View
+                style={{
+                    backgroundColor: theme.textColorHintDark,
+                    height: 5,
+                    width: 30,
+                    borderRadius: 50,
+                    top: 10,
+                    alignSelf: "center",
+                }}
+            />
+        </>
+    );
+};
+
+export default BottomSheetHandle;

src/components/EmptyView.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+const EmptyView = ({ icon, description }) => {
+    const theme = useSelector((state) => state.themeReducer.theme);
+
+    return (
+        <View style={styles.emptyViewContainer}>
+            <Text
+                style={[
+                    styles.emptyViewIcon,
+                    { color: theme.textColorSecondary },
+                ]}
+            >
+                {icon}
+            </Text>
+            <Text
+                style={[
+                    styles.emptyViewText,
+                    { color: theme.textColorSecondary },
+                ]}
+            >
+                {description}
+            </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/List.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { List, Divider as PaperDivider } from "react-native-paper";
+
+const ListSection = ({ children }) => (
+    <List.Section style={styles.listSection}>{children}</List.Section>
+);
+
+const ListSubHeader = ({ children, theme }) => (
+    <List.Subheader
+        style={[styles.listSubHeader, { color: theme.colorAccentDark }]}
+    >
+        {children}
+    </List.Subheader>
+);
+
+const ListItem = ({ title, description, icon, onPress, theme, right }) => (
+    <List.Item
+        title={title}
+        titleStyle={{ color: theme.textColorPrimary }}
+        description={description}
+        descriptionStyle={{ color: theme.textColorSecondary }}
+        descriptionNumberOfLines={1}
+        left={() =>
+            icon && (
+                <List.Icon
+                    color={theme.colorAccentDark}
+                    icon={icon}
+                    style={{ marginVertical: 0 }}
+                />
+            )
+        }
+        right={() =>
+            right && (
+                <List.Icon
+                    color="#47a84a"
+                    icon={right}
+                    style={{ marginVertical: 0 }}
+                />
+            )
+        }
+        onPress={onPress}
+        rippleColor={theme.rippleColor}
+    />
+);
+
+const Divider = ({ theme }) => (
+    <PaperDivider
+        style={{
+            backgroundColor: theme.dividerColor,
+            height: 1,
+        }}
+    />
+);
+
+const InfoItem = ({ title, description, icon, onPress, theme, right }) => (
+    <List.Item
+        title={title}
+        titleStyle={{ color: theme.textColorSecondary, fontSize: 14 }}
+        titleNumberOfLines={5}
+        left={() =>
+            icon && (
+                <List.Icon
+                    color={theme.textColorSecondary}
+                    icon={icon}
+                    style={{ marginVertical: 0 }}
+                />
+            )
+        }
+    />
+);
+
+export { ListSection, ListSubHeader, ListItem, Divider, InfoItem };
+
+const styles = StyleSheet.create({
+    listSection: {
+        flex: 1,
+        marginVertical: 0,
+    },
+    listSubHeader: {
+        paddingBottom: 5,
+    },
+});

src/components/NewUpdateDialog.js

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { Portal, Modal, Button } from "react-native-paper";
+import * as Linking from "expo-linking";
+import { useTheme } from "../Hooks/useTheme";
+
+const NewUpdateDialog = ({ newVersion }) => {
+    const [newUpdateDialog, showNewUpdateDialog] = useState(true);
+
+    const theme = useTheme();
+
+    return (
+        <Portal>
+            <Modal
+                visible={newUpdateDialog}
+                onDismiss={() => showNewUpdateDialog(false)}
+                contentContainerStyle={[
+                    styles.containerStyle,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                <Text
+                    style={[
+                        styles.modalHeader,
+                        { color: theme.textColorPrimary },
+                    ]}
+                >
+                    {`New update available ${newVersion.tag_name}`}
+                </Text>
+                <Text style={{ color: theme.textColorSecondary, fontSize: 16 }}>
+                    {newVersion.body}
+                </Text>
+                <View
+                    style={{
+                        flexDirection: "row",
+                        marginTop: 30,
+                        justifyContent: "flex-end",
+                    }}
+                >
+                    <Button
+                        labelStyle={{
+                            color: theme.colorAccentDark,
+                            letterSpacing: 0,
+                            textTransform: "none",
+                        }}
+                        theme={{ colors: { primary: theme.colorAccentDark } }}
+                        onPress={() => showNewUpdateDialog(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        labelStyle={{
+                            color: theme.colorAccentDark,
+                            letterSpacing: 0,
+                            textTransform: "none",
+                        }}
+                        theme={{ colors: { primary: theme.colorAccentDark } }}
+                        onPress={() => Linking.openURL(newVersion.downloadUrl)}
+                    >
+                        Install
+                    </Button>
+                </View>
+            </Modal>
+        </Portal>
+    );
+};
+
+export default NewUpdateDialog;
+
+const styles = StyleSheet.create({
+    containerStyle: {
+        padding: 20,
+        margin: 20,
+        borderRadius: 6,
+    },
+    modalHeader: {
+        fontSize: 20,
+        marginBottom: 10,
+    },
+});

src/components/NovelCover.js

@@ -0,0 +1,274 @@
+import React from "react";
+import { StyleSheet, View, Text, ImageBackground, Image } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { TouchableRipple } from "react-native-paper";
+
+import { useSelector } from "react-redux";
+
+const NovelCover = ({ item, onPress, libraryStatus }) => {
+    const displayMode = useSelector(
+        (state) => state.settingsReducer.displayMode
+    );
+
+    const theme = useSelector((state) => state.themeReducer.theme);
+
+    const itemsPerRow = useSelector(
+        (state) => state.settingsReducer.itemsPerRow
+    );
+
+    const height = {
+        1: 550,
+        2: 280,
+        3: 180,
+        4: 140,
+        5: 100,
+        6: 80,
+        7: 70,
+        8: 58,
+        9: 55,
+        10: 50,
+    };
+
+    return displayMode !== 2 ? (
+        <View style={{ flex: 1 / itemsPerRow }}>
+            <TouchableRipple
+                borderless
+                centered
+                rippleColor={theme.rippleColor}
+                style={styles.opac}
+                onPress={onPress}
+            >
+                <>
+                    {item.novelCover && (
+                        <ImageBackground
+                            source={{ uri: item.novelCover }}
+                            style={{ height: height[itemsPerRow] }}
+                            imageStyle={[
+                                { borderRadius: 4 },
+                                libraryStatus && { opacity: 0.5 },
+                            ]}
+                            progressiveRenderingEnabled={true}
+                        >
+                            <View style={{ flexDirection: "row", margin: 4 }}>
+                                {item.chaptersDownloaded && (
+                                    <Text
+                                        style={[
+                                            {
+                                                flex: 0,
+                                                backgroundColor: "#47a84a",
+                                                color: "#FFFFFF",
+                                                borderTopLeftRadius: 4,
+                                                borderBottomLeftRadius: 4,
+                                                paddingTop: 2,
+                                                paddingHorizontal: 4,
+                                                alignSelf: "flex-start",
+                                                fontSize: 12,
+                                            },
+                                            !item.chaptersUnread && {
+                                                borderTopRightRadius: 4,
+                                                borderBottomRightRadius: 4,
+                                            },
+                                        ]}
+                                    >
+                                        {item.chaptersDownloaded}
+                                    </Text>
+                                )}
+                                {item.chaptersUnread && (
+                                    <Text
+                                        style={[
+                                            {
+                                                flex: 0,
+                                                backgroundColor: "#2979FF",
+                                                color: "#FFFFFF",
+                                                borderTopRightRadius: 4,
+                                                borderBottomRightRadius: 4,
+                                                paddingTop: 2,
+                                                paddingHorizontal: 4,
+                                                alignSelf: "flex-start",
+                                                fontSize: 12,
+                                            },
+                                            !item.chaptersDownloaded && {
+                                                borderTopLeftRadius: 4,
+                                                borderBottomLeftRadius: 4,
+                                            },
+                                        ]}
+                                    >
+                                        {item.chaptersUnread}
+                                    </Text>
+                                )}
+                            </View>
+                            {displayMode === 0 && (
+                                <View style={styles.titleContainer}>
+                                    <LinearGradient
+                                        colors={[
+                                            "transparent",
+                                            "rgba(0,0,0,0.6)",
+                                        ]}
+                                        style={styles.linearGradient}
+                                    >
+                                        <Text
+                                            numberOfLines={2}
+                                            style={[
+                                                styles.title,
+                                                {
+                                                    color:
+                                                        "rgba(255,255,255,1)",
+                                                },
+                                            ]}
+                                        >
+                                            {item.novelName}
+                                        </Text>
+                                    </LinearGradient>
+                                </View>
+                            )}
+                        </ImageBackground>
+                    )}
+                    {displayMode === 1 && (
+                        <Text
+                            numberOfLines={2}
+                            style={[
+                                styles.title,
+                                {
+                                    color: theme.textColorPrimary,
+                                    padding: 4,
+                                },
+                            ]}
+                        >
+                            {item.novelName}
+                        </Text>
+                    )}
+                </>
+            </TouchableRipple>
+        </View>
+    ) : (
+        <TouchableRipple
+            borderless
+            centered
+            rippleColor={theme.rippleColor}
+            style={styles.listView}
+            onPress={onPress}
+        >
+            <View
+                style={{
+                    flex: 1,
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                }}
+            >
+                <View
+                    style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                    }}
+                >
+                    <Image
+                        source={{ uri: item.novelCover }}
+                        style={styles.extensionIcon}
+                    />
+                    <Text
+                        style={{
+                            color: theme.textColorPrimary,
+                            marginLeft: 16,
+                            fontSize: 15,
+                            paddingRight: 8,
+                        }}
+                        numberOfLines={1}
+                    >
+                        {item.novelName}
+                    </Text>
+                </View>
+                <View
+                    style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                    }}
+                >
+                    {item.chaptersDownloaded && (
+                        <Text
+                            style={[
+                                {
+                                    backgroundColor: "#47a84a",
+                                    color: "#FFFFFF",
+                                    borderTopLeftRadius: 4,
+                                    borderBottomLeftRadius: 4,
+                                    paddingTop: 2,
+                                    paddingHorizontal: 4,
+                                    fontSize: 12,
+                                },
+                                !item.chaptersUnread && {
+                                    borderTopRightRadius: 4,
+                                    borderBottomRightRadius: 4,
+                                },
+                            ]}
+                        >
+                            {item.chaptersDownloaded}
+                        </Text>
+                    )}
+                    {item.chaptersUnread && (
+                        <Text
+                            style={[
+                                {
+                                    backgroundColor: "#2979FF",
+                                    color: "#FFFFFF",
+                                    borderTopRightRadius: 4,
+                                    borderBottomRightRadius: 4,
+                                    paddingTop: 2,
+                                    paddingHorizontal: 4,
+                                    fontSize: 12,
+                                },
+                                !item.chaptersDownloaded && {
+                                    borderTopLeftRadius: 4,
+                                    borderBottomLeftRadius: 4,
+                                },
+                            ]}
+                        >
+                            {item.chaptersUnread}
+                        </Text>
+                    )}
+                </View>
+            </View>
+        </TouchableRipple>
+    );
+};
+
+export default NovelCover;
+
+const styles = StyleSheet.create({
+    // logo: {
+    //     height: 180,
+    // },
+    titleContainer: {
+        flex: 1,
+        justifyContent: "flex-end",
+        borderRadius: 4,
+    },
+    title: {
+        fontFamily: "pt-sans-bold",
+        fontSize: 14,
+        padding: 8,
+    },
+
+    linearGradient: {
+        bottom: -1,
+        borderRadius: 4,
+    },
+    opac: {
+        paddingHorizontal: 4.5,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    extensionIcon: {
+        width: 42,
+        height: 42,
+        borderRadius: 4,
+    },
+    listView: {
+        flex: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 4,
+    },
+});

src/components/RadioButton.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { RadioButton as MaterialRadioButton } from "react-native-paper";
+
+export const RadioButtonGroup = ({ children, value, onValueChange }) => (
+    <MaterialRadioButton.Group onValueChange={onValueChange} value={value}>
+        {children}
+    </MaterialRadioButton.Group>
+);
+
+export const RadioButton = ({ value, label, theme }) => (
+    <View style={styles.radioButtonContainer}>
+        <MaterialRadioButton
+            value={value}
+            color={theme.colorAccentDark}
+            uncheckedColor={theme.textColorSecondary}
+        />
+        <Text
+            style={[styles.radioButtonLabel, { color: theme.textColorPrimary }]}
+        >
+            {label}
+        </Text>
+    </View>
+);
+
+const styles = StyleSheet.create({
+    radioButtonContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 8,
+    },
+    radioButtonLabel: {
+        marginLeft: 16,
+        fontSize: 16,
+    },
+});

src/components/Searchbar.js

@@ -0,0 +1,93 @@
+import React, { useRef } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import { TouchableRipple, IconButton } from "react-native-paper";
+import Constants from "expo-constants";
+
+export const Searchbar = ({
+    theme,
+    placeholder,
+    searchText,
+    left,
+    onPressLeft,
+    right,
+    onPressRight,
+    clearSearchbar,
+    onChangeText,
+    onSubmitEditing,
+}) => {
+    const searchRef = useRef(null);
+
+    return (
+        <TouchableRipple
+            borderless
+            onPress={() => searchRef.current.focus()}
+            style={[
+                styles.searchAppbarContainer,
+                { backgroundColor: theme.searchBarColor },
+            ]}
+        >
+            <View style={styles.container}>
+                <View style={{ flex: 1, flexDirection: "row" }}>
+                    {left && (
+                        <IconButton
+                            icon={left}
+                            color={theme.textColorSecondary}
+                            style={{ marginLeft: 0 }}
+                            size={23}
+                            onPress={onPressLeft}
+                        />
+                    )}
+                    <TextInput
+                        ref={searchRef}
+                        style={{
+                            fontSize: 16,
+                            color: theme.textColorSecondary,
+                        }}
+                        placeholder={placeholder}
+                        placeholderTextColor={theme.textColorSecondary}
+                        onChangeText={onChangeText}
+                        onSubmitEditing={onSubmitEditing}
+                        defaultValue={searchText}
+                    />
+                </View>
+                {searchText !== "" && (
+                    <IconButton
+                        icon="close"
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={clearSearchbar}
+                    />
+                )}
+                {right && (
+                    <IconButton
+                        icon="earth"
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={onPressRight}
+                    />
+                )}
+            </View>
+        </TouchableRipple>
+    );
+};
+
+const styles = StyleSheet.create({
+    searchAppbarContainer: {
+        marginTop: Constants.statusBarHeight + 8,
+        height: 48,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        marginBottom: 12,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        elevation: 2,
+    },
+    container: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});

src/components/chapter/BottomSheet.js

@@ -1,129 +0,0 @@
-import React from "react";
-
-import { Animated, StyleSheet, View, Text, Dimensions } from "react-native";
-import { ToggleButton } from "react-native-paper";
-import Slider from "@react-native-community/slider";
-import Bottomsheet from "rn-sliding-up-panel";
-
-import { useSelector } from "react-redux";
-
-import { saveReaderTheme } from "../../services/asyncStorage";
-
-const ChapterBottomSheet = ({
-    bottomSheetRef,
-    setSize,
-    size,
-    readerTheme,
-    setReaderTheme,
-}) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    return (
-        <Bottomsheet
-            animatedValue={new Animated.Value(0)}
-            ref={bottomSheetRef}
-            draggableRange={{ top: 200, bottom: 0 }}
-            snappingPoints={[0, 200]}
-            showBackdrop={false}
-        >
-            <View
-                style={[
-                    styles.contentContainer,
-                    {
-                        backgroundColor: "rgba(0,0,0,0.4)",
-                    },
-                ]}
-            >
-                <View
-                    style={{
-                        backgroundColor: theme.textColorHintDark,
-                        height: 5,
-                        width: 30,
-                        borderRadius: 50,
-                        top: 10,
-                        alignSelf: "center",
-                    }}
-                />
-
-                <View style={{ flex: 1, alignItems: "center", paddingTop: 30 }}>
-                    <Text
-                        style={{
-                            color: theme.textColorPrimaryDark,
-                            fontWeight: "bold",
-                        }}
-                    >
-                        Text Size
-                    </Text>
-                    <Slider
-                        style={{
-                            width: Dimensions.get("window").width,
-                            height: 40,
-                        }}
-                        value={size}
-                        minimumValue={12}
-                        maximumValue={20}
-                        step={4}
-                        minimumTrackTintColor={theme.colorAccentDark}
-                        maximumTrackTintColor="#000000"
-                        thumbTintColor={theme.colorAccentDark}
-                        onValueChange={(value) => setSize(value)}
-                    />
-                    <Text
-                        style={{
-                            color: theme.textColorPrimaryDark,
-                            fontWeight: "bold",
-                        }}
-                    >
-                        Reader Theme
-                    </Text>
-                    <ToggleButton.Row
-                        onValueChange={(value) => {
-                            setReaderTheme(value);
-                            saveReaderTheme(value);
-                        }}
-                        value={readerTheme}
-                        style={{ marginTop: 10 }}
-                    >
-                        <ToggleButton
-                            icon="format-text"
-                            color="white"
-                            value={1}
-                            style={{
-                                backgroundColor: "black",
-                                marginHorizontal: 10,
-                            }}
-                        />
-                        <ToggleButton
-                            icon="format-text"
-                            color="black"
-                            value={2}
-                            style={{
-                                backgroundColor: "white",
-                                marginHorizontal: 10,
-                            }}
-                        />
-                        <ToggleButton
-                            icon="format-text"
-                            color="black"
-                            value={3}
-                            style={{
-                                backgroundColor: "#F4ECD8",
-                                marginHorizontal: 10,
-                            }}
-                        />
-                    </ToggleButton.Row>
-                </View>
-            </View>
-        </Bottomsheet>
-    );
-};
-
-export default ChapterBottomSheet;
-
-const styles = StyleSheet.create({
-    contentContainer: {
-        flex: 1,
-        // paddingTop: ,
-        // alignItems: "center",
-    },
-});

src/components/common/Appbar.js

@@ -1,19 +0,0 @@
-import React from "react";
-
-import { Appbar } from "react-native-paper";
-
-import { useSelector } from "react-redux";
-
-export const CustomAppbar = ({ title, onBackAction }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    return (
-        <Appbar.Header style={{ backgroundColor: theme.colorDarkPrimary }}>
-            {onBackAction && <Appbar.BackAction onPress={onBackAction} />}
-            <Appbar.Content
-                title={title}
-                titleStyle={{ color: theme.textColorPrimaryDark }}
-            />
-        </Appbar.Header>
-    );
-};

src/components/common/NovelCover.js

@@ -1,99 +0,0 @@
-import React, { useState } from "react";
-import { StyleSheet, View, Text, ImageBackground } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { TouchableRipple } from "react-native-paper";
-import { theme } from "../../theme/theme";
-
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-const NovelCover = ({ item, onPress, libraryStatus }) => {
-    const [mode, setMode] = useState();
-    AsyncStorage.getItem("@display_mode").then((value) => setMode(value));
-
-    return (
-        <View style={{ flex: 1 / 3 }}>
-            <TouchableRipple
-                borderless
-                centered
-                rippleColor={theme.rippleColorDark}
-                style={styles.opac}
-                onPress={onPress}
-            >
-                <>
-                    {item.novelCover ? (
-                        <ImageBackground
-                            source={{
-                                uri: item.novelCover,
-                            }}
-                            style={styles.logo}
-                            imageStyle={[
-                                { borderRadius: 4 },
-                                libraryStatus && { opacity: 0.4 },
-                            ]}
-                            progressiveRenderingEnabled={true}
-                        >
-                            {(!mode || mode === "compact") && (
-                                <View style={styles.titleContainer}>
-                                    <LinearGradient
-                                        colors={[
-                                            "transparent",
-                                            "rgba(0,0,0,0.6)",
-                                        ]}
-                                        style={styles.linearGradient}
-                                    >
-                                        <Text
-                                            numberOfLines={2}
-                                            style={styles.title}
-                                        >
-                                            {item.novelName}
-                                        </Text>
-                                    </LinearGradient>
-                                </View>
-                            )}
-                        </ImageBackground>
-                    ) : (
-                        <View>
-                            <Text style={{ color: "white" }}>HAHAHAHAH</Text>
-                        </View>
-                    )}
-                    {mode === "comfortable" && (
-                        <Text numberOfLines={2} style={styles.title}>
-                            {item.novelName}
-                        </Text>
-                    )}
-                </>
-            </TouchableRipple>
-        </View>
-    );
-};
-
-export default NovelCover;
-
-const styles = StyleSheet.create({
-    logo: {
-        height: 173,
-        borderRadius: 4,
-    },
-    titleContainer: {
-        flex: 1,
-        justifyContent: "flex-end",
-        borderRadius: 4,
-    },
-    title: {
-        fontFamily: "pt-sans-bold",
-        fontSize: 14,
-        color: "white",
-        padding: 8,
-        textShadowColor: "rgba(0, 0, 0, 0.75)",
-        textShadowOffset: { width: -1, height: 1 },
-        textShadowRadius: 10,
-    },
-    linearGradient: {
-        borderRadius: 4,
-    },
-    opac: {
-        paddingHorizontal: 3.5,
-        paddingVertical: 3.5,
-        borderRadius: 4,
-    },
-});

src/components/common/SearchBar.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { TextInput, StyleSheet } from "react-native";
-import { theme } from "../../theme/theme";
-
-const SearchBar = ({ searchText, onChangeText, onSubmitEditing }) => (
-    <TextInput
-        autoFocus
-        placeholder="Search..."
-        defaultValue={searchText}
-        style={styles.searchBar}
-        placeholderTextColor={theme.textColorHintDark}
-        blurOnSubmit={true}
-        onChangeText={onChangeText}
-        onSubmitEditing={onSubmitEditing}
-    />
-);
-
-export default SearchBar;
-
-const styles = StyleSheet.create({
-    searchBar: {
-        flex: 1,
-        fontSize: 18,
-        color: "white",
-        marginLeft: 15,
-    },
-});

src/components/novel/ChapterCard.js

@@ -1,115 +0,0 @@
-import React, { useState } from "react";
-
-import { View, Text, ActivityIndicator } from "react-native";
-import { TouchableRipple, IconButton } from "react-native-paper";
-
-import { useSelector } from "react-redux";
-
-const ChapterCard = ({
-    navigation,
-    novelUrl,
-    chapter,
-    downloadChapter,
-    extensionId,
-    downloading,
-}) => {
-    const [downloaded, setDownloaded] = useState(chapter.downloaded);
-
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    return (
-        <TouchableRipple
-            style={{
-                paddingHorizontal: 15,
-                paddingVertical: 7,
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                // borderTopColor: "rgba(255,255,255,.12)",
-                // borderTopWidth: 1,
-            }}
-            onPress={() =>
-                navigation.navigate("ChapterItem", {
-                    chapterUrl: chapter.chapterUrl,
-                    extensionId,
-                    novelUrl: novelUrl,
-                    chapterName: chapter.chapterName,
-                })
-            }
-            rippleColor={theme.rippleColorDark}
-        >
-            <>
-                <View>
-                    <Text
-                        style={[
-                            {
-                                color: theme.textColorPrimaryDark,
-                            },
-                            chapter.read === 1 && {
-                                color: theme.textColorHintDark,
-                            },
-                        ]}
-                        numberOfLines={1}
-                    >
-                        {chapter.chapterName.substring(0, 50)}
-                    </Text>
-                    {chapter.releaseDate && (
-                        <Text
-                            style={[
-                                {
-                                    color: theme.textColorSecondaryDark,
-                                    marginTop: 5,
-                                    fontSize: 12,
-                                },
-                                chapter.read === 1 && {
-                                    color: theme.textColorHintDark,
-                                },
-                            ]}
-                            numberOfLines={1}
-                        >
-                            {chapter.releaseDate}
-                        </Text>
-                    )}
-                </View>
-                <View>
-                    {downloading.downloading &&
-                    downloading.chapterUrl === chapter.chapterUrl ? (
-                        <ActivityIndicator
-                            color={theme.textColorHintDark}
-                            size={25}
-                            style={{ margin: 3.5, padding: 5 }}
-                        />
-                    ) : (
-                        <IconButton
-                            icon={
-                                downloaded
-                                    ? "check-circle"
-                                    : "arrow-down-circle-outline"
-                            }
-                            animated
-                            color={
-                                downloaded
-                                    ? theme.textColorPrimaryDark
-                                    : theme.textColorHintDark
-                            }
-                            size={25}
-                            onPress={() => {
-                                downloadChapter(
-                                    downloaded ? 1 : 0,
-                                    extensionId,
-                                    novelUrl,
-                                    chapter.chapterUrl,
-                                    chapter.chapterName
-                                );
-                                setDownloaded(!downloaded);
-                            }}
-                            style={{ margin: 2 }}
-                        />
-                    )}
-                </View>
-            </>
-        </TouchableRipple>
-    );
-};
-
-export default ChapterCard;

src/components/novel/NovelHeader.js

@@ -1,367 +0,0 @@
-import React, { useState } from "react";
-import {
-    View,
-    Text,
-    ImageBackground,
-    StyleSheet,
-    Image,
-    FlatList,
-    Share,
-} from "react-native";
-import { TouchableRipple, IconButton, Button, Chip } from "react-native-paper";
-import { useNavigation } from "@react-navigation/native";
-import * as WebBrowser from "expo-web-browser";
-
-import { LinearGradient } from "expo-linear-gradient";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-
-import { connect } from "react-redux";
-const NovelInfoHeader = ({
-    item,
-    novel,
-    noOfChapters,
-    insertNovelInLib,
-    loading,
-    navigatingFrom,
-    libraryStatus,
-    bottomSheetRef,
-    theme,
-}) => {
-    const navigation = useNavigation();
-
-    const [more, setMore] = useState(navigatingFrom === 2 ? true : false);
-
-    const renderGenreChip = ({ item }) => (
-        <Text
-            style={[
-                styles.genre,
-                {
-                    color: theme.colorAccentDark,
-                    borderColor: theme.colorAccentDark,
-                    backgroundColor: theme.colorDarkPrimary,
-                },
-            ]}
-        >
-            {item}
-        </Text>
-    );
-
-    return (
-        <>
-            <ImageBackground
-                source={{
-                    uri: item.novelCover,
-                }}
-                style={styles.background}
-            >
-                <LinearGradient
-                    colors={["rgba(0,0,0,0.2)", theme.colorDarkPrimaryDark]}
-                    style={styles.linearGradient}
-                >
-                    <View style={styles.detailsContainer}>
-                        <View>
-                            <Image
-                                source={{
-                                    uri: item.novelCover,
-                                }}
-                                style={styles.logo}
-                            />
-                        </View>
-                        <View style={styles.nameContainer}>
-                            <Text
-                                numberOfLines={2}
-                                style={[
-                                    styles.name,
-                                    {
-                                        color: theme.textColorPrimaryDark,
-                                    },
-                                ]}
-                            >
-                                {item.novelName}
-                            </Text>
-                            {!loading && (
-                                <>
-                                    <Text
-                                        style={{
-                                            color: theme.textColorSecondaryDark,
-                                            marginVertical: 3,
-                                            fontSize: 14,
-                                            fontWeight: "bold",
-                                        }}
-                                    >
-                                        {novel["Author(s)"] &&
-                                            novel["Author(s)"].replace(
-                                                ",",
-                                                ", "
-                                            )}
-                                    </Text>
-
-                                    <Text
-                                        style={{
-                                            color: theme.textColorSecondaryDark,
-                                            marginVertical: 3,
-                                            fontSize: 14,
-                                        }}
-                                        numberOfLines={1}
-                                    >
-                                        {novel["Status"]}
-                                    </Text>
-                                    <Text
-                                        style={{
-                                            color: theme.textColorSecondaryDark,
-                                            // marginVertical: 3,
-                                            fontSize: 14,
-                                        }}
-                                        numberOfLines={1}
-                                    >
-                                        {novel.source}
-                                    </Text>
-                                </>
-                            )}
-                        </View>
-                    </View>
-                </LinearGradient>
-            </ImageBackground>
-            {!loading && (
-                <>
-                    <View
-                        style={{
-                            flex: 1,
-                            flexDirection: "row",
-                            alignItems: "center",
-                        }}
-                    >
-                        <Chip
-                            mode="outlined"
-                            icon={() => (
-                                <MaterialCommunityIcons
-                                    name={
-                                        libraryStatus
-                                            ? "heart"
-                                            : "heart-outline"
-                                    }
-                                    size={21}
-                                    color={theme.colorAccentDark}
-                                />
-                            )}
-                            onPress={() => insertNovelInLib()}
-                            style={[
-                                {
-                                    backgroundColor: theme.colorDarkPrimaryDark,
-                                    marginRight: 2,
-                                    // borderColor: "rgba(255,255,255,0.121)",
-                                    // borderWidth: 1,
-                                    justifyContent: "center",
-                                    height: 30,
-                                    alignItems: "center",
-                                    marginLeft: 15,
-                                    paddingHorizontal: 3,
-                                    shadowOpacity: 0,
-                                    shadowOffset: 0,
-                                },
-                                // libraryStatus && {
-                                //     backgroundColor: "rgba(41,121,255,0.38)",
-                                // },
-                            ]}
-                            textStyle={{
-                                fontWeight: "bold",
-                                color: theme.textColorPrimaryDark,
-                            }}
-                        >
-                            {libraryStatus ? "In Library" : "Add to library"}
-                        </Chip>
-
-                        <IconButton
-                            onPress={() =>
-                                WebBrowser.openBrowserAsync(
-                                    novel.sourceUrl && novel.sourceUrl
-                                )
-                            }
-                            icon="earth"
-                            color={theme.colorAccentDark}
-                            size={21}
-                        />
-                        <IconButton
-                            onPress={() =>
-                                Share.share({
-                                    message: novel.sourceUrl,
-                                })
-                            }
-                            icon="share-variant"
-                            color={theme.colorAccentDark}
-                            size={21}
-                        />
-                    </View>
-                    {novel.novelSummary !== "" && (
-                        <View
-                            style={{
-                                paddingHorizontal: 15,
-                                marginBottom: 10,
-                                // marginTop: 5,
-                            }}
-                        >
-                            <Text
-                                style={{
-                                    color: theme.textColorPrimaryDark,
-                                    marginTop: 5,
-                                    paddingVertical: 5,
-                                    fontSize: 15,
-                                    fontWeight: "bold",
-                                }}
-                            >
-                                About
-                            </Text>
-                            <Text
-                                style={{
-                                    color: theme.textColorSecondaryDark,
-                                    lineHeight: 20,
-                                }}
-                                numberOfLines={more ? 100 : 2}
-                                onPress={() => setMore(!more)}
-                                ellipsizeMode="clip"
-                            >
-                                {novel.novelSummary}
-                            </Text>
-                            <Text
-                                style={{
-                                    color: theme.colorAccentDark,
-                                    fontWeight: "bold",
-                                    position: "absolute",
-                                    bottom: 0,
-                                    right: 15,
-                                    backgroundColor: theme.colorDarkPrimaryDark,
-                                    paddingLeft: 5,
-                                }}
-                                onPress={() => setMore(!more)}
-                            >
-                                {more ? "Less " : "More "}
-                            </Text>
-                        </View>
-                    )}
-
-                    <FlatList
-                        style={
-                            novel.novelSummary === ""
-                                ? { marginTop: 20 }
-                                : { marginTop: 10 }
-                        }
-                        contentContainerStyle={{
-                            paddingHorizontal: 15,
-                            paddingBottom: 15,
-                        }}
-                        horizontal
-                        data={novel["Genre(s)"] && novel["Genre(s)"].split(",")}
-                        keyExtractor={(item) => item}
-                        renderItem={renderGenreChip}
-                        showsHorizontalScrollIndicator={false}
-                    />
-
-                    <Button
-                        color="white"
-                        style={{
-                            backgroundColor: theme.colorAccentDark,
-                            marginHorizontal: 15,
-                            marginTop: 8,
-                            marginBottom: 15,
-                        }}
-                        uppercase={false}
-                        labelStyle={{ letterSpacing: 0 }}
-                        onPress={() =>
-                            navigation.navigate("ChapterItem", {
-                                chapterUrl: novel.lastRead,
-                                novelUrl: novel.novelUrl,
-                                extensionId: novel.extensionId,
-                                chapterName: novel.lastReadName,
-                            })
-                        }
-                    >
-                        {novel.unread && novel.unread === 1
-                            ? `Start reading ${novel.lastReadName}`
-                            : `Continue reading ${novel.lastReadName}`}
-                    </Button>
-
-                    <TouchableRipple
-                        style={{
-                            flex: 1,
-                            flexDirection: "row",
-                            justifyContent: "space-between",
-                            alignItems: "center",
-                            paddingRight: 12.5,
-                        }}
-                        onPress={() =>
-                            bottomSheetRef.current.show({ velocity: -1.5 })
-                        }
-                        rippleColor={theme.rippleColorDark}
-                    >
-                        <>
-                            <Text
-                                style={{
-                                    color: theme.textColorPrimaryDark,
-                                    paddingHorizontal: 15,
-                                    paddingVertical: 5,
-                                    fontSize: 16,
-                                    fontWeight: "bold",
-                                }}
-                            >
-                                {noOfChapters + "  Chapters  "}
-                            </Text>
-                            <IconButton
-                                icon="filter-variant"
-                                color={theme.textColorPrimaryDark}
-                                size={24}
-                            />
-                        </>
-                    </TouchableRipple>
-                </>
-            )}
-        </>
-    );
-};
-
-const mapStateToProps = (state) => ({
-    theme: state.themeReducer.theme,
-});
-
-export default connect(mapStateToProps)(NovelInfoHeader);
-
-const styles = StyleSheet.create({
-    nameContainer: {
-        flex: 1,
-        marginHorizontal: 15,
-        paddingTop: 10,
-    },
-    background: {
-        height: 285,
-        // backgroundColor: theme.colorDarkPrimaryDark,
-    },
-    linearGradient: {
-        // flex: 1,
-        height: 286,
-    },
-    detailsContainer: {
-        flex: 1,
-        flexDirection: "row",
-        margin: 15,
-        paddingTop: 90,
-    },
-    logo: {
-        height: 160,
-        width: 110,
-        margin: 3.2,
-        borderRadius: 6,
-    },
-    genre: {
-        borderRadius: 50,
-        borderWidth: 1,
-        paddingHorizontal: 10,
-        marginHorizontal: 2,
-        fontSize: 13,
-        paddingVertical: 2,
-        justifyContent: "center",
-        flex: 1,
-    },
-    name: {
-        fontWeight: "bold",
-        fontSize: 18,
-    },
-});

src/components/settings/Checkbox.js

@@ -1,35 +0,0 @@
-import React, { useState } from "react";
-import { Checkbox } from "react-native-paper";
-import { useSelector } from "react-redux";
-
-export const DisplayCheckbox = ({ displayMode, onPress, value }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    return (
-        <Checkbox.Item
-            label={value.charAt(0).toUpperCase() + value.slice(1)}
-            labelStyle={{ color: theme.textColorPrimaryDark }}
-            status={displayMode === value ? "checked" : "unchecked"}
-            mode="ios"
-            uncheckedColor={theme.textColorSecondaryDark}
-            color={theme.colorAccentDark}
-            onPress={onPress}
-        />
-    );
-};
-
-export const ThemeCheckbox = ({ onPress, label, checked }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    return (
-        <Checkbox.Item
-            label={label}
-            labelStyle={{ color: theme.textColorPrimaryDark }}
-            status={checked ? "checked" : "unchecked"}
-            mode="ios"
-            uncheckedColor={theme.textColorSecondaryDark}
-            color={theme.colorAccentDark}
-            onPress={onPress}
-        />
-    );
-};

src/database/DBHelper.js

@@ -0,0 +1,55 @@
+import * as SQLite from "expo-sqlite";
+import {
+    createNovelTableQuery,
+    createUrlIndexQuery,
+    createLibraryIndexQuery,
+} from "./tables/NovelTable";
+import {
+    createChapterTableQuery,
+    createNovelIdIndexQuery,
+    createUnreadChaptersIndexQuery,
+} from "./tables/ChapterTable";
+import {
+    createHistoryTableQuery,
+    createChapterIdIndexQuery,
+} from "./tables/HistoryTable";
+import { createDownloadTableQuery } from "./tables/DownloadTable";
+import {
+    createUpdatesTableQuery,
+    updatesSeedDataQuery,
+} from "./tables/UpdateTable";
+
+/**
+ * Database Version = 2
+ */
+
+const dbName = "lnreader.db";
+
+const db = SQLite.openDatabase(dbName);
+
+export const createDB = () => {
+    db.transaction((tx) => {
+        tx.executeSql(createNovelTableQuery);
+        tx.executeSql(createChapterTableQuery);
+        tx.executeSql(createHistoryTableQuery);
+        tx.executeSql(createDownloadTableQuery);
+        tx.executeSql(createUpdatesTableQuery);
+
+        //Db indexes
+        tx.executeSql(createUrlIndexQuery);
+        tx.executeSql(createLibraryIndexQuery);
+        tx.executeSql(createNovelIdIndexQuery);
+        tx.executeSql(createUnreadChaptersIndexQuery);
+        tx.executeSql(createChapterIdIndexQuery);
+    });
+};
+
+export const deleteDb = () => {
+    db.transaction((tx) => {
+        tx.executeSql("DROP TABLE novels");
+        tx.executeSql("DROP TABLE chapters");
+        tx.executeSql("DROP TABLE history");
+        tx.executeSql("DROP TABLE downloads");
+        tx.executeSql("DROP TABLE updates");
+    });
+};

src/database/queries/ChapterQueries.js

@@ -0,0 +1,203 @@
+import * as SQLite from "expo-sqlite";
+const db = SQLite.openDatabase("lnreader.db");
+
+const insertChaptersQuery = `INSERT INTO chapters (chapterUrl, chapterName, releaseDate, novelId) values (?, ?, ?, ?)`;
+
+export const insertChapters = async (novelId, chapters) => {
+    db.transaction((tx) => {
+        chapters.map(
+            (chapter) =>
+                tx.executeSql(
+                    insertChaptersQuery,
+                    [
+                        chapter.chapterUrl,
+                        chapter.chapterName,
+                        chapter.releaseDate,
+                        novelId,
+                    ],
+                    (txObj, res) => {},
+                    (txObj, error) =>
+                        console.log(
+                            "Error ",
+                            error,
+                            " Chapter URL: ",
+                            chapter.chapterUrl,
+                            " Novel ID ",
+                            novelId
+                        )
+                ),
+            (txObj, res) => {
+                console.log("Success");
+            },
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+const getChaptersQuery = (sort, filter) =>
+    `SELECT * FROM chapters WHERE novelId = ? ${filter ?? ""} ${
+        sort ?? "ORDER BY chapterId ASC"
+    }`;
+
+export const getChapters = (novelId, sort, filter) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                getChaptersQuery(sort, filter),
+                [novelId],
+                (txObj, { rows: { _array } }) => {
+                    resolve(_array);
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+const getChapterQuery = `SELECT * FROM downloads WHERE downloadChapterId = ?`;
+
+export const getChapter = async (chapterId) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                getChapterQuery,
+                [chapterId],
+                (tx, results) => {
+                    resolve(results.rows.item(0));
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+const markChapterReadQuery = `UPDATE chapters SET \`read\` = 1 WHERE chapterId = ?`;
+
+export const markChapterRead = async (chapterId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            markChapterReadQuery,
+            [chapterId],
+            (tx, res) => {},
+            (tx, error) => console.log(error)
+        );
+    });
+};
+
+const isChapterDownloadedQuery = `SELECT * FROM downloads WHERE downloadChapterId=?`;
+
+export const isChapterDownloaded = async (chapterId) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                isChapterDownloadedQuery,
+                [chapterId],
+                (txObj, res) => {
+                    if (res.rows.length !== 0) {
+                        resolve(true);
+                    } else {
+                        resolve(false);
+                    }
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+const downloadChapterQuery = `INSERT INTO downloads (downloadChapterId, chapterName, chapterText, prevChapter, nextChapter) VALUES (?, ?, ?, ?, ?)`;
+
+export const downloadChapter = async (
+    extensionId,
+    novelUrl,
+    chapterUrl,
+    chapterId
+) => {
+    const downloadUrl = `https://lnreader-extensions.vercel.app/api/${extensionId}/novel/${novelUrl}${chapterUrl}`;
+
+    // console.log(downloadUrl);
+
+    const response = await fetch(downloadUrl);
+    const chapter = await response.json();
+
+    db.transaction((tx) => {
+        tx.executeSql(
+            `UPDATE chapters SET downloaded = 1 WHERE chapterId = ?`,
+            [chapterId]
+        );
+        tx.executeSql(
+            downloadChapterQuery,
+            [
+                chapterId,
+                chapter.chapterName,
+                chapter.chapterText,
+                chapter.prevChapter,
+                chapter.nextChapter,
+            ],
+            (tx, res) =>
+                console.log(`Downloaded Chapter ${chapter.chapterUrl}`),
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+export const deleteChapter = async (chapterId) => {
+    const updateIsDownloadedQuery = `UPDATE chapters SET downloaded = 0 WHERE chapterId=?`;
+    const deleteChapterQuery = `DELETE FROM downloads WHERE downloadChapterId=?`;
+
+    db.transaction((tx) => {
+        tx.executeSql(
+            updateIsDownloadedQuery,
+            [chapterId],
+            (tx, res) => console.log(`Chaptermarked not downapdeod deleted`),
+            (txObj, error) => console.log("Error ", error)
+        );
+        tx.executeSql(
+            deleteChapterQuery,
+            [chapterId],
+            (tx, res) => console.log(`Chapter deleted`),
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+// export const deleteAllChapters = async (novelId) => {
+//     const updateIsDownloadedQuery = `UPDATE chapters SET downloaded = 0 WHERE novelId=?`;
+//     const deleteChapterQuery = `DELETE FROM downloads WHERE downloadChapterId=?`;
+
+//     db.transaction((tx) => {
+//         tx.executeSql(
+//             updateIsDownloadedQuery,
+//             [chapterId],
+//             (tx, res) => console.log(`Chaptermarked not downapdeod deleted`),
+//             (txObj, error) => console.log("Error ", error)
+//         );
+//         tx.executeSql(
+//             deleteChapterQuery,
+//             [chapterId],
+//             (tx, res) => console.log(`Chapter deleted`),
+//             (txObj, error) => console.log("Error ", error)
+//         );
+//     });
+// };
+
+const getLastReadChapterQuery = `
+    SELECT chapters.*
+    FROM history
+    JOIN chapters
+    ON history.historyChapterId = chapters.chapterId
+    WHERE history.historyNovelId = ?
+`;
+
+export const getLastReadChapter = async (novelId) => {
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            tx.executeSql(
+                getLastReadChapterQuery,
+                [novelId],
+                (tx, { rows }) => resolve(rows.item(0)),
+                (txObj, error) => console.log("Error ", error)
+            );
+        });
+    });
+};

src/database/queries/HistoryQueries.js

@@ -0,0 +1,56 @@
+import * as SQLite from "expo-sqlite";
+const db = SQLite.openDatabase("lnreader.db");
+
+const getHistoryQuery = `
+    SELECT history.*, chapters.*, novels.*
+    FROM history 
+    JOIN chapters 
+    ON history.historyChapterId = chapters.chapterId
+    JOIN novels
+    ON history.historyNovelId = novels.novelId
+    ORDER BY history.historyTimeRead DESC`;
+
+export const getHistory = async () => {
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            tx.executeSql(
+                getHistoryQuery,
+                null,
+                (txObj, { rows: { _array } }) => {
+                    resolve(_array);
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        });
+    });
+};
+
+// const insertHistoryQuery =
+
+export const insertHistory = async (novelId, chapterId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            "INSERT OR REPLACE INTO history (historyNovelId, historyChapterId, historyTimeRead) VALUES (?, ?, (datetime('now','localtime')))",
+            [novelId, chapterId],
+            (txObj, res) => {},
+            (txObj, error) => console.log("Error ", error)
+        );
+        tx.executeSql("UPDATE novels SET unread = 0 WHERE novelId = ?", [
+            novelId,
+        ]);
+    });
+};
+
+export const deleteHistory = async (novelId) => {
+    db.transaction((tx) => {
+        tx.executeSql("DELETE FROM history WHERE historyNovelId = ?", [
+            novelId,
+        ]);
+    });
+};
+
+export const deleteAllHistory = () => {
+    db.transaction((tx) => {
+        tx.executeSql("DELETE FROM history; VACCUM;");
+    });
+};

src/database/queries/LibraryQueries.js

@@ -0,0 +1,73 @@
+import * as SQLite from "expo-sqlite";
+const db = SQLite.openDatabase("lnreader.db");
+
+const getLibraryQuery = `
+    SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded
+    FROM novels
+    LEFT JOIN (
+        SELECT chapters.novelId, COUNT(*) AS chaptersUnread 
+        FROM chapters
+        WHERE chapters.read = 0
+        GROUP BY chapters.novelId
+    ) AS C
+    ON novels.novelId = C.novelId
+    LEFT JOIN (
+        SELECT chapters.novelId, COUNT(*) AS chaptersDownloaded 
+        FROM chapters
+        WHERE chapters.downloaded = 1
+        GROUP BY chapters.novelId
+    ) AS D
+    ON novels.novelId = D.novelId
+    WHERE novels.followed = 1
+    GROUP BY novels.novelId
+    `;
+
+export const getLibrary = () => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                getLibraryQuery,
+                null,
+                (txObj, { rows: { _array } }) => {
+                    // console.log(_array);
+                    resolve(_array);
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+// const searchLibraryQuery = ``;
+
+export const searchLibrary = (searchText) => {
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            tx.executeSql(
+                `
+                SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded
+                FROM novels
+                LEFT JOIN (
+                    SELECT chapters.novelId, COUNT(*) AS chaptersUnread 
+                    FROM chapters
+                    WHERE chapters.read = 0
+                    GROUP BY chapters.novelId
+                ) AS C
+                ON novels.novelId = C.novelId
+                LEFT JOIN (
+                    SELECT chapters.novelId, COUNT(*) AS chaptersDownloaded 
+                    FROM chapters
+                    WHERE chapters.downloaded = 1
+                    GROUP BY chapters.novelId
+                ) AS D
+                ON novels.novelId = D.novelId
+                WHERE novels.followed = 1 AND novelName LIKE '%${searchText}%'
+                GROUP BY novels.novelId
+                `,
+                null,
+                (txObj, { rows: { _array } }) => resolve(_array),
+                (txObj, error) => console.log("Error ", error)
+            );
+        });
+    });
+};

src/database/queries/NovelQueries.js

@@ -0,0 +1,125 @@
+import * as SQLite from "expo-sqlite";
+const db = SQLite.openDatabase("lnreader.db");
+
+import { fetchChapters } from "../../Services/Source/source";
+import { insertChapters } from "./ChapterQueries";
+
+const insertNovelQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+export const insertNovel = async (novel) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) =>
+            tx.executeSql(
+                insertNovelQuery,
+                [
+                    novel.novelUrl,
+                    novel.sourceUrl,
+                    novel.sourceId,
+                    novel.source,
+                    novel.novelName,
+                    novel.novelCover,
+                    novel.novelSummary,
+                    novel.author,
+                    novel.artist,
+                    novel.status,
+                    novel.genre,
+                ],
+                (txObj, { insertId }) => resolve(insertId),
+                (txObj, error) => console.log("Error ", error)
+            )
+        )
+    );
+};
+
+export const followNovel = async (followed, novelId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            "UPDATE novels SET followed = ? WHERE novelId = ?",
+            [!followed, novelId],
+            (tx, res) => {},
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+const checkNovelInCacheQuery = `SELECT * FROM novels WHERE novelUrl=? LIMIT 1`;
+
+export const checkNovelInCache = (novelUrl) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                checkNovelInCacheQuery,
+                [novelUrl],
+                (txObj, res) => {
+                    if (res.rows.length !== 0) {
+                        resolve(true);
+                    } else {
+                        resolve(false);
+                    }
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+export const getNovel = async (novelUrl) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                `SELECT * FROM novels WHERE novelUrl = ?`,
+                [novelUrl],
+                (txObj, { rows }) => resolve(rows.item(0)),
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+export const deleteNovelCache = () => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            "DELETE FROM novels WHERE followed = 0",
+            null,
+            (txObj, res) => {
+                console.log("Cleared Novel Cache");
+            },
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+const restoreFromBackupQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre, followed, unread) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+export const restoreLibrary = async (novel) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) =>
+            tx.executeSql(
+                restoreFromBackupQuery,
+                [
+                    novel.novelUrl,
+                    novel.sourceUrl,
+                    novel.sourceId,
+                    novel.source,
+                    novel.novelName,
+                    novel.novelCover,
+                    novel.novelSummary,
+                    novel.author,
+                    novel.artist,
+                    novel.status,
+                    novel.genre,
+                    novel.followed,
+                    novel.unread,
+                ],
+                async (txObj, { insertId }) => {
+                    const chapters = await fetchChapters(
+                        novel.sourceId,
+                        novel.novelUrl
+                    );
+                    await insertChapters(insertId, chapters);
+                },
+                (txObj, error) => console.log("Error ", error)
+            )
+        )
+    );
+};

src/database/queries/UpdateQueries.js

@@ -0,0 +1,37 @@
+import * as SQLite from "expo-sqlite";
+const db = SQLite.openDatabase("lnreader.db");
+
+const getUpdatesQuery = `
+    SELECT chapters.chapterId, chapters.chapterUrl, chapters.chapterName, novels.novelUrl, novels.novelId, novels.novelCover, novels.novelName, novels.sourceId, updates.updateTime, updates.updateId
+    FROM updates 
+    JOIN chapters 
+    ON updates.chapterId = chapters.chapterId
+    JOIN novels
+    ON updates.novelId = novels.novelId
+    ORDER BY updates.updateTime DESC`;
+
+export const getUpdates = async () => {
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            tx.executeSql(
+                getUpdatesQuery,
+                null,
+                (txObj, { rows: { _array } }) => {
+                    resolve(_array);
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        });
+    });
+};
+
+export const deleteNovelUpdates = (novelId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            "DELETE FROM updates WHERE novelId = ?",
+            [novelId],
+            (txObj, res) => {},
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};

src/database/tables/ChapterTable.js

@@ -0,0 +1,18 @@
+export const createChapterTableQuery = `
+    CREATE TABLE IF NOT EXISTS chapters(
+    chapterId INTEGER PRIMARY KEY AUTOINCREMENT,
+    chapterUrl TEXT,
+    novelId INTEGER NOT NULL,
+    chapterName TEXT NOT NULL,
+    releaseDate TEXT,
+    bookmark BOOLEAN NOT NULL DEFAULT 0, 
+    \`read\` INTEGER NOT NULL DEFAULT 0, 
+    downloaded INTEGER NOT NULL DEFAULT 0,
+    UNIQUE(novelId, chapterUrl),
+    FOREIGN KEY (novelId) REFERENCES novels(novelId)
+    ON DELETE CASCADE
+    )`;
+
+export const createNovelIdIndexQuery = `CREATE INDEX IF NOT EXISTS chapterNovelIdIndex ON chapters(novelId)`;
+
+export const createUnreadChaptersIndexQuery = `CREATE INDEX IF NOT EXISTS chapterUnreadByNovelIndex ON chapters(novelId, \`read\`)`;

src/database/tables/DownloadTable.js

@@ -0,0 +1,11 @@
+export const createDownloadTableQuery = `
+    CREATE TABLE IF NOT EXISTS downloads(
+    downloadId INTEGER PRIMARY KEY AUTOINCREMENT,
+    downloadChapterId INTEGER NOT NULL,
+    chapterName TEXT,
+    chapterText TEXT,
+    nextChapter TEXT,
+    prevChapter TEXT,
+    FOREIGN KEY (downloadChapterId) REFERENCES chapters(chapterId)
+    ON DELETE CASCADE
+    )`;

src/database/tables/HistoryTable.js

@@ -0,0 +1,11 @@
+export const createHistoryTableQuery = `
+    CREATE TABLE IF NOT EXISTS history(
+    historyId INTEGER PRIMARY KEY AUTOINCREMENT,
+    historyChapterId INTEGER NOT NULL,
+    historyNovelId INTEGER NOT NULL UNIQUE,
+    historyTimeRead DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (historyChapterId) REFERENCES chapters(chapterId)
+    ON DELETE CASCADE
+    )`;
+
+export const createChapterIdIndexQuery = `CREATE INDEX IF NOT EXISTS historyChapterIdIndex ON history(historyChapterId)`;

src/database/tables/NovelTable.js

@@ -0,0 +1,21 @@
+export const createNovelTableQuery = `
+    CREATE TABLE IF NOT EXISTS novels(
+    novelId INTEGER PRIMARY KEY AUTOINCREMENT,
+    novelUrl TEXT NOT NULL,
+    sourceUrl TEXT UNIQUE NOT NULL,
+    sourceId INTEGER NOT NULL,
+    source TEXT NOT NULL,
+    novelName TEXT NOT NULL,
+    novelCover TEXT NOT NULL, 
+    novelSummary TEXT, 
+    author TEXT, 
+    artist TEXT, 
+    status TEXT, 
+    genre TEXT, 
+    followed INTEGER DEFAULT 0, 
+    unread INTEGER DEFAULT 1
+    )`;
+
+export const createUrlIndexQuery = `CREATE INDEX IF NOT EXISTS novelUrlIndex ON novels(novelUrl)`;
+
+export const createLibraryIndexQuery = `CREATE INDEX IF NOT EXISTS novelFollowedIndex ON novels(followed)`;

src/database/tables/UpdateTable.js

@@ -0,0 +1,11 @@
+export const createUpdatesTableQuery = `
+    CREATE TABLE IF NOT EXISTS updates(
+    updateId INTEGER PRIMARY KEY AUTOINCREMENT,
+    chapterId INTEGER NOT NULL,
+    novelId INTEGER NOT NULL,
+    updateTime DATETIME DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(novelId, chapterId),
+    FOREIGN KEY (chapterId) REFERENCES chapters(chapterId),
+    FOREIGN KEY (novelId) REFERENCES novels(novelId)
+    ON DELETE CASCADE
+    )`;

src/navigation/Router.js

@@ -1,168 +0,0 @@
-import React from "react";
-import {
-    createStackNavigator,
-    TransitionPresets,
-} from "@react-navigation/stack";
-import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
-
-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 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";
-
-// Extensions
-import BoxNovel from "../screens/extensions/boxnovel/BoxNovel";
-import ReadLightNovel from "../screens/extensions/readlightnovel/ReadLightNovel";
-
-const Stack = createStackNavigator();
-
-const Tab = createMaterialBottomTabNavigator();
-
-const stackNavigatorConfig = {
-    headerShown: false,
-    ...TransitionPresets.RevealFromBottomAndroid,
-};
-
-const MoreStack = () => {
-    return (
-        <Stack.Navigator screenOptions={stackNavigatorConfig}>
-            <Stack.Screen name="More" component={More} />
-            <Stack.Screen name="About" component={About} />
-            <Stack.Screen name="Settings" component={Settings} />
-        </Stack.Navigator>
-    );
-};
-
-const BoxNovelStack = () => {
-    return (
-        <Stack.Navigator screenOptions={stackNavigatorConfig}>
-            <Stack.Screen name="BoxNovel" component={BoxNovel} />
-        </Stack.Navigator>
-    );
-};
-
-const ReadLightNovelStack = () => {
-    return (
-        <Stack.Navigator screenOptions={stackNavigatorConfig}>
-            <Stack.Screen name="ReadLightNovel" component={ReadLightNovel} />
-        </Stack.Navigator>
-    );
-};
-
-import { useSelector } from "react-redux";
-
-const BottomNavigator = () => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-    return (
-        <Tab.Navigator
-            shifting={false}
-            barStyle={{ backgroundColor: theme.colorDarkPrimary }}
-            activeColor={theme.colorAccentDark}
-        >
-            <Tab.Screen
-                name="My Library"
-                component={Library}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="book-variant-multiple"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            {/* 
-            <Tab.Screen
-                name="Updates"
-                component={Updates}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="alert-decagram-outline"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            /> */}
-            <Tab.Screen
-                name="History"
-                component={History}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="history"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            <Tab.Screen
-                name="Browse"
-                component={Browse}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="compass-outline"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            <Tab.Screen
-                name="More"
-                component={MoreStack}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="dots-horizontal"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-        </Tab.Navigator>
-    );
-};
-
-const Router = () => {
-    return (
-        <Stack.Navigator screenOptions={stackNavigatorConfig}>
-            <Stack.Screen name="Router" component={BottomNavigator} />
-            <Stack.Screen
-                name="ChapterItem"
-                component={ChapterItem}
-                options={{ ...TransitionPresets.SlideFromRightIOS }}
-            />
-            <Stack.Screen
-                name="NovelItem"
-                component={NovelItem}
-                options={{
-                    headerTitle: "",
-                    headerShown: true,
-                    headerTransparent: true,
-                    headerTintColor: "white",
-                }}
-            />
-            <Stack.Screen name="BoxNovelStack" component={BoxNovelStack} />
-            <Stack.Screen
-                name="ReadLightNovelStack"
-                component={ReadLightNovelStack}
-            />
-        </Stack.Navigator>
-    );
-};
-
-export default Router;

src/redux/actions/library.js

@@ -1,11 +0,0 @@
-import { GET_LIBRARY_NOVELS } from "./types";
-import { getLibraryFromDb } from "../../services/db";
-
-export const getLibraryNovels = () => async (dispatch) => {
-    getLibraryFromDb().then((res) => console.log(res));
-
-    dispatch({
-        type: GET_LIBRARY_NOVELS,
-        payload: res.data,
-    });
-};

src/redux/actions/theme.js

@@ -1,8 +0,0 @@
-import { SWITCH_THEME } from "./types";
-
-export const switchTheme = (theme) => (dispatch) => {
-    dispatch({
-        type: SWITCH_THEME,
-        payload: theme,
-    });
-};

src/redux/actions/types.js

@@ -1,3 +0,0 @@
-export const SWITCH_THEME = "SWITCH_THEME";
-
-export const GET_LIBRARY_NOVELS = "GET_LIBRARY_NOVELS";

src/redux/chapter/chapter.actions.js

@@ -0,0 +1,79 @@
+import { ToastAndroid } from "react-native";
+
+import {
+    CHAPTER_READ,
+    GET_CHAPTER,
+    CHAPTER_LOADING,
+    CHAPTER_DOWNLOADING,
+    CHAPTER_DOWNLOADED,
+    CHAPTER_DELETED,
+} from "./chapter.types";
+
+import { fetchChapter } from "../../Services/Source/source";
+
+import {
+    markChapterRead,
+    isChapterDownloaded,
+    getChapter,
+    downloadChapter,
+    deleteChapter,
+} from "../../database/queries/ChapterQueries";
+
+export const getChapterAction = (
+    extensionId,
+    chapterUrl,
+    novelUrl,
+    novelId
+) => async (dispatch) => {
+    dispatch({ type: CHAPTER_LOADING });
+
+    let chapter = await getChapter(novelId);
+
+    if (!chapter) {
+        chapter = await fetchChapter(extensionId, novelUrl, chapterUrl);
+    }
+    console.log(isDownloaded);
+    dispatch({ type: GET_CHAPTER, payload: chapter });
+};
+
+export const markChapterReadAction = (chapterId) => async (dispatch) => {
+    await markChapterRead(chapterId);
+    dispatch({ type: CHAPTER_READ, payload: { chapterId } });
+};
+
+export const downloadChapterAction = (
+    extensionId,
+    novelUrl,
+    chapterUrl,
+    chapterName,
+    chapterId
+) => async (dispatch) => {
+    dispatch({
+        type: CHAPTER_DOWNLOADING,
+        payload: {
+            chapterId,
+        },
+    });
+
+    await downloadChapter(extensionId, novelUrl, chapterUrl, chapterId);
+
+    dispatch({
+        type: CHAPTER_DOWNLOADED,
+        payload: { chapterId },
+    });
+
+    ToastAndroid.show(`Downloaded ${chapterName}`, ToastAndroid.SHORT);
+};
+
+export const deleteChapterAction = (chapterId, chapterName) => async (
+    dispatch
+) => {
+    await deleteChapter(chapterId);
+
+    dispatch({
+        type: CHAPTER_DELETED,
+        payload: { chapterId },
+    });
+
+    ToastAndroid.show(`Deleted ${chapterName}`, ToastAndroid.SHORT);
+};

src/redux/chapter/chapter.reducer.js

@@ -0,0 +1,65 @@
+import {
+    CHAPTER_READ,
+    GET_CHAPTER,
+    CHAPTER_LOADING,
+    CHAPTER_DOWNLOADING,
+    CHAPTER_DOWNLOADED,
+    CHAPTER_DELETED,
+} from "./chapter.types";
+
+const initialState = {
+    chapter: null,
+    downloading: [],
+    loading: true,
+};
+
+const chapterReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case CHAPTER_READ:
+            return {
+                ...state,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload.chapterId
+                        ? { ...chapter, read: 1 }
+                        : chapter
+                ),
+            };
+        case CHAPTER_LOADING:
+            return {
+                ...state,
+                chapterLoading: true,
+            };
+        case GET_CHAPTER:
+            return { ...state, chapter: payload, chapterLoading: false };
+        case CHAPTER_DOWNLOADING:
+            return {
+                ...state,
+                downloading: payload.chapterId,
+            };
+        case CHAPTER_DOWNLOADED:
+            return {
+                ...state,
+                downloading: null,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload.chapterId
+                        ? { ...chapter, downloaded: 1 }
+                        : chapter
+                ),
+            };
+        case CHAPTER_DELETED:
+            return {
+                ...state,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload.chapterId
+                        ? { ...chapter, downloaded: 0 }
+                        : chapter
+                ),
+            };
+        default:
+            return state;
+    }
+};
+
+export default chapterReducer;

src/redux/chapter/chapter.types.js

@@ -0,0 +1,6 @@
+export const CHAPTER_DOWNLOADED = "CHAPTER_DOWNLOADED";
+export const CHAPTER_DELETED = "CHAPTER_DELETED";
+export const CHAPTER_DOWNLOADING = "CHAPTER_DOWNLOADING";
+export const CHAPTER_READ = "CHAPTER_READ";
+export const CHAPTER_LOADING = "CHAPTER_LOADING";
+export const GET_CHAPTER = "GET_CHAPTER";

src/redux/history/history.actions.js

@@ -0,0 +1,36 @@
+import {
+    UPDATE_NOVEL_HISTORY,
+    CLEAR_NOVEL_HISTORY,
+    GET_HISTORY,
+    LOAD_HISTORY,
+} from "./history.types";
+import {
+    getHistory,
+    insertHistory,
+    deleteHistory,
+} from "../../database/queries/HistoryQueries";
+
+export const getHistoryAction = () => async (dispatch) => {
+    dispatch({ type: LOAD_HISTORY });
+
+    const history = await getHistory();
+
+    dispatch({ type: GET_HISTORY, payload: history });
+};
+
+export const insertHistoryAction = (novelId, chapterId) => async (dispatch) => {
+    await insertHistory(novelId, chapterId);
+
+    dispatch({
+        type: UPDATE_NOVEL_HISTORY,
+    });
+};
+
+export const deleteHistoryAction = (novelId) => async (dispatch) => {
+    await deleteHistory(novelId);
+
+    dispatch({
+        type: CLEAR_NOVEL_HISTORY,
+        payload: { novelId },
+    });
+};

src/redux/history/history.reducer.js

@@ -0,0 +1,41 @@
+import {
+    CLEAR_NOVEL_HISTORY,
+    GET_HISTORY,
+    LOAD_HISTORY,
+    UPDATE_NOVEL_HISTORY,
+} from "./history.types";
+
+const initialState = {
+    history: [],
+    loading: true,
+};
+
+const historyReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case LOAD_HISTORY:
+            return { ...state, loading: true };
+        case GET_HISTORY:
+            return { ...state, history: payload, loading: false };
+        case UPDATE_NOVEL_HISTORY:
+            return state;
+        case CLEAR_NOVEL_HISTORY:
+            return {
+                ...state,
+                history: state.history.filter(
+                    (item) => item.novelId !== payload.novelId
+                ),
+            };
+        // return {
+        //     ...state,
+        //     history: state.history.map((novel) =>
+        //         novel.novelUrl === payload.novelUrl ? payload : novel
+        //     ),
+        // };
+        default:
+            return state;
+    }
+};
+
+export default historyReducer;

src/redux/history/history.types.js

@@ -0,0 +1,4 @@
+export const LOAD_HISTORY = "LOAD_HISTORY";
+export const GET_HISTORY = "GET_HISTORY";
+export const UPDATE_NOVEL_HISTORY = "UPDATE_NOVEL_HISTORY";
+export const CLEAR_NOVEL_HISTORY = "CLEAR_NOVEL_HISTORY";

src/redux/library/library.actions.js

@@ -0,0 +1,26 @@
+import {
+    GET_LIBRARY_NOVELS,
+    GET_LIBRARY_SEARCH_RESULTS,
+} from "./library.types";
+import {
+    getLibrary,
+    searchLibrary,
+} from "../../database/queries/LibraryQueries";
+
+export const getLibraryAction = () => async (dispatch) => {
+    const res = await getLibrary();
+
+    dispatch({
+        type: GET_LIBRARY_NOVELS,
+        payload: res,
+    });
+};
+
+export const searchLibraryAction = (searchText) => async (dispatch) => {
+    const res = await searchLibrary(searchText);
+
+    dispatch({
+        type: GET_LIBRARY_SEARCH_RESULTS,
+        payload: res,
+    });
+};

src/redux/library/library.reducer.js

@@ -0,0 +1,47 @@
+import {
+    FOLLOW_NOVEL,
+    UNFOLLOW_NOVEL,
+    UPDATE_IN_LIBRARY,
+} from "../novel/novel.types";
+import {
+    GET_LIBRARY_NOVELS,
+    GET_LIBRARY_SEARCH_RESULTS,
+} from "./library.types";
+
+const initialState = {
+    novels: [],
+    searchResults: [],
+    loading: true,
+};
+
+const libraryReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case GET_LIBRARY_NOVELS:
+            return { ...state, novels: payload, loading: false };
+        case GET_LIBRARY_SEARCH_RESULTS:
+            return { ...state, novels: payload, loading: false };
+        // case FOLLOW_NOVEL:
+        //     return {
+        //         ...state,
+        //         novels: [...state.novels, { ...payload, followed: 1 }],
+        //     };
+        // case UNFOLLOW_NOVEL:
+        //     return {
+        //         ...state,
+        //         novels: state.novels.filter(
+        //             (novel) => novel.novelId !== payload
+        //         ),
+        //     };
+        case UPDATE_IN_LIBRARY:
+            return {
+                ...state,
+                novels: [...state.novels, { novelUrl: payload.novelUrl }],
+            };
+        default:
+            return state;
+    }
+};
+
+export default libraryReducer;

src/redux/library/library.types.js

@@ -0,0 +1,2 @@
+export const GET_LIBRARY_NOVELS = "GET_LIBRARY_NOVELS";
+export const GET_LIBRARY_SEARCH_RESULTS = "GET_LIBRARY_SEARCH_RESULTS";

src/redux/novel/novel.actions.js

@@ -0,0 +1,240 @@
+import { ToastAndroid } from "react-native";
+
+import {
+    LOADING_NOVEL,
+    GET_NOVEL,
+    GET_CHAPTERS,
+    FETCHING_NOVEL,
+    SET_NOVEL,
+    UPDATE_IN_LIBRARY,
+    CHAPTER_READ,
+    GET_CHAPTER,
+    CHAPTER_LOADING,
+    CHAPTER_DOWNLOADING,
+    CHAPTER_DOWNLOADED,
+    CHAPTER_DELETED,
+    UPDATE_NOVEL,
+} from "./novel.types";
+
+import { updateNovel } from "../../Services/updates";
+import { fetchChapter, fetchNovel } from "../../Services/Source/source";
+import {
+    followNovel,
+    insertNovel,
+    getNovel,
+} from "../../database/queries/NovelQueries";
+import {
+    getChapters,
+    insertChapters,
+    markChapterRead,
+    isChapterDownloaded,
+    getChapter,
+    downloadChapter,
+    deleteChapter,
+} from "../../database/queries/ChapterQueries";
+import { deleteNovelUpdates } from "../../database/queries/UpdateQueries";
+
+export const setNovel = (novel) => async (dispatch) => {
+    dispatch({ type: SET_NOVEL, payload: novel });
+};
+
+export const getNovelAction = (
+    followed,
+    sourceId,
+    novelUrl,
+    novelId,
+    sort,
+    filter
+) => async (dispatch) => {
+    dispatch({ type: LOADING_NOVEL });
+
+    if (followed === 1) {
+        const chapters = await getChapters(novelId, sort, filter);
+
+        dispatch({
+            type: GET_CHAPTERS,
+            payload: chapters,
+        });
+    } else {
+        dispatch({ type: FETCHING_NOVEL });
+
+        const novel = await getNovel(novelUrl);
+
+        if (novel) {
+            novel.chapters = await getChapters(novel.novelId, sort, filter);
+            dispatch({
+                type: GET_NOVEL,
+                payload: novel,
+            });
+        } else {
+            /**
+             * Fetch novel from source
+             */
+            const fetchedNovel = await fetchNovel(sourceId, novelUrl);
+
+            /**
+             * Insert novel in db
+             */
+            const fetchedNovelId = await insertNovel(fetchedNovel);
+            await insertChapters(fetchedNovelId, fetchedNovel.chapters);
+
+            /**
+             * Get Novel  from db
+             */
+            const novel = await getNovel(novelUrl);
+            novel.chapters = await getChapters(novel.novelId);
+
+            dispatch({
+                type: GET_NOVEL,
+                payload: novel,
+            });
+        }
+    }
+};
+
+export const sortAndFilterChapters = (novelUrl, filter, sort) => async (
+    dispatch
+) => {
+    // const chapters = await getChaptersFromDb(novelUrl, filter, sort);
+    // dispatch({
+    //     type: GET_CHAPTERS,
+    //     payload: chapters,
+    // });
+};
+
+export const followNovelAction = (novel) => async (dispatch) => {
+    await followNovel(novel.followed, novel.novelId);
+
+    if (!novel.followNovel) {
+        deleteNovelUpdates(novel.novelId);
+    }
+
+    dispatch({
+        type: UPDATE_IN_LIBRARY,
+        payload: { novelUrl: novel.novelUrl, followed: !novel.followed },
+    });
+
+    ToastAndroid.show(
+        !novel.followed ? "Added to library" : "Removed from library",
+        ToastAndroid.SHORT
+    );
+};
+
+export const getChapterAction = (
+    extensionId,
+    chapterUrl,
+    novelUrl,
+    novelId
+) => async (dispatch) => {
+    dispatch({ type: CHAPTER_LOADING });
+
+    const isDownloaded = await isChapterDownloaded(novelId);
+    let chapter;
+
+    if (isDownloaded) {
+        chapter = await getChapter(novelId);
+    } else {
+        chapter = await fetchChapter(extensionId, novelUrl, chapterUrl);
+    }
+    dispatch({ type: GET_CHAPTER, payload: chapter });
+};
+
+export const markChapterReadAction = (chapterId) => async (dispatch) => {
+    await markChapterRead(chapterId);
+    dispatch({ type: CHAPTER_READ, payload: { chapterId } });
+};
+
+export const downloadChapterAction = (
+    extensionId,
+    novelUrl,
+    chapterUrl,
+    chapterName,
+    chapterId
+) => async (dispatch) => {
+    dispatch({
+        type: CHAPTER_DOWNLOADING,
+        payload: chapterId,
+    });
+
+    await downloadChapter(extensionId, novelUrl, chapterUrl, chapterId);
+
+    dispatch({
+        type: CHAPTER_DOWNLOADED,
+        payload: chapterId,
+    });
+
+    ToastAndroid.show(`Downloaded ${chapterName}`, ToastAndroid.SHORT);
+};
+
+export const downloadAllChaptersAction = (
+    extensionId,
+    novelUrl,
+    chapters
+) => async (dispatch) => {
+    await chapters.map((chapter, index) => {
+        setTimeout(async () => {
+            dispatch({
+                type: CHAPTER_DOWNLOADING,
+                payload: chapter.chapterId,
+            });
+
+            if (!chapter.downloaded) {
+                await downloadChapter(
+                    extensionId,
+                    novelUrl,
+                    chapter.chapterUrl,
+                    chapter.chapterId
+                );
+            }
+
+            dispatch({
+                type: CHAPTER_DOWNLOADED,
+                payload: chapter.chapterId,
+            });
+        }, 1000 * index);
+    });
+
+    ToastAndroid.show(`All chapters downloaded`, ToastAndroid.SHORT);
+};
+
+export const deleteChapterAction = (chapterId, chapterName) => async (
+    dispatch
+) => {
+    await deleteChapter(chapterId);
+
+    dispatch({
+        type: CHAPTER_DELETED,
+        payload: chapterId,
+    });
+
+    ToastAndroid.show(`Deleted ${chapterName}`, ToastAndroid.SHORT);
+};
+
+export const deleteAllChaptersAction = (chapters) => async (dispatch) => {
+    await chapters.map((chapter) => {
+        deleteChapter(chapter.chapterId);
+
+        dispatch({
+            type: CHAPTER_DELETED,
+            payload: chapter.chapterId,
+        });
+    });
+
+    ToastAndroid.show(`Deleted all chapters`, ToastAndroid.SHORT);
+};
+
+export const updateNovelAction = (extensionId, novelUrl, novelId) => async (
+    dispatch
+) => {
+    dispatch({ type: FETCHING_NOVEL });
+
+    await updateNovel(extensionId, novelUrl, novelId);
+
+    let novel = await getNovel(novelUrl);
+    let chapters = await getChapters(novel.novelId);
+
+    dispatch({
+        type: UPDATE_NOVEL,
+        payload: { novel, chapters },
+    });
+};

src/redux/novel/novel.reducer.js

@@ -0,0 +1,121 @@
+import {
+    CHAPTER_DOWNLOADING,
+    CHAPTER_DOWNLOADED,
+    CHAPTER_DELETED,
+    GET_CHAPTERS,
+    LOADING_NOVEL,
+    GET_NOVEL,
+    GET_CHAPTER,
+    FETCHING_NOVEL,
+    SET_NOVEL,
+    UPDATE_IN_LIBRARY,
+    CHAPTER_READ,
+    CHAPTER_LOADING,
+    UPDATE_NOVEL,
+    UPDATE_LAST_READ,
+} from "./novel.types";
+
+const initialState = {
+    novel: null,
+    chapters: [],
+    chapter: null,
+    downloading: [],
+    chapterLoading: true,
+    loading: true,
+    fetching: false,
+};
+
+const novelReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case LOADING_NOVEL:
+            return { ...state, loading: true };
+        case FETCHING_NOVEL:
+            return { ...state, fetching: true };
+        case SET_NOVEL:
+            return { ...state, novel: payload };
+        case GET_NOVEL:
+            return {
+                ...state,
+                novel: payload,
+                chapters: payload.chapters,
+                loading: false,
+                fetching: false,
+            };
+        case GET_CHAPTERS:
+            return {
+                ...state,
+                chapters: payload,
+                loading: false,
+                fetching: false,
+            };
+        case UPDATE_IN_LIBRARY:
+            return {
+                ...state,
+                novel: { ...state.novel, followed: payload.followed },
+            };
+        case UPDATE_NOVEL:
+            return {
+                ...state,
+                novel: payload.novel,
+                chapters: payload.chapters,
+                loading: false,
+                fetching: false,
+            };
+        case CHAPTER_READ:
+            return {
+                ...state,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload.chapterId
+                        ? { ...chapter, read: 1 }
+                        : chapter
+                ),
+            };
+        case CHAPTER_LOADING:
+            return {
+                ...state,
+                chapterLoading: true,
+            };
+        case GET_CHAPTER:
+            return { ...state, chapter: payload, chapterLoading: false };
+        case CHAPTER_DOWNLOADING:
+            return {
+                ...state,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload
+                        ? { ...chapter, downloaded: 3 }
+                        : chapter
+                ),
+            };
+        case CHAPTER_DOWNLOADED:
+            return {
+                ...state,
+                // downloading: state.downloading.filter((id) => id === payload),
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload
+                        ? { ...chapter, downloaded: 1 }
+                        : chapter
+                ),
+            };
+        case CHAPTER_DELETED:
+            return {
+                ...state,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload
+                        ? { ...chapter, downloaded: 0 }
+                        : chapter
+                ),
+            };
+
+        case UPDATE_LAST_READ:
+            return {
+                ...state,
+                novel: { ...state.novel, lastRead: payload },
+            };
+        default:
+            return state;
+    }
+};
+
+export default novelReducer;

src/redux/novel/novel.types.js

@@ -0,0 +1,19 @@
+export const LOADING_NOVEL = "LOADING_NOVEL";
+export const FETCHING_NOVEL = "FETCHING_NOVEL";
+export const LOADING_CHAPTERS = "LOADING_CHAPTERS";
+export const GET_NOVEL = "GET_NOVEL";
+export const SET_NOVEL = "SET_NOVEL";
+export const UPDATE_NOVEL = "UPDATE_NOVEL";
+export const UPDATE_IN_LIBRARY = "UPDATE_IN_LIBRARY";
+export const GET_CHAPTERS = "GET_CHAPTERS";
+export const UPDATE_LAST_READ = "UPDATE_LAST_READ";
+
+export const CHAPTER_DOWNLOADED = "CHAPTER_DOWNLOADED";
+export const CHAPTER_DELETED = "CHAPTER_DELETED";
+export const CHAPTER_DOWNLOADING = "CHAPTER_DOWNLOADING";
+export const CHAPTER_READ = "CHAPTER_READ";
+export const CHAPTER_LOADING = "CHAPTER_LOADING";
+export const GET_CHAPTER = "GET_CHAPTER";
+
+export const FOLLOW_NOVEL = "FOLLOW_NOVEL";
+export const UNFOLLOW_NOVEL = "UNFOLLOW_NOVEL";

src/redux/reducers/theme.js

@@ -1,18 +0,0 @@
-import { amoledDarkTheme } from "../../theme/theme";
-
-const initialState = {
-    theme: amoledDarkTheme,
-};
-
-const themeReducer = (state = initialState, action) => {
-    const { type, payload } = action;
-
-    switch (type) {
-        case "SWITCH_THEME":
-            return { theme: payload };
-        default:
-            return state;
-    }
-};
-
-export default themeReducer;

src/redux/settings/settings.actions.js

@@ -0,0 +1,58 @@
+import {
+    SET_DISPLAY_MODE,
+    SET_ITEMS_PER_ROW,
+    UPDATE_READER_TEXT_SIZE,
+    UPDATE_READER_THEME,
+    UPDATE_READER_TEXT_ALIGN,
+    UPDATE_READER_PADDING,
+    SET_READER_FONT,
+} from "./settings.types";
+
+export const setDisplayMode = (val) => (dispatch) => {
+    dispatch({
+        type: SET_DISPLAY_MODE,
+        payload: val,
+    });
+};
+
+export const setItemsPerRow = (val) => (dispatch) => {
+    dispatch({
+        type: SET_ITEMS_PER_ROW,
+        payload: val,
+    });
+};
+
+export const updateReaderTheme = (val) => (dispatch) => {
+    dispatch({
+        type: UPDATE_READER_THEME,
+        payload: val,
+    });
+};
+
+export const updateReaderTextSize = (val) => (dispatch) => {
+    dispatch({
+        type: UPDATE_READER_TEXT_SIZE,
+        payload: val,
+    });
+};
+
+export const updateReaderTextAlign = (val) => (dispatch) => {
+    dispatch({
+        type: UPDATE_READER_TEXT_ALIGN,
+        payload: val,
+    });
+};
+
+export const updateReaderPadding = (val) => (dispatch) => {
+    dispatch({
+        type: UPDATE_READER_PADDING,
+        payload: val,
+    });
+};
+
+export const setReaderFont = (val) => (dispatch) => {
+    dispatch({
+        type: SET_READER_FONT,
+        payload: val,
+    });
+};

src/redux/settings/settings.reducer.js

@@ -0,0 +1,77 @@
+import {
+    SET_DISPLAY_MODE,
+    SET_ITEMS_PER_ROW,
+    SET_READER_FONT,
+    UPDATE_READER_PADDING,
+    UPDATE_READER_TEXT_ALIGN,
+    UPDATE_READER_TEXT_SIZE,
+    UPDATE_READER_THEME,
+} from "./settings.types";
+
+const initialState = {
+    displayMode: 0,
+    itemsPerRow: 3,
+    reader: {
+        theme: 1,
+        textSize: 16,
+        textAlign: "left",
+        padding: 5,
+        fontFamily: null,
+    },
+};
+
+/**
+ * Display Mode
+ * 0 -> Compact
+ * 1 -> Comfortable
+ * 2 -> List
+ */
+
+/**
+ * Reader Settings
+ * theme
+ * 1 -> Dark
+ * 2 -> White
+ * 3 -> Sepia
+ */
+
+const settingsReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case SET_DISPLAY_MODE:
+            return {
+                ...state,
+                displayMode: payload,
+                itemsPerRow: payload === 2 ? 1 : state.itemsPerRow,
+            };
+        case SET_ITEMS_PER_ROW:
+            return {
+                ...state,
+                itemsPerRow: state.displayMode !== 2 ? payload : 1,
+            };
+        case UPDATE_READER_THEME:
+            return { ...state, reader: { ...state.reader, theme: payload } };
+        case UPDATE_READER_TEXT_SIZE:
+            return { ...state, reader: { ...state.reader, textSize: payload } };
+        case UPDATE_READER_TEXT_ALIGN:
+            return {
+                ...state,
+                reader: { ...state.reader, textAlign: payload },
+            };
+        case UPDATE_READER_PADDING:
+            return {
+                ...state,
+                reader: { ...state.reader, padding: payload },
+            };
+        case SET_READER_FONT:
+            return {
+                ...state,
+                reader: { ...state.reader, fontFamily: payload },
+            };
+        default:
+            return state;
+    }
+};
+
+export default settingsReducer;

src/redux/settings/settings.types.js

@@ -0,0 +1,7 @@
+export const SET_DISPLAY_MODE = "SET_DISPLAY_MODE";
+export const SET_ITEMS_PER_ROW = "SET_ITEMS_PER_ROW";
+export const UPDATE_READER_THEME = "UPDATE_READER_THEME";
+export const UPDATE_READER_TEXT_SIZE = "UPDATE_READER_TEXT_SIZE";
+export const UPDATE_READER_TEXT_ALIGN = "UPDATE_READER_TEXT_ALIGN";
+export const UPDATE_READER_PADDING = "UPDATE_READER_PADDING";
+export const SET_READER_FONT = "SET_READER_FONT";

src/redux/source/source.actions.js

@@ -0,0 +1,11 @@
+import { GET_SOURCES } from "./source.types";
+import { fetchSources } from "../../Services/Source/source";
+
+export const getSourcesAction = () => async (dispatch) => {
+    const res = await fetchSources();
+
+    dispatch({
+        type: GET_SOURCES,
+        payload: res,
+    });
+};

src/redux/source/source.reducers.js

@@ -1,5 +1,7 @@
+import { GET_SOURCES } from "./source.types";
+
 const initialState = {
-    novels: [],
+    extensions: [],
     loading: true,
 };
 
@@ -7,8 +9,8 @@ const libraryReducer = (state = initialState, action) => {
     const { type, payload } = action;
 
     switch (type) {
-        case "GET_LIBRARY_NOVELS":
-            return { novels: payload, loading: false };
+        case GET_SOURCES:
+            return { extensions: payload, loading: false };
         default:
             return state;
     }

src/redux/source/source.types.js

@@ -0,0 +1 @@
+export const GET_SOURCES = "GET_SOURCES";

src/redux/store.js

@@ -0,0 +1,36 @@
+import { createStore, applyMiddleware, combineReducers } from "redux";
+import { persistStore, persistReducer } from "redux-persist";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import thunk from "redux-thunk";
+
+import themeReducer from "./theme/theme.reducer";
+import settingsReducer from "./settings/settings.reducer";
+import libraryReducer from "./library/library.reducer";
+import extensionReducer from "./source/source.reducers";
+import novelReducer from "./novel/novel.reducer";
+import historyReducer from "./history/history.reducer";
+import updatesReducer from "./updates/updates.reducer";
+import trackerReducer from "./tracker/tracker.reducer";
+
+const persistConfig = {
+    key: "root",
+    storage: AsyncStorage,
+    blacklist: ["novelReducer"],
+};
+
+const persistedReducer = persistReducer(
+    persistConfig,
+    combineReducers({
+        themeReducer,
+        settingsReducer,
+        libraryReducer,
+        extensionReducer,
+        novelReducer,
+        historyReducer,
+        updatesReducer,
+        trackerReducer,
+    })
+);
+
+export const store = createStore(persistedReducer, applyMiddleware(thunk));
+export const persistor = persistStore(store);

src/redux/store/configureStore.js

@@ -1,20 +0,0 @@
-import { createStore, applyMiddleware, combineReducers } from "redux";
-import { persistStore, persistReducer } from "redux-persist";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import thunk from "redux-thunk";
-
-import themeReducer from "../reducers/theme";
-import libraryReducer from "../reducers/library";
-
-const persistConfig = {
-    key: "root",
-    storage: AsyncStorage,
-};
-
-const persistedReducer = persistReducer(
-    persistConfig,
-    combineReducers({ themeReducer, libraryReducer })
-);
-
-export const store = createStore(persistedReducer, applyMiddleware(thunk));
-export const persistor = persistStore(store);

src/redux/theme/theme.actions.js

@@ -0,0 +1,8 @@
+import { SWITCH_THEME } from "./theme.types";
+
+export const switchTheme = (val) => (dispatch) => {
+    dispatch({
+        type: SWITCH_THEME,
+        payload: val,
+    });
+};

src/redux/theme/theme.reducer.js

@@ -0,0 +1,30 @@
+import {
+    amoledDarkTheme,
+    lightTheme,
+    darkTheme,
+    midnightDuskTheme,
+} from "../../Theme/theme";
+
+const themes = {
+    0: amoledDarkTheme,
+    1: lightTheme,
+    2: darkTheme,
+    3: midnightDuskTheme,
+};
+
+const initialState = {
+    theme: themes[0],
+};
+
+const themeReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case "SWITCH_THEME":
+            return { ...state, theme: themes[payload] };
+        default:
+            return state;
+    }
+};
+
+export default themeReducer;

src/redux/theme/theme.types.js

@@ -0,0 +1 @@
+export const SWITCH_THEME = "SWITCH_THEME";

src/redux/tracker/tracker.actions.js

@@ -0,0 +1,57 @@
+import { findListItem, updateItem } from "../../Services/Trackers/myAnimeList";
+import {
+    REMOVE_TRACKER,
+    SET_TRACKER,
+    TRACK_NOVEL,
+    UNTRACK_NOVEL,
+    UPDATE_TRACKER,
+    UPDATE_CHAPTERS_READ,
+} from "./tracker.types";
+
+import { updateMalChaptersRead } from "../../Services/Trackers/myAnimeList";
+
+export const setTracker = (res) => async (dispatch) => {
+    dispatch({
+        type: SET_TRACKER,
+        payload: res,
+    });
+};
+
+export const removeTracker = () => async (dispatch) => {
+    dispatch({ type: REMOVE_TRACKER });
+};
+
+export const trackNovel = (trackObj, accessToken) => async (dispatch) => {
+    let res = await findListItem(trackObj.id, accessToken);
+    trackObj.num_chapters = res.num_chapters;
+    trackObj.my_list_status = {
+        num_chapters_read: res.my_list_status.num_chapters_read,
+        score: res.my_list_status.score,
+        status: res.my_list_status.status,
+    };
+
+    dispatch({ type: TRACK_NOVEL, payload: trackObj });
+};
+
+export const updateTracker = (malId, accessToken, body) => async (dispatch) => {
+    let res = await updateItem(malId, accessToken, body);
+
+    dispatch({ type: UPDATE_TRACKER, payload: { malId, ...res } });
+};
+
+export const untrackNovel = (id) => async (dispatch) => {
+    dispatch({ type: UNTRACK_NOVEL, payload: id });
+};
+
+export const updateChaptersRead = (malId, accessToken, chaptersRead) => async (
+    dispatch
+) => {
+    let res = await updateMalChaptersRead(malId, accessToken, {
+        num_chapters_read: chaptersRead,
+    });
+
+    dispatch({
+        type: UPDATE_CHAPTERS_READ,
+        payload: { malId, chaptersRead: res },
+    });
+};

src/redux/tracker/tracker.reducer.js

@@ -0,0 +1,81 @@
+import {
+    REMOVE_TRACKER,
+    SET_TRACKER,
+    TRACK_NOVEL,
+    UNTRACK_NOVEL,
+    UPDATE_CHAPTERS_READ,
+    UPDATE_TRACKER,
+} from "./tracker.types";
+
+const initialState = {
+    tracker: null,
+    trackedNovels: [],
+};
+
+const trackerReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case SET_TRACKER:
+            return {
+                ...state,
+                tracker: { ...payload, name: "MyAnimeList" },
+            };
+        case REMOVE_TRACKER:
+            return {
+                ...state,
+                tracker: null,
+            };
+        case TRACK_NOVEL:
+            return {
+                ...state,
+                trackedNovels: state.trackedNovels.some(
+                    (obj) => obj.novelId === payload.novelId
+                )
+                    ? state.trackedNovels
+                    : [...state.trackedNovels, payload],
+            };
+        case UPDATE_TRACKER:
+            return {
+                ...state,
+                trackedNovels: state.trackedNovels.map((novel) =>
+                    novel.id === payload.malId
+                        ? {
+                              ...novel,
+                              my_list_status: {
+                                  num_chapters_read: payload.num_chapters_read,
+                                  status: payload.status,
+                                  score: payload.score,
+                              },
+                          }
+                        : novel
+                ),
+            };
+        case UNTRACK_NOVEL:
+            return {
+                ...state,
+                trackedNovels: state.trackedNovels.filter(
+                    (id) => id === payload
+                ),
+            };
+        case UPDATE_CHAPTERS_READ:
+            return {
+                ...state,
+                trackedNovels: state.trackedNovels.map((novel) =>
+                    novel.id === payload.malId
+                        ? {
+                              ...novel,
+                              my_list_status: {
+                                  ...novel.my_list_status,
+                                  num_chapters_read: payload.chaptersRead,
+                              },
+                          }
+                        : novel
+                ),
+            };
+        default:
+            return state;
+    }
+};
+
+export default trackerReducer;

src/redux/tracker/tracker.types.js

@@ -0,0 +1,9 @@
+export const SET_TRACKER = "SET_TRACKER";
+export const REMOVE_TRACKER = "REMOVE_TRACKER";
+
+export const TRACK_NOVEL = "TRACK_NOVEL";
+export const UNTRACK_NOVEL = "UNTRACK_NOVEL";
+
+export const UPDATE_TRACKER = "UPDATE_TRACKER";
+
+export const UPDATE_CHAPTERS_READ = "UPDATE_CHAPTERS_READ";

src/redux/updates/updates.actions.js

@@ -0,0 +1,20 @@
+import { GET_UPDATES } from "./updates.types";
+
+import { getUpdates } from "../../database/queries/UpdateQueries";
+import { updateAllNovels } from "../../Services/updates";
+import { showToast } from "../../Hooks/showToast";
+
+export const getUpdatesAction = () => async (dispatch) => {
+    const updates = await getUpdates();
+
+    dispatch({ type: GET_UPDATES, payload: updates });
+};
+
+export const updateLibraryAction = () => async (dispatch) => {
+    showToast("Updating library");
+
+    await updateAllNovels();
+    const updates = await getUpdates();
+
+    dispatch({ type: GET_UPDATES, payload: updates });
+};

src/redux/updates/updates.reducer.js

@@ -0,0 +1,21 @@
+import { LOAD_UPDATES, GET_UPDATES } from "./updates.types";
+
+const initialState = {
+    updates: [],
+    loading: true,
+};
+
+const updateReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case LOAD_UPDATES:
+            return { ...state, loading: true };
+        case GET_UPDATES:
+            return { ...state, updates: payload, loading: false };
+        default:
+            return state;
+    }
+};
+
+export default updateReducer;

src/redux/updates/updates.types.js

@@ -0,0 +1,2 @@
+export const GET_UPDATES = "GET_UPDATES";
+export const LOAD_UPDATES = "LOAD_UPDATES";

src/screens/Browse.js

@@ -1,144 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import {
-    StyleSheet,
-    View,
-    Text,
-    FlatList,
-    Image,
-    ActivityIndicator,
-} from "react-native";
-import { TouchableRipple, Button } from "react-native-paper";
-import { CustomAppbar } from "../components/common/Appbar";
-
-import { useSelector } from "react-redux";
-
-const Browse = ({ navigation }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    const [loading, setLoading] = useState(true);
-    const [extensions, setExtensions] = useState();
-
-    useEffect(() => {
-        fetch(`https://lnreader-extensions.herokuapp.com/api/`)
-            .then((response) => response.json())
-            .then((json) => {
-                setExtensions(json);
-                setLoading(false);
-            });
-    }, []);
-
-    return (
-        <>
-            <CustomAppbar title="Browse" />
-            <View
-                style={[
-                    styles.container,
-                    { backgroundColor: theme.colorDarkPrimaryDark },
-                ]}
-            >
-                {!loading ? (
-                    <FlatList
-                        data={extensions}
-                        keyExtractor={(item) => item.sourceId.toString()}
-                        renderItem={({ item }) => (
-                            <TouchableRipple
-                                style={styles.sourceCard}
-                                onPress={() =>
-                                    navigation.navigate(
-                                        item.sourceName + "Stack"
-                                    )
-                                }
-                                rippleColor={theme.rippleColorDark}
-                            >
-                                <>
-                                    <Image
-                                        source={{
-                                            uri: item.sourceCover,
-                                        }}
-                                        style={{
-                                            width: 40,
-                                            height: 40,
-                                            borderRadius: 6,
-                                        }}
-                                        resizeMode="contain"
-                                    />
-                                    <View
-                                        style={{
-                                            marginLeft: 15,
-                                            flex: 1,
-                                            justifyContent: "space-between",
-                                            flexDirection: "row",
-                                            alignItems: "center",
-                                        }}
-                                    >
-                                        <View>
-                                            <Text
-                                                style={{
-                                                    color:
-                                                        theme.textColorPrimaryDark,
-                                                    fontSize: 14,
-                                                }}
-                                            >
-                                                {item.sourceName}
-                                            </Text>
-                                            <Text
-                                                style={{
-                                                    color:
-                                                        theme.textColorSecondaryDark,
-                                                    fontSize: 12,
-                                                }}
-                                            >
-                                                {item.sourceLanguage}
-                                            </Text>
-                                        </View>
-                                        <View>
-                                            <Button
-                                                labelStyle={{
-                                                    letterSpacing: 0,
-                                                }}
-                                                uppercase={false}
-                                                color={theme.colorAccentDark}
-                                                onPress={() =>
-                                                    navigation.navigate(
-                                                        item.sourceName +
-                                                            "Stack"
-                                                    )
-                                                }
-                                            >
-                                                Browse
-                                            </Button>
-                                        </View>
-                                    </View>
-                                </>
-                            </TouchableRipple>
-                        )}
-                    />
-                ) : (
-                    <View style={{ padding: 20 }}>
-                        <ActivityIndicator
-                            size="small"
-                            color={theme.colorAccentDark}
-                        />
-                    </View>
-                )}
-            </View>
-        </>
-    );
-};
-
-export default Browse;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    sourceCard: {
-        paddingVertical: 10,
-        marginVertical: 5,
-        paddingHorizontal: 20,
-        borderRadius: 6,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-});

src/screens/Browse/Browse.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import {
+    StyleSheet,
+    View,
+    FlatList,
+    ActivityIndicator,
+    RefreshControl,
+} from "react-native";
+import { Appbar } from "../../Components/Appbar";
+import { connect } from "react-redux";
+import { useTheme } from "../../Hooks/useTheme";
+
+import { getSourcesAction } from "../../redux/source/source.actions";
+
+import ExtensionCard from "./components/ExtensionCard";
+import { showToast } from "../../Hooks/showToast";
+
+const Browse = ({ extensions, loading, getSourcesAction }) => {
+    const [refreshing, setRefreshing] = useState(false);
+
+    const theme = useTheme();
+
+    useEffect(() => {
+        getSourcesAction();
+    }, [getSourcesAction]);
+
+    const onRefresh = () => {
+        showToast("Updating extension list");
+        setRefreshing(true);
+        getSourcesAction();
+        setRefreshing(false);
+    };
+
+    const renderExtensionCard = ({ item }) => (
+        <ExtensionCard item={item} theme={theme} />
+    );
+
+    return (
+        <>
+            <Appbar title="Browse" />
+            <View
+                style={[
+                    styles.container,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                <FlatList
+                    data={extensions}
+                    keyExtractor={(item) => item.sourceId.toString()}
+                    renderItem={renderExtensionCard}
+                    ListEmptyComponent={
+                        loading && (
+                            <ActivityIndicator
+                                size="small"
+                                color={theme.colorAccentDark}
+                                style={{ marginTop: 16 }}
+                            />
+                        )
+                    }
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={refreshing}
+                            onRefresh={onRefresh}
+                            colors={["white"]}
+                            progressBackgroundColor={theme.colorAccentDark}
+                        />
+                    }
+                />
+            </View>
+        </>
+    );
+};
+
+const mapStateToProps = (state) => ({
+    extensions: state.extensionReducer.extensions,
+    loading: state.extensionReducer.loading,
+});
+
+export default connect(mapStateToProps, { getSourcesAction })(Browse);
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

src/screens/Browse/components/ExtensionCard.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+import { TouchableRipple, Button } from "react-native-paper";
+import { useNavigation } from "@react-navigation/native";
+
+const ExtensionCard = ({ item, theme }) => {
+    const { sourceName, sourceCover, sourceLanguage, status } = item;
+
+    const navigation = useNavigation();
+
+    const navigateToExtension = () =>
+        navigation.navigate("Extension", {
+            sourceId: item.sourceId,
+            sourceName: item.sourceName,
+            sourceUrl: item.sourceUrl,
+        });
+
+    return (
+        <TouchableRipple
+            style={styles.extensionCard}
+            onPress={navigateToExtension}
+            rippleColor={theme.rippleColor}
+        >
+            <>
+                <Image
+                    source={{ uri: sourceCover }}
+                    style={styles.extensionIcon}
+                    resizeMode="contain"
+                />
+                <View style={styles.extensionDetails}>
+                    <View>
+                        <Text
+                            style={{
+                                color: theme.textColorPrimary,
+                                fontSize: 14,
+                            }}
+                        >
+                            {sourceName}
+                        </Text>
+                        <View style={{ flexDirection: "row" }}>
+                            <Text
+                                style={{
+                                    color: theme.textColorSecondary,
+                                    fontSize: 12,
+                                }}
+                            >
+                                {sourceLanguage}
+                            </Text>
+                            <Text style={styles.sourceStatus}>
+                                {status === 0 && "• Down"}
+                            </Text>
+                        </View>
+                    </View>
+                    <View>
+                        <Button
+                            labelStyle={{ letterSpacing: 0 }}
+                            uppercase={false}
+                            color={theme.colorAccentDark}
+                            onPress={navigateToExtension}
+                        >
+                            Browse
+                        </Button>
+                    </View>
+                </View>
+            </>
+        </TouchableRipple>
+    );
+};
+
+export default ExtensionCard;
+
+const styles = StyleSheet.create({
+    extensionCard: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginVertical: 4,
+        paddingVertical: 8,
+        paddingHorizontal: 20,
+    },
+    extensionIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+    },
+    extensionDetails: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginLeft: 16,
+    },
+    sourceStatus: {
+        color: "#C14033",
+        fontSize: 12,
+        marginLeft: 5,
+    },
+});

src/screens/Chapter/Chapter.js

@@ -0,0 +1,243 @@
+import React, { useState, useEffect, useRef } from "react";
+import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
+
+import { Appbar, Provider, Portal } from "react-native-paper";
+import { CollapsibleHeaderScrollView } from "react-native-collapsible-header-views";
+
+import BottomSheet from "./components/BottomSheet";
+
+import { insertHistoryAction } from "../../redux/history/history.actions";
+import {
+    getChapterAction,
+    markChapterReadAction,
+} from "../../redux/novel/novel.actions";
+
+import { connect, useSelector, useDispatch } from "react-redux";
+import { parseChapterNumber } from "../../Services/updates";
+import { updateChaptersRead } from "../../redux/tracker/tracker.actions";
+
+const ChapterItem = ({
+    route,
+    navigation,
+    theme,
+    insertHistoryAction,
+    markChapterReadAction,
+    getChapterAction,
+    chapter,
+    loading,
+    reader,
+}) => {
+    const {
+        chapterId,
+        extensionId,
+        chapterUrl,
+        novelUrl,
+        novelId,
+    } = route.params;
+
+    let _panel = useRef(null);
+
+    const dispatch = useDispatch();
+
+    const trackedNovels = useSelector(
+        (state) => state.trackerReducer.trackedNovels
+    );
+    const tracker = useSelector((state) => state.trackerReducer.tracker);
+
+    let isTracked = false;
+
+    if (!loading) {
+        isTracked = trackedNovels.find((obj) => obj.novelId === novelId);
+    }
+
+    useEffect(() => {
+        getChapterAction(extensionId, chapterUrl, novelUrl, chapterId);
+        insertHistoryAction(novelId, chapterId);
+    }, []);
+
+    const readerBackground = (val) => {
+        const backgroundColor = {
+            1: "#000000",
+            2: "#FFFFFF",
+            3: "#F4ECD8",
+        };
+
+        return backgroundColor[val];
+    };
+
+    const readerTextColor = (val) => {
+        const textColor = val === 1 ? "rgba(255,255,255,0.7)" : "#000000";
+
+        return textColor;
+    };
+
+    const chapterNumber = !loading && parseChapterNumber(chapter.chapterName);
+
+    const readerLineHeight = (val) => {
+        const lineHeight = {
+            12: 20,
+            14: 22,
+            16: 25,
+            18: 26,
+            20: 28,
+        };
+        return lineHeight[val];
+    };
+
+    const isCloseToBottom = ({
+        layoutMeasurement,
+        contentOffset,
+        contentSize,
+    }) => {
+        const paddingToBottom = 40;
+        return (
+            layoutMeasurement.height + contentOffset.y >=
+            contentSize.height - paddingToBottom
+        );
+    };
+
+    return (
+        <Provider>
+            <CollapsibleHeaderScrollView
+                headerContainerBackgroundColor="rgba(0,0,0,0.4)"
+                CollapsibleHeaderComponent={
+                    <Appbar.Header
+                        style={{
+                            backgroundColor: "transparent",
+                            elevation: 0,
+                        }}
+                    >
+                        <Appbar.BackAction
+                            onPress={() => navigation.goBack()}
+                            color="#FFFFFF"
+                            size={26}
+                            style={{ marginRight: 0 }}
+                        />
+                        <Appbar.Content
+                            title={loading ? "Chapter" : chapter.chapterName}
+                            titleStyle={{ color: "#FFFFFF" }}
+                        />
+                        {!loading && (
+                            <>
+                                <Appbar.Action
+                                    icon="chevron-left"
+                                    size={26}
+                                    disabled={!chapter.prevChapter}
+                                    onPress={() => {
+                                        navigation.replace("Chapter", {
+                                            chapterUrl: chapter.prevChapter,
+                                            chapterId: chapterId - 1,
+                                            extensionId,
+                                            novelUrl,
+                                            novelId,
+                                            chapterName: chapter.chapterName,
+                                        });
+                                    }}
+                                    color="#FFFFFF"
+                                />
+                                <Appbar.Action
+                                    icon="chevron-right"
+                                    size={26}
+                                    disabled={!chapter.nextChapter}
+                                    onPress={() => {
+                                        navigation.replace("Chapter", {
+                                            chapterUrl: chapter.nextChapter,
+                                            extensionId,
+                                            novelUrl,
+                                            novelId,
+                                            chapterId: chapterId + 1,
+                                            chapterName: chapter.chapterName,
+                                        });
+                                    }}
+                                    color="#FFFFFF"
+                                />
+                                <Appbar.Action
+                                    icon="dots-vertical"
+                                    size={26}
+                                    onPress={() =>
+                                        _panel.current.show({ velocity: -1.5 })
+                                    }
+                                    color="#FFFFFF"
+                                />
+                            </>
+                        )}
+                    </Appbar.Header>
+                }
+                headerHeight={100}
+                contentContainerStyle={[
+                    styles.container,
+                    { backgroundColor: readerBackground(reader.theme) },
+                ]}
+                onScroll={({ nativeEvent }) => {
+                    if (isCloseToBottom(nativeEvent)) {
+                        markChapterReadAction(chapterId);
+                        if (
+                            isTracked &&
+                            chapterNumber &&
+                            chapterNumber >
+                                isTracked.my_list_status.num_chapters_read
+                        ) {
+                            dispatch(
+                                updateChaptersRead(
+                                    isTracked.id,
+                                    tracker.access_token,
+                                    chapterNumber
+                                )
+                            );
+                        }
+                    }
+                }}
+            >
+                {loading ? (
+                    <View style={{ flex: 1, justifyContent: "center" }}>
+                        <ActivityIndicator
+                            size={50}
+                            color={theme.colorAccentDark}
+                        />
+                    </View>
+                ) : (
+                    <Text
+                        style={[
+                            {
+                                paddingVertical: 15,
+                                fontSize: reader.textSize,
+                                color: readerTextColor(reader.theme),
+                                lineHeight: readerLineHeight(reader.textSize),
+                                textAlign: reader.textAlign,
+                                paddingHorizontal: `${reader.padding}%`,
+                            },
+                            reader.fontFamily && {
+                                fontFamily: reader.fontFamily,
+                            },
+                        ]}
+                    >
+                        {chapter.chapterText.trim()}
+                    </Text>
+                )}
+                <Portal>
+                    <BottomSheet bottomSheetRef={_panel} />
+                </Portal>
+            </CollapsibleHeaderScrollView>
+        </Provider>
+    );
+};
+
+const mapStateToProps = (state) => ({
+    theme: state.themeReducer.theme,
+    chapter: state.novelReducer.chapter,
+    loading: state.novelReducer.chapterLoading,
+    reader: state.settingsReducer.reader,
+});
+
+export default connect(mapStateToProps, {
+    insertHistoryAction,
+    markChapterReadAction,
+    getChapterAction,
+})(ChapterItem);
+
+const styles = StyleSheet.create({
+    container: {
+        flexGrow: 1,
+        paddingVertical: 10,
+    },
+});

src/screens/Chapter/components/BottomSheet.js

@@ -0,0 +1,276 @@
+import React from "react";
+import { Animated, StyleSheet, View, Text, Dimensions } from "react-native";
+import { ToggleButton, IconButton, Chip } from "react-native-paper";
+import Slider from "@react-native-community/slider";
+import Bottomsheet from "rn-sliding-up-panel";
+import { fonts } from "../../../Services/utils/constants";
+
+import { connect } from "react-redux";
+
+import {
+    setReaderFont,
+    updateReaderPadding,
+    updateReaderTextAlign,
+    updateReaderTextSize,
+    updateReaderTheme,
+} from "../../../redux/settings/settings.actions";
+import BottomSheetHandle from "../../../Components/BottomSheetHandle";
+
+const ChapterBottomSheet = ({
+    bottomSheetRef,
+    theme,
+    reader,
+    updateReaderTextSize,
+    updateReaderTheme,
+    updateReaderTextAlign,
+    updateReaderPadding,
+    setReaderFont,
+}) => {
+    return (
+        <Bottomsheet
+            animatedValue={new Animated.Value(0)}
+            ref={bottomSheetRef}
+            draggableRange={{ top: 400, bottom: 0 }}
+            snappingPoints={[0, 400]}
+            showBackdrop={false}
+        >
+            <View style={styles.contentContainer}>
+                <BottomSheetHandle />
+                <View style={styles.readerSettingsContainer}>
+                    <Text
+                        style={{
+                            color: "#FFFFFF",
+                            fontWeight: "bold",
+                        }}
+                    >
+                        Text Size
+                    </Text>
+                    <Slider
+                        style={{
+                            width: Dimensions.get("window").width,
+                            height: 40,
+                        }}
+                        value={reader.textSize}
+                        minimumValue={12}
+                        maximumValue={20}
+                        step={2}
+                        minimumTrackTintColor={theme.colorAccentDark}
+                        maximumTrackTintColor="#000000"
+                        thumbTintColor={theme.colorAccentDark}
+                        onValueChange={(value) => updateReaderTextSize(value)}
+                    />
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            justifyContent: "center",
+                        }}
+                    >
+                        <View
+                            style={{
+                                justifyContent: "center",
+                                alignItems: "center",
+                            }}
+                        >
+                            <Text
+                                style={{
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                }}
+                            >
+                                Reader Theme
+                            </Text>
+                            <ToggleButton.Row
+                                onValueChange={(value) =>
+                                    updateReaderTheme(value)
+                                }
+                                value={reader.theme}
+                                style={{ marginTop: 10 }}
+                            >
+                                <ToggleButton
+                                    icon="format-text"
+                                    color="#FFFFFF"
+                                    value={1}
+                                    style={{
+                                        backgroundColor: "#000000",
+                                        marginHorizontal: 10,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon="format-text"
+                                    color="#000000"
+                                    value={2}
+                                    style={{
+                                        backgroundColor: "#FFFFFF",
+                                        marginHorizontal: 10,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon="format-text"
+                                    color="#000000"
+                                    value={3}
+                                    style={{
+                                        backgroundColor: "#F4ECD8",
+                                        marginHorizontal: 10,
+                                    }}
+                                />
+                            </ToggleButton.Row>
+                        </View>
+                        <View
+                            style={{
+                                justifyContent: "center",
+                                alignItems: "center",
+                            }}
+                        >
+                            <Text
+                                style={{
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                }}
+                            >
+                                Text Align
+                            </Text>
+                            <ToggleButton.Row
+                                onValueChange={(value) =>
+                                    updateReaderTextAlign(value ?? "left")
+                                }
+                                value={reader.textAlign}
+                                style={{ marginTop: 10 }}
+                            >
+                                <ToggleButton
+                                    icon="format-align-left"
+                                    color="#000000"
+                                    value="left"
+                                    style={{
+                                        backgroundColor: "#FFFFFF",
+                                        marginHorizontal: 10,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon="format-align-justify"
+                                    color="#000000"
+                                    value="justify"
+                                    style={{
+                                        backgroundColor: "#FFFFFF",
+                                        marginHorizontal: 10,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon="format-align-right"
+                                    color="#000000"
+                                    value="right"
+                                    style={{
+                                        backgroundColor: "#FFFFFF",
+                                        marginHorizontal: 10,
+                                    }}
+                                />
+                            </ToggleButton.Row>
+                        </View>
+                    </View>
+                    <Text
+                        style={{
+                            color: "#FFFFFF",
+                            fontWeight: "bold",
+                            marginTop: 10,
+                        }}
+                    >
+                        Padding
+                    </Text>
+                    <View
+                        style={{
+                            width: "100%",
+                            flexDirection: "row",
+                            justifyContent: "center",
+                            alignItems: "center",
+                        }}
+                    >
+                        <IconButton
+                            icon="minus"
+                            color={theme.colorAccentDark}
+                            size={26}
+                            disabled={reader.padding <= 0 ? true : false}
+                            onPress={() =>
+                                updateReaderPadding(reader.padding - 1)
+                            }
+                        />
+                        <Text
+                            style={{
+                                color: "#FFFFFF",
+                                paddingHorizontal: 50,
+                            }}
+                        >
+                            {`${reader.padding}%`}
+                        </Text>
+                        <IconButton
+                            icon="plus"
+                            color={theme.colorAccentDark}
+                            size={26}
+                            disabled={reader.padding >= 10 ? true : false}
+                            onPress={() =>
+                                updateReaderPadding(reader.padding + 1)
+                            }
+                        />
+                    </View>
+                    <Text
+                        style={{
+                            color: "#FFFFFF",
+                            fontWeight: "bold",
+                            marginTop: 10,
+                        }}
+                    >
+                        Font Style
+                    </Text>
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            justifyContent: "center",
+                        }}
+                    >
+                        {fonts.map((font, index) => (
+                            <Chip
+                                key={index}
+                                onPress={() => setReaderFont(font.fontFamily)}
+                                textStyle={{ fontFamily: font.fontFamily }}
+                                style={{
+                                    borderWidth: 0,
+                                    marginHorizontal: 5,
+                                    marginVertical: 5,
+                                }}
+                                selected={
+                                    reader.fontFamily === font.fontFamily
+                                        ? true
+                                        : false
+                                }
+                            >
+                                {font.name}
+                            </Chip>
+                        ))}
+                    </View>
+                </View>
+            </View>
+        </Bottomsheet>
+    );
+};
+
+const mapStateToProps = (state) => ({
+    theme: state.themeReducer.theme,
+    reader: state.settingsReducer.reader,
+});
+
+export default connect(mapStateToProps, {
+    updateReaderTextSize,
+    updateReaderTheme,
+    updateReaderTextAlign,
+    updateReaderPadding,
+    setReaderFont,
+})(ChapterBottomSheet);
+
+const styles = StyleSheet.create({
+    contentContainer: {
+        flex: 1,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        backgroundColor: "rgba(0,0,0,0.4)",
+    },
+    readerSettingsContainer: { flex: 1, alignItems: "center", paddingTop: 30 },
+});

src/screens/ChapterItem.js

@@ -1,315 +0,0 @@
-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 { CollapsibleHeaderScrollView } from "react-native-collapsible-header-views";
-
-import BottomSheet from "../components/chapter/BottomSheet";
-
-import * as SQLite from "expo-sqlite";
-const db = SQLite.openDatabase("lnreader.db");
-
-import { fetchChapterFromSource } from "../services/api";
-
-import { getReaderTheme } from "../services/asyncStorage";
-
-const ChapterItem = ({ route, navigation }) => {
-    const { extensionId, chapterUrl, novelUrl, chapterName } = route.params;
-
-    const [loading, setLoading] = useState(true);
-
-    const [chapter, setChapter] = useState();
-
-    const [size, setSize] = useState(16);
-
-    const [readerTheme, setReaderTheme] = useState(1);
-
-    getReaderTheme().then((value) => setReaderTheme(value));
-
-    const setHistory = () => {
-        db.transaction((tx) => {
-            tx.executeSql(
-                "INSERT INTO HistoryTable (chapterUrl, novelUrl, chapterName, lastRead) VALUES ( ?, ?, ?, (datetime('now','localtime')))",
-                [chapterUrl, novelUrl, chapterName],
-                (tx, res) =>
-                    console.log(
-                        "Inserted into history table: " + novelUrl + chapterUrl
-                    ),
-                (tx, error) => console.log(error)
-            );
-            tx.executeSql(
-                "UPDATE LibraryTable SET lastRead = ?, lastReadName = ?, unread = 0 WHERE novelUrl = ?",
-                [chapterUrl, chapterName, novelUrl],
-                (tx, res) =>
-                    console.log("Set Last Read " + novelUrl + chapterUrl),
-                (tx, error) => console.log(error)
-            );
-        });
-    };
-
-    const updateHistory = () => {
-        db.transaction((tx) => {
-            tx.executeSql(
-                "UPDATE HistoryTable SET lastRead = (datetime('now','localtime')), chapterName=?, chapterUrl=? WHERE novelUrl = ?",
-                [chapterName, chapterUrl, novelUrl],
-                (tx, res) =>
-                    console.log("Updated into history table: " + novelUrl),
-                (tx, error) => console.log(error)
-            );
-            tx.executeSql(
-                "UPDATE LibraryTable SET lastRead = ?, lastReadName = ?, unread = 0 WHERE novelUrl = ?",
-                [chapterUrl, chapterName, novelUrl],
-                (tx, res) =>
-                    console.log("Set Last read" + novelUrl + chapterUrl),
-                (tx, error) => console.log(error)
-            );
-        });
-    };
-
-    const setRead = () => {
-        db.transaction((tx) => {
-            tx.executeSql(
-                "UPDATE ChapterTable SET `read` = 1 WHERE chapterUrl = ?",
-                [chapterUrl],
-                (tx, res) => console.log("Updated readStatus: " + novelUrl),
-                (tx, error) => console.log(error)
-            );
-        });
-    };
-
-    const checkIfInHistory = () => {
-        db.transaction((tx) => {
-            tx.executeSql(
-                "SELECT * FROM HistoryTable WHERE novelUrl=?",
-                [novelUrl],
-                (txObj, res) => {
-                    if (res.rows.length === 0) {
-                        console.log("Not In History");
-                        setHistory();
-                    } else {
-                        console.log("In History");
-                        updateHistory();
-                    }
-                },
-                (txObj, error) => console.log("Error ", error)
-            );
-        });
-    };
-
-    // const updateLastRead = () => {
-    //     db.transaction((tx) => {
-
-    //         tx.executeSql(
-    //             "UPDATE LibraryTable SET lastRead = ?, lastReadName = ?, unread = 0 WHERE novelUrl = ?",
-    //             [chapter.nextChapter, chapterName, novelUrl],
-    //             (tx, res) =>
-    //                 console.log("Set Last Read " + novelUrl + chapterUrl),
-    //             (tx, error) => console.log(error)
-    //         );
-    //     });
-    // };
-
-    const checkIfDownloaded = () => {
-        db.transaction((tx) => {
-            tx.executeSql(
-                "SELECT * FROM DownloadsTable WHERE chapterUrl=? AND novelUrl=?",
-                [chapterUrl, novelUrl],
-                (txObj, res) => {
-                    if (res.rows.length === 0) {
-                        // console.log("Not Downloaded");
-                        fetchChapterFromSource(
-                            extensionId,
-                            novelUrl,
-                            chapterUrl
-                        ).then((res) => {
-                            setChapter(res);
-                            setLoading(false);
-                        });
-                    } else {
-                        // console.log("Already Downloaded");
-                        getChapterFromDB();
-                    }
-                    checkIfInHistory();
-                },
-                (txObj, error) => console.log("Error ", error)
-            );
-        });
-    };
-
-    const getChapterFromDB = () => {
-        db.transaction((tx) => {
-            tx.executeSql(
-                `SELECT * FROM DownloadsTable WHERE chapterUrl = ?`,
-                [chapterUrl],
-                (tx, results) => {
-                    setChapter(results.rows.item(0));
-                    setLoading(false);
-                },
-                (txObj, error) => console.log("Error ", error)
-            );
-        });
-    };
-
-    useEffect(() => {
-        checkIfDownloaded();
-    }, []);
-
-    const isCloseToBottom = ({
-        layoutMeasurement,
-        contentOffset,
-        contentSize,
-    }) => {
-        const paddingToBottom = 0;
-        return (
-            layoutMeasurement.height + contentOffset.y >=
-            contentSize.height - paddingToBottom
-        );
-    };
-
-    return (
-        <Provider>
-            <CollapsibleHeaderScrollView
-                headerContainerBackgroundColor={"rgba(0,0,0,0.4)"}
-                CollapsibleHeaderComponent={
-                    <Appbar.Header
-                        style={{
-                            backgroundColor: "transparent",
-                            elevation: 0,
-                        }}
-                    >
-                        <Appbar.BackAction
-                            onPress={() => {
-                                // navigation.navigate("NovelItem", {
-                                //     novelUrl,
-                                //     extensionId,
-                                //     navigatingFrom: 0,
-                                // });
-                                navigation.goBack();
-                            }}
-                            color={"white"}
-                            size={26}
-                            style={{ marginRight: 0 }}
-                        />
-                        <Appbar.Content
-                            title={loading ? "Chapter" : chapter.chapterName}
-                            titleStyle={{ color: theme.textColorPrimaryDark }}
-                        />
-                        {!loading && (
-                            <>
-                                <Appbar.Action
-                                    icon="chevron-left"
-                                    size={26}
-                                    disabled={!chapter.prevChapter}
-                                    onPress={() => {
-                                        navigation.push("ChapterItem", {
-                                            chapterUrl: chapter.prevChapter,
-                                            extensionId,
-                                            novelUrl,
-                                            chapterName: chapter.chapterName,
-                                        });
-                                    }}
-                                    color={"white"}
-                                />
-                                <Appbar.Action
-                                    icon="chevron-right"
-                                    size={26}
-                                    disabled={!chapter.nextChapter}
-                                    onPress={() => {
-                                        navigation.push("ChapterItem", {
-                                            chapterUrl: chapter.nextChapter,
-                                            extensionId,
-                                            novelUrl,
-                                            chapterName: chapter.chapterName,
-                                        });
-                                    }}
-                                    color={"white"}
-                                />
-                                <Appbar.Action
-                                    icon="dots-vertical"
-                                    size={26}
-                                    onPress={() =>
-                                        _panel.show({ velocity: -1.5 })
-                                    }
-                                    color={"white"}
-                                />
-                            </>
-                        )}
-                    </Appbar.Header>
-                }
-                headerHeight={100}
-                contentContainerStyle={[
-                    styles.container,
-                    readerTheme === 1 && {
-                        backgroundColor: theme.colorDarkPrimary,
-                    },
-                    readerTheme === 2 && {
-                        backgroundColor: "white",
-                    },
-                    readerTheme === 3 && {
-                        backgroundColor: "#F4ECD8",
-                    },
-                ]}
-                onScroll={({ nativeEvent }) => {
-                    // _panel.hide();
-                    if (isCloseToBottom(nativeEvent)) {
-                        // console.log("Scroll End Reached");
-                        setRead();
-                    }
-                }}
-            >
-                {/* <Button mode="contained" onPress={() => setHistory()}>
-                    Set History
-                </Button> */}
-                {loading ? (
-                    <View style={{ flex: 1, justifyContent: "center" }}>
-                        <ActivityIndicator
-                            size={50}
-                            color={theme.colorAccentDark}
-                        />
-                    </View>
-                ) : (
-                    <>
-                        <Text
-                            style={[
-                                {
-                                    paddingVertical: 15,
-                                    fontSize: size,
-                                },
-                                readerTheme === 1
-                                    ? { color: theme.textColorSecondaryDark }
-                                    : { color: "black" },
-                                size === 16
-                                    ? { lineHeight: 25 }
-                                    : size === 20
-                                    ? { lineHeight: 28 }
-                                    : size === 12 && { lineHeight: 20 },
-                            ]}
-                        >
-                            {chapter.chapterText.trim()}
-                        </Text>
-                    </>
-                )}
-                <Portal>
-                    <BottomSheet
-                        bottomSheetRef={(c) => (_panel = c)}
-                        setSize={setSize}
-                        size={size}
-                        setReaderTheme={setReaderTheme}
-                        readerTheme={readerTheme}
-                    />
-                </Portal>
-            </CollapsibleHeaderScrollView>
-        </Provider>
-    );
-};
-
-export default ChapterItem;
-
-const styles = StyleSheet.create({
-    container: {
-        flexGrow: 1,
-        paddingHorizontal: 10,
-        paddingVertical: 10,
-    },
-});

src/screens/Extension/Extension.js

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native";
+import { Provider } from "react-native-paper";
+import * as WebBrowser from "expo-web-browser";
+
+import NovelCover from "../../Components/NovelCover";
+import EmptyView from "../../Components/EmptyView";
+
+import { useSelector } from "react-redux";
+import { Searchbar } from "../../Components/Searchbar";
+import { useTheme } from "../../Hooks/useTheme";
+import { useLibrary } from "../../Hooks/useLibrary";
+
+const Extension = ({ navigation, route }) => {
+    const { sourceId, sourceName, sourceUrl } = route.params;
+
+    const theme = useTheme();
+    const library = useLibrary();
+    const itemsPerRow = useSelector(
+        (state) => state.settingsReducer.itemsPerRow
+    );
+
+    const [loading, setLoading] = useState(true);
+    const [novels, setNovels] = useState();
+
+    const [searchText, setSearchText] = useState("");
+
+    const getSourceUrl = () => {
+        if (sourceId === 1) {
+            return `https://lnreader-extensions.vercel.app/api/1/novels/1/?o=rating`;
+        } else {
+            return `https://lnreader-extensions.vercel.app/api/${sourceId}/novels/`;
+        }
+    };
+
+    const getSearchUrl = () => {
+        if (sourceId === 1) {
+            return `https://lnreader-extensions.vercel.app/api/1/search/?s=${searchText}&?o=rating`;
+        } else {
+            return `https://lnreader-extensions.vercel.app/api/${sourceId}/search/?s=${searchText}`;
+        }
+    };
+
+    const getNovels = () => {
+        fetch(getSourceUrl())
+            .then((response) => response.json())
+            .then((json) => {
+                setNovels(json);
+                setLoading(false);
+            });
+    };
+
+    const getSearchResults = () => {
+        setLoading(true);
+        fetch(getSearchUrl())
+            .then((response) => response.json())
+            .then((json) => {
+                setNovels(json);
+                setLoading(false);
+            });
+    };
+
+    const checkIFInLibrary = (id) => {
+        return library.some((obj) => obj.novelUrl === id);
+    };
+
+    useEffect(() => {
+        getNovels();
+    }, []);
+
+    return (
+        <Provider>
+            <View
+                style={[
+                    styles.container,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                <Searchbar
+                    theme={theme}
+                    placeholder={`Search ${sourceName}`}
+                    left="arrow-left"
+                    onPressLeft={() => navigation.goBack()}
+                    searchText={searchText}
+                    onChangeText={(text) => setSearchText(text)}
+                    onSubmitEditing={getSearchResults}
+                    right="earth"
+                    onPressRight={() => WebBrowser.openBrowserAsync(sourceUrl)}
+                />
+
+                {loading ? (
+                    <View style={{ flex: 1, justifyContent: "center" }}>
+                        <ActivityIndicator
+                            size={60}
+                            color={theme.colorAccentDark}
+                        />
+                    </View>
+                ) : (
+                    <FlatList
+                        contentContainerStyle={{ flexGrow: 1 }}
+                        numColumns={itemsPerRow}
+                        key={itemsPerRow}
+                        data={novels}
+                        showsVerticalScrollIndicator={false}
+                        keyExtractor={(item) => item.novelUrl}
+                        renderItem={({ item }) => (
+                            <NovelCover
+                                item={item}
+                                onPress={() =>
+                                    navigation.navigate("Novel", {
+                                        novelName: item.novelName,
+                                        novelCover: item.novelCover,
+                                        novelUrl: item.novelUrl,
+                                        sourceId: item.extensionId,
+                                    })
+                                }
+                                libraryStatus={checkIFInLibrary(item.novelUrl)}
+                            />
+                        )}
+                        ListEmptyComponent={
+                            novels.length === 0 && (
+                                <EmptyView
+                                    icon="(；￣Д￣)"
+                                    description="No results found"
+                                />
+                            )
+                        }
+                    />
+                )}
+            </View>
+        </Provider>
+    );
+};
+
+export default Extension;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 4,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+});

src/screens/History/History.js

@@ -1,63 +1,55 @@
 import React, { useState, useCallback } from "react";
 import { useFocusEffect } from "@react-navigation/native";
 
+import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native";
+
+import { Appbar } from "../../Components/Appbar";
+import HistoryCard from "./components/HistoryCard";
+
+import { connect } from "react-redux";
+import EmptyView from "../../Components/EmptyView";
+
 import {
-    StyleSheet,
-    View,
-    Text,
-    FlatList,
-    ActivityIndicator,
-} from "react-native";
-
-import { CustomAppbar } from "../../components/common/Appbar";
-import HistoryCard from "../../components/history/HistoryCard";
-
-import { getHistoryFromDb, deleteChapterHistory } from "../../services/db";
-
-import { useSelector } from "react-redux";
-
-const History = ({ navigation }) => {
-    const [loading, setLoading] = useState(true);
-    const [history, setHistory] = useState();
-
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    const getHistory = async () => {
-        await getHistoryFromDb().then((res) => setHistory(res));
-        setLoading(false);
-    };
-
-    const deleteHistory = (novelId) => {
-        deleteChapterHistory(novelId);
-        getHistory();
-    };
+    getHistoryAction,
+    deleteHistoryAction,
+} from "../../redux/history/history.actions";
 
+const History = ({
+    navigation,
+    theme,
+    history,
+    loading,
+    getHistoryAction,
+    deleteHistoryAction,
+}) => {
     useFocusEffect(
         useCallback(() => {
-            getHistory();
-        }, [])
+            getHistoryAction();
+        }, [getHistoryAction])
+    );
+
+    const renderHistoryCard = ({ item }) => (
+        <HistoryCard
+            item={item}
+            deleteHistoryAction={deleteHistoryAction}
+            navigation={navigation}
+        />
     );
 
     return (
         <>
-            <CustomAppbar title="History" />
+            <Appbar title="History" />
             <View
                 style={[
                     styles.container,
-                    { backgroundColor: theme.colorDarkPrimaryDark },
+                    { backgroundColor: theme.colorPrimaryDark },
                 ]}
             >
                 <FlatList
-                    contentContainerStyle={{ flex: 1 }}
+                    contentContainerStyle={{ flexGrow: 1 }}
                     data={history}
-                    keyExtractor={(item) => item.historyId.toString()}
-                    renderItem={({ item }) => (
-                        <HistoryCard
-                            item={item}
-                            deleteHistory={deleteHistory}
-                            navigation={navigation}
-                        />
-                    )}
+                    keyExtractor={(item) => item.novelUrl.toString()}
+                    renderItem={renderHistoryCard}
                     ListFooterComponent={
                         loading && (
                             <ActivityIndicator
@@ -68,34 +60,10 @@ 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>
+                            <EmptyView
+                                icon="(˘･_･˘)"
+                                description="Nothing read recently"
+                            />
                         )
                     }
                 />
@@ -104,17 +72,20 @@ const History = ({ navigation }) => {
     );
 };
 
-export default History;
+const mapStateToProps = (state) => ({
+    theme: state.themeReducer.theme,
+    history: state.historyReducer.history,
+    loading: state.historyReducer.loading,
+});
+
+export default connect(mapStateToProps, {
+    getHistoryAction,
+    deleteHistoryAction,
+})(History);
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         padding: 10,
     },
-    historyCard: {
-        marginTop: 10,
-        borderRadius: 4,
-        flexDirection: "row",
-        alignItems: "center",
-    },
 });

src/screens/History/components/HistoryCard.js

@@ -7,48 +7,34 @@ import moment from "moment";
 
 import { useSelector } from "react-redux";
 
-const HistoryCard = ({ item, deleteHistory, navigation }) => {
+const HistoryCard = ({ item, deleteHistoryAction, navigation }) => {
     const theme = useSelector((state) => state.themeReducer.theme);
 
     return (
         <TouchableRipple
-            style={[
-                styles.historyCard,
-                // { backgroundColor: theme.colorDarkPrimary },
-            ]}
-            rippleColor={theme.rippleColorDark}
+            style={styles.historyCard}
+            rippleColor={theme.rippleColor}
             borderless
             onPress={() =>
-                navigation.navigate("NovelItem", {
+                navigation.navigate("Novel", {
                     novelName: item.novelName,
                     novelCover: item.novelCover,
                     extensionId: item.extensionId,
                     novelUrl: item.novelUrl,
-                    navigatingFrom: 0,
+                    sourceId: item.sourceId,
                 })
             }
         >
             <>
                 <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={{
-                                color: theme.textColorPrimaryDark,
+                                color: theme.textColorPrimary,
                                 fontWeight: "bold",
                                 fontSize: 16,
                             }}
@@ -58,13 +44,13 @@ const HistoryCard = ({ item, deleteHistory, navigation }) => {
                         </Text>
                         <Text
                             style={{
-                                color: theme.textColorSecondaryDark,
+                                color: theme.textColorSecondary,
                                 marginTop: 2,
                             }}
                             numberOfLines={1}
                         >
                             {`${item.chapterName} - ${moment(
-                                item.lastRead
+                                item.historyTimeRead
                             ).calendar()}`}
                         </Text>
                     </View>
@@ -77,24 +63,24 @@ const HistoryCard = ({ item, deleteHistory, navigation }) => {
                         <IconButton
                             icon="delete-outline"
                             size={22}
-                            color={theme.textColorPrimaryDark}
+                            color={theme.textColorPrimary}
                             style={{
                                 marginRight: 0,
                             }}
-                            onPress={() => deleteHistory(item.novelUrl)}
+                            onPress={() => deleteHistoryAction(item.novelId)}
                         />
                         <IconButton
                             icon="play"
                             size={24}
-                            color={theme.textColorPrimaryDark}
+                            color={theme.textColorPrimary}
                             style={{ marginRight: 10 }}
                             onPress={() =>
-                                navigation.navigate("ChapterItem", {
+                                navigation.navigate("Chapter", {
+                                    chapterId: item.historyChapterId,
                                     chapterUrl: item.chapterUrl,
-                                    extensionId: item.extensionId,
+                                    extensionId: item.sourceId,
                                     novelUrl: item.novelUrl,
-                                    novelName: item.novelName,
-                                    novelCover: item.novelCover,
+                                    novelId: item.novelId,
                                     chapterName: item.chapterName,
                                 })
                             }
@@ -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",
+    },
 });

src/screens/Library.js

@@ -1,220 +0,0 @@
-import React, { useState, useCallback } from "react";
-import {
-    StyleSheet,
-    Text,
-    View,
-    TextInput,
-    RefreshControl,
-    ActivityIndicator,
-    ToastAndroid,
-} from "react-native";
-import { Appbar } from "react-native-paper";
-import { FlatList } from "react-native-gesture-handler";
-import { useFocusEffect } from "@react-navigation/native";
-
-import NovelCover from "../components/common/NovelCover";
-
-import { useSelector } from "react-redux";
-
-import { getLibraryFromDb, searchInLibrary } from "../services/db";
-
-import { getLibraryNovels } from "../redux/actions/library";
-
-const LibraryScreen = ({ navigation }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    const [refreshing, setRefreshing] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [novels, setNovels] = useState();
-
-    const [searchBar, setSearchBar] = useState(false);
-    const [searchText, setSearchText] = useState("");
-
-    const getLibrary = async () => {
-        await getLibraryFromDb().then((res) => {
-            setNovels(res);
-        });
-        setLoading(false);
-        setRefreshing(false);
-    };
-
-    const searchNovel = async (searchText) => {
-        await searchInLibrary(searchText).then((res) => setNovels(res));
-        setRefreshing(false);
-    };
-
-    useFocusEffect(
-        useCallback(() => {
-            setSearchBar(false);
-            getLibrary();
-        }, [])
-    );
-
-    const onRefresh = () => {
-        ToastAndroid.show("Updating library", ToastAndroid.SHORT);
-        setRefreshing(true);
-        getLibrary();
-    };
-
-    return (
-        <>
-            <Appbar.Header style={{ backgroundColor: theme.colorDarkPrimary }}>
-                {!searchBar ? (
-                    <>
-                        <Appbar.Content
-                            title="Library"
-                            titleStyle={{ color: theme.textColorPrimaryDark }}
-                        />
-                        <Appbar.Action
-                            icon="magnify"
-                            onPress={() => setSearchBar(true)}
-                            color={theme.textColorPrimaryDark}
-                        />
-                        <Appbar.Action
-                            color={theme.textColorPrimaryDark}
-                            icon="filter-variant"
-                            disabled
-                            // onPress={() => _panel.show({ velocity: -1.5 })}
-                        />
-                    </>
-                ) : (
-                    <>
-                        <Appbar.BackAction
-                            onPress={() => {
-                                setSearchBar(false);
-                                setSearchText("");
-                                getLibrary();
-                            }}
-                            color={theme.textColorPrimaryDark}
-                            size={24}
-                        />
-                        <TextInput
-                            placeholder="Search..."
-                            defaultValue={searchText}
-                            style={{
-                                fontSize: 18,
-                                flex: 1,
-                                color: theme.textColorPrimaryDark,
-                                marginLeft: 15,
-                            }}
-                            autoFocus
-                            placeholderTextColor={theme.textColorHintDark}
-                            blurOnSubmit={true}
-                            onChangeText={(text) => {
-                                setSearchText(text);
-                                searchNovel(text);
-                            }}
-                        />
-                        {searchText !== "" && (
-                            <Appbar.Action
-                                icon="close"
-                                onPress={() => {
-                                    setSearchText("");
-                                    // getLibrary();
-                                }}
-                                color={theme.textColorPrimaryDark}
-                            />
-                        )}
-                    </>
-                )}
-            </Appbar.Header>
-            <View
-                style={[
-                    styles.container,
-                    { backgroundColor: theme.colorDarkPrimaryDark },
-                ]}
-            >
-                <FlatList
-                    contentContainerStyle={{ flex: 1 }}
-                    numColumns={3}
-                    data={novels}
-                    showsVerticalScrollIndicator={false}
-                    keyExtractor={(item) => item.novelUrl}
-                    renderItem={({ item }) => (
-                        <NovelCover
-                            item={item}
-                            onPress={() =>
-                                navigation.navigate("NovelItem", {
-                                    ...item,
-                                    navigatingFrom: 1,
-                                })
-                            }
-                        />
-                    )}
-                    refreshControl={
-                        <RefreshControl
-                            refreshing={refreshing}
-                            onRefresh={onRefresh}
-                            colors={["white"]}
-                            progressBackgroundColor={theme.colorAccentDark}
-                        />
-                    }
-                    ListEmptyComponent={
-                        !loading ? (
-                            !searchBar ? (
-                                <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,
-                                        }}
-                                    >
-                                        Your library is empty. Add series to
-                                        your library from Browse.
-                                    </Text>
-                                </View>
-                            ) : (
-                                searchBar &&
-                                searchText !== "" && (
-                                    <Text
-                                        style={{
-                                            color: theme.colorAccentDark,
-                                            fontWeight: "bold",
-                                            marginTop: 10,
-                                            textAlign: "center",
-                                            paddingHorizontal: 30,
-                                        }}
-                                    >
-                                        {`"${searchText}" not in library`}
-                                    </Text>
-                                )
-                            )
-                        ) : (
-                            <ActivityIndicator
-                                size="small"
-                                color={theme.colorAccentDark}
-                            />
-                        )
-                    }
-                />
-            </View>
-        </>
-    );
-};
-
-export default LibraryScreen;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        padding: 4,
-    },
-});

src/screens/Library/Library.js

@@ -0,0 +1,147 @@
+import React, { useState, useCallback } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    RefreshControl,
+    ActivityIndicator,
+} from "react-native";
+import { FlatList } from "react-native-gesture-handler";
+import { useFocusEffect } from "@react-navigation/native";
+import { connect, useDispatch } from "react-redux";
+
+import NovelCover from "../../Components/NovelCover";
+import EmptyView from "../../Components/EmptyView";
+
+import {
+    getLibraryAction,
+    searchLibraryAction,
+} from "../../redux/library/library.actions";
+import { SearchAppbar } from "../../Components/Appbar";
+import { setNovel } from "../../redux/novel/novel.actions";
+import { updateLibraryAction } from "../../redux/updates/updates.actions";
+import { useTheme } from "../../Hooks/useTheme";
+import { Searchbar } from "../../Components/Searchbar";
+
+const LibraryScreen = ({ navigation, novels, loading, itemsPerRow }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    const [refreshing, setRefreshing] = useState(false);
+    const [searchText, setSearchText] = useState("");
+
+    useFocusEffect(
+        useCallback(() => {
+            setSearchText("");
+            dispatch(getLibraryAction());
+        }, [getLibraryAction])
+    );
+
+    const onRefresh = () => {
+        setRefreshing(true);
+        dispatch(updateLibraryAction());
+        setRefreshing(false);
+    };
+
+    const redirectToNovel = (item) => {
+        navigation.navigate("Novel", item);
+        dispatch(setNovel(item));
+    };
+
+    const renderNovels = ({ item }) => (
+        <NovelCover item={item} onPress={() => redirectToNovel(item)} />
+    );
+
+    const clearSearchbar = () => {
+        dispatch(getLibraryAction());
+        setSearchText("");
+    };
+
+    const onChangeText = (text) => {
+        setSearchText(text);
+        dispatch(searchLibraryAction(text));
+    };
+
+    return (
+        <>
+            <View
+                style={[
+                    styles.container,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                <Searchbar
+                    placeholder="Search Library"
+                    searchText={searchText}
+                    clearSearchbar={clearSearchbar}
+                    onChangeText={onChangeText}
+                    left="magnify"
+                    theme={theme}
+                />
+                {loading ? (
+                    <ActivityIndicator
+                        size="small"
+                        color={theme.colorAccentDark}
+                    />
+                ) : (
+                    <FlatList
+                        contentContainerStyle={{
+                            flexGrow: 1,
+                            paddingBottom: 8,
+                        }}
+                        numColumns={itemsPerRow}
+                        key={itemsPerRow}
+                        data={novels}
+                        keyExtractor={(item) => item.novelUrl}
+                        renderItem={renderNovels}
+                        refreshControl={
+                            <RefreshControl
+                                refreshing={refreshing}
+                                onRefresh={onRefresh}
+                                colors={["white"]}
+                                progressBackgroundColor={theme.colorAccentDark}
+                            />
+                        }
+                        ListEmptyComponent={
+                            searchText !== "" ? (
+                                <Text
+                                    style={[
+                                        styles.emptySearch,
+                                        { color: theme.colorAccentDark },
+                                    ]}
+                                >
+                                    {`"${searchText}" not in library`}
+                                </Text>
+                            ) : (
+                                <EmptyView
+                                    icon="Σ(ಠ_ಠ)"
+                                    description="Your library is empty. Add series to your library from Browse."
+                                />
+                            )
+                        }
+                    />
+                )}
+            </View>
+        </>
+    );
+};
+
+const mapStateToProps = (state) => ({
+    itemsPerRow: state.settingsReducer.itemsPerRow,
+    novels: state.libraryReducer.novels,
+    loading: state.libraryReducer.loading,
+});
+
+export default connect(mapStateToProps)(LibraryScreen);
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 4,
+    },
+    emptySearch: {
+        marginTop: 8,
+        textAlign: "center",
+        paddingHorizontal: 16,
+    },
+});

src/screens/More/About.js

@@ -1,79 +1,70 @@
 import React from "react";
+import { View } from "react-native";
 import * as Linking from "expo-linking";
-import { List, Divider } from "react-native-paper";
 
-import { CustomAppbar } from "../../components/common/Appbar";
+import { Appbar } from "../../Components/Appbar";
 
 import { useSelector } from "react-redux";
+import { Divider, ListItem, ListSection } from "../../Components/List";
 
 const AboutScreen = ({ navigation }) => {
     const theme = useSelector((state) => state.themeReducer.theme);
 
     return (
         <>
-            <CustomAppbar
-                title="About"
-                onBackAction={() => navigation.goBack()}
-            />
-            <List.Section
-                style={{
-                    flex: 1,
-                    marginTop: 0,
-                    backgroundColor: theme.colorDarkPrimaryDark,
-                    marginBottom: 0,
-                }}
-            >
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    title="Version"
-                    descriptionStyle={{ color: theme.textColorSecondaryDark }}
-                    description="Stable 1.0.17"
-                />
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    title="Build Time"
-                    descriptionStyle={{ color: theme.textColorSecondaryDark }}
-                    description="09-03-21  09:46 AM"
-                />
-
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    title="What's new"
-                    onPress={() =>
-                        Linking.openURL(
-                            "https://github.com/rajarsheechatterjee/lnreader/commits/master"
-                        )
-                    }
-                    rippleColor={theme.rippleColorDark}
-                />
-                <Divider />
-
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    descriptionStyle={{ color: theme.textColorSecondaryDark }}
-                    title="Github"
-                    description="https://github.com/rajarsheechatterjee/lnreader"
-                    onPress={() =>
-                        Linking.openURL(
-                            "https://github.com/rajarsheechatterjee/lnreader"
-                        )
-                    }
-                    rippleColor={theme.rippleColorDark}
-                />
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    descriptionStyle={{ color: theme.textColorSecondaryDark }}
-                    title="Extensions"
-                    description="https://github.com/rajarsheechatterjee/lnreader-extensions"
-                    descriptionNumberOfLines={1}
-                    onPress={() =>
-                        Linking.openURL(
-                            "https://github.com/rajarsheechatterjee/lnreader-extensions"
-                        )
-                    }
-                    rippleColor={theme.rippleColorDark}
-                />
-            </List.Section>
+            <Appbar title="About" onBackAction={() => navigation.goBack()} />
+            <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+                <ListSection>
+                    <ListItem
+                        title="Version"
+                        description="Stable 1.0.16"
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Build Time"
+                        description="03-05-21 20:45 PM"
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="What's new"
+                        onPress={() =>
+                            Linking.openURL(
+                                "https://github.com/rajarsheechatterjee/lnreader/commits/main"
+                            )
+                        }
+                        theme={theme}
+                    />
+                    <Divider theme={theme} />
+                    <ListItem
+                        title="Discord"
+                        description="https://discord.gg/QdcWN4MD63"
+                        onPress={() =>
+                            Linking.openURL("https://discord.gg/QdcWN4MD63")
+                        }
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Github"
+                        description="https://github.com/rajarsheechatterjee/lnreader"
+                        onPress={() =>
+                            Linking.openURL(
+                                "https://github.com/rajarsheechatterjee/lnreader"
+                            )
+                        }
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Extensions"
+                        description="https://github.com/rajarsheechatterjee/lnreader-extensions"
+                        onPress={() =>
+                            Linking.openURL(
+                                "https://github.com/rajarsheechatterjee/lnreader-extensions"
+                            )
+                        }
+                        theme={theme}
+                    />
+                </ListSection>
+            </View>
         </>
     );
 };

src/screens/More/More.js

@@ -1,49 +1,70 @@
 import React from "react";
-
-import { StyleSheet } from "react-native";
-import { List } from "react-native-paper";
-
-import { CustomAppbar } from "../../components/common/Appbar";
-
+import { StyleSheet, View, Image } from "react-native";
 import { useSelector } from "react-redux";
 
+import { Appbar } from "../../Components/Appbar";
+import { ListItem, ListSection } from "../../Components/List";
+
 const MoreScreen = ({ navigation }) => {
     const theme = useSelector((state) => state.themeReducer.theme);
 
     return (
         <>
-            <CustomAppbar title="More" />
-            <List.Section
-                style={{
-                    flex: 1,
-                    backgroundColor: theme.colorDarkPrimaryDark,
-                    marginTop: 0,
-                    marginBottom: 0,
-                }}
-            >
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    title="Settings"
-                    left={() => (
-                        <List.Icon
-                            color={theme.colorAccentDark}
-                            icon="cog-outline"
+            <Appbar title="More" style={{ elevation: 0 }} />
+            <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+                <View style={{ overflow: "hidden", paddingBottom: 4 }}>
+                    <View
+                        style={{
+                            paddingTop: 20,
+                            paddingBottom: 30,
+                            alignItems: "center",
+                            backgroundColor: theme.colorPrimary,
+                            elevation: 4,
+                        }}
+                    >
+                        <Image
+                            source={require("../../../assets/logo.png")}
+                            style={{
+                                height: 60,
+                                width: 60,
+                                tintColor: theme.textColorPrimary,
+                            }}
                         />
-                    )}
-                    onPress={() => navigation.navigate("Settings")}
-                />
-                <List.Item
-                    titleStyle={{ color: theme.textColorPrimaryDark }}
-                    title="About"
-                    left={() => (
-                        <List.Icon
-                            color={theme.colorAccentDark}
-                            icon="information-outline"
-                        />
-                    )}
-                    onPress={() => navigation.navigate("About")}
-                />
-            </List.Section>
+                    </View>
+                </View>
+                <ListSection>
+                    <ListItem
+                        title="Settings"
+                        icon="cog-outline"
+                        onPress={() =>
+                            navigation.navigate("MoreStack", {
+                                screen: "Settings",
+                            })
+                        }
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Tracking"
+                        icon="sync"
+                        onPress={() =>
+                            navigation.navigate("MoreStack", {
+                                screen: "Trackers",
+                            })
+                        }
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="About"
+                        icon="information-outline"
+                        onPress={() =>
+                            navigation.navigate("MoreStack", {
+                                screen: "About",
+                            })
+                        }
+                        theme={theme}
+                    />
+                </ListSection>
+            </View>
         </>
     );
 };

src/screens/More/Settings.js

@@ -1,210 +1,164 @@
 import React, { useState } from "react";
-import { View, ToastAndroid } from "react-native";
-import { setStatusBarStyle } from "expo-status-bar";
-import { List } from "react-native-paper";
-
+import { View } from "react-native";
 import { connect } from "react-redux";
-import { switchTheme } from "../../redux/actions/theme";
-import {
-    amoledDarkTheme,
-    darkTheme,
-    midnightDuskTheme,
-    lightTheme,
-} from "../../theme/theme";
 
-import { CustomAppbar } from "../../components/common/Appbar";
+import { switchTheme } from "../../redux/theme/theme.actions";
 import {
-    DisplayCheckbox,
-    ThemeCheckbox,
-} from "../../components/settings/Checkbox";
-
-import {
-    setAppTheme,
-    getAppTheme,
-    getDisplayMode,
     setDisplayMode,
-} from "../../services/asyncStorage";
+    setItemsPerRow,
+} from "../../redux/settings/settings.actions";
+import { deleteAllHistory } from "../../database/queries/HistoryQueries";
+import { deleteNovelCache } from "../../database/queries/NovelQueries";
 
+import { Appbar } from "../../Components/Appbar";
 import {
-    deleteHistory,
-    deleteNovelsNotInLibrary,
-    deleteDatabase,
-} from "../../services/db";
+    Divider,
+    ListItem,
+    ListSection,
+    ListSubHeader,
+    InfoItem,
+} from "../../Components/List";
+import DisplayModeModal from "./components/DisplayModeModal";
+import GridSizeModal from "./components/GridSizeModal";
+import ThemeModal from "./components/ThemeModal";
+import { createBackup, restoreBackup } from "../../Services/backup";
+import { useTheme } from "../../Hooks/useTheme";
 
-const SettingsScreen = ({ navigation, theme, switchTheme }) => {
-    const desciptionStyles = {
-        color: theme.textColorSecondaryDark,
+const SettingsScreen = ({
+    navigation,
+    displayMode,
+    itemsPerRow,
+    switchTheme,
+    setDisplayMode,
+    setItemsPerRow,
+}) => {
+    const displayModeLabel = (displayMode) => {
+        const label = {
+            0: "Compact Grid",
+            1: "Comfortable Grid",
+            2: "List",
+        };
+
+        return label[displayMode];
     };
 
-    const titleStyles = { color: theme.textColorPrimaryDark };
+    const theme = useTheme();
 
-    const [displayMode, setDisplay] = useState("compact");
-    const [applicationTheme, setApplicationTheme] = useState("amoledDarkTheme");
+    // Display Mode Modal
+    const [displayModalVisible, setDisplayModalVisible] = useState(false);
+    const showDisplayModal = () => setDisplayModalVisible(true);
+    const hideDisplayModal = () => setDisplayModalVisible(false);
 
-    getAppTheme().then((res) => setApplicationTheme(res));
+    // Theme Modal
+    const [themeModalVisible, setthemeModalVisible] = useState(false);
+    const showthemeModal = () => setthemeModalVisible(true);
+    const hidethemeModal = () => setthemeModalVisible(false);
 
-    getDisplayMode().then((res) => setDisplay(res));
+    // Grid Size Modal
+    const [gridSizeModalVisible, setGridSizeModalVisible] = useState(false);
+    const showGridSizeModal = () => setGridSizeModalVisible(true);
+    const hideGridSizeModal = () => setGridSizeModalVisible(false);
 
     return (
         <>
-            <CustomAppbar
-                title="Settings"
-                onBackAction={() => navigation.goBack()}
-            />
+            <Appbar title="Settings" onBackAction={() => navigation.goBack()} />
             <View
-                style={{ flex: 1, backgroundColor: theme.colorDarkPrimaryDark }}
+                style={{
+                    flex: 1,
+                    backgroundColor: theme.colorPrimaryDark,
+                    paddingVertical: 8,
+                }}
             >
-                <List.Section
-                    style={{
-                        flex: 1,
-                        backgroundColor: theme.colorDarkPrimaryDark,
-                    }}
-                >
-                    <List.Subheader
-                        style={{
-                            color: theme.colorAccentDark,
-                            paddingBottom: 5,
-                        }}
-                    >
-                        Data
-                    </List.Subheader>
-                    <List.Item
-                        titleStyle={titleStyles}
+                <ListSection>
+                    <ListSubHeader theme={theme}>Data</ListSubHeader>
+                    <ListItem
                         title="Clear database"
-                        descriptionStyle={desciptionStyles}
                         description="Delete history for novels not in your library"
-                        onPress={() => deleteNovelsNotInLibrary()}
-                        rippleColor={theme.rippleColorDark}
+                        onPress={() => deleteNovelCache()}
+                        theme={theme}
                     />
-                    <List.Item
-                        titleStyle={titleStyles}
+                    <ListItem
                         title="Clear history"
-                        descriptionStyle={desciptionStyles}
                         description="Delete reading history for all novels"
-                        onPress={() => deleteHistory()}
-                        rippleColor={theme.rippleColorDark}
+                        onPress={() => deleteAllHistory()}
+                        theme={theme}
                     />
-                    <List.Subheader
-                        style={{
-                            color: theme.colorAccentDark,
-                            paddingBottom: 5,
-                        }}
-                    >
-                        Display
-                    </List.Subheader>
-                    <View>
-                        <DisplayCheckbox
-                            value="comfortable"
-                            displayMode={displayMode}
-                            onPress={() => {
-                                setDisplay("comfortable");
-                                setDisplayMode("comfortable");
-                            }}
-                        />
-                    </View>
-                    <View>
-                        <DisplayCheckbox
-                            value="compact"
-                            displayMode={displayMode}
-                            onPress={() => {
-                                setDisplay("compact");
-                                setDisplayMode("compact");
-                            }}
-                        />
-                    </View>
-                    {/* <List.Subheader
-                        style={{
-                            color: theme.colorAccentDark,
-                            paddingBottom: 5,
-                        }}
-                    >
-                        Devloper options
-                    </List.Subheader>
-                    <List.Item
-                        titleStyle={titleStyles}
-                        title="Delete database"
-                        descriptionStyle={desciptionStyles}
-                        description="Delete entire database"
-                        rippleColor={theme.rippleColorDark}
-                        onPress={() => deleteDatabase()}
-                    /> */}
-
-                    <List.Subheader
-                        style={{
-                            color: theme.colorAccentDark,
-                            paddingBottom: 5,
-                        }}
-                    >
-                        Theme
-                    </List.Subheader>
-                    <View>
-                        <ThemeCheckbox
-                            label="Light Theme"
-                            checked={
-                                applicationTheme === "lightTheme" ? true : false
-                            }
-                            onPress={() => {
-                                switchTheme(lightTheme);
-                                setApplicationTheme(`lightTheme`);
-                                setAppTheme("lightTheme");
-                                setStatusBarStyle("dark");
-                            }}
-                        />
-                    </View>
-                    <View>
-                        <ThemeCheckbox
-                            label="Dark Theme"
-                            checked={
-                                applicationTheme === "darkTheme" ? true : false
-                            }
-                            onPress={() => {
-                                switchTheme(darkTheme);
-                                setApplicationTheme("darkTheme");
-                                setAppTheme("darkTheme");
-                                setStatusBarStyle("light");
-                            }}
-                        />
-                        <View>
-                            <ThemeCheckbox
-                                label="Amoled Dark Theme"
-                                checked={
-                                    applicationTheme === "amoledDarkTheme"
-                                        ? true
-                                        : false
-                                }
-                                onPress={() => {
-                                    switchTheme(amoledDarkTheme);
-                                    setApplicationTheme(`amoledDarkTheme`);
-                                    setAppTheme("amoledDarkTheme");
-                                    setStatusBarStyle("light");
-                                }}
-                            />
-                        </View>
-                        <View>
-                            <ThemeCheckbox
-                                label="Midnight Dusk Theme"
-                                checked={
-                                    applicationTheme === "midnightDuskTheme"
-                                        ? true
-                                        : false
-                                }
-                                onPress={() => {
-                                    switchTheme(midnightDuskTheme);
-                                    setApplicationTheme("midnightDuskTheme");
-                                    setAppTheme("midnightDuskTheme");
-                                    setStatusBarStyle("light");
-                                }}
-                            />
-                        </View>
-                    </View>
-                </List.Section>
+                    <Divider theme={theme} />
+                    <ListSubHeader theme={theme}>Display</ListSubHeader>
+                    <ListItem
+                        title="Display Mode"
+                        description={displayModeLabel(displayMode)}
+                        onPress={showDisplayModal}
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Items per row in library"
+                        description={`${itemsPerRow} items per row`}
+                        onPress={showGridSizeModal}
+                        theme={theme}
+                    />
+                    <Divider theme={theme} />
+                    <ListSubHeader theme={theme}>Theme</ListSubHeader>
+                    <ListItem
+                        title="Theme"
+                        description={theme.name}
+                        onPress={showthemeModal}
+                        theme={theme}
+                    />
+                    <Divider theme={theme} />
+                    <ListSubHeader theme={theme}>Backup</ListSubHeader>
+                    <ListItem
+                        title="Create backup"
+                        description="Can be used to restore current library"
+                        onPress={createBackup}
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Restore backup"
+                        description="Restore library from backup file"
+                        onPress={restoreBackup}
+                        theme={theme}
+                    />
+                    <InfoItem
+                        title="Create backup may not work on devices with Android 9 or lower."
+                        icon="information-outline"
+                        description="Restore library from backup file"
+                        onPress={restoreBackup}
+                        theme={theme}
+                    />
+                </ListSection>
+                <DisplayModeModal
+                    displayMode={displayMode}
+                    displayModalVisible={displayModalVisible}
+                    hideDisplayModal={hideDisplayModal}
+                    setDisplayMode={setDisplayMode}
+                    theme={theme}
+                />
+                <GridSizeModal
+                    itemsPerRow={itemsPerRow}
+                    gridSizeModalVisible={gridSizeModalVisible}
+                    hideGridSizeModal={hideGridSizeModal}
+                    setItemsPerRow={setItemsPerRow}
+                    theme={theme}
+                />
+                <ThemeModal
+                    themeModalVisible={themeModalVisible}
+                    hidethemeModal={hidethemeModal}
+                    switchTheme={switchTheme}
+                    theme={theme}
+                />
             </View>
         </>
     );
 };
 
 const mapStateToProps = (state) => ({
-    theme: state.themeReducer.theme,
+    displayMode: state.settingsReducer.displayMode,
+    itemsPerRow: state.settingsReducer.itemsPerRow,
 });
 
-export default connect(mapStateToProps, { switchTheme })(SettingsScreen);
+export default connect(mapStateToProps, {
+    switchTheme,
+    setDisplayMode,
+    setItemsPerRow,
+})(SettingsScreen);

src/screens/More/Trackers.js

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { Modal, Portal, Text, Button, Provider } from "react-native-paper";
+
+import * as WebBrowser from "expo-web-browser";
+import {
+    myAnimeListConfig,
+    getAccessToken,
+    malTokenWatcher,
+} from "../../Services/Trackers/myAnimeList";
+import { Appbar } from "../../Components/Appbar";
+
+import { useSelector, useDispatch } from "react-redux";
+import {
+    Divider,
+    ListItem,
+    ListSection,
+    ListSubHeader,
+} from "../../Components/List";
+import { removeTracker, setTracker } from "../../redux/tracker/tracker.actions";
+
+const TrackerScreen = ({ navigation }) => {
+    const theme = useSelector((state) => state.themeReducer.theme);
+    const tracker = useSelector((state) => state.trackerReducer.tracker);
+    const dispatch = useDispatch();
+
+    // Tracker Modal
+    const [visible, setVisible] = useState(false);
+    const showModal = () => setVisible(true);
+    const hideModal = () => setVisible(false);
+
+    return (
+        <Provider>
+            <Appbar title="Tacking" onBackAction={() => navigation.goBack()} />
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: theme.colorPrimaryDark,
+                    paddingVertical: 8,
+                }}
+            >
+                <ListSection>
+                    <ListSubHeader theme={theme}>Services</ListSubHeader>
+                    <ListItem
+                        title="MyAnimeList"
+                        onPress={async () => {
+                            if (tracker) {
+                                showModal();
+                            } else {
+                                await WebBrowser.openAuthSessionAsync(
+                                    myAnimeListConfig.authUrl,
+                                    myAnimeListConfig.redirectUri
+                                ).then((res) => {
+                                    console.log(res.type);
+                                    if (res.type === "success") {
+                                        const { url } = res;
+
+                                        const codeExtractor = new RegExp(
+                                            /=([^&]+)/
+                                        );
+                                        let code = url.match(codeExtractor);
+
+                                        console.log(code);
+
+                                        if (code) {
+                                            code = code[1];
+                                            getAccessToken(
+                                                code,
+                                                myAnimeListConfig.codeChallenge
+                                            ).then((objects) => {
+                                                console.log(objects);
+                                                dispatch(setTracker(objects));
+                                            });
+                                        }
+                                    }
+                                });
+                            }
+                        }}
+                        right={tracker && "check"}
+                        theme={theme}
+                    />
+                    {tracker && tracker.expires_in < new Date(Date.now()) && (
+                        <>
+                            <Divider theme={theme} />
+                            <ListSubHeader theme={theme}>
+                                Settings
+                            </ListSubHeader>
+                            <ListItem
+                                title="Revalidate MyAnimeList"
+                                onPress={() => {
+                                    const res = malTokenWatcher(tracker);
+                                    dispatch(setTracker(res));
+                                }}
+                                theme={theme}
+                            />
+                        </>
+                    )}
+                </ListSection>
+
+                <Portal>
+                    <Modal
+                        visible={visible}
+                        onDismiss={hideModal}
+                        contentContainerStyle={{
+                            padding: 20,
+                            margin: 20,
+                            borderRadius: 6,
+                            backgroundColor: theme.colorPrimaryDark,
+                        }}
+                    >
+                        <Text
+                            style={{
+                                color: theme.textColorPrimary,
+                                fontSize: 20,
+                            }}
+                        >
+                            Log out from MyAnimeList?
+                        </Text>
+                        <View
+                            style={{
+                                flexDirection: "row",
+                                justifyContent: "flex-end",
+                            }}
+                        >
+                            <Button
+                                style={{ marginTop: 30 }}
+                                labelStyle={{
+                                    color: theme.colorAccentDark,
+                                    letterSpacing: 0,
+                                    textTransform: "none",
+                                }}
+                                onPress={hideModal}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                style={{ marginTop: 30 }}
+                                labelStyle={{
+                                    color: theme.colorAccentDark,
+                                    letterSpacing: 0,
+                                    textTransform: "none",
+                                }}
+                                onPress={() => {
+                                    dispatch(removeTracker());
+                                    hideModal();
+                                }}
+                            >
+                                Logout
+                            </Button>
+                        </View>
+                    </Modal>
+                </Portal>
+            </View>
+        </Provider>
+    );
+};
+
+export default TrackerScreen;