From b9d9cee32fd50ab64a96375e5641d28eac3fdff5 Mon Sep 17 00:00:00 2001
From: Rajarshee Chatterjee <rajarshee.adm@gmail.com>
Date: Mon, 7 Jun 2021 10:40:12 +0530
Subject: [PATCH] Refactor searchbar

---
 src/Components/Searchbar.js        | 97 ++++++++----------------------
 src/Screens/Extension/Extension.js | 41 +++++++++++--
 src/Screens/History/History.js     | 11 +++-
 src/Screens/Library/Library.js     | 14 +++--
 src/Screens/Updates/Updates.js     | 10 ++-
 5 files changed, 86 insertions(+), 87 deletions(-)

diff --git a/src/Components/Searchbar.js b/src/Components/Searchbar.js
index 432e0380..05061daa 100644
--- a/src/Components/Searchbar.js
+++ b/src/Components/Searchbar.js
@@ -1,63 +1,41 @@
 import React, { useRef } from "react";
-import { View, TextInput, StyleSheet } from "react-native";
+import { StyleSheet, View, TextInput, Text, StatusBar } from "react-native";
+
 import { TouchableRipple, IconButton } from "react-native-paper";
-import Constants from "expo-constants";
-import { useSettings } from "../Hooks/reduxHooks";
-import { useDispatch } from "react-redux";
-import { setAppSettings } from "../redux/settings/settings.actions";
+import { Row } from "./Common";
 
 export const Searchbar = ({
     theme,
     placeholder,
     searchText,
-    left,
-    onPressLeft,
-    right,
-    displayMenu,
-    onPressRight,
+    backAction,
+    onBackAction,
     clearSearchbar,
     onChangeText,
     onSubmitEditing,
-    migrate,
-    onPressMigrate,
-    filter,
+    actions,
 }) => {
     const searchRef = useRef(null);
-    const dispatch = useDispatch();
-    const { displayMode } = useSettings();
-
-    const displayMenuIcon = () => {
-        const icons = {
-            0: "view-module",
-            1: "view-list",
-            2: "view-module",
-        };
-
-        return icons[displayMode];
-    };
-
-    const getDisplayMode = () =>
-        displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
 
     return (
         <TouchableRipple
             borderless
             onPress={() => searchRef.current.focus()}
             style={[
-                styles.searchAppbarContainer,
+                styles.searchbarContainer,
                 { backgroundColor: theme.searchBarColor },
             ]}
             rippleColor={theme.rippleColor}
         >
             <View style={styles.container}>
-                <View style={{ flex: 1, flexDirection: "row" }}>
-                    {left && (
+                <Row style={{ flex: 1 }}>
+                    {backAction && (
                         <IconButton
-                            icon={left}
+                            icon={backAction}
                             color={theme.textColorSecondary}
                             style={{ marginLeft: 0 }}
                             size={23}
-                            onPress={onPressLeft}
+                            onPress={onBackAction}
                         />
                     )}
                     <TextInput
@@ -72,7 +50,7 @@ export const Searchbar = ({
                         onSubmitEditing={onSubmitEditing}
                         defaultValue={searchText}
                     />
-                </View>
+                </Row>
                 {searchText !== "" && (
                     <IconButton
                         icon="close"
@@ -82,49 +60,25 @@ export const Searchbar = ({
                         onPress={clearSearchbar}
                     />
                 )}
-                {displayMenu && (
-                    <IconButton
-                        icon={displayMenuIcon()}
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={() =>
-                            dispatch(
-                                setAppSettings("displayMode", getDisplayMode())
-                            )
-                        }
-                    />
-                )}
-                {right && (
-                    <IconButton
-                        icon={right}
-                        color={
-                            !filter
-                                ? theme.textColorSecondary
-                                : theme.filterColor
-                        }
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={onPressRight}
-                    />
-                )}
-                {migrate && (
-                    <IconButton
-                        icon={migrate}
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={onPressMigrate}
-                    />
-                )}
+                {actions &&
+                    actions.map((action, index) => (
+                        <IconButton
+                            key={index}
+                            icon={action.icon}
+                            color={action.color ?? theme.textColorSecondary}
+                            style={{ marginRight: 0 }}
+                            size={23}
+                            onPress={action.onPress}
+                        />
+                    ))}
             </View>
         </TouchableRipple>
     );
 };
 
 const styles = StyleSheet.create({
-    searchAppbarContainer: {
-        marginTop: Constants.statusBarHeight + 4,
+    searchbarContainer: {
+        marginTop: StatusBar.currentHeight + 4,
         height: 48,
         flexDirection: "row",
         alignItems: "center",
@@ -133,6 +87,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
         marginHorizontal: 12,
         elevation: 2,
+        backgroundColor: "white",
     },
     container: {
         flex: 1,
diff --git a/src/Screens/Extension/Extension.js b/src/Screens/Extension/Extension.js
index 56b42cfb..53992484 100644
--- a/src/Screens/Extension/Extension.js
+++ b/src/Screens/Extension/Extension.js
@@ -6,16 +6,20 @@ import NovelCover from "../../Components/NovelCover";
 import EmptyView from "../../Components/EmptyView";
 
 import { Searchbar } from "../../Components/Searchbar";
-import { useTheme, useLibrary } from "../../Hooks/reduxHooks";
+import { useTheme, useLibrary, useSettings } from "../../Hooks/reduxHooks";
 import NovelList from "../../Components/NovelList";
 import { showToast } from "../../Hooks/showToast";
 import ErrorView from "../../Components/ErrorView";
+import { useDispatch } from "react-redux";
+import { setAppSettings } from "../../redux/settings/settings.actions";
 
 const Extension = ({ navigation, route }) => {
     const { sourceId, sourceName, sourceUrl } = route.params;
 
     const theme = useTheme();
     const library = useLibrary();
+    const dispatch = useDispatch();
+    const { displayMode } = useSettings();
 
     const [loading, setLoading] = useState(true);
     const [novels, setNovels] = useState();
@@ -115,6 +119,19 @@ const Extension = ({ navigation, route }) => {
         />
     );
 
+    const displayMenuIcon = () => {
+        const icons = {
+            0: "view-module",
+            1: "view-list",
+            2: "view-module",
+        };
+
+        return icons[displayMode];
+    };
+
+    const getDisplayMode = () =>
+        displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
+
     return (
         <View
             style={[
@@ -125,15 +142,27 @@ const Extension = ({ navigation, route }) => {
             <Searchbar
                 theme={theme}
                 placeholder={`Search ${sourceName}`}
-                left="arrow-left"
-                onPressLeft={() => navigation.goBack()}
+                backAction="arrow-left"
+                onBackAction={() => navigation.goBack()}
                 searchText={searchText}
                 onChangeText={(text) => setSearchText(text)}
                 onSubmitEditing={getSearchResults}
                 clearSearchbar={clearSearchbar}
-                right="earth"
-                displayMenu={true}
-                onPressRight={() => WebBrowser.openBrowserAsync(sourceUrl)}
+                actions={[
+                    {
+                        icon: displayMenuIcon(),
+                        color: theme.textColorSecondary,
+                        onPress: () =>
+                            dispatch(
+                                setAppSettings("displayMode", getDisplayMode())
+                            ),
+                    },
+                    {
+                        icon: "earth",
+                        color: theme.textColorSecondary,
+                        onPress: () => WebBrowser.openBrowserAsync(sourceUrl),
+                    },
+                ]}
             />
 
             {loading ? (
diff --git a/src/Screens/History/History.js b/src/Screens/History/History.js
index 28bc530e..5d03d219 100644
--- a/src/Screens/History/History.js
+++ b/src/Screens/History/History.js
@@ -80,10 +80,15 @@ const History = ({ navigation }) => {
                 searchText={searchText}
                 clearSearchbar={clearSearchbar}
                 onChangeText={onChangeText}
-                left="magnify"
+                backAction="magnify"
                 theme={theme}
-                right="trash-can-outline"
-                onPressRight={showDialog}
+                actions={[
+                    {
+                        icon: "trash-can-outline",
+                        color: theme.textColorSecondary,
+                        onPress: showDialog,
+                    },
+                ]}
             />
             <FlatList
                 contentContainerStyle={{
diff --git a/src/Screens/Library/Library.js b/src/Screens/Library/Library.js
index 52d2f504..a961cae7 100644
--- a/src/Screens/Library/Library.js
+++ b/src/Screens/Library/Library.js
@@ -110,10 +110,16 @@ const LibraryScreen = ({ navigation }) => {
                     searchText={searchText}
                     clearSearchbar={clearSearchbar}
                     onChangeText={onChangeText}
-                    left="magnify"
-                    right="filter-variant"
-                    filter={filter}
-                    onPressRight={() => libraryFilterSheetRef.current.show()}
+                    backAction="magnify"
+                    actions={[
+                        {
+                            icon: "filter-variant",
+                            onPress: () => libraryFilterSheetRef.current.show(),
+                            color: filter
+                                ? theme.filterColor
+                                : theme.textColorSecondary,
+                        },
+                    ]}
                     theme={theme}
                 />
                 {loading ? (
diff --git a/src/Screens/Updates/Updates.js b/src/Screens/Updates/Updates.js
index f9031e4c..288c2e8b 100644
--- a/src/Screens/Updates/Updates.js
+++ b/src/Screens/Updates/Updates.js
@@ -114,10 +114,14 @@ const Updates = ({ navigation }) => {
                 searchText={searchText}
                 clearSearchbar={clearSearchbar}
                 onChangeText={onChangeText}
-                left="magnify"
+                backAction="magnify"
                 theme={theme}
-                right="reload"
-                onPressRight={() => dispatch(updateLibraryAction())}
+                actions={[
+                    {
+                        icon: "reload",
+                        onPress: () => dispatch(updateLibraryAction()),
+                    },
+                ]}
             />
             <FlatList
                 contentContainerStyle={styles.flatList}