fix(ui): add user profile links to RequestBlock and change 'ETA' string in DownloadBlock (#1551)

src/components/DownloadBlock/index.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { FormattedRelativeTime } from 'react-intl';
+import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { DownloadingItem } from '../../../server/lib/downloadtracker';
 import Badge from '../Common/Badge';
 
+const messages = defineMessages({
+  estimatedtime: 'Estimated {time}',
+});
+
 interface DownloadBlockProps {
   downloadItem: DownloadingItem;
   is4k?: boolean;
@@ -12,6 +16,8 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({
   downloadItem,
   is4k = false,
 }) => {
+  const intl = useIntl();
+
   return (
     <div className="p-4">
       <div className="w-56 mb-2 text-sm truncate sm:w-80 md:w-full">
@@ -48,27 +54,30 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({
       <div className="flex items-center justify-between text-xs">
         <span>
           {is4k && (
-            <Badge badgeType="warning" className="mr-1">
+            <Badge badgeType="warning" className="mr-2">
               4K
             </Badge>
           )}
           <Badge className="capitalize">{downloadItem.status}</Badge>
         </span>
         <span>
-          ETA{' '}
-          {downloadItem.estimatedCompletionTime ? (
-            <FormattedRelativeTime
-              value={Math.floor(
-                (new Date(downloadItem.estimatedCompletionTime).getTime() -
-                  Date.now()) /
-                  1000
-              )}
-              updateIntervalInSeconds={1}
-              numeric="auto"
-            />
-          ) : (
-            'N/A'
-          )}
+          {downloadItem.estimatedCompletionTime
+            ? intl.formatMessage(messages.estimatedtime, {
+                time: (
+                  <FormattedRelativeTime
+                    value={Math.floor(
+                      (new Date(
+                        downloadItem.estimatedCompletionTime
+                      ).getTime() -
+                        Date.now()) /
+                        1000
+                    )}
+                    updateIntervalInSeconds={1}
+                    numeric="auto"
+                  />
+                ),
+              })
+            : ''}
         </span>
       </div>
     </div>