Fix download button animation

src/database/queries/ChapterQueries.js

@@ -35,7 +35,7 @@ export const insertChapters = async (novelId, chapters) => {
 };
 
 const getChaptersQuery = (sort, filter) =>
-    `SELECT * FROM chapters WHERE novelId = ? ${filter} ${sort}`;
+    `SELECT * FROM chapters WHERE novelId = ? ${filter ?? ""} ${sort ?? ""}`;
 
 export const getChapters = (novelId, sort, filter) => {
     return new Promise((resolve, reject) =>

src/redux/novel/novel.reducer.js

@@ -82,12 +82,16 @@ const novelReducer = (state = initialState, action) => {
         case CHAPTER_DOWNLOADING:
             return {
                 ...state,
-                downloading: payload,
+                chapters: state.chapters.map((chapter) =>
+                    chapter.chapterId === payload
+                        ? { ...chapter, downloaded: 3 }
+                        : chapter
+                ),
             };
         case CHAPTER_DOWNLOADED:
             return {
                 ...state,
-                downloading: null,
+                // downloading: state.downloading.filter((id) => id === payload),
                 chapters: state.chapters.map((chapter) =>
                     chapter.chapterId === payload
                         ? { ...chapter, downloaded: 1 }

src/screens/Novel/components/ChapterCard.js

@@ -14,12 +14,62 @@ const ChapterCard = ({
     chapter,
     extensionId,
     theme,
-    downloading,
+    // downloading,
     downloadChapterAction,
     deleteChapterAction,
 }) => {
     const navigation = useNavigation();
 
+    // console.log(downloading.includes(chapter.chapterId));
+
+    const displayDownloadButton = () => {
+        if (chapter.downloaded === 3) {
+            return (
+                <ActivityIndicator
+                    color={theme.textColorHintDark}
+                    size={25}
+                    style={{ margin: 3.5, padding: 5 }}
+                />
+            );
+        } else if (chapter.downloaded === 1) {
+            return (
+                <IconButton
+                    icon="check-circle"
+                    animated
+                    color={theme.textColorPrimary}
+                    size={25}
+                    onPress={() =>
+                        deleteChapterAction(
+                            chapter.chapterId,
+                            chapter.chapterName
+                        )
+                    }
+                    style={{ margin: 2 }}
+                />
+            );
+        } else {
+            return (
+                <IconButton
+                    icon="arrow-down-circle-outline"
+                    animated
+                    color={theme.textColorHintDark}
+                    size={25}
+                    onPress={() => {
+                        downloadChapterAction(
+                            extensionId,
+                            novelUrl,
+                            chapter.chapterUrl,
+                            chapter.chapterName,
+                            chapter.chapterId
+                        );
+                        // console.log(downloading);
+                    }}
+                    style={{ margin: 2 }}
+                />
+            );
+        }
+    };
+
     return (
         <TouchableRipple
             style={styles.chapterCardContainer}
@@ -68,47 +118,7 @@ const ChapterCard = ({
                         </Text>
                     )}
                 </View>
-                <View>
-                    {downloading === chapter.chapterId ? (
-                        <ActivityIndicator
-                            color={theme.textColorHintDark}
-                            size={25}
-                            style={{ margin: 3.5, padding: 5 }}
-                        />
-                    ) : (
-                        <IconButton
-                            icon={
-                                chapter.downloaded
-                                    ? "check-circle"
-                                    : "arrow-down-circle-outline"
-                            }
-                            animated
-                            color={
-                                chapter.downloaded
-                                    ? theme.textColorPrimary
-                                    : theme.textColorHintDark
-                            }
-                            size={25}
-                            onPress={() => {
-                                if (!chapter.downloaded) {
-                                    downloadChapterAction(
-                                        extensionId,
-                                        novelUrl,
-                                        chapter.chapterUrl,
-                                        chapter.chapterName,
-                                        chapter.chapterId
-                                    );
-                                } else {
-                                    deleteChapterAction(
-                                        chapter.chapterId,
-                                        chapter.chapterName
-                                    );
-                                }
-                            }}
-                            style={{ margin: 2 }}
-                        />
-                    )}
-                </View>
+                <View>{displayDownloadButton()}</View>
             </>
         </TouchableRipple>
     );
@@ -116,7 +126,7 @@ const ChapterCard = ({
 
 const mapStateToProps = (state) => ({
     theme: state.themeReducer.theme,
-    downloading: state.novelReducer.downloading,
+    // downloading: state.novelReducer.downloading,
 });
 
 export default connect(mapStateToProps, {

src/screens/Novel/components/NovelHeader.js

@@ -8,7 +8,13 @@ import {
     FlatList,
     Share,
 } from "react-native";
-import { TouchableRipple, IconButton, Button, Chip } from "react-native-paper";
+import {
+    TouchableRipple,
+    IconButton,
+    Button,
+    Chip,
+    Menu,
+} from "react-native-paper";
 import { useNavigation } from "@react-navigation/native";
 import * as WebBrowser from "expo-web-browser";
 
@@ -31,6 +37,10 @@ const NovelInfoHeader = ({
         !loading && novel.followed !== 1 ? true : false
     );
 
+    const [visible, setVisible] = useState(false);
+    const openMenu = () => setVisible(true);
+    const closeMenu = () => setVisible(false);
+
     const renderGenreChip = ({ item }) => (
         <Text
             style={[
@@ -161,6 +171,28 @@ const NovelInfoHeader = ({
                             color={theme.colorAccentDark}
                             size={21}
                         />
+
+                        <Menu
+                            visible={visible}
+                            onDismiss={closeMenu}
+                            anchor={
+                                <IconButton
+                                    icon="download"
+                                    color={theme.colorAccentDark}
+                                    size={21}
+                                    onPress={openMenu}
+                                />
+                            }
+                            contentStyle={{ backgroundColor: "#242529" }}
+                        >
+                            <Menu.Item
+                                onPress={() => {}}
+                                title="Download all"
+                                style={{ backgroundColor: "#242529" }}
+                                titleStyle={{ color: theme.textColorPrimary }}
+                                // onPress={{}}
+                            />
+                        </Menu>
                     </View>
 
                     {novel.novelSummary !== "" && (