[FIX] Wrong info on Download Manager (#1066)

* [FIX] Wrong info on Download Manager

* chore: simplify date logic

* fix: lint

* fix: stuck size after download

* ui: show download chart only when running and on downloading tab

* chore: use variable

* fix: qa comments

* chore: add labels for empty queue and finished

* fix: wrong size on downloaded item

* feat: add clear button

* ui: show clear button only on downloaded tab

* i18n: updated keys

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>

Author: flavioislima

public/locales/en/translation.json

@@ -792,7 +792,11 @@
     "queue": {
         "label": {
             "canceled": "Canceled",
-            "empty": "Nothing to download",
+            "clear": "Clear List",
+            "empty": {
+                "finished": "Nothing downloaded",
+                "queue": "Nothing to download"
+            },
             "pause": "Pause download",
             "remove": "Remove from Downloads",
             "resume": "Resume download"

src/frontend/helpers/index.ts

@@ -126,6 +126,8 @@ const getStoreName = (runner: Runner, other: string) => {
       return 'Epic Games'
     case 'gog':
       return 'GOG'
+    case 'hyperplay':
+      return 'HyperPlay'
     default:
       return other
   }

src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.tsx

@@ -34,15 +34,16 @@ type Props = {
   state?: DownloadManagerState
 }
 
-const options: Intl.DateTimeFormatOptions = {
-  hour: 'numeric',
-  minute: 'numeric'
-}
-
 function convertToTime(time: number) {
   const date = time ? new Date(time) : new Date()
-  const hour = new Intl.DateTimeFormat(undefined, options).format(date)
-  return { hour, fullDate: date.toLocaleString() }
+  const fullDate = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+  }).format(date)
+  return { fullDate }
 }
 
 type InstallInfo =
@@ -85,7 +86,8 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
     path,
     gameInfo: DmGameInfo,
     size,
-    platformToInstall
+    platformToInstall,
+    channelName
   } = params
 
   const [gameInfo, setGameInfo] = useState(DmGameInfo)
@@ -99,11 +101,12 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
     const getNewInfo = async () => {
       const newInfo = (await getGameInfo(appName, runner)) as GameInfo
 
-      if (size?.includes('?') && !installInfo) {
+      if (!installInfo) {
         const installInfo = await getInstallInfo(
           appName,
           runner,
-          platformToInstall
+          platformToInstall,
+          channelName
         )
         setInstallInfo(installInfo)
       }
@@ -113,7 +116,7 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
       }
     }
     getNewInfo()
-  }, [element])
+  }, [element, current, state])
 
   const {
     art_cover,
@@ -242,7 +245,7 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
     update: t2('download-manager.install-type.update', 'Update')
   }
 
-  const { hour, fullDate } = getTime()
+  const { fullDate } = getTime()
 
   return (
     <>
@@ -277,7 +280,7 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
             </span>
           </span>
         </td>
-        <td title={fullDate}>{hour}</td>
+        <td title={fullDate}>{fullDate}</td>
         <td>{translatedTypes[type]}</td>
         <td>{getStoreName(runner, t2('Other'))}</td>
         <td>

src/frontend/screens/DownloadManager/components/DownloadTable/index.tsx

@@ -20,9 +20,9 @@ export function DownloadTable({
   return (
     <table className={styles.dmItemList}>
       <DownloadManagerHeader time={time} />
-      {elements.map((el, key) => (
+      {elements.map((el) => (
         <DownloadManagerItem
-          key={key}
+          key={el.params.appName}
           element={el}
           current={!!isCurrent}
           state={state}

src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx

@@ -104,7 +104,7 @@ export default function ProgressHeader(props: {
           </div>
         </div>
       </div>
-      {showDownloadBar && (
+      {showDownloadBar ? (
         <div className="downloadBar">
           <div className="downloadProgressStats">
             <p className="downloadStat" color="var(--text-default)">{`${
@@ -132,7 +132,7 @@ export default function ProgressHeader(props: {
             </div>
           </div>
         </div>
-      )}
+      ) : null}
     </>
   )
 }

src/frontend/screens/DownloadManager/index.module.scss

@@ -1,45 +1,3 @@
-.dmItemList > .gameListHeader {
-  padding: var(--space-md) 0;
-  grid-template-columns: 2fr 1fr 1fr 1fr 10%;
-  margin: 0 var(--space-sm-fixed);
-}
-
-.downloadManager
-  > .MuiTabs-root
-  > .MuiTabs-scroller
-  > .MuiTabs-flexContainer
-  > .MuiTab-root {
-  color: var(--text-default);
-}
-
-.downloadManager
-  > .MuiTabs-root
-  > .MuiTabs-scroller
-  > .MuiTabs-flexContainer
-  > .Mui-selected {
-  color: var(--accent);
-}
-
-.downloadManager > .MuiTabs-root > .MuiTabs-scroller > .MuiTabs-indicator {
-  background-color: var(--accent);
-}
-
-.downloadManager {
-  padding: 0;
-  margin: 0;
-}
-
-.downloadManagerCurrentSectionTitle {
-  margin: 0px 0px 0px 0px;
-  text-align: initial;
-  padding-left: 30px;
-}
-
-.downloadManagerQueuedSectionTitle {
-  margin: 30px 0px 0px 0px;
-  text-align: initial;
-}
-
 .tabsList {
   margin: var(--space-2lg-fixed) 0px;
 }
@@ -51,3 +9,13 @@
 .title {
   text-align: left;
 }
+
+.empty {
+  text-align: center;
+  margin-top: var(--space-2lg-fixed);
+}
+
+.clearButton {
+  position: absolute;
+  right: var(--space-xl-fixed);
+}

src/frontend/screens/DownloadManager/index.tsx

@@ -1,29 +1,29 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DMQueueElement, DownloadManagerState } from 'common/types'
-import { UpdateComponent } from 'frontend/components/UI'
 import ProgressHeader from './components/ProgressHeader'
 import { DMQueue } from 'frontend/types'
-import { Background, Tabs, getTabsClassNames } from '@hyperplay/ui'
+import { Background, Button, Tabs, getTabsClassNames } from '@hyperplay/ui'
 import styles from './index.module.scss'
 import { DownloadTable } from './components/DownloadTable'
+import { downloadManagerStore } from 'frontend/helpers/electronStores'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
 export default React.memo(function DownloadManager(): JSX.Element | null {
   const { t } = useTranslation()
-  const [refreshing, setRefreshing] = useState(false)
   const [state, setState] = useState<DownloadManagerState>('idle')
   const [queuedElements, setQueuedElements] = useState<DMQueueElement[]>([])
   const [currentElement, setCurrentElement] = useState<DMQueueElement>()
   const [finishedElem, setFinishedElem] = useState<DMQueueElement[]>()
+  const [activeTab, setActiveTab] = useState<string | null>('downloading')
 
   const appName = currentElement?.params?.appName ?? ''
 
   useEffect(() => {
-    setRefreshing(true)
     window.api.getDMQueueInformation().then(({ elements, state }: DMQueue) => {
       setCurrentElement(elements[0])
       setQueuedElements([...elements.slice(1)])
-      setRefreshing(false)
       setState(state)
     })
 
@@ -44,7 +44,7 @@ export default React.memo(function DownloadManager(): JSX.Element | null {
     return () => {
       removeHandleDMQueueInformation()
     }
-  }, [])
+  }, [finishedElem])
 
   useEffect(() => {
     window.api.getDMQueueInformation().then(({ finished }: DMQueue) => {
@@ -57,10 +57,6 @@ export default React.memo(function DownloadManager(): JSX.Element | null {
     window.api.trackScreen('Download Manager')
   }, [])
 
-  if (refreshing) {
-    return <UpdateComponent />
-  }
-
   const doneElements =
     (finishedElem?.length &&
       finishedElem.sort((a, b) => {
@@ -69,6 +65,13 @@ export default React.memo(function DownloadManager(): JSX.Element | null {
       })) ||
     []
 
+  const handleClearList = () => {
+    setFinishedElem([])
+    downloadManagerStore.set('finished', [])
+  }
+
+  const showClearListButton = activeTab === 'downloaded'
+
   /*
     Other Keys:
     t('queue.label.empty', 'Nothing to download')
@@ -79,17 +82,29 @@ export default React.memo(function DownloadManager(): JSX.Element | null {
   return (
     <>
       <Background style={{ position: 'absolute' }}></Background>
-      <div className="contentContainer">
+      <div className={'contentContainer'}>
         <h3 className={styles.title}>
           {t('download-manager.title_dm', 'Download Manager')}
         </h3>
         <Tabs
-          defaultValue="downloading"
+          value={activeTab}
+          onChange={setActiveTab}
           classNames={getTabsClassNames(
             { list: styles.tabsList, panel: styles.tabsPanel },
             { list: 'outline' }
           )}
         >
+          {showClearListButton ? (
+            <Button
+              className={styles.clearButton}
+              onClick={() => handleClearList()}
+              type="tertiary"
+              leftIcon={<FontAwesomeIcon icon={faTrash} />}
+              size="small"
+            >
+              {t('queue.label.clear', 'Clear List')}
+            </Button>
+          ) : null}
           <Tabs.List>
             <Tabs.Tab value="downloading">Downloading</Tabs.Tab>
             <Tabs.Tab value="queued">Queued</Tabs.Tab>
@@ -111,22 +126,32 @@ export default React.memo(function DownloadManager(): JSX.Element | null {
                 />
               </div>
             </div>
+            <ProgressHeader state={state} appName={appName} />
           </Tabs.Panel>
 
           <Tabs.Panel value="queued">
             <div className={styles.dmItemList}>
               <DownloadTable elements={queuedElements} time="queued" />
+              {queuedElements.length === 0 && (
+                <h5 className={styles.empty}>
+                  {t('queue.label.empty.queue', 'Nothing to download')}
+                </h5>
+              )}
             </div>
           </Tabs.Panel>
           <Tabs.Panel value="downloaded">
             <div className={styles.downloadManager}>
               <div className={styles.downloadList}>
                 <DownloadTable elements={doneElements} time="finished" />
+                {doneElements.length === 0 && (
+                  <h5 className={styles.empty}>
+                    {t('queue.label.empty.finished', 'Nothing downloaded')}
+                  </h5>
+                )}
               </div>
             </div>
           </Tabs.Panel>
         </Tabs>
-        <ProgressHeader state={state} appName={appName} />
       </div>
     </>
   )