listage des version BS dispo, le path de BS steam est mtn bien détécté

src/renderer/App.tsx

@@ -1,10 +1,10 @@
 import { NavBar } from "./components/nav-bar/nav-bar.component";
 import TitleBar from "./components/title-bar/title-bar.component";
 import { Routes, Route } from "react-router-dom";
-import VersionsList from "./pages/versions-list.components";
+import { AvailableVersionsList } from "./pages/available-versions-list.components";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect } from "react";
-import VersionViewer from "./pages/version-viewer.component";
+import { VersionViewer } from "./pages/version-viewer.component";
 
 export default function App() {
 
@@ -13,23 +13,25 @@ export default function App() {
   useEffect(() => {
     initIpcsListener();
     window.electron.ipcRenderer.sendMessage('bs-version.installed-versions');
+    window.electron.ipcRenderer.sendMessage('bs-version.request-versions');
   }, [])
 
   const initIpcsListener= () => {
     window.electron.ipcRenderer.on('bs-version.installed-versions', versions => dispatch({type: 'INSTALLED_BS_ADD_ALL', payload: versions}));
+    window.electron.ipcRenderer.on('bs-version.request-versions', versions => dispatch({type: 'AVAILABLE_BS_INIT', payload: versions}));
   }
   
   
 
   return (
-    <div className="w-screen h-screen overflow-hidden flex dark:bg-[#202225]">
+    <div className="w-screen h-screen overflow-hidden flex dark:bg-[#202225] z-0">
       <NavBar/>
       <div className="flex flex-col grow">
         <TitleBar/>
-        <div className="bg-[#2C2F33] rounded-tl-lg grow">
+        <div className="bg-[#2C2F33] relative rounded-tl-lg grow overflow-hidden">
           <Routes>
             <Route path={"/bs-version/:versionNumber"} element={<VersionViewer/>}/>
-            <Route path="*" element={<VersionsList/>}/>
+            <Route path="*" element={<AvailableVersionsList/>}/>
           </Routes>
         </div>
       </div>

src/renderer/components/available-versions-array.component.tsx

@@ -0,0 +1,31 @@
+import { BSVersion } from "../../main/services/bs-version-manager.service"
+import { useEffect, useState } from "react"
+
+export function AvailableVersionsArray({versions}: {versions: BSVersion[]}) {
+
+  const [versionsMap, setVersionsMap] = useState(new Map<string, BSVersion[]>())
+
+  console.log(versions);
+
+  useEffect(() => {
+    organiseVersions()
+  }, [])
+  
+
+  const organiseVersions = () => {
+    const newMap = new Map<string, BSVersion[]>();
+    versions.forEach(v => {
+      newMap.set(v.year, [...(newMap.has(v.year) ? newMap.get(v.year)  : []), v]);
+    })
+
+    setVersionsMap(newMap);
+  }
+
+  console.log(versionsMap);
+
+  return (
+    <div>
+      { versions.map(v => <button className="bg-gray-200 m-2">{v.BSVersion}</button>) }
+    </div>
+  )
+}

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -7,12 +7,10 @@ import { BSVersion } from 'main/services/bs-version-manager.service';
 
 export function NavBar() {
 
-  const { installedVersions }: {installedVersions: BSVersion[]} = useSelector((state: any) => ({...state.installedBSReducer}));
-
-  console.log(installedVersions);
+  const { installedVersions }: {installedVersions: BSVersion[]} = useSelector((state: any) => state.installedBSReducer);
 
   return (
-    <div id='nav-bar' className='flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
+    <div id='nav-bar' className='z-10 flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
         <div className='relative aspect-square w-16'>
           <span id='logo-bottom' className='bg-blue-500 aspect-square w-16'> </span>

src/renderer/components/title-bar/title-bar.component.tsx

@@ -28,7 +28,7 @@ export default function TitleBar() {
   }
 
   return (
-    <header id="titlebar" className="dark:bg-[#202225] w-screen flex content-center items-center justify-start">
+    <header id="titlebar" className="dark:bg-[#202225] w-screen flex content-center items-center justify-start z-10">
       <div id="drag-region" className='grow basis-0'>
         <div id="window-title" className='pl-1'>
           <span className='text-gray-100 font-bold text-sm'>BSManager</span>

src/renderer/index.css

@@ -5,6 +5,6 @@
     display: inline;
   }
   
-  ::-webkit-scrollbar-thumb {
-    border-radius: 20px;
-  }
+::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+}

src/renderer/pages/available-versions-list.components.tsx

@@ -0,0 +1,17 @@
+import { BSVersion } from "../../main/services/bs-version-manager.service";
+import { useSelector } from "react-redux";
+import { AvailableVersionsArray } from "renderer/components/available-versions-array.component";
+
+export function AvailableVersionsList() {
+
+  const { availableVersions }: {availableVersions: BSVersion[]} = useSelector((state: any) => state.availableBsReducer);
+
+  console.log(availableVersions);
+
+  return (
+    <div>
+      <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh">CHOOSE BS VERSION</h1>
+      {availableVersions && <AvailableVersionsArray versions={availableVersions}/>}
+    </div>
+  )
+}

src/renderer/pages/version-viewer.component.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import { useLocation } from 'react-router-dom'
 
-export default function VersionViewer() {
+export function VersionViewer() {
 
   const {state} = useLocation();
   console.log(state);

src/renderer/pages/versions-list.components.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-export default function VersionsList() {
-  return (
-    <div>versions-list.components</div>
-  )
-}

src/renderer/store/reducers/bs-versions-available.reducer.ts

@@ -0,0 +1,20 @@
+import { BSVersion } from "../../../main/services/bs-version-manager.service"
+import { ReducerAction } from "../store"
+
+const INITIAL_STATE = {
+    availableVersions: [] as BSVersion[] 
+}
+
+function availableBsReducer(state = INITIAL_STATE, action: ReducerAction<BSVersion[]>){
+    switch(action.type){
+        case 'AVAILABLE_BS_INIT': {
+            if(!action.payload){ return state; }
+            const payload = action.payload as BSVersion[];
+            return { ...state, availableVersions: [...state.availableVersions, ...payload] };
+        }
+    }
+
+    return state;
+}
+
+export default availableBsReducer;

src/renderer/store/store.ts

@@ -1,9 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 import installedBSReducer from './reducers/bs-versions-installed.reducer'
+import availableBsReducer from './reducers/bs-versions-available.reducer'
 
 const store = configureStore({
     reducer:{
-        installedBSReducer,
+        installedBSReducer, availableBsReducer
     }
 });