Merge branch 'LNReader:master' into master

Palloxin · Nov 10, 2024 · f89d218 · f89d218
2 parents 98dabac + 8f783fd
commit f89d218
Show file tree

Hide file tree

Showing 13 changed files with 625 additions and 769 deletions.
diff --git a/src/hooks/persisted/useNovel.ts b/src/hooks/persisted/useNovel.ts
@@ -336,9 +336,6 @@ export const useNovel = (novelPath: string, pluginId: string) => {
         return;
       }
     }
-
-    setNovel(novel);
-
     let pages: string[];
     if (novel.totalPages > 0) {
       pages = Array(novel.totalPages)
@@ -347,38 +344,51 @@ export const useNovel = (novelPath: string, pluginId: string) => {
     } else {
       pages = (await getCustomPages(novel.id)).map(c => c.page);
     }
+    if (pages.length) {
+      setPages(pages);
+    } else {
+      setPages(['1']);
+    }
+    setNovel(novel);
+    setLoading(false);
+  }, []);
 
-    setPages(pages.length ? pages : ['1']);
-
-    const page = pages[pageIndex] || '1';
-    let chapters = await _getPageChapters(
-      novel.id,
-      sort,
-      novelSettings.filter,
-      page,
-    );
-
-    if (!chapters.length && Number(page)) {
-      const sourcePage = await fetchPage(pluginId, novelPath, page);
-      const sourceChapters = sourcePage.chapters.map(ch => ({
-        ...ch,
-        page,
-      }));
-      await insertChapters(novel.id, sourceChapters);
-      chapters = await _getPageChapters(
+  const getChapters = useCallback(async () => {
+    const page = pages[pageIndex];
+    if (novel && page) {
+      let chapters = await _getPageChapters(
         novel.id,
         sort,
         novelSettings.filter,
         page,
       );
+      if (!chapters.length && Number(page)) {
+        const sourcePage = await fetchPage(pluginId, novelPath, page);
+        const sourceChapters = sourcePage.chapters.map(ch => {
+          return {
+            ...ch,
+            page,
+          };
+        });
+        await insertChapters(novel.id, sourceChapters);
+        chapters = await _getPageChapters(
+          novel.id,
+          sort,
+          novelSettings.filter,
+          page,
+        );
+      }
+      setChapters(chapters);
     }
-    setChapters(chapters);
-    setLoading(false);
-  }, [novelPath, pluginId, pageIndex, sort, novelSettings.filter]);
+  }, [novel, novelSettings, pageIndex]);
 
   useEffect(() => {
     getNovel();
-  }, [getNovel]);
+  }, []);
+
+  useEffect(() => {
+    getChapters().catch(e => showToast(e.message));
+  }, [getChapters]);
 
   return {
     loading,

diff --git a/src/screens/history/HistoryScreen.tsx b/src/screens/history/HistoryScreen.tsx
@@ -105,9 +105,7 @@ const HistoryScreen = ({ navigation }: HistoryScreenProps) => {
             renderItem={({ item }) => (
               <HistoryCard
                 history={item}
-                navigation={navigation}
                 handleRemoveFromHistory={removeChapterFromHistory}
-                theme={theme}
               />
             )}
             ListEmptyComponent={

diff --git a/src/screens/history/components/HistoryCard/HistoryCard.tsx b/src/screens/history/components/HistoryCard/HistoryCard.tsx
@@ -1,37 +1,38 @@
 import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
 
+import { useNavigation } from '@react-navigation/native';
 import dayjs from 'dayjs';
-import { Image } from 'react-native';
 
 import { IconButtonV2 } from '@components';
 
-import { History, NovelInfo } from '@database/types';
-import { ThemeColors } from '@theme/types';
-import { coverPlaceholderColor } from '@theme/colors';
+import { defaultCover } from '@plugins/helpers/constants';
 import { getString } from '@strings/translations';
+import { useTheme } from '@hooks/persisted';
+
+import { History, NovelInfo } from '@database/types';
 import { HistoryScreenProps } from '@navigators/types';
-import { defaultCover } from '@plugins/helpers/constants';
+
+import { coverPlaceholderColor } from '@theme/colors';
 
 interface HistoryCardProps {
   history: History;
   handleRemoveFromHistory: (chapterId: number) => void;
-  navigation: HistoryScreenProps['navigation'];
-  theme: ThemeColors;
 }
 
 const HistoryCard: React.FC<HistoryCardProps> = ({
   history,
-  navigation,
   handleRemoveFromHistory,
-  theme,
 }) => {
+  const theme = useTheme();
+  const { navigate } = useNavigation<HistoryScreenProps['navigation']>();
+
   return (
     <Pressable
       style={styles.container}
       android_ripple={{ color: theme.rippleColor }}
       onPress={() =>
-        navigation.navigate('Chapter', {
+        navigate('Chapter', {
           novel: {
             path: history.novelPath,
             name: history.novelName,
@@ -44,7 +45,7 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
       <View style={styles.imageAndNameContainer}>
         <Pressable
           onPress={() =>
-            navigation.navigate('Novel', {
+            navigate('Novel', {
               name: history.name,
               path: history.novelPath,
               pluginId: history.pluginId,
@@ -110,7 +111,6 @@ const styles = StyleSheet.create({
   novelName: {
     marginBottom: 4,
   },
-  chapterName: {},
   imageAndNameContainer: {
     flex: 1,
     flexDirection: 'row',

diff --git a/src/screens/history/components/HistorySkeletonLoading.tsx b/src/screens/history/components/HistorySkeletonLoading.tsx
@@ -13,74 +13,62 @@ interface Props {
 const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
   const { disableLoadingAnimations } = useAppSettings();
   const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
-
   const [highlightColor, backgroundColor] = getLoadingColors(theme);
 
-  const renderLoadingChapter = (item: number, index: number) => {
-    return (
-      <View key={'historyLoading' + item}>
-        {index === 0 || Math.random() > 0.6 ? (
+  const renderLoadingChapter = (index: number) => (
+    <View key={`historyLoading${index}`}>
+      {index === 0 || Math.random() > 0.6 ? (
+        <ShimmerPlaceHolder
+          style={styles.date}
+          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
+          height={19.3}
+          width={Math.random() * 40 + 50}
+          stopAutoRun={disableLoadingAnimations}
+        />
+      ) : null}
+      <View style={styles.chapterCtn}>
+        <ShimmerPlaceHolder
+          style={styles.picture}
+          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
+          height={80}
+          width={56}
+          stopAutoRun={disableLoadingAnimations}
+        />
+        <View style={styles.textCtn}>
           <ShimmerPlaceHolder
-            style={styles.date}
+            style={styles.text}
             shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={19.3}
-            width={Math.random() * 40 + 50}
+            height={16}
+            width={208.7}
             stopAutoRun={disableLoadingAnimations}
           />
-        ) : null}
-        <View style={styles.chapterCtn} key={index}>
           <ShimmerPlaceHolder
-            style={styles.picture}
+            style={styles.text}
             shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={80}
-            width={56}
+            height={12}
+            width={208.7}
             stopAutoRun={disableLoadingAnimations}
           />
-          <View style={styles.textCtn}>
-            <ShimmerPlaceHolder
-              style={styles.text}
-              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-              height={16}
-              width={208.7}
-              stopAutoRun={disableLoadingAnimations}
-            />
-            <ShimmerPlaceHolder
-              style={styles.text}
-              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-              height={12}
-              width={208.7}
-              stopAutoRun={disableLoadingAnimations}
-            />
-          </View>
-          <View style={styles.buttonCtn}>
-            <ShimmerPlaceHolder
-              style={styles.button}
-              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-              height={24}
-              width={24}
-              stopAutoRun={disableLoadingAnimations}
-            />
-          </View>
-          <View style={styles.buttonCtn}>
+        </View>
+        <View style={styles.buttonCtn}>
+          {Array.from({ length: 2 }).map((_, buttonIndex) => (
             <ShimmerPlaceHolder
+              key={buttonIndex}
               style={styles.button}
               shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
               height={24}
               width={24}
               stopAutoRun={disableLoadingAnimations}
             />
-          </View>
+          ))}
         </View>
       </View>
-    );
-  };
+    </View>
+  );
 
-  const items = [];
-  for (let index = 0; index < Math.random() * 3 + 3; index++) {
-    items.push(index);
-  }
+  const items = Array.from({ length: Math.floor(Math.random() * 3 + 3) });
 
-  return <View>{items.map(renderLoadingChapter)}</View>;
+  return <View>{items.map((_, index) => renderLoadingChapter(index))}</View>;
 };
 
 const styles = StyleSheet.create({

diff --git a/src/screens/library/LibraryScreen.tsx b/src/screens/library/LibraryScreen.tsx
@@ -102,7 +102,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
           },
           styles.tabBar,
         ]}
-        tabStyle={{ width: 'auto' }}
+        tabStyle={{ width: 'auto', minWidth: 100 }}
         gap={8}
         renderLabel={({ route, color }) => (
           <Row>

diff --git a/src/screens/novel/components/LoadingAnimation/NovelInfoLoading.tsx b/src/screens/novel/components/LoadingAnimation/NovelInfoLoading.tsx