create cutom hook to use observables

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

@@ -1,31 +1,20 @@
-import { FaPlus, } from 'react-icons/fa';
-import { AiFillSetting } from 'react-icons/ai'
 import './nav-bar.component.css'
 import BsVersionItem from './bs-version-item.component';
-import { BSVersion } from '../../../main/services/bs-version-manager.service';
-import { useEffect, useState } from 'react';
 import { BSVersionManagerService } from '../../services/bs-version-manager.service';
 import { Link } from 'react-router-dom';
 import { ConfigurationService } from 'renderer/services/configuration.service';
+import { BsmIcon } from '../svgs/bsm-icon.component';
+import { useObservable } from 'renderer/hooks/use-observable.hook';
 
 export function NavBar() {
 
   const configService = ConfigurationService.getInstance();
+  const bsVersionServoce =  BSVersionManagerService.getInstance();
 
-  const [installedVersions, setInstalledVersions] = useState([] as BSVersion[]);
+  const installedVersions = useObservable(bsVersionServoce.installedVersions$);
 
-  const [firstColor, setFirstColor] = useState(configService.get("first-color") || "#3b82ff");
-  const [secondColor, setSecondColor] = useState(configService.get("second-color") || "#ff4444");
-
-  useEffect(() => {
-    BSVersionManagerService.getInstance().installedVersions$.subscribe(versions => {
-      setInstalledVersions([]);
-      setInstalledVersions(versions);
-    });
-
-    configService.watch("first-color").subscribe(hex => setFirstColor(hex));
-    configService.watch("second-color").subscribe(hex => setSecondColor(hex));
-  }, [])
+  const firstColor = useObservable(configService.watch<string>("first-color"));
+  const secondColor = useObservable(configService.watch<string>("second-color"));
 
   return (
     <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-gray-200 dark:bg-main-color-1'>
@@ -36,14 +25,14 @@ export function NavBar() {
         </div>
       </div>
       <div id='versions' className='w-fit relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
-      {installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
+      {installedVersions && installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
       </div>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
         <Link className='mb-2' to={"blah"}>
-          <FaPlus className='text-2xl text-blue-500 drop-shadow-lg'/>
+          <BsmIcon icon='add' className='text-blue-500 h-[34px]'/>
         </Link>
         <Link to={"settings"}>
-          <AiFillSetting className='text-2xl text-blue-500 drop-shadow-lg'/>
+          <BsmIcon icon='settings' className='text-blue-500 h-7'/>
         </Link>
       </div>
     </div>

src/renderer/hooks/use-observable.hook.ts

@@ -0,0 +1,13 @@
+import { Observable } from "rxjs";
+import { useState, useEffect } from "react";
+
+export function useObservable<T>(observable: Observable<T>): T{
+    const [obsValue, setObsValue] = useState(null);
+
+    useEffect(() => {
+      const sub = observable.subscribe(val => setObsValue(val));
+      return () => sub.unsubscribe();
+    }, [])
+    
+    return obsValue;
+}

src/renderer/pages/settings-page.component.tsx

@@ -4,10 +4,12 @@ import { SettingContainer } from "renderer/components/settings/setting-container
 import { RadioItem, SettingRadioArray } from "renderer/components/settings/setting-radio-array.component";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { DefaultConfigKey } from "renderer/config/default-configuration.config";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { ConfigurationService } from "renderer/services/configuration.service"
 import { IpcService } from "renderer/services/ipc.service";
 import { ModalExitCode, ModalService, ModalType } from "renderer/services/modale.service";
+import { ProgressBarService } from "renderer/services/progress-bar.service";
 
 export function SettingsPage() {
 
@@ -15,25 +17,15 @@ export function SettingsPage() {
   const ipcService = IpcService.getInstance();
   const modalService = ModalService.getInsance();
   const downloaderService = BsDownloaderService.getInstance();
+  const progressBarService = ProgressBarService.getInstance();
 
-  const [firstColor, setFirstColor] = useState("#fff");
-  const [secondColor, setSecondColor] = useState("#fff");
+  const firstColor = useObservable(configService.watch<string>("first-color"));
+  const secondColor = useObservable(configService.watch<string>("second-color"));
   const[themeIdSelected, setThemeIdSelected]= useState(0);
   const [installationFolder, setInstallationFolder] = useState(null);
 
   useEffect(() => {
-    const [fColorObs, sColorObs] = [configService.watch("first-color"), configService.watch("second-color")];
-    const fColorSub = fColorObs.subscribe(color => setFirstColor(color));
-    const sColorSub = sColorObs.subscribe(color => setSecondColor(color));
-
     loadInstallationFolder();
-  
-    return () => {
-      configService.stopWatch("first-color" as DefaultConfigKey, fColorObs);
-      configService.stopWatch("second-color" as DefaultConfigKey, sColorObs);
-
-      [fColorSub, sColorSub].forEach(s => s.unsubscribe());
-    }
   }, []);
 
   const themeItem: RadioItem[] = [
@@ -91,7 +83,7 @@ export function SettingsPage() {
           </SettingContainer>
         </SettingContainer>
 
-        <SettingContainer title="Installation Folder" description="Change the default installation directory for Beat Saber instances.">
+        <SettingContainer title="Installation Folder" description="Change the default installation directory for Beat Saber instances, and other upcoming features.">
         <div className="relative flex items-center justify-between w-full h-8 bg-main-color-1 rounded-md pl-2 py-1">
           <span className="block text-ellipsis overflow-hidden min-w-0" title={installationFolder}>{installationFolder}</span>
           <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md hover:bg-main-color-3" text="Choose Folder" withBar={false}/>
@@ -99,12 +91,6 @@ export function SettingsPage() {
         </SettingContainer>
 
       </div>
-
-      
-
-
-      {/* <HexColorPicker onChange={setFirstColorSetting}/>
-      <HexColorPicker onChange={setSecondColorSetting}/> */}
     </div>
   )
 }