Tweak UX (#1052)

* Tweak UX * Prevent Crash in Migrate Screen * Cleanup
LNReader · Apr 28, 2024 · c77dc52 · c77dc52
1 parent 3cd5b40
commit c77dc52
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 57 deletions.
diff --git a/src/database/queries/ChapterQueries.ts b/src/database/queries/ChapterQueries.ts
@@ -290,10 +290,9 @@ export const downloadChapter = async (
     if (chapterText && chapterText.length) {
       await downloadFiles(chapterText, plugin, novelId, chapterId);
       db.transaction(tx => {
-        tx.executeSql(
-          "UPDATE Chapter SET isDownloaded = 1, updatedTime = datetime('now','localtime') WHERE id = ?",
-          [chapterId],
-        );
+        tx.executeSql('UPDATE Chapter SET isDownloaded = 1 WHERE id = ?', [
+          chapterId,
+        ]);
       });
     } else {
       throw new Error(getString('downloadScreen.chapterEmptyOrScrapeError'));

diff --git a/src/database/queries/HistoryQueries.ts b/src/database/queries/HistoryQueries.ts
@@ -9,10 +9,12 @@ import { getString } from '@strings/translations';
 
 const getHistoryQuery = `
     SELECT 
-      Chapter.*, Novel.pluginId, Novel.name as novelName, Novel.path as novelPath, Novel.cover as novelCover
+      Chapter.*, Novel.pluginId, Novel.name as novelName, Novel.path as novelPath, Novel.cover as novelCover, Novel.id as novelId
     FROM Chapter 
     JOIN Novel
     ON Chapter.novelId = Novel.id AND Chapter.readTime IS NOT NULL
+    GROUP BY novelId
+    HAVING readTime = MAX(readTime)
     ORDER BY readTime DESC
     `;
 

diff --git a/src/screens/GlobalSearchScreen/hooks/useGlobalSearch.ts b/src/screens/GlobalSearchScreen/hooks/useGlobalSearch.ts
@@ -77,7 +77,7 @@ export const useGlobalSearch = ({ defaultSearchText }: Props) => {
                     ...prevResult,
                     novels: [],
                     isLoading: false,
-                    error: error.message,
+                    error: error?.message,
                   }
                 : { ...prevResult },
             ),

diff --git a/src/screens/browse/migration/MigrationNovelList.tsx b/src/screens/browse/migration/MigrationNovelList.tsx
@@ -105,7 +105,7 @@ const MigrationNovelList = ({
             }}
           >
             {getString('browseScreen.migration.dialogMessage', {
-              url: selectedNovel.path,
+              url: selectedNovel.name,
             })}
           </Text>
           <View

diff --git a/src/screens/browse/migration/MigrationNovels.tsx b/src/screens/browse/migration/MigrationNovels.tsx
@@ -70,7 +70,7 @@ const MigrationNovels = ({ navigation, route }: MigrateNovelScreenProps) => {
                 ? {
                     ...pluginItem,
                     loading: false,
-                    error: e.message,
+                    error: e?.message,
                   }
                 : pluginItem,
             ),

diff --git a/src/screens/novel/components/ChapterItem.tsx b/src/screens/novel/components/ChapterItem.tsx
@@ -83,7 +83,13 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
               {novelName}
             </Text>
           ) : null}
-          <View style={styles.row}>
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
             {unread ? (
               <MaterialCommunityIcons
                 name="circle"
@@ -113,7 +119,12 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
                   })}
             </Text>
           </View>
-          <View style={styles.textRow}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
             {releaseTime && !isUpdateCard ? (
               <Text
                 style={[
@@ -123,6 +134,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
                       : bookmark
                       ? theme.primary
                       : theme.onSurfaceVariant,
+                    marginTop: 4,
                   },
                   styles.text,
                 ]}
@@ -137,6 +149,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
                   color: theme.outline,
                   fontSize: 12,
                   marginLeft: chapter.releaseTime ? 5 : 0,
+                  marginTop: 4,
                 }}
                 numberOfLines={1}
               >
@@ -179,7 +192,6 @@ const styles = StyleSheet.create({
   },
   textRow: {
     flexDirection: 'row',
-    marginTop: 5,
   },
   row: { flex: 1, flexDirection: 'row', alignItems: 'center' },
   unreadIcon: {

diff --git a/src/screens/novel/components/EditInfoModal.tsx b/src/screens/novel/components/EditInfoModal.tsx
@@ -112,48 +112,47 @@ const EditInfoModal = ({
           placeholder={getString('novelScreen.edit.title', {
             title: novel.name,
           })}
-          style={{ fontSize: 14 }}
           numberOfLines={1}
           mode="outlined"
           theme={{ colors: { ...theme } }}
           onChangeText={text => setNovel({ ...novel, name: text })}
           dense
+          style={styles.inputWrapper}
         />
         <TextInput
           placeholder={getString('novelScreen.edit.author', {
             author: novel.author,
           })}
-          style={{ fontSize: 14 }}
           numberOfLines={1}
           mode="outlined"
           theme={{ colors: { ...theme } }}
           onChangeText={text => setNovel({ ...novel, author: text })}
           dense
+          style={styles.inputWrapper}
         />
         <TextInput
           placeholder={'Artist: ' + novel.artist}
-          style={{ fontSize: 14 }}
           numberOfLines={1}
           mode="outlined"
           theme={{ colors: { ...theme } }}
           onChangeText={text => setNovel({ ...novel, artist: text })}
           dense
+          style={styles.inputWrapper}
         />
         <TextInput
           placeholder={getString('novelScreen.edit.summary', {
             summary: novel.summary?.substring(0, 16),
           })}
-          style={{ fontSize: 14 }}
           numberOfLines={1}
           mode="outlined"
           onChangeText={text => setNovel({ ...novel, summary: text })}
           theme={{ colors: { ...theme } }}
           dense
+          style={styles.inputWrapper}
         />
 
         <TextInput
           placeholder={getString('novelScreen.edit.addTag')}
-          style={{ fontSize: 14 }}
           numberOfLines={1}
           mode="outlined"
           onChangeText={text => setTag(text)}
@@ -163,6 +162,7 @@ const EditInfoModal = ({
           }}
           theme={{ colors: { ...theme } }}
           dense
+          style={styles.inputWrapper}
         />
 
         {novel.genres !== undefined && novel.genres !== '' ? (
@@ -213,11 +213,11 @@ const GenreChip = ({
       borderRadius: 8,
       paddingVertical: 6,
       paddingHorizontal: 16,
-      marginVertical: 4,
+      marginBottom: 4,
       marginRight: 8,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: theme.outline,
+      backgroundColor: theme.secondaryContainer,
     }}
   >
     <Text
@@ -242,16 +242,19 @@ const GenreChip = ({
 const styles = StyleSheet.create({
   modalContainer: {
     margin: 30,
-    padding: 20,
-    borderRadius: 8,
+    padding: 24,
+    borderRadius: 28,
   },
   modalTitle: {
-    fontSize: 18,
+    fontSize: 24,
     marginBottom: 16,
   },
   errorText: {
     color: '#FF0033',
     paddingTop: 8,
   },
-  genreChip: {},
+  inputWrapper: {
+    fontSize: 14,
+    marginBottom: 12,
+  },
 });
diff --git a/src/screens/novel/components/Info/NovelInfoComponents.tsx b/src/screens/novel/components/Info/NovelInfoComponents.tsx
@@ -298,6 +298,7 @@ const styles = StyleSheet.create({
   },
   novelInfo: {
     fontSize: 14,
+    marginBottom: 4,
   },
   followButton: {
     height: 32,

diff --git a/src/screens/novel/components/Info/NovelInfoHeader.tsx b/src/screens/novel/components/Info/NovelInfoHeader.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useMemo } from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import color from 'color';
 
@@ -29,8 +29,10 @@ import { NovelScreenProps } from '@navigators/types';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { UseBooleanReturnType } from '@hooks';
 import { useAppSettings } from '@hooks/persisted';
-import { NovelStatus } from '@plugins/types';
+import { NovelStatus, PluginItem } from '@plugins/types';
 import { translateNovelStatus } from '@utils/translateEnum';
+import { getMMKVObject } from '@utils/mmkv/mmkv';
+import { AVAILABLE_PLUGINS } from '@hooks/persisted/usePlugins';
 
 interface NovelInfoHeaderProps {
   novel: NovelData;
@@ -50,6 +52,16 @@ interface NovelInfoHeaderProps {
   onRefreshPage: (page: string) => void;
 }
 
+const getStatusIcon = (status?: string) => {
+  if (status === NovelStatus.Ongoing) {
+    return 'clock-outline';
+  }
+  if (status === NovelStatus.Completed) {
+    return 'check-all';
+  }
+  return 'help';
+};
+
 const NovelInfoHeader = ({
   novel,
   theme,
@@ -69,15 +81,14 @@ const NovelInfoHeader = ({
 }: NovelInfoHeaderProps) => {
   const { hideBackdrop = false } = useAppSettings();
 
-  const getStatusIcon = useCallback((status?: string) => {
-    if (status === NovelStatus.Ongoing) {
-      return 'clock-outline';
-    }
-    if (status === NovelStatus.Completed) {
-      return 'check-all';
-    }
-    return 'help';
-  }, []);
+  const pluginName = useMemo(
+    () =>
+      (getMMKVObject<PluginItem[]>(AVAILABLE_PLUGINS) || []).find(
+        plugin => plugin.id === novel.pluginId,
+      )?.name,
+    [],
+  );
+
   return (
     <>
       <CoverImage
@@ -146,7 +157,7 @@ const NovelInfoHeader = ({
                 {(translateNovelStatus(novel.status) ||
                   getString('novelScreen.unknownStatus')) +
                   ' • ' +
-                  novel.pluginId}
+                  pluginName}
               </NovelInfo>
             </Row>
           </View>

diff --git a/src/screens/updates/components/UpdateNovelCard.tsx b/src/screens/updates/components/UpdateNovelCard.tsx
@@ -8,7 +8,6 @@ import {
   Update,
 } from '@database/types';
 import { List } from 'react-native-paper';
-import { coverPlaceholderColor } from '@theme/colors';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import ChapterItem from '@screens/novel/components/ChapterItem';
 import { useDownload, useTheme } from '@hooks/persisted';
@@ -24,7 +23,7 @@ const NovelCover = ({
   navigateToNovel: () => void;
 }) => {
   return (
-    <Pressable onPress={navigateToNovel}>
+    <Pressable onPress={navigateToNovel} style={{ alignSelf: 'center' }}>
       <Image source={{ uri }} style={styles.cover} />
     </Pressable>
   );
@@ -106,6 +105,7 @@ const UpdateNovelCard: React.FC<UpdateCardProps> = ({
           data={chapterList}
           keyExtractor={it => 'update' + it.id}
           extraData={[chapterList]}
+          style={styles.chapterList}
           renderItem={({ item }) => {
             return (
               <ChapterItem
@@ -166,39 +166,21 @@ export default UpdateNovelCard;
 const styles = StyleSheet.create({
   padding: {
     paddingHorizontal: 16,
-    paddingVertical: 3,
-    height: 64,
+    paddingVertical: 2,
   },
   container: {
     justifyContent: 'space-between',
+    alignItems: 'center',
   },
   cover: {
     height: 40,
     width: 40,
     borderRadius: 4,
-    backgroundColor: coverPlaceholderColor,
   },
   novelCover: {
     marginRight: 8,
   },
-  imageContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nameContainer: {
-    flex: 1,
-    marginLeft: 16,
-    paddingRight: 16,
-  },
-  chapterName: {
-    marginTop: 4,
-    fontSize: 12,
-  },
-  downloading: {
-    margin: 8,
-  },
   chapterList: {
-    marginLeft: -64,
+    marginLeft: -40,
   },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,7 +105,7 @@ const MigrationNovelList = ({ @@
                 }}
               >
                 {getString('browseScreen.migration.dialogMessage', {
-                  url: selectedNovel.path,
+                  url: selectedNovel.name,
                 })}
               </Text>
               <View
@@ Expand Down @@