From 45a5f9fdb627f50d3220ef125e49278edafc976e Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Mon, 27 Jun 2022 22:33:49 +0200 Subject: [PATCH] create cutom hook to use observables --- .../components/nav-bar/nav-bar.component.tsx | 29 ++++++------------- src/renderer/hooks/use-observable.hook.ts | 13 +++++++++ .../pages/settings-page.component.tsx | 26 ++++------------- 3 files changed, 28 insertions(+), 40 deletions(-) create mode 100644 src/renderer/hooks/use-observable.hook.ts diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index 8201bdba..053c73e4 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/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("first-color")); + const secondColor = useObservable(configService.watch("second-color")); return (
- {installedVersions.map((version) => )} + {installedVersions && installedVersions.map((version) => )}
- + - +
diff --git a/src/renderer/hooks/use-observable.hook.ts b/src/renderer/hooks/use-observable.hook.ts new file mode 100644 index 00000000..37b5419f --- /dev/null +++ b/src/renderer/hooks/use-observable.hook.ts @@ -0,0 +1,13 @@ +import { Observable } from "rxjs"; +import { useState, useEffect } from "react"; + +export function useObservable(observable: Observable): T{ + const [obsValue, setObsValue] = useState(null); + + useEffect(() => { + const sub = observable.subscribe(val => setObsValue(val)); + return () => sub.unsubscribe(); + }, []) + + return obsValue; +} \ No newline at end of file diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx index f1aedb3a..e28bf46e 100644 --- a/src/renderer/pages/settings-page.component.tsx +++ b/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("first-color")); + const secondColor = useObservable(configService.watch("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() { - +
{installationFolder} @@ -99,12 +91,6 @@ export function SettingsPage() {
- - - - - {/* - */} ) }