From 4c92ce144aa67ad70351ab463da5d93beedd7a06 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Thu, 9 Jun 2022 22:09:46 +0200
Subject: [PATCH] download fully works with new DL button

---
 .../available-versions-list.components.tsx    | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index 44837611..c5a6d932 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -23,21 +23,10 @@ export function AvailableVersionsList() {
   const [currentDownload, setCurrentDownload] = useState(null as BSVersion);
   const [downloadProgress, setDownloadProgress] = useState(0);
 
-  const [downloadPending, setDownloadPending] = useState(false);
-  const [tempProgress, setTempProgress] = useState(0);
-
   const startInstall = () => {
     bsDownloaderService.download();
   }
 
-  const startTest = () => {
-    setDownloadPending(true);
-    setTimeout(() => setTempProgress(10), 5000);
-    setTimeout(() => {
-      setDownloadPending(false); setTempProgress(0); setVersionSelected(null);
-    }, 10000)
-  }
-
   useEffect(() => {
     const versionSelectedSub = bsDownloaderService.selectedBsVersion$.subscribe(version => {
       setVersionSelected(version);
@@ -64,25 +53,25 @@ export function AvailableVersionsList() {
       <Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
       <h1 className="text-gray-100 text-2xl mb-4 z-[1]">Select a Version</h1>
       <AvailableVersionsSlider/>
-      <div onClick={startTest} className={
+      <div onClick={startInstall} className={
         `
           flex items-center content-center justify-center absolute bottom-9 z-10 rounded-lg bg-main-color-3 shadow-center shadow-black cursor-pointer transition-all duration-300
-          ${versionSelected && !currentDownload && !downloadPending && "h-16 w-36"} 
+          ${versionSelected && !currentDownload && "h-16 w-36"} 
           ${!versionSelected && !currentDownload && "translate-y-[100px]"}
-          ${downloadPending && !tempProgress && "h-16 w-16 rounded-full"}
-          ${downloadPending && !!tempProgress && "h-5 w-3/4 rounded-full p-[6px]"}
+          ${currentDownload && !downloadProgress && "h-16 w-16 rounded-full"}
+          ${currentDownload && !!downloadProgress && "h-5 w-3/4 rounded-full p-[6px]"}
         `
         }>
-        {downloadPending && !!tempProgress && (
+        {currentDownload && !!downloadProgress && (
           <>
             <div className="h-full w-full rounded-full overflow-hidden bg-main-color-1">
-              <div className="w-full h-full rounded-full download-progress -translate-x-full" style={{transform: `translate(-${100 - tempProgress}%, 0)`}}></div>
+              <div className="w-full h-full rounded-full download-progress -translate-x-full transition-transform" style={{transform: `translate(-${100 - downloadProgress}%, 0)`}}></div>
             </div>
-            <img className="h-20 absolute -translate-x-8 -translate-y-1" style={{left: `${tempProgress}%`}} src={beatRunningImg} />
+            <img className="h-[70px] absolute -translate-x-8 -translate-y-1 transition-all" style={{left: `${downloadProgress}%`}} src={beatRunningImg} />
           </>
         )}
-        {!downloadPending && <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl text-center leading-6">DOWNLOAD {versionSelected?.BSVersion}</span>}
-        {downloadPending && !tempProgress && <img className="w-14 h-14 spin-loading" src={beatWaitingImg}></img>}
+        {!currentDownload && <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl text-center leading-6">DOWNLOAD {versionSelected?.BSVersion}</span>}
+        {currentDownload && !downloadProgress && <img className="w-14 h-14 spin-loading" src={beatWaitingImg}></img>}
       </div>
     </div>
   )