Add searchbar in updates screen

src/Components/BottomSheetHandle.js

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

src/Hooks/reduxHooks.js

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { useSelector } from "react-redux";
 
 const useTheme = () => {
@@ -52,8 +51,8 @@ const usePreferences = (novelId) => {
     const novel = findNovel(novelId);
 
     if (novel) {
-        sort = novel.sort ?? "";
-        filter = novel.filter ?? "";
+        sort = novel.sort;
+        filter = novel.filter;
     }
 
     return { sort, filter };

src/Screens/Chapter/components/ReaderSheet.js

@@ -24,7 +24,7 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => {
             backdropOpacity={0}
         >
             <View style={styles.contentContainer}>
-                <BottomSheetHandle />
+                <BottomSheetHandle theme={theme} />
                 <View style={styles.readerSettingsContainer}>
                     <Text
                         style={{

src/Screens/Novel/Novel.js

@@ -1,18 +1,7 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { StyleSheet, View, FlatList, RefreshControl } from "react-native";
+
 import { Provider, Portal } from "react-native-paper";
-import {
-    useContinueReading,
-    useNovel,
-    usePreferences,
-    useTheme,
-    showToast,
-} from "../../Hooks/reduxHooks";
-
-import ChapterItem from "./components/ChapterItem";
-import NovelInfoHeader from "./components/NovelHeader";
-import ChaptersSettingsSheet from "./components/ChaptersSettingsSheet";
-
 import { useDispatch } from "react-redux";
 
 import {
@@ -20,18 +9,22 @@ import {
     sortAndFilterChapters,
     updateNovelAction,
 } from "../../redux/novel/novel.actions";
+import {
+    useContinueReading,
+    useNovel,
+    usePreferences,
+    useTheme,
+} from "../../Hooks/reduxHooks";
+import { showToast } from "../../Hooks/showToast";
+
+import ChapterItem from "./components/ChapterItem";
+import NovelInfoHeader from "./components/NovelHeader";
+import ChaptersSettingsSheet from "./components/ChaptersSettingsSheet";
 import TrackSheet from "./components/Tracker/TrackSheet";
 
 const Novel = ({ route, navigation }) => {
     const item = route.params;
-    const {
-        sourceId,
-        novelUrl,
-        novelName,
-        novelCover,
-        followed,
-        novelId,
-    } = item;
+    const { sourceId, novelUrl, novelName, followed, novelId } = item;
 
     const theme = useTheme();
     const dispatch = useDispatch();
@@ -40,14 +33,11 @@ const Novel = ({ route, navigation }) => {
     let chaptersSettingsSheetRef = useRef(null);
     let trackerSheetRef = useRef(null);
 
-    const { sort, filter } = usePreferences(
-        novelId || (!loading && novel.novelId)
+    const { sort = "ORDER BY chapterId ASC", filter = "" } = usePreferences(
+        novel.novelId
     );
 
-    let lastRead = useContinueReading(
-        chapters,
-        novelId || (!loading && novel.novelId)
-    );
+    let lastRead = useContinueReading(chapters, novel.novelId);
 
     useEffect(() => {
         dispatch(
@@ -124,9 +114,9 @@ const Novel = ({ route, navigation }) => {
                             dispatch={dispatch}
                             sortAndFilterChapters={sortAndFilterChapters}
                             novelId={novel.novelId}
-                            savedSort={sort}
+                            sort={sort}
                             theme={theme}
-                            savedFilter={filter}
+                            filter={filter}
                         />
                         <TrackSheet
                             bottomSheetRef={trackerSheetRef}

src/Screens/Novel/components/ChaptersSettingsSheet.js

@@ -1,32 +1,24 @@
 import React, { useState } from "react";
 import { StyleSheet, View, Text, Animated } from "react-native";
+
 import { List, RadioButton, Checkbox } from "react-native-paper";
 import Bottomsheet from "rn-sliding-up-panel";
-
-import { useSelector } from "react-redux";
-import { useTheme } from "../../../Hooks/reduxHooks";
+import BottomSheetHandle from "../../../Components/BottomSheetHandle";
 
 const ChaptersSettingsSheet = ({
     bottomSheetRef,
     novelId,
     sortAndFilterChapters,
     dispatch,
-    savedSort,
-    savedFilter,
+    sort,
+    filter,
     theme,
 }) => {
-    const [sort, setSort] = useState(savedSort || "ORDER BY chapterId ASC");
-    const [filter, setFilter] = useState(savedFilter || "");
-
-    const sortChapters = (val) => {
-        setSort(val);
+    const sortChapters = (val) =>
         dispatch(sortAndFilterChapters(novelId, val, filter));
-    };
 
-    const filterChapters = (val) => {
-        setFilter(val);
+    const filterChapters = (val) =>
         dispatch(sortAndFilterChapters(novelId, sort, val));
-    };
 
     const checkBoxStyle = { flexDirection: "row", alignItems: "center" };
 
@@ -42,12 +34,10 @@ const ChaptersSettingsSheet = ({
             <View
                 style={[
                     styles.contentContainer,
-                    {
-                        backgroundColor: theme.colorPrimary,
-                    },
+                    { backgroundColor: theme.colorPrimary },
                 ]}
             >
-                <View style={styles.bottomSheetHandle} />
+                <BottomSheetHandle theme={theme} />
                 <List.Subheader
                     style={{
                         color: theme.textColorPrimary,
@@ -185,12 +175,4 @@ const styles = StyleSheet.create({
         borderTopRightRadius: 8,
         borderTopLeftRadius: 8,
     },
-    bottomSheetHandle: {
-        backgroundColor: "rgba(255,255,255,0.25)",
-        height: 4,
-        width: 50,
-        borderRadius: 50,
-        top: 10,
-        alignSelf: "center",
-    },
 });

src/Screens/Novel/components/NovelHeader.js

@@ -15,6 +15,7 @@ import FollowChip from "./Info/FollowChip";
 import TrackerChip from "./Info/TrackerChip";
 import NovelSummary from "./Info/NovelSummary";
 import ReadButton from "./Info/ReadButton";
+import { useTrackingStatus } from "../../../Hooks/reduxHooks";
 
 const NovelInfoHeader = ({
     item,
@@ -31,10 +32,7 @@ const NovelInfoHeader = ({
 }) => {
     const [downloadMenu, showDownloadMenu] = useState(false);
 
-    const tracker = useSelector((state) => state.trackerReducer.tracker);
-    const trackedNovels = useSelector(
-        (state) => state.trackerReducer.trackedNovels
-    );
+    const { tracker, trackedNovels } = useTrackingStatus();
 
     let isTracked = false;
 

src/Screens/Updates/Updates.js

@@ -16,12 +16,15 @@ import {
 import { Appbar } from "./components/Appbar";
 import UpdatesItem from "./components/UpdatesItem";
 import { useTheme } from "../../Hooks/reduxHooks";
+import { Searchbar } from "../../Components/Searchbar";
 
 const Updates = ({ navigation }) => {
     const theme = useTheme();
     const dispatch = useDispatch();
     const { updates, loading } = useSelector((state) => state.updatesReducer);
 
+    const [searchText, setSearchText] = useState("");
+    const [searchResults, setSearchResults] = useState([]);
     const [refreshing, setRefreshing] = useState(false);
 
     useFocusEffect(
@@ -67,18 +70,41 @@ const Updates = ({ navigation }) => {
         />
     );
 
+    const clearSearchbar = () => {
+        setSearchText("");
+    };
+
+    const onChangeText = (text) => {
+        setSearchText(text);
+        let results = updates.filter((update) =>
+            update.novelName.toLowerCase().includes(text.toLowerCase())
+        );
+        setSearchResults(results);
+    };
+
     return (
         <>
-            <Appbar theme={theme} dispatch={dispatch} />
+            {/* <Appbar theme={theme} dispatch={dispatch} /> */}
+
             <View
                 style={[
                     styles.container,
                     { backgroundColor: theme.colorPrimaryDark },
                 ]}
             >
+                <Searchbar
+                    placeholder="Search Updates"
+                    searchText={searchText}
+                    clearSearchbar={clearSearchbar}
+                    onChangeText={onChangeText}
+                    left="magnify"
+                    theme={theme}
+                    right="reload"
+                    onPressRight={() => dispatch(updateLibraryAction())}
+                />
                 <FlatList
                     contentContainerStyle={styles.flatList}
-                    data={updates}
+                    data={searchText ? searchResults : updates}
                     keyExtractor={(item) => item.updateId.toString()}
                     renderItem={renderItem}
                     ListFooterComponent={ListFooterComponent()}

src/Services/Source/source.js

@@ -1,3 +1,5 @@
+import { showToast } from "../../Hooks/showToast";
+
 export const fetchSources = async () => {
     const url = `https://lnreader-extensions.vercel.app/api/`;