From 818bc83e3340f7df026d590211200f9159763c8b Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 7 Jun 2022 22:22:27 +0200
Subject: [PATCH] show download button when version is selected

---
 .../available-versions-list.components.tsx    | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index e61aad5c..4073ab7a 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -1,8 +1,8 @@
-import { BSVersion } from "../../main/services/bs-version-manager.service";
 import { AvailableVersionsSlider } from "../components/available-versions/available-versions-slider.component";
-import { useState } from "react";
 import { BsDownloaderService } from "../services/bs-downloader.service";
 import { Slideshow } from "renderer/components/slideshow/slideshow.component";
+import { useEffect, useState } from "react";
+import { BSVersion } from "main/services/bs-version-manager.service";
 
 export function AvailableVersionsList() {
 
@@ -15,24 +15,44 @@ export function AvailableVersionsList() {
     require('../../../assets/slideshow-images/image-6-blur.png'),
     require('../../../assets/slideshow-images/image-7-blur.png'),
   ];
-
-  const [versionSelected, setVersionSelected] = useState(null as BSVersion);
   const bsDownloaderService: BsDownloaderService = BsDownloaderService.getInstance();
 
-  const selectedVersionCallback = (v: BSVersion) => {
-    setVersionSelected(v);
-  }
+  const [versionSelected, setVersionSelected] = useState(null as BSVersion);
+  const [currentDownload, setCurrentDownload] = useState(null as BSVersion);
+  const [downloadProgress, setDownloadProgress] = useState(0);
 
   const startInstall = () => {
-    bsDownloaderService.download(versionSelected);
+    bsDownloaderService.download();
   }
 
+  useEffect(() => {
+    const versionSelectedSub = bsDownloaderService.selectedBsVersion$.subscribe(version => {
+      setVersionSelected(version);
+    });
+
+    const currentDownloadSub = bsDownloaderService.currentBsVersionDownload$.subscribe(version => {
+      setCurrentDownload(version);
+    });
+
+    const downloadProgressSub = bsDownloaderService.downloadProgress$.subscribe(progress => {
+      setDownloadProgress(progress);
+    })
+
+    return () => {
+      versionSelectedSub.unsubscribe();
+      currentDownloadSub.unsubscribe();
+      downloadProgressSub.unsubscribe();
+    }
+  }, [])
+  
+
   return (
-    <div className="h-full">
+    <div className="relative h-full w-full flex items-center flex-col pt-2">
       <Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
-      <div className="relative z-[1] max-h-full flex items-center flex-col pt-3">
-        <h1 className="text-gray-100 text-2xl mb-4">Select a Version</h1>
-        <AvailableVersionsSlider setSelectedVersion={selectedVersionCallback}/>
+      <h1 className="text-gray-100 text-2xl mb-4 z-[1]">Select a Version</h1>
+      <AvailableVersionsSlider/>
+      <div className={`flex items-center content-center justify-center h-10 w-36 absolute bottom-9 z-10 rounded-lg bg-main-color-3 shadow-md shadow-gray-800 cursor-pointer transition-all duration-300 ${!versionSelected && !currentDownload && "translate-y-[100px]"}`}>
+        <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl">DOWNLOAD</span>
       </div>
     </div>
   )