From c91cc508f4584b71d2b5da94b3b9025953997272 Mon Sep 17 00:00:00 2001
From: abhijeetChawla <84376771+abhijeetChawla@users.noreply.github.com>
Date: Fri, 29 Oct 2021 17:51:10 +0530
Subject: [PATCH] add EmptyView to DownloadQueue, refactro strings (#53)

* Added the Emty view message in the /download path

* Changed a few expression to template string
---
 src/components/manga/ChapterCard.tsx   |  5 +----
 src/components/manga/MangaDetails.tsx  | 14 ++++----------
 src/components/navbar/ReaderNavBar.tsx |  8 +-------
 src/screens/manga/DownloadQueue.tsx    |  5 +++++
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx
index 552351f4..3bed52ca 100644
--- a/src/components/manga/ChapterCard.tsx
+++ b/src/components/manga/ChapterCard.tsx
@@ -149,10 +149,7 @@ export default function ChapterCard(props: IProps) {
                                 {!chapter.bookmarked && 'Bookmark'}
                             </MenuItem>
                             <MenuItem onClick={() => sendChange('read', !chapter.read)}>
-                                Mark as
-                                {' '}
-                                {chapter.read && 'unread'}
-                                {!chapter.read && 'read'}
+                                {`Mark as ${chapter.read && 'unread'} ${!chapter.read && 'read'}`}
                             </MenuItem>
                             <MenuItem onClick={() => sendChange('markPrevRead', true)}>
                                 Mark previous as Read
diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
index 977cb908..3cead926 100644
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -205,24 +205,18 @@ export default function MangaDetails(props: IProps) {
                             {manga.title}
                         </h1>
                         <h3>
-                            Author:
-                            {' '}
+                            {'Author: '}
                             <span>{getValueOrUnknown(manga.author)}</span>
                         </h3>
                         <h3>
-                            Artist:
-                            {' '}
+                            {'Artist: '}
                             <span>{getValueOrUnknown(manga.artist)}</span>
                         </h3>
                         <h3>
-                            Status:
-                            {' '}
-                            {manga.status}
+                            {`Status: ${manga.status}`}
                         </h3>
                         <h3>
-                            Source:
-                            {' '}
-                            {getSourceName(manga.source)}
+                            {`Source: ${getSourceName(manga.source)}`}
                         </h3>
                     </div>
                 </div>
diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index 56fea5f2..8cc737bc 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -332,13 +332,7 @@ export default function ReaderNavBar(props: IProps) {
                     <hr />
                     <div className={classes.navigation}>
                         <span>
-                            Currently on page
-                            {' '}
-                            {curPage + 1}
-                            {' '}
-                            of
-                            {' '}
-                            {chapter.pageCount}
+                            {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
                         </span>
                         <div className={classes.navigationChapters}>
                             {chapter.index > 1
diff --git a/src/screens/manga/DownloadQueue.tsx b/src/screens/manga/DownloadQueue.tsx
index c281fed5..5c36b33b 100644
--- a/src/screens/manga/DownloadQueue.tsx
+++ b/src/screens/manga/DownloadQueue.tsx
@@ -24,6 +24,7 @@ import DragHandleIcon from '@mui/icons-material/DragHandle';
 import ListItem from '@mui/material/ListItem';
 import { ListItemIcon } from '@mui/material';
 import ListItemText from '@mui/material/ListItemText';
+import EmptyView from 'components/EmptyView';
 
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
 
@@ -91,6 +92,10 @@ export default function DownloadQueue() {
     const onDragEnd = (result: DropResult) => {
     };
 
+    if (queue.length === 0) {
+        return <EmptyView message="No downloads" />;
+    }
+
     return (
         <>
             <DragDropContext onDragEnd={onDragEnd}>