From 266fdc6607b3cc7aa0955ddea75673544b4b03f3 Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Mon, 30 May 2022 21:52:50 +0200
Subject: [PATCH] add active style, and fix duplicated download style when
 download same version as steam

---
 .../nav-bar/bs-version-item.component.tsx     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/bs-version-item.component.tsx
index 145c88c5..f1adde74 100644
--- a/src/renderer/components/nav-bar/bs-version-item.component.tsx
+++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx
@@ -1,5 +1,5 @@
 import { BSVersion } from "main/services/bs-version-manager.service";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { BsNoteFill } from "../svgs/bs-note-fill.component";
 import { SteamIcon } from "../svgs/steam-icon.component";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
@@ -8,34 +8,40 @@ import { combineLatest } from "rxjs";
 
 export default function BsVersionItem(props: {version: BSVersion}) {
 
+  const { state } = useLocation() as { state: BSVersion};
+
   const [downloading, setDownloading] = useState(false);
   const [downloadPercent, setDownloadPercent] = useState(0);
 
   const downloaderService = BsDownloaderService.getInstance();
 
+  const isActive = (): boolean => {
+    return props.version?.BSVersion === state?.BSVersion && props?.version.steam === state?.steam;
+  }
+
   useEffect(() => {
     combineLatest([downloaderService.currentBsVersionDownload$, downloaderService.downloadProgress$]).subscribe(vals => {
-      if(vals[0]?.BSVersion === props.version.BSVersion){ 
-        setDownloading(true); 
+      if(vals[0]?.BSVersion === props.version.BSVersion && vals[0]?.steam === props.version.steam){
+        setDownloading(true);
         setDownloadPercent(vals[1]);
       }
-      else{ 
-        setDownloading(false); 
+      else{
+        setDownloading(false);
         setDownloadPercent(0);
       }
     })
   }, [])
-  
+
 
   return (
     <div className={`relative p-[1px] overflow-hidden rounded-full flex justify-center content-center items-center mb-1 ${downloading && "nav-item-download"}`}>
-      <div className="test absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
-      <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 ${downloading ? 'bg-black' : 'bg-main-color-1'}`}>
+      <div className="absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
+      <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 ${downloading && 'bg-black'} ${(isActive() && !downloading) && "bg-main-color-3"}`}>
         {props.version.steam && <SteamIcon className="w-[19px] h-[19px] mr-1"/>}
         {!props.version.steam && <BsNoteFill className="w-[19px] h-[19px] mr-1 text-red-600"/>}
         <span className="flex items-center justify-center content-center shrink-0 grow text-lg text-gray-200 font-bold min-w-0">{props.version.BSVersion}</span>
       </Link>
     </div>
-    
+
   )
 }