refactor: Miscellaneous Cleanup (Closes #1307)

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,

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={

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 { getString } from '@strings/translations';
-import { HistoryScreenProps } from '@navigators/types';
 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 { 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',

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}>
+        </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 style={styles.buttonCtn}>
-            <ShimmerPlaceHolder
-              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({

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>

src/screens/novel/components/LoadingAnimation/NovelScreenLoading.tsx

@@ -1,249 +1,160 @@
 import React, { memo } from 'react';
-import { View, Dimensions, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
 import { LinearGradient } from 'expo-linear-gradient';
 import { ThemeColors } from '@theme/types';
 import getLoadingColors from '@utils/getLoadingColors';
-import { useAppSettings } from '@hooks/persisted/index';
+import { useAppSettings, useTheme } from '@hooks/persisted/index';
 
 interface Props {
   theme: ThemeColors;
 }
 
+const LoadingShimmer = memo(
+  ({
+    style,
+    height,
+    width,
+  }: {
+    style?: any;
+    height: number;
+    width: number | string;
+  }) => {
+    const { disableLoadingAnimations } = useAppSettings();
+    const theme = useTheme();
+    const [highlightColor, backgroundColor] = getLoadingColors(theme);
+    const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
+
+    return (
+      <ShimmerPlaceHolder
+        style={style}
+        shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
+        height={height}
+        width={width}
+        stopAutoRun={disableLoadingAnimations}
+      />
+    );
+  },
+);
+
+const NovelTop = memo(() => (
+  <View style={styles.headerContainer}>
+    <LoadingShimmer style={styles.picture} height={150} width={100} />
+    <View style={styles.headerText}>
+      <LoadingShimmer style={styles.text} height={25} width={240} />
+      <LoadingShimmer style={styles.text} height={20} width={240} />
+      <LoadingShimmer style={styles.text} height={20} width={240} />
+    </View>
+  </View>
+));
+
+const NovelInformation = memo(() => (
+  <View style={styles.metadataContainer}>
+    <View style={styles.statsContainer}>
+      {[...Array(3)].map((_, i) => (
+        <LoadingShimmer key={i} style={styles.icon} height={56} width={90} />
+      ))}
+    </View>
+    <View style={styles.novelInformationText}>
+      {[...Array(2)].map((_, i) => (
+        <LoadingShimmer key={i} style={styles.text} height={16} width={350} />
+      ))}
+    </View>
+    <View style={styles.novelInformationChips}>
+      {[...Array(2)].map((_, i) => (
+        <LoadingShimmer key={i} style={styles.chip} height={32} width={60} />
+      ))}
+    </View>
+  </View>
+));
+
+const ChapterItem = memo(({ index }: { index: number }) => (
+  <View style={styles.chapter}>
+    <LoadingShimmer style={styles.text} height={20} width={350} />
+    <LoadingShimmer style={styles.text} height={16} width={350} />
+  </View>
+));
+
+const Chapters = memo(() => (
+  <View style={styles.chapterContainer}>
+    <LoadingShimmer
+      style={[styles.text, { marginBottom: 5 }]}
+      height={30}
+      width={350}
+    />
+    {[...Array(7)].map((_, i) => (
+      <ChapterItem key={i} index={i} />
+    ))}
+  </View>
+));
+
 const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
-  const { disableLoadingAnimations } = useAppSettings();
-  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
-  const styles = createStyleSheet();
-
-  const [highlightColor, backgroundColor] = getLoadingColors(theme);
-
-  const RenderLoadingNovelTop = () => {
-    return (
-      <View style={styles.novelTopContainer}>
-        <ShimmerPlaceHolder
-          style={styles.picture}
-          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-          height={150}
-          width={100}
-          stopAutoRun={disableLoadingAnimations}
-        />
-        <View style={styles.novelTopText}>
-          <ShimmerPlaceHolder
-            style={styles.text}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={25}
-            width={240}
-            stopAutoRun={disableLoadingAnimations}
-          />
-          <ShimmerPlaceHolder
-            style={styles.text}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={20}
-            width={240}
-            stopAutoRun={disableLoadingAnimations}
-          />
-          <ShimmerPlaceHolder
-            style={styles.text}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={20}
-            width={240}
-            stopAutoRun={disableLoadingAnimations}
-          />
-        </View>
-      </View>
-    );
-  };
-
-  const RenderLoadingNovelInformation = () => {
-    return (
-      <View style={styles.novelInformationContainer}>
-        <View style={styles.icons}>
-          <ShimmerPlaceHolder
-            style={styles.icon}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={56}
-            width={90}
-            stopAutoRun={disableLoadingAnimations}
-          />
-          <ShimmerPlaceHolder
-            style={styles.icon}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={56}
-            width={90}
-            stopAutoRun={disableLoadingAnimations}
-          />
-          <ShimmerPlaceHolder
-            style={styles.icon}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={56}
-            width={90}
-            stopAutoRun={disableLoadingAnimations}
-          />
-        </View>
-        <View style={styles.novelInformationText}>
-          <ShimmerPlaceHolder
-            style={styles.text}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={16}
-            width={350}
-            stopAutoRun={disableLoadingAnimations}
-          />
-          <ShimmerPlaceHolder
-            style={styles.text}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={16}
-            width={350}
-            stopAutoRun={disableLoadingAnimations}
-          />
-        </View>
-        <View style={styles.novelInformationChips}>
-          <ShimmerPlaceHolder
-            style={styles.chip}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={32}
-            width={60}
-            stopAutoRun={disableLoadingAnimations}
-          />
-          <ShimmerPlaceHolder
-            style={styles.chip}
-            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-            height={32}
-            width={60}
-            stopAutoRun={disableLoadingAnimations}
-          />
-        </View>
-      </View>
-    );
-  };
-
-  const renderLoadingChapter = (item: number, index: number) => {
-    return (
-      <View style={styles.chapter} key={index}>
-        <ShimmerPlaceHolder
-          style={styles.text}
-          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-          height={20}
-          width={350}
-          stopAutoRun={disableLoadingAnimations}
-        />
-        <ShimmerPlaceHolder
-          style={styles.text}
-          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-          height={16}
-          width={350}
-          stopAutoRun={disableLoadingAnimations}
-        />
-      </View>
-    );
-  };
-
-  const RenderLoadingChapters = () => {
-    const items = [1, 2, 3, 4, 5, 6, 7];
-    return (
-      <View style={styles.chapterContainer}>
-        <ShimmerPlaceHolder
-          style={[styles.text, { marginBottom: 5 }]}
-          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
-          height={30}
-          width={350}
-          stopAutoRun={disableLoadingAnimations}
-        />
-        {items.map(renderLoadingChapter)}
-      </View>
-    );
-  };
-
-  const RenderLoading = () => {
-    return (
-      <>
-        <RenderLoadingNovelTop />
-        <RenderLoadingNovelInformation />
-        <RenderLoadingChapters />
-      </>
-    );
-  };
-
   return (
     <View style={styles.container}>
-      <RenderLoading />
+      <NovelTop />
+      <NovelInformation />
+      <Chapters />
     </View>
   );
 };
 
-const createStyleSheet = () => {
-  return StyleSheet.create({
-    novelTopContainer: {
-      paddingTop: 118,
-      height: 268,
-      width: '100%',
-      flexDirection: 'row',
-      justifyContent: 'space-evenly',
-    },
-    novelTopText: {
-      height: 100,
-      paddingTop: 30,
-      justifyContent: 'center',
-    },
-    novelInformationContainer: {
-      marginVertical: 4,
-    },
-    icons: {
-      paddingVertical: 4,
-      flexDirection: 'row',
-      justifyContent: 'space-around',
-    },
-    icon: {
-      borderRadius: 30,
-    },
-    novelInformationText: {
-      margin: 16,
-      marginTop: 8,
-      height: 62,
-    },
-    novelInformationChips: {
-      flexDirection: 'row',
-      paddingBottom: 6,
-      paddingLeft: 8,
-    },
-    chip: {
-      marginLeft: 8,
-      borderRadius: 8,
-    },
-    chapterContainer: {
-      marginHorizontal: 16,
-    },
-    chapter: {
-      paddingVertical: 8,
-    },
-    container: {
-      flexGrow: 1,
-      marginHorizontal: 4,
-      marginBottom: 8,
-      overflow: 'hidden',
-    },
-    loadingContainer: {
-      padding: 4.8,
-      width: 124.2,
-      height: 229.1,
-      overflow: 'hidden',
-    },
-    text: {
-      borderRadius: 8,
-      marginTop: 5,
-    },
-    loadingText: {
-      margin: 10,
-      height: 10,
-      width: Dimensions.get('window').width - 140,
-    },
-    row: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    picture: {
-      borderRadius: 8,
-    },
-  });
-};
+const styles = StyleSheet.create({
+  headerContainer: {
+    paddingTop: 118,
+    height: 268,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  headerText: {
+    height: 100,
+    paddingTop: 30,
+    justifyContent: 'center',
+  },
+  metadataContainer: {
+    marginVertical: 4,
+  },
+  statsContainer: {
+    paddingVertical: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  icon: {
+    borderRadius: 30,
+  },
+  novelInformationText: {
+    margin: 16,
+    marginTop: 8,
+    height: 62,
+  },
+  novelInformationChips: {
+    flexDirection: 'row',
+    paddingBottom: 6,
+    paddingLeft: 8,
+  },
+  chip: {
+    marginLeft: 8,
+    borderRadius: 8,
+  },
+  chapterContainer: {
+    marginHorizontal: 16,
+  },
+  chapter: {
+    paddingVertical: 8,
+  },
+  container: {
+    flexGrow: 1,
+    marginHorizontal: 4,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  text: {
+    borderRadius: 8,
+    marginTop: 5,
+  },
+  picture: {
+    borderRadius: 8,
+  },
+});
 
 export default memo(NovelScreenLoading);

src/screens/onboarding/OnboardingScreen.tsx

@@ -49,7 +49,7 @@ export default function OnboardingScreen() {
           color: theme.onBackground,
         }}
       >
-        Yaholo!
+        Welcome
       </Text>
       <Text
         style={{

src/utils/getLoadingColors.ts

@@ -3,14 +3,19 @@ import color from 'color';
 
 const getLoadingColors = (theme: ThemeColors) => {
   const highlightColor = color(theme.primary).alpha(0.08).string();
-  let backgroundColor = theme.surface;
+  const backgroundColor = color(theme.surface);
 
-  backgroundColor = color(backgroundColor).isDark()
-    ? color(backgroundColor).luminosity() !== 0
-      ? color(backgroundColor).lighten(0.1).toString()
-      : color(backgroundColor).negate().darken(0.98).toString()
-    : color(backgroundColor).darken(0.04).toString();
+  let adjustedBackgroundColor;
 
-  return [highlightColor, backgroundColor];
+  if (backgroundColor.isDark()) {
+    adjustedBackgroundColor =
+      backgroundColor.luminosity() !== 0
+        ? backgroundColor.lighten(0.1).toString()
+        : backgroundColor.negate().darken(0.98).toString();
+  } else {
+    adjustedBackgroundColor = backgroundColor.darken(0.04).toString();
+  }
+
+  return [highlightColor, adjustedBackgroundColor];
 };
 export default getLoadingColors;