Refactor search and extension UI

src/components/common/Appbar.js

@@ -1,19 +1,136 @@
-import React from "react";
-
-import { Appbar } from "react-native-paper";
+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 CustomAppbar = ({ title, onBackAction }) => {
+export const Appbar = ({ title, onBackAction }) => {
     const theme = useSelector((state) => state.themeReducer.theme);
 
     return (
-        <Appbar.Header style={{ backgroundColor: theme.colorDarkPrimary }}>
-            {onBackAction && <Appbar.BackAction onPress={onBackAction} />}
-            <Appbar.Content
+        <MaterialAppbar.Header style={{ backgroundColor: theme.colorPrimary }}>
+            {onBackAction && (
+                <MaterialAppbar.BackAction onPress={onBackAction} />
+            )}
+            <MaterialAppbar.Content
                 title={title}
-                titleStyle={{ color: theme.textColorPrimaryDark }}
+                titleStyle={{ color: theme.textColorPrimary }}
             />
-        </Appbar.Header>
+        </MaterialAppbar.Header>
+    );
+};
+
+export const SearchAppbar = ({
+    placeholder,
+    getSearchResults,
+    setSearchText,
+    searchText,
+    getNovels,
+    setLoading,
+    screen,
+    onFilter,
+}) => {
+    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" }}>
+                    <IconButton
+                        icon={screen === "Library" ? "magnify" : "arrow-left"}
+                        color={theme.textColorSecondary}
+                        style={{ marginLeft: 0 }}
+                        size={23}
+                        onPress={() => {
+                            if (screen === "Extension") {
+                                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("");
+                        }}
+                    />
+                )}
+                <IconButton
+                    icon="filter-variant"
+                    color={theme.textColorSecondary}
+                    style={{ marginRight: 0 }}
+                    size={23}
+                    disabled={typeof onFilter === "function" ? false : true}
+                    /**
+                     * TODO
+                     */
+                    onPress={() => onFilter?.()}
+                />
+            </View>
+        </TouchableRipple>
     );
 };
+
+const styles = StyleSheet.create({
+    searchAppbarContainer: {
+        marginTop: Constants.statusBarHeight + 4,
+        height: 48,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        marginBottom: 8,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        elevation: 2,
+    },
+});

src/screens/History/components/EmptyView.js → src/components/common/EmptyView.js

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useSelector } from "react-redux";
 
-const EmptyView = () => {
+const EmptyView = ({ icon, description }) => {
     const theme = useSelector((state) => state.themeReducer.theme);
 
     return (
@@ -11,21 +11,21 @@ const EmptyView = () => {
                 style={[
                     styles.emptyViewIcon,
                     {
-                        color: theme.textColorSecondaryDark,
+                        color: theme.textColorSecondary,
                     },
                 ]}
             >
-                (˘･_･˘)
+                {icon}
             </Text>
             <Text
                 style={[
                     styles.emptyViewText,
                     {
-                        color: theme.textColorSecondaryDark,
+                        color: theme.textColorSecondary,
                     },
                 ]}
             >
-                Nothing read recently.
+                {description}
             </Text>
         </View>
     );

src/components/common/NovelCover.js

@@ -21,20 +21,18 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
             <TouchableRipple
                 borderless
                 centered
-                rippleColor={theme.rippleColorDark}
+                rippleColor={theme.rippleColor}
                 style={styles.opac}
                 onPress={onPress}
             >
                 <>
-                    {item.novelCover ? (
+                    {item.novelCover && (
                         <ImageBackground
-                            source={{
-                                uri: item.novelCover,
-                            }}
+                            source={{ uri: item.novelCover }}
                             style={styles.logo}
                             imageStyle={[
                                 { borderRadius: 4 },
-                                libraryStatus && { opacity: 0.4 },
+                                libraryStatus && { opacity: 0.5 },
                             ]}
                             progressiveRenderingEnabled={true}
                         >
@@ -53,7 +51,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
                                                 styles.title,
                                                 {
                                                     color:
-                                                        theme.textColorPrimaryDark,
+                                                        "rgba(255,255,255,1)",
                                                 },
                                             ]}
                                         >
@@ -63,19 +61,16 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
                                 </View>
                             )}
                         </ImageBackground>
-                    ) : (
-                        <View>
-                            <Text style={{ color: "white" }}>
-                                Novel Cover Doesn't Exist
-                            </Text>
-                        </View>
                     )}
                     {displayMode === 1 && (
                         <Text
                             numberOfLines={2}
                             style={[
                                 styles.title,
-                                { color: theme.textColorPrimaryDark },
+                                {
+                                    color: theme.textColorPrimary,
+                                    padding: 4,
+                                },
                             ]}
                         >
                             {item.novelName}
@@ -91,8 +86,7 @@ export default NovelCover;
 
 const styles = StyleSheet.create({
     logo: {
-        height: 183,
-        borderRadius: 4,
+        height: 180,
     },
     titleContainer: {
         flex: 1,

src/components/settings/Checkbox.js

@@ -13,10 +13,10 @@ export const DisplayCheckbox = ({ displayMode, onPress, value }) => {
     return (
         <Checkbox.Item
             label={label[value]}
-            labelStyle={{ color: theme.textColorPrimaryDark }}
+            labelStyle={{ color: theme.textColorPrimary }}
             status={displayMode === value ? "checked" : "unchecked"}
             mode="ios"
-            uncheckedColor={theme.textColorSecondaryDark}
+            uncheckedColor={theme.textColorSecondary}
             color={theme.colorAccentDark}
             onPress={onPress}
         />
@@ -29,10 +29,10 @@ export const ThemeCheckbox = ({ onPress, label, checked }) => {
     return (
         <Checkbox.Item
             label={label}
-            labelStyle={{ color: theme.textColorPrimaryDark }}
+            labelStyle={{ color: theme.textColorPrimary }}
             status={checked ? "checked" : "unchecked"}
             mode="ios"
-            uncheckedColor={theme.textColorSecondaryDark}
+            uncheckedColor={theme.textColorSecondary}
             color={theme.colorAccentDark}
             onPress={onPress}
         />

src/navigation/Router.js

@@ -4,6 +4,7 @@ import {
     TransitionPresets,
 } from "@react-navigation/stack";
 import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
+import { Provider } from "react-native-paper";
 
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 
@@ -64,7 +65,7 @@ const BottomNavigator = () => {
     return (
         <Tab.Navigator
             shifting={false}
-            barStyle={{ backgroundColor: theme.colorDarkPrimary }}
+            barStyle={{ backgroundColor: theme.colorPrimary }}
             activeColor={theme.colorAccentDark}
         >
             <Tab.Screen
@@ -139,29 +140,31 @@ const BottomNavigator = () => {
 
 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>
+        <Provider>
+            <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>
+        </Provider>
     );
 };
 

src/redux/actions/extension.js

@@ -0,0 +1,11 @@
+import { GET_EXTENSIONS } from "./types";
+import { fetchExtensionList } from "../../services/api";
+
+export const getExtensions = () => async (dispatch) => {
+    const res = await fetchExtensionList();
+
+    dispatch({
+        type: GET_EXTENSIONS,
+        payload: res,
+    });
+};

src/redux/actions/types.js

@@ -5,3 +5,5 @@ export const GET_LIBRARY_NOVELS = "GET_LIBRARY_NOVELS";
 export const SET_DISPLAY_MODE = "SET_DISPLAY_MODE";
 
 export const SET_ITEMS_PER_ROW = "SET_ITEMS_PER_ROW";
+
+export const GET_EXTENSIONS = "GET_EXTENSIONS";

src/redux/reducers/extension.js

@@ -0,0 +1,19 @@
+import { GET_EXTENSIONS } from "../actions/types";
+
+const initialState = {
+    extensions: [],
+    loading: true,
+};
+
+const libraryReducer = (state = initialState, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+        case GET_EXTENSIONS:
+            return { extensions: payload, loading: false };
+        default:
+            return state;
+    }
+};
+
+export default libraryReducer;