refactor: safe ternary operator rendering

K1ngfish3r · Mar 14, 2024 · a7aa203 · a7aa203
1 parent aeaecda
commit a7aa203
Show file tree

Hide file tree

Showing 19 changed files with 103 additions and 107 deletions.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -71,14 +71,14 @@ export const SortItem = ({ label, status, onPress, theme }: SortItemProps) => (
     style={[styles.pressable, { paddingVertical: 16, paddingLeft: 64 }]}
     onPress={onPress}
   >
-    {status && (
+    {status ? (
       <MaterialCommunityIcons
         name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
         color={theme.primary}
         size={21}
         style={styles.icon}
       />
-    )}
+    ) : null}
     <Text style={{ color: theme.onSurface }}>{label}</Text>
   </Pressable>
 );

diff --git a/src/components/NovelCover.tsx b/src/components/NovelCover.tsx
@@ -103,22 +103,22 @@ function NovelCover<TNovel extends NovelItem | NovelInfo | LibraryNovelInfo>({
       >
         <View style={styles.badgeContainer}>
           {libraryStatus && <InLibraryBadge theme={theme} />}
-          {showDownloadBadges && item.chaptersDownloaded > 0 && (
+          {showDownloadBadges && item.chaptersDownloaded > 0 ? (
             <DownloadBadge
               showUnreadBadges={showUnreadBadges}
               chaptersDownloaded={item.chaptersDownloaded}
               chaptersUnread={item.chaptersUnread}
               theme={theme}
             />
-          )}
-          {showUnreadBadges && item.chaptersUnread > 0 && (
+          ) : null}
+          {showUnreadBadges && item.chaptersUnread > 0 ? (
             <UnreadBadge
               theme={theme}
               chaptersDownloaded={item.chaptersDownloaded}
               chaptersUnread={item.chaptersUnread}
               showDownloadBadges={showDownloadBadges}
             />
-          )}
+          ) : null}
         </View>
         <Image
           source={{ uri, headers: { 'User-Agent': getUserAgent() } }}
@@ -132,39 +132,37 @@ function NovelCover<TNovel extends NovelItem | NovelInfo | LibraryNovelInfo>({
           ]}
         />
         <View style={styles.compactTitleContainer}>
-          {displayMode === DisplayModes.Compact && (
+          {displayMode === DisplayModes.Compact ? (
             <CompactTitle novelName={item.name} />
-          )}
+          ) : null}
         </View>
-        {displayMode === DisplayModes.Comfortable && (
+        {displayMode === DisplayModes.Comfortable ? (
           <ComfortableTitle novelName={item.name} theme={theme} />
-        )}
+        ) : null}
       </Pressable>
     </View>
   ) : (
     <ListView
       item={item}
       downloadBadge={
-        showDownloadBadges &&
-        item.chaptersDownloaded && (
+        showDownloadBadges && item.chaptersDownloaded ? (
           <DownloadBadge
             theme={theme}
             showUnreadBadges={showUnreadBadges}
             chaptersDownloaded={item.chaptersDownloaded}
             chaptersUnread={item.chaptersUnread}
           />
-        )
+        ) : null
       }
       unreadBadge={
-        showUnreadBadges &&
-        item.chaptersUnread && (
+        showUnreadBadges && item.chaptersUnread ? (
           <UnreadBadge
             theme={theme}
             chaptersDownloaded={item.chaptersDownloaded}
             chaptersUnread={item.chaptersUnread}
             showDownloadBadges={showDownloadBadges}
           />
-        )
+        ) : null
       }
       inLibraryBadge={libraryStatus && <InLibraryBadge theme={theme} />}
       theme={theme}

diff --git a/src/components/ThemePicker/ThemePicker.tsx b/src/components/ThemePicker/ThemePicker.tsx
@@ -39,7 +39,7 @@ export const ThemePicker = ({
       }}
     >
       <Pressable style={{ flex: 1 }} onPress={onPress}>
-        {currentTheme.id === theme.id && (
+        {currentTheme.id === theme.id ? (
           <MaterialCommunityIcons
             name="check"
             color={theme.onPrimary}
@@ -54,7 +54,7 @@ export const ThemePicker = ({
               padding: 1.6,
             }}
           />
-        )}
+        ) : null}
         <View
           style={{
             height: 20,

diff --git a/src/navigators/BottomNavigator.tsx b/src/navigators/BottomNavigator.tsx
@@ -37,7 +37,7 @@ const BottomNavigator = () => {
           tabBarIcon: 'book-variant-multiple',
         }}
       />
-      {showUpdatesTab && (
+      {showUpdatesTab ? (
         <Tab.Screen
           name="Updates"
           component={Updates}
@@ -46,8 +46,8 @@ const BottomNavigator = () => {
             tabBarIcon: 'alert-decagram-outline',
           }}
         />
-      )}
-      {showHistoryTab && (
+      ) : null}
+      {showHistoryTab ? (
         <Tab.Screen
           name="History"
           component={History}
@@ -56,7 +56,7 @@ const BottomNavigator = () => {
             tabBarIcon: 'history',
           }}
         />
-      )}
+      ) : null}
       <Tab.Screen
         name="Browse"
         component={Browse}

diff --git a/src/screens/Categories/components/CategoryCard.tsx b/src/screens/Categories/components/CategoryCard.tsx
@@ -101,15 +101,15 @@ const CategoryCard: React.FC<CategoryCardProps> = ({
             onPress={showCategoryModal}
             theme={theme}
           />
-          {categoryIndex !== 0 && category.id !== 2 && (
+          {categoryIndex !== 0 && category.id !== 2 ? (
             <IconButton
               name="delete-outline"
               color={theme.onSurface}
               style={styles.manageBtn}
               onPress={showDeleteCategoryModal}
               theme={theme}
             />
-          )}
+          ) : null}
         </View>
       </View>
       <Portal>

diff --git a/src/screens/browse/migration/MigrationNovels.tsx b/src/screens/browse/migration/MigrationNovels.tsx
@@ -130,9 +130,9 @@ const MigrationNovels = ({ navigation, route }: MigrateNovelScreenProps) => {
         handleGoBack={navigation.goBack}
         theme={theme}
       />
-      {progress > 0 && (
+      {progress > 0 ? (
         <ProgressBar color={theme.primary} progress={progress} />
-      )}
+      ) : null}
       <FlatList
         contentContainerStyle={{ flexGrow: 1, padding: 4 }}
         data={searchResults}

diff --git a/src/screens/library/LibraryScreen.tsx b/src/screens/library/LibraryScreen.tsx
@@ -106,7 +106,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
         renderLabel={({ route, color }) => (
           <Row>
             <Text style={{ color, fontWeight: '600' }}>{route.title}</Text>
-            {showNumberOfNovels && (
+            {showNumberOfNovels ? (
               <View
                 style={[
                   styles.badgeCtn,
@@ -119,7 +119,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
                   {(route as any)?.novels.length}
                 </Text>
               </View>
-            )}
+            ) : null}
           </Row>
         )}
         inactiveColor={theme.secondary}
@@ -176,22 +176,22 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
         }
         theme={theme}
       />
-      {downloadedOnlyMode && (
+      {downloadedOnlyMode ? (
         <Banner
           icon="cloud-off-outline"
           label={getString('moreScreen.downloadOnly')}
           theme={theme}
         />
-      )}
-      {incognitoMode && (
+      ) : null}
+      {incognitoMode ? (
         <Banner
           icon="incognito"
           label={getString('moreScreen.incognitoMode')}
           theme={theme}
           backgroundColor={theme.tertiary}
           textColor={theme.onTertiary}
         />
-      )}
+      ) : null}
       <TabView
         lazy
         navigationState={{
@@ -235,31 +235,31 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
         initialLayout={{ width: layout.width }}
       />
       {useLibraryFAB &&
-        !isHistoryLoading &&
-        history &&
-        history.length !== 0 &&
-        !error && (
-          <FAB
-            style={[
-              styles.fab,
-              { backgroundColor: theme.primary, marginRight: rightInset + 16 },
-            ]}
-            color={theme.onPrimary}
-            uppercase={false}
-            label={getString('common.resume')}
-            icon="play"
-            onPress={() => {
-              navigation.navigate('Chapter', {
-                novel: {
-                  path: history[0].novelPath,
-                  pluginId: history[0].pluginId,
-                  name: history[0].novelName,
-                } as NovelInfo,
-                chapter: history[0],
-              });
-            }}
-          />
-        )}
+      !isHistoryLoading &&
+      history &&
+      history.length !== 0 &&
+      !error ? (
+        <FAB
+          style={[
+            styles.fab,
+            { backgroundColor: theme.primary, marginRight: rightInset + 16 },
+          ]}
+          color={theme.onPrimary}
+          uppercase={false}
+          label={getString('common.resume')}
+          icon="play"
+          onPress={() => {
+            navigation.navigate('Chapter', {
+              novel: {
+                path: history[0].novelPath,
+                pluginId: history[0].pluginId,
+                name: history[0].novelName,
+              } as NovelInfo,
+              chapter: history[0],
+            });
+          }}
+        />
+      ) : null}
       <SetCategoryModal
         novelIds={selectedNovelIds}
         closeModal={closeSetCategoryModal}

diff --git a/src/screens/more/DownloadQueueScreen.tsx b/src/screens/more/DownloadQueueScreen.tsx
@@ -89,7 +89,7 @@ const DownloadQueue = ({ navigation }: DownloadQueueScreenProps) => {
           />
         }
       />
-      {queue.length > 0 && (
+      {queue.length > 0 ? (
         <FAB
           style={[styles.fab, { backgroundColor: theme.primary }]}
           color={theme.onPrimary}
@@ -104,7 +104,7 @@ const DownloadQueue = ({ navigation }: DownloadQueueScreenProps) => {
             isDownloading ? pauseDownload() : resumeDowndload();
           }}
         />
-      )}
+      ) : null}
     </>
   );
 };

diff --git a/src/screens/more/DownloadsScreen.tsx b/src/screens/more/DownloadsScreen.tsx
@@ -91,13 +91,13 @@ const Downloads = ({ navigation }: DownloadsScreenProps) => {
         handleGoBack={navigation.goBack}
         theme={theme}
       >
-        {chapters.length > 0 && (
+        {chapters.length > 0 ? (
           <MaterialAppbar.Action
             icon="delete-sweep"
             iconColor={theme.onSurface}
             onPress={showDialog}
           />
-        )}
+        ) : null}
       </Appbar>
       <List.InfoItem title={getString('downloadScreen.dbInfo')} theme={theme} />
       {loading ? (

diff --git a/src/screens/novel/NovelScreen.tsx b/src/screens/novel/NovelScreen.tsx
@@ -349,7 +349,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
                   onPress={() => navigation.goBack()}
                 />
                 <Row>
-                  {!novel.isLocal && (
+                  {!novel.isLocal ? (
                     <IconButton
                       icon="share-variant"
                       iconColor={theme.onBackground}
@@ -363,7 +363,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
                         })
                       }
                     />
-                  )}
+                  ) : null}
                   <IconButton
                     icon="text-box-search-outline"
                     iconColor={theme.onBackground}
@@ -373,7 +373,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
                     }}
                     onPress={() => showJumpToChapterModal(true)}
                   />
-                  {!novel.isLocal && (
+                  {!novel.isLocal ? (
                     <Menu
                       visible={downloadMenu}
                       onDismiss={() => showDownloadMenu(false)}
@@ -502,7 +502,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
                         }}
                       />
                     </Menu>
-                  )}
+                  ) : null}
 
                   <Menu
                     visible={extraMenu}
@@ -628,7 +628,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
               onScroll={onPageScroll}
             />
           </View>
-          {useFabForContinueReading && lastRead && (
+          {useFabForContinueReading && lastRead ? (
             <AnimatedFAB
               style={[
                 styles.fab,
@@ -648,7 +648,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
                 }
               }}
             />
-          )}
+          ) : null}
           <Portal>
             <Actionbar active={selected.length > 0} actions={actions} />
             <Snackbar

diff --git a/src/screens/novel/components/ChapterItem.tsx b/src/screens/novel/components/ChapterItem.tsx
@@ -70,7 +70,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
         {left}
         {bookmark ? <ChapterBookmarkButton theme={theme} /> : null}
         <View style={{ flex: 1 }}>
-          {isUpdateCard && (
+          {isUpdateCard ? (
             <Text
               style={[
                 {
@@ -82,7 +82,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
             >
               {novelName}
             </Text>
-          )}
+          ) : null}
           <View style={styles.row}>
             {unread ? (
               <MaterialCommunityIcons
@@ -147,7 +147,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
           </View>
         </View>
       </View>
-      {!isLocal && (
+      {!isLocal ? (
         <DownloadButton
           isDownloading={isDownloading}
           isDownloaded={chapter.isDownloaded}
@@ -158,7 +158,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
           showDeleteChapterMenu={showMenu}
           deleteChapterMenuVisible={isMenuVisible}
         />
-      )}
+      ) : null}
     </Pressable>
   );
 };