From f8199b4e4e83340a4c29ab7abe97279608c67e84 Mon Sep 17 00:00:00 2001
From: Rajarshee Chatterjee <rajarshee.adm@gmail.com>
Date: Mon, 31 May 2021 15:32:42 +0530
Subject: [PATCH] Reorganize library filter sheet

---
 package-lock.json                             |  10 +
 package.json                                  |   4 +-
 src/Components/List.js                        |  11 +-
 src/Components/NovelCover.js                  |   7 +-
 .../Library/components/LibraryFilterSheet.js  | 538 +++++++++++-------
 src/redux/settings/settings.reducer.js        |   3 +
 6 files changed, 350 insertions(+), 223 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a31b076a..cad6b9db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7466,6 +7466,11 @@
         "redux-saga": "^1.0.2"
       }
     },
+    "react-native-pager-view": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.0.12.tgz",
+      "integrity": "sha512-QmHUnQeP2qcxDofEOnKRmoUue0RaT55lhNJDfcQ1/SNuxif4Q2UyvDfqeItm1+toaE5tVnXqoreZh82FqUqnvw=="
+    },
     "react-native-paper": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz",
@@ -7513,6 +7518,11 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.0.0.tgz",
       "integrity": "sha512-35II5oxTaVp3OP8y0eLPOPpQkxG4fRKQ+dL1YSE1we5kCZFOU0l/Rn0T79HbyUu1LPwUZr6lZupPs0ULnRyMuQ=="
     },
+    "react-native-tab-view": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.0.1.tgz",
+      "integrity": "sha512-L7qXtYz5Z+NdWyu38zaJrlHA/8H6rNFRZXe3ydym12UEEPPoefbVZ71b9YK2O6QP0u4pUlzMpMVM/Lsz2DJ4jg=="
+    },
     "react-native-vector-icons": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-7.1.0.tgz",
diff --git a/package.json b/package.json
index 44a5b480..8c06be06 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.0.0",
+    "react-native-tab-view": "^3.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-web": "~0.13.12",
     "react-native-webview": "11.2.3",
@@ -52,7 +53,8 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "rn-sliding-up-panel": "^2.4.4"
+    "rn-sliding-up-panel": "^2.4.4",
+    "react-native-pager-view": "5.0.12"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0"
diff --git a/src/Components/List.js b/src/Components/List.js
index 493091f7..402b5409 100644
--- a/src/Components/List.js
+++ b/src/Components/List.js
@@ -1,6 +1,8 @@
 import React from "react";
 import { StyleSheet } from "react-native";
+
 import { List, Divider as PaperDivider } from "react-native-paper";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 
 const ListSection = ({ children }) => (
     <List.Section style={styles.listSection}>{children}</List.Section>
@@ -23,9 +25,11 @@ const ListItem = ({
     right,
     iconColor,
     titleStyle,
+    style,
 }) => (
     <List.Item
         title={title}
+        style={style}
         titleStyle={[{ color: theme.textColorPrimary }, titleStyle]}
         description={description}
         descriptionStyle={{ color: theme.textColorSecondary }}
@@ -41,10 +45,11 @@ const ListItem = ({
         }
         right={() =>
             right && (
-                <List.Icon
+                <MaterialCommunityIcons
+                    name={right}
                     color={iconColor || "#47a84a"}
-                    icon={right}
-                    style={{ marginVertical: 0 }}
+                    size={23}
+                    style={{ marginRight: 16, textAlignVertical: "center" }}
                 />
             )
         }
diff --git a/src/Components/NovelCover.js b/src/Components/NovelCover.js
index 26256a9a..37234c93 100644
--- a/src/Components/NovelCover.js
+++ b/src/Components/NovelCover.js
@@ -9,7 +9,8 @@ import ListView from "./ListView";
 
 const NovelCover = ({ item, onPress, libraryStatus }) => {
     const theme = useTheme();
-    const { displayMode, novelsPerRow } = useSettings();
+    const { displayMode, novelsPerRow, showDownloadBadges, showUnreadBadges } =
+        useSettings();
 
     const height = {
         1: 550,
@@ -102,8 +103,8 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
                         progressiveRenderingEnabled={true}
                     >
                         <View style={{ flexDirection: "row", margin: 4 }}>
-                            {downloadBadge()}
-                            {unreadBadge()}
+                            {showDownloadBadges && downloadBadge()}
+                            {showUnreadBadges && unreadBadge()}
                         </View>
                         {compactTitle()}
                     </ImageBackground>
diff --git a/src/Screens/Library/components/LibraryFilterSheet.js b/src/Screens/Library/components/LibraryFilterSheet.js
index 8691e33a..0505e90b 100644
--- a/src/Screens/Library/components/LibraryFilterSheet.js
+++ b/src/Screens/Library/components/LibraryFilterSheet.js
@@ -1,12 +1,20 @@
 import React, { useState } from "react";
-import { StyleSheet, View, Text, Animated } from "react-native";
+import {
+    StyleSheet,
+    View,
+    Text,
+    Animated,
+    useWindowDimensions,
+} from "react-native";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";
 
-import { List, RadioButton, Checkbox } from "react-native-paper";
+import { Checkbox } from "react-native-paper";
 
 import Bottomsheet from "rn-sliding-up-panel";
-import BottomSheetHandle from "../../../Components/BottomSheetHandle";
 import { ListItem } from "../../../Components/List";
 import { filterLibrary } from "../../../redux/library/library.actions";
+import { useSettings } from "../../../Hooks/reduxHooks";
+import { setAppSettings } from "../../../redux/settings/settings.actions";
 
 const LibraryFilterSheet = ({
     bottomSheetRef,
@@ -17,227 +25,327 @@ const LibraryFilterSheet = ({
 }) => {
     const [animatedValue] = useState(new Animated.Value(0));
 
+    const FirstRoute = () => (
+        <View style={{ flex: 1 }}>
+            <Checkbox.Item
+                label="Downloaded"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter === "chaptersDownloaded > 0"
+                        ? "checked"
+                        : "unchecked"
+                }
+                onPress={() =>
+                    filter === "chaptersDownloaded > 0"
+                        ? dispatch(filterLibrary(sort, ""))
+                        : dispatch(
+                              filterLibrary(sort, "chaptersDownloaded > 0")
+                          )
+                }
+            />
+            <Checkbox.Item
+                label="Unread"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={filter === "unread = 1" ? "checked" : "unchecked"}
+                onPress={() =>
+                    filter === "unread = 1"
+                        ? dispatch(filterLibrary(sort, ""))
+                        : dispatch(filterLibrary(sort, "unread = 1"))
+                }
+            />
+            <Checkbox.Item
+                label="Completed"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter === "chaptersUnread IS NULL"
+                        ? "checked"
+                        : "unchecked"
+                }
+                onPress={() =>
+                    filter === "chaptersUnread IS NULL"
+                        ? dispatch(filterLibrary(sort, ""))
+                        : dispatch(
+                              filterLibrary(sort, "chaptersUnread IS NULL")
+                          )
+                }
+            />
+        </View>
+    );
+
+    const SecondRoute = () => (
+        <View style={{ flex: 1 }}>
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Date Added"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "novels.novelId ASC"
+                        ? "arrow-up"
+                        : sort === "novels.novelId DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "novels.novelId ASC"
+                        ? dispatch(filterLibrary("novels.novelId DESC", filter))
+                        : dispatch(filterLibrary("novels.novelId ASC", filter))
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Alphabetically"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "novels.novelName ASC"
+                        ? "arrow-up"
+                        : sort === "novels.novelName DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "novels.novelName ASC"
+                        ? dispatch(
+                              filterLibrary("novels.novelName DESC", filter)
+                          )
+                        : dispatch(
+                              filterLibrary("novels.novelName ASC", filter)
+                          )
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Unread"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "novels.unread ASC"
+                        ? "arrow-up"
+                        : sort === "novels.unread DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "novels.unread ASC"
+                        ? dispatch(filterLibrary("novels.unread DESC", filter))
+                        : dispatch(filterLibrary("novels.unread ASC", filter))
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Downloaded"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "chaptersDownloaded ASC"
+                        ? "arrow-up"
+                        : sort === "chaptersDownloaded DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "chaptersDownloaded ASC"
+                        ? dispatch(
+                              filterLibrary("chaptersDownloaded DESC", filter)
+                          )
+                        : dispatch(
+                              filterLibrary("chaptersDownloaded ASC", filter)
+                          )
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Total Chapters"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "chaptersUnread ASC"
+                        ? "arrow-up"
+                        : sort === "chaptersUnread DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "chaptersUnread ASC"
+                        ? dispatch(filterLibrary("chaptersUnread DESC", filter))
+                        : dispatch(filterLibrary("chaptersUnread ASC", filter))
+                }
+            />
+        </View>
+    );
+
+    const displayModes = [
+        { displayMode: 0, label: "Compact Grid" },
+        { displayMode: 1, label: "Comfortable Grid" },
+        { displayMode: 2, label: "List" },
+    ];
+
+    const {
+        displayMode,
+        showDownloadBadges,
+        showUnreadBadges,
+        showNumberOfNovels,
+    } = useSettings();
+
+    const renderCheckboxes = () => {
+        return displayModes.map((mode) => (
+            <Checkbox.Item
+                key={mode.displayMode}
+                label={mode.label}
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={
+                    displayMode === mode.displayMode ? "checked" : "unchecked"
+                }
+                // mode="ios"
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(setAppSettings("displayMode", mode.displayMode))
+                }
+            />
+        ));
+    };
+
+    const ThirdRoute = () => (
+        <View style={{ flex: 1 }}>
+            <Text
+                style={{
+                    color: theme.textColorSecondary,
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    textTransform: "uppercase",
+                }}
+            >
+                Display Mode
+            </Text>
+            {renderCheckboxes()}
+
+            <Text
+                style={{
+                    color: theme.textColorSecondary,
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    textTransform: "uppercase",
+                }}
+            >
+                Badges
+            </Text>
+            <Checkbox.Item
+                label="Download Badges"
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={showDownloadBadges ? "checked" : "unchecked"}
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(
+                        setAppSettings(
+                            "showDownloadBadges",
+                            !showDownloadBadges
+                        )
+                    )
+                }
+            />
+            <Checkbox.Item
+                label="Unread Badges"
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={showUnreadBadges ? "checked" : "unchecked"}
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(
+                        setAppSettings("showUnreadBadges", !showUnreadBadges)
+                    )
+                }
+            />
+            <Checkbox.Item
+                label="Show number of items"
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={showNumberOfNovels ? "checked" : "unchecked"}
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(
+                        setAppSettings(
+                            "showNumberOfNovels",
+                            !showNumberOfNovels
+                        )
+                    )
+                }
+            />
+        </View>
+    );
+
+    const renderScene = SceneMap({
+        first: FirstRoute,
+        second: SecondRoute,
+        third: ThirdRoute,
+    });
+
+    const layout = useWindowDimensions();
+
+    const [index, setIndex] = useState(0);
+    const [routes] = useState([
+        { key: "first", title: "Filter" },
+        { key: "second", title: "Sort" },
+        { key: "third", title: "Display" },
+    ]);
+
+    const renderTabBar = (props) => (
+        <TabBar
+            {...props}
+            indicatorStyle={{ backgroundColor: theme.colorAccent }}
+            style={{ backgroundColor: theme.colorPrimary }}
+            renderLabel={({ route, focused, color }) => (
+                <Text style={{ color, margin: 8 }}>{route.title}</Text>
+            )}
+            inactiveColor={theme.textColorSecondary}
+            activeColor={theme.colorAccent}
+            pressColor={theme.rippleColor}
+        />
+    );
+
     return (
         <Bottomsheet
             animatedValue={animatedValue}
             ref={bottomSheetRef}
-            draggableRange={{ top: 540, bottom: 0 }}
-            snappingPoints={[0, 540]}
+            draggableRange={{ top: 470, bottom: 0 }}
+            snappingPoints={[0, 470]}
         >
             <View
                 style={[
                     styles.contentContainer,
-                    { backgroundColor: theme.colorPrimary },
+                    { backgroundColor: theme.colorPrimaryDark },
                 ]}
             >
-                <BottomSheetHandle theme={theme} />
-                <View style={{ marginTop: 24 }}>
-                    <Text
-                        style={{
-                            color: theme.colorAccent,
-                            paddingHorizontal: 16,
-                            paddingBottom: 8,
-                            textTransform: "uppercase",
-                        }}
-                    >
-                        SORT
-                    </Text>
-                    <ListItem
-                        title="Date Added"
-                        theme={theme}
-                        right={
-                            sort === "novels.novelId ASC"
-                                ? "arrow-up"
-                                : sort === "novels.novelId DESC"
-                                ? "arrow-down"
-                                : null
-                        }
-                        onPress={() =>
-                            sort === "novels.novelId ASC"
-                                ? dispatch(
-                                      filterLibrary(
-                                          "novels.novelId DESC",
-                                          filter
-                                      )
-                                  )
-                                : dispatch(
-                                      filterLibrary(
-                                          "novels.novelId ASC",
-                                          filter
-                                      )
-                                  )
-                        }
-                    />
-                    <ListItem
-                        title="Alphabetically"
-                        theme={theme}
-                        right={
-                            sort === "novels.novelName ASC"
-                                ? "arrow-up"
-                                : sort === "novels.novelName DESC"
-                                ? "arrow-down"
-                                : null
-                        }
-                        onPress={() =>
-                            sort === "novels.novelName ASC"
-                                ? dispatch(
-                                      filterLibrary(
-                                          "novels.novelName DESC",
-                                          filter
-                                      )
-                                  )
-                                : dispatch(
-                                      filterLibrary(
-                                          "novels.novelName ASC",
-                                          filter
-                                      )
-                                  )
-                        }
-                    />
-                    <ListItem
-                        title="Unread"
-                        theme={theme}
-                        right={
-                            sort === "novels.unread ASC"
-                                ? "arrow-up"
-                                : sort === "novels.unread DESC"
-                                ? "arrow-down"
-                                : null
-                        }
-                        onPress={() =>
-                            sort === "novels.unread ASC"
-                                ? dispatch(
-                                      filterLibrary(
-                                          "novels.unread DESC",
-                                          filter
-                                      )
-                                  )
-                                : dispatch(
-                                      filterLibrary("novels.unread ASC", filter)
-                                  )
-                        }
-                    />
-                    <ListItem
-                        title="Downloaded"
-                        theme={theme}
-                        right={
-                            sort === "chaptersDownloaded ASC"
-                                ? "arrow-up"
-                                : sort === "chaptersDownloaded DESC"
-                                ? "arrow-down"
-                                : null
-                        }
-                        onPress={() =>
-                            sort === "chaptersDownloaded ASC"
-                                ? dispatch(
-                                      filterLibrary(
-                                          "chaptersDownloaded DESC",
-                                          filter
-                                      )
-                                  )
-                                : dispatch(
-                                      filterLibrary(
-                                          "chaptersDownloaded ASC",
-                                          filter
-                                      )
-                                  )
-                        }
-                    />
-                    <ListItem
-                        title="Total Chapters"
-                        theme={theme}
-                        right={
-                            sort === "chaptersUnread ASC"
-                                ? "arrow-up"
-                                : sort === "chaptersUnread DESC"
-                                ? "arrow-down"
-                                : null
-                        }
-                        onPress={() =>
-                            sort === "chaptersUnread ASC"
-                                ? dispatch(
-                                      filterLibrary(
-                                          "chaptersUnread DESC",
-                                          filter
-                                      )
-                                  )
-                                : dispatch(
-                                      filterLibrary(
-                                          "chaptersUnread ASC",
-                                          filter
-                                      )
-                                  )
-                        }
-                    />
-                </View>
-                <View>
-                    <Text
-                        style={{
-                            color: theme.colorAccent,
-                            paddingHorizontal: 16,
-                            paddingVertical: 8,
-                            textTransform: "uppercase",
-                        }}
-                    >
-                        Filter
-                    </Text>
-                    <Checkbox.Item
-                        label="Downloaded"
-                        labelStyle={{ color: theme.textColorPrimary }}
-                        color={theme.colorAccent}
-                        uncheckedColor={theme.textColorHint}
-                        status={
-                            filter === "chaptersDownloaded > 0"
-                                ? "checked"
-                                : "unchecked"
-                        }
-                        onPress={() =>
-                            filter === "chaptersDownloaded > 0"
-                                ? dispatch(filterLibrary(sort, ""))
-                                : dispatch(
-                                      filterLibrary(
-                                          sort,
-                                          "chaptersDownloaded > 0"
-                                      )
-                                  )
-                        }
-                    />
-                    <Checkbox.Item
-                        label="Unread"
-                        labelStyle={{ color: theme.textColorPrimary }}
-                        color={theme.colorAccent}
-                        uncheckedColor={theme.textColorHint}
-                        status={
-                            filter === "unread = 1" ? "checked" : "unchecked"
-                        }
-                        onPress={() =>
-                            filter === "unread = 1"
-                                ? dispatch(filterLibrary(sort, ""))
-                                : dispatch(filterLibrary(sort, "unread = 1"))
-                        }
-                    />
-                    <Checkbox.Item
-                        label="Completed"
-                        labelStyle={{ color: theme.textColorPrimary }}
-                        color={theme.colorAccent}
-                        uncheckedColor={theme.textColorHint}
-                        status={
-                            filter === "chaptersUnread IS NULL"
-                                ? "checked"
-                                : "unchecked"
-                        }
-                        onPress={() =>
-                            filter === "chaptersUnread IS NULL"
-                                ? dispatch(filterLibrary(sort, ""))
-                                : dispatch(
-                                      filterLibrary(
-                                          sort,
-                                          "chaptersUnread IS NULL"
-                                      )
-                                  )
-                        }
-                    />
-                </View>
+                <TabView
+                    navigationState={{ index, routes }}
+                    renderTabBar={renderTabBar}
+                    renderScene={renderScene}
+                    onIndexChange={setIndex}
+                    initialLayout={{ width: layout.width }}
+                    style={{ borderTopRightRadius: 8, borderTopLeftRadius: 8 }}
+                />
             </View>
         </Bottomsheet>
     );
@@ -248,7 +356,5 @@ export default LibraryFilterSheet;
 const styles = StyleSheet.create({
     contentContainer: {
         flex: 1,
-        borderTopRightRadius: 8,
-        borderTopLeftRadius: 8,
     },
 });
diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js
index b6fd1ab6..51b3e795 100644
--- a/src/redux/settings/settings.reducer.js
+++ b/src/redux/settings/settings.reducer.js
@@ -51,6 +51,9 @@ const initialState = {
         fontFamily: null,
         lineHeight: 1.5,
     },
+    showDownloadBadges: true,
+    showUnreadBadges: true,
+    showNumberOfNovels: false,
 };
 
 const settingsReducer = (state = initialState, action) => {