[chore-245] use appropriate hook everywhere

src/renderer/components/available-versions/available-version-item.component.tsx

@@ -1,7 +1,7 @@
 import { BSVersion } from "shared/bs-version.interface";
 import { useEffect, useState, memo } from "react";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
-import { distinctUntilChanged } from "rxjs/operators";
+import { distinctUntilChanged, map } from "rxjs/operators";
 import defaultImage from "../../../../assets/images/default-version-img.jpg";
 import dateFormat from "dateformat";
 import { BsmImage } from "../shared/bsm-image.component";
@@ -10,12 +10,18 @@ import { BsmIcon } from "../svgs/bsm-icon.component";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
 import { motion } from "framer-motion";
 import { GlowEffect } from "../shared/glow-effect.component";
+import { useService } from "renderer/hooks/use-service.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export const AvailableVersionItem = memo(function AvailableVersionItem(props: { version: BSVersion }) {
-    const bsDownloaderService = BsDownloaderService.getInstance();
-    const linkOpener = LinkOpenerService.getInstance();
+    const bsDownloaderService = useService(BsDownloaderService)
+    const linkOpener = useService(LinkOpenerService)
+    
+    const selected = useObservable(
+        bsDownloaderService.selectedBsVersion$.pipe(distinctUntilChanged(), map(version => version?.BSVersion === props.version.BSVersion)),
+        false
+    );
 
-    const [selected, setSelected] = useState(false);
     const [hovered, setHovered] = useState(false);
     const t = useTranslation();
 
@@ -38,16 +44,6 @@ export const AvailableVersionItem = memo(function AvailableVersionItem(props: {
         linkOpener.open(props.version.ReleaseURL);
     };
 
-    useEffect(() => {
-        const sub = bsDownloaderService.selectedBsVersion$.pipe(distinctUntilChanged()).subscribe(version => {
-            setSelected(version?.BSVersion === props.version.BSVersion);
-        });
-
-        return () => {
-            sub.unsubscribe();
-        };
-    }, []);
-
     return (
         <motion.li className="group relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect} onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)}>
             <GlowEffect visible={hovered || selected} className="absolute" />

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

@@ -1,19 +1,17 @@
-import { BSVersion } from "shared/bs-version.interface";
-import { useEffect, useState } from "react";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
-import { filter } from "rxjs/operators";
+import { filter, map } from "rxjs/operators";
 import { AvailableVersionItem } from "./available-version-item.component";
+import { useService } from "renderer/hooks/use-service.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export function AvailableVersionsSlide(props: { year: string }) {
-    const [availableVersions, setAvailableVersions] = useState([] as BSVersion[]);
-
-    const versionsService = BSVersionManagerService.getInstance();
-
-    useEffect(() => {
-        versionsService.availableVersions$.pipe(filter(versions => !!versions?.length)).subscribe(() => {
-            setAvailableVersions(versionsService.getAvaibleVersionsOfYear(props.year));
-        });
-    }, []);
+    
+    const versionsService = useService(BSVersionManagerService);
+    
+    const availableVersions = useObservable(
+        versionsService.availableVersions$.pipe(filter(versions => !!versions?.length), map(() => versionsService.getAvaibleVersionsOfYear(props.year))),
+        []
+    );
 
     return (
         <ol className="w-full flex items-start justify-center gap-6 shrink-0 content-start flex-wrap p-4 overflow-x-hidden overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">

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

@@ -1,25 +1,24 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { BSVersionManagerService } from "../../services/bs-version-manager.service";
 import { AvailableVersionsSlide } from "./available-versions-slide.component";
-import { filter } from "rxjs/operators";
+import { filter, map } from "rxjs/operators";
 import { TabNavBar } from "../shared/tab-nav-bar.component";
+import { useService } from "renderer/hooks/use-service.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export function AvailableVersionsSlider() {
-    const versionManagerService = BSVersionManagerService.getInstance();
+    const versionManagerService = useService(BSVersionManagerService);
 
-    const [availableYears, setAvailableYears] = useState([]);
     const [yearIndex, setYearIndex] = useState(0);
+    const availableYears = useObservable(
+        versionManagerService.availableVersions$.pipe(filter(versions => !!versions?.length), map(() => versionManagerService.getAvailableYears())),
+        []
+    );
 
     const setSelectedYear = (index: number) => {
         setYearIndex(index);
     };
 
-    useEffect(() => {
-        versionManagerService.availableVersions$.pipe(filter(versions => !!versions?.length)).subscribe(() => {
-            setAvailableYears(versionManagerService.getAvailableYears());
-        });
-    }, []);
-
     return (
         <div className="w-full h-fit max-h-full flex flex-col items-center grow min-h-0 gap-3">
             <TabNavBar tabIndex={yearIndex} tabsText={availableYears} onTabChange={setSelectedYear} />

src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx

@@ -17,6 +17,7 @@ import { BsmImage } from "../shared/bsm-image.component";
 import { BsmButton } from "../shared/bsm-button.component";
 import TextProgressBar from "../progress-bar/text-progress-bar.component";
 import { useChangeOnce } from "renderer/hooks/use-change-once.hook";
+import { useService } from "renderer/hooks/use-service.hook";
 
 type Props = {
     version: BSVersion;
@@ -28,10 +29,10 @@ type Props = {
 };
 
 export const LocalMapsListPanel = forwardRef(({ version, className, filter, search, linked, isActive }: Props, forwardRef) => {
-    const mapsManager = MapsManagerService.getInstance();
-    const mapsDownloader = MapsDownloaderService.getInstance();
-    const bsaver = BeatSaverService.getInstance();
-    const os = OsDiagnosticService.getInstance();
+    const mapsManager = useService(MapsManagerService);
+    const mapsDownloader = useService(MapsDownloaderService);
+    const bsaver = useService(BeatSaverService);
+    const os = useService(OsDiagnosticService);
 
     const t = useTranslation();
     const ref = useRef(null);

src/renderer/components/maps-mangement-components/map-item.component.tsx

@@ -21,6 +21,7 @@ import { MAP_DIFFICULTIES_COLORS } from "renderer/partials/maps/map-difficulties
 import useDoubleClick from "use-double-click";
 import { GlowEffect } from "../shared/glow-effect.component";
 import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export type ParsedMapDiff = { type: BsvMapDifficultyType; name: string; stars: number };
 
@@ -51,8 +52,9 @@ export type MapItemProps<T = unknown> = {
 };
 
 export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, ranked, bpm, duration, likes, createdAt, selected, downloading, showOwned, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick }: MapItemProps) => {
-    const linkOpener = LinkOpenerService.getInstance();
-    const audioPlayer = AudioPlayerService.getInstance();
+    
+    const linkOpener = useService(LinkOpenerService);
+    const audioPlayer = useService(AudioPlayerService);
 
     const color = useThemeColor("first-color");
     const t = useTranslation();

src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { LinkButton } from "./link-button.component";
 import { debounceTime } from "rxjs/operators";
 import { VersionFolderLinkerService, VersionLinkerActionListener } from "renderer/services/version-folder-linker.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 type Props = {
     version?: BSVersion;
@@ -25,10 +26,11 @@ type Props = {
 };
 
 export function MapsPlaylistsPanel({ version, isActive }: Props) {
-    const mapsService = MapsManagerService.getInstance();
-    const mapsDownloader = MapsDownloaderService.getInstance();
-    const osDiagnostic = OsDiagnosticService.getInstance();
-    const linker = VersionFolderLinkerService.getInstance();
+    
+    const mapsService = useService(MapsManagerService);
+    const mapsDownloader = useService(MapsDownloaderService);
+    const osDiagnostic = useService(OsDiagnosticService);
+    const linker = useService(VersionFolderLinkerService);
 
     const [tabIndex, setTabIndex] = useState(0);
     const [mapFilter, setMapFilter] = useState<MapFilter>({});

src/renderer/components/modal/modal-types/delete-maps-modal.component.tsx

@@ -8,9 +8,11 @@ import { MapsManagerService } from "renderer/services/maps-manager.service";
 import { ModalComponent, ModalExitCode } from "renderer/services/modale.service";
 import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface";
 import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export const DeleteMapsModal: ModalComponent<void, { linked: boolean; maps: BsmLocalMap[] }> = ({ resolver, data: { linked, maps } }) => {
-    const config = ConfigurationService.getInstance();
+    
+    const config = useService(ConfigurationService);
 
     const t = useTranslation();
 

src/renderer/components/modal/modal-types/download-maps-modal.component.tsx

@@ -19,12 +19,13 @@ import { ProgressBarService } from "renderer/services/progress-bar.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
 import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; ownedMaps: BsmLocalMap[] }> = ({ data: { ownedMaps, version } }) => {
-    const beatSaver = BeatSaverService.getInstance();
-    const mapsDownloader = MapsDownloaderService.getInstance();
-    const progressBar = ProgressBarService.getInstance();
-    const os = OsDiagnosticService.getInstance();
+    const beatSaver = useService(BeatSaverService);
+    const mapsDownloader = useService(MapsDownloaderService);
+    const progressBar = useService(ProgressBarService);
+    const os = useService(OsDiagnosticService);
 
     const currentDownload = useObservable(mapsDownloader.currentMapDownload$);
     const mapsInQueue = useObservable(mapsDownloader.mapsInQueue$);

src/renderer/components/modal/modal-types/edit-version-modal.component.tsx

@@ -3,6 +3,7 @@ import SettingColorChooser from "renderer/components/settings/setting-color-choo
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
 import { DefaultConfigKey } from "renderer/config/default-configuration.config";
+import { useService } from "renderer/hooks/use-service.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { ConfigurationService } from "renderer/services/configuration.service";
 import { ModalComponent, ModalExitCode } from "renderer/services/modale.service";
@@ -11,7 +12,7 @@ import { BSVersion } from "shared/bs-version.interface";
 export const EditVersionModal: ModalComponent<{ name: string; color: string }, { version: BSVersion; clone?: boolean }> = ({ resolver, data }) => {
     const { version, clone } = data;
 
-    const configService = ConfigurationService.getInstance();
+    const configService = useService(ConfigurationService);
 
     const [name, setName] = useState(version.name || version.BSVersion);
     const [color, setColor] = useState(version.color ?? configService.get<string>("second-color" as DefaultConfigKey));

src/renderer/components/modal/modal-types/models/delete-models-modal.component.tsx

@@ -10,9 +10,10 @@ import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
 import { useConstant } from "renderer/hooks/use-constant.hook";
 import { ConfigurationService } from "renderer/services/configuration.service";
 import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export const DeleteModelsModal: ModalComponent<void, { models: BsmLocalModel[]; linked: boolean }> = ({ resolver, data }) => {
-    const config = useConstant(() => ConfigurationService.getInstance());
+    const config = useService(ConfigurationService);
     const t = useTranslation();
     const [remember, setRemember] = useState(config.get<boolean>(ModelsManagerService.REMEMBER_CHOICE_DELETE_MODEL_KEY) || false);
 

src/renderer/components/modal/modal-types/share-folders-modal.component.tsx

@@ -5,6 +5,7 @@ import { LinkButton } from "renderer/components/maps-mangement-components/link-b
 import { BsmBasicSpinner } from "renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { useObservable } from "renderer/hooks/use-observable.hook";
+import { useService } from "renderer/hooks/use-service.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
@@ -17,10 +18,10 @@ import { BSVersion } from "shared/bs-version.interface";
 export const ShareFoldersModal: ModalComponent<void, BSVersion> = ({ data }) => {
     const SHARED_FOLDERS_KEY = "default-shared-folders";
 
-    const config = ConfigurationService.getInstance();
-    const ipc = IpcService.getInstance();
-    const linker = VersionFolderLinkerService.getInstance();
-    const versionManager = BSVersionManagerService.getInstance();
+    const config = useService(ConfigurationService);
+    const ipc = useService(IpcService);
+    const linker = useService(VersionFolderLinkerService);
+    const versionManager = useService(BSVersionManagerService);
 
     const t = useTranslation();
 
@@ -104,7 +105,7 @@ type FolderProps = {
 };
 
 const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
-    const linker = VersionFolderLinkerService.getInstance();
+    const linker = useService(VersionFolderLinkerService);
 
     const t = useTranslation();
 

src/renderer/components/modal/modal-types/why-credentials-modal.component.tsx

@@ -1,10 +1,11 @@
+import { useService } from "renderer/hooks/use-service.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
 import { ModalComponent } from "renderer/services/modale.service";
 
 export const WhyCredentialsModal: ModalComponent<void> = () => {
     const t = useTranslation();
-    const linkOpener = LinkOpenerService.getInstance();
+    const linkOpener = useService(LinkOpenerService);
 
     const openTutorial = () => {
         linkOpener.open("https://steamcommunity.com/sharedfiles/filedetails/?id=1805934840");

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

@@ -3,11 +3,13 @@ import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { motion, Variants } from "framer-motion";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { AudioPlayerService } from "renderer/services/audio-player.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 // Thanks to cheddZy for the icon : https://github.com/cheddZy
 
 export const BsManagerIcon = memo(({ className }: { className?: string }) => {
-    const audioPlayer = AudioPlayerService.getInstance();
+    
+    const audioPlayer = useService(AudioPlayerService);
 
     const { firstColor, secondColor } = useThemeColor();
     const playing = useObservable(audioPlayer.playing$);

src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx

@@ -12,13 +12,14 @@ import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { NavBarItem } from "./nav-bar-item.component";
 import useFitText from "use-fit-text";
 import Tippy from "@tippyjs/react";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export function BsVersionItem(props: { version: BSVersion }) {
-    const downloaderService = BsDownloaderService.getInstance();
-    const verionManagerService = BSVersionManagerService.getInstance();
-    const launcherService = BSLauncherService.getInstance();
-    const configService = ConfigurationService.getInstance();
-    const bsUninstallerService = BSUninstallerService.getInstance();
+    const downloaderService = useService(BsDownloaderService);
+    const verionManagerService = useService(BSVersionManagerService);
+    const launcherService = useService(BSLauncherService);
+    const configService = useService(ConfigurationService);
+    const bsUninstallerService = useService(BSUninstallerService);
 
     const { state } = useLocation() as { state: BSVersion };
     const { fontSize, ref } = useFitText();

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

@@ -10,17 +10,15 @@ import { NavBarSpliter } from "./nav-bar-spliter.component";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import Tippy from "@tippyjs/react";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
-import { I18nService } from "renderer/services/i18n.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export function NavBar() {
-    const bsVersionServoce = BSVersionManagerService.getInstance();
+    const bsVersionServoce = useService(BSVersionManagerService);
 
     const installedVersions = useObservable(bsVersionServoce.installedVersions$);
     const color = useThemeColor("first-color");
     const t = useTranslation();
 
-    useObservable(I18nService.getInstance().currentLanguage$);
-
     return (
         <nav id="nav-bar" className="z-10 flex flex-col h-full max-h-full items-center p-1">
             <BsManagerIcon className="relative aspect-square w-16 h-16 mb-3" />

src/renderer/components/notification/notification-overlay.component.tsx

@@ -2,9 +2,10 @@ import { useObservable } from "renderer/hooks/use-observable.hook";
 import { NotificationService } from "renderer/services/notification.service";
 import { NotificationItem } from "./notification-item.component";
 import { AnimatePresence } from "framer-motion";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export function NotificationOverlay() {
-    const notificationService = NotificationService.getInstance();
+    const notificationService = useService(NotificationService);
 
     const notifications = useObservable(notificationService.notifications$);
 

src/renderer/components/progress-bar/bsm-progress-bar.component.tsx

@@ -4,9 +4,10 @@ import BeatRunningImg from "../../../../assets/images/apngs/beat-running.png";
 import BeatWaitingImg from "../../../../assets/images/apngs/beat-waiting.png";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export function BsmProgressBar() {
-    const progressBarService = ProgressBarService.getInstance();
+    const progressBarService = useService(ProgressBarService);
 
     const progressData = useObservable(progressBarService.progressData$);
     const visible = useObservable(progressBarService.visible$);

src/renderer/components/settings/supporters-view/supporter-item.component.tsx

@@ -3,6 +3,7 @@ import { Supporter } from "shared/models/supporters";
 import { motion } from "framer-motion";
 import txtBg from "../../../../../assets/images/gifs/txt-bg.gif";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 interface Props {
     supporter: Supporter;
@@ -10,7 +11,7 @@ interface Props {
 }
 
 export function SupporterItem({ supporter, delay }: Props) {
-    const linkOpener = LinkOpenerService.getInstance();
+    const linkOpener = useService(LinkOpenerService);
 
     const openSupporterLink = () => supporter.link && linkOpener.open(supporter.link);
 

src/renderer/components/settings/supporters-view/supporters-view.component.tsx

@@ -7,6 +7,7 @@ import { SupportersBlock } from "./supporters-block.component";
 import ManheraChanGif from "../../../../../assets/images/gifs/menhera-chan.gif";
 import ManheraSadGif from "../../../../../assets/images/gifs/menhera-sad.gif";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { useService } from "renderer/hooks/use-service.hook";
 
 interface Props {
     isVisible: boolean;
@@ -14,7 +15,7 @@ interface Props {
 }
 
 export function SupportersView({ isVisible, setVisible }: Props) {
-    const supportersService = SupportersService.getInstance();
+    const supportersService = useService(SupportersService);
     const t = useTranslation();
 
     const [supporters, setSupporters] = useState([] as Supporter[]);

src/renderer/components/shared/bsm-link.component.tsx

@@ -1,3 +1,4 @@
+import { useService } from "renderer/hooks/use-service.hook";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
 
 type Props = {
@@ -9,7 +10,8 @@ type Props = {
 };
 
 export function BsmLink({ className, href, children, style, internal }: Props) {
-    const linkOpener = LinkOpenerService.getInstance();
+    
+    const linkOpener = useService(LinkOpenerService);
 
     const openLink = () => {
         if (!href) {

src/renderer/components/shared/iframe-view.component.tsx

@@ -2,10 +2,11 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
 import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
 import { useObservable } from "renderer/hooks/use-observable.hook";
+import { useService } from "renderer/hooks/use-service.hook";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
 
 export function BsmIframeView() {
-    const linkService = LinkOpenerService.getInstance();
+    const linkService = useService(LinkOpenerService);
 
     const iframeUrl = useObservable(linkService.iframeLink$);
     const ref = useRef(null);

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

@@ -9,11 +9,13 @@ import { BsmButton } from "../shared/bsm-button.component";
 import { BsmRange } from "../shared/bsm-range.component";
 import { BsmIconType } from "../svgs/bsm-icon.component";
 import "./title-bar.component.css";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export default function TitleBar({ template = "index.html" }: { template: AppWindow }) {
-    const ipcService = IpcService.getInstance();
-    const windows = WindowManagerService.getInstance();
-    const audio = AudioPlayerService.getInstance();
+    
+    const ipcService = useService(IpcService);
+    const windows = useService(WindowManagerService);
+    const audio = useService(AudioPlayerService);
 
     const volume = useObservable(audio.volume$, audio.volume);
     const color = useThemeColor("first-color");

src/renderer/components/version-viewer/slides/launch/launch-slide.component.tsx

@@ -9,14 +9,15 @@ import { BSVersion } from "shared/bs-version.interface";
 import { LaunchModToogle } from "./launch-mod-toogle.component";
 import BSLogo from "../../../../../../assets/images/apngs/bs-logo.png";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useService } from "renderer/hooks/use-service.hook";
 
 type Props = { version: BSVersion };
 
 export function LaunchSlide({ version }: Props) {
     const t = useTranslation();
 
-    const configService = ConfigurationService.getInstance();
-    const bsLauncherService = BSLauncherService.getInstance();
+    const configService = useService(ConfigurationService);
+    const bsLauncherService = useService(BSLauncherService);
 
     const [oculusMode, setOculusMode] = useState(!!configService.get<boolean>(LaunchMods.OCULUS_MOD));
     const [desktopMode, setDesktopMode] = useState(!!configService.get<boolean>(LaunchMods.DESKTOP_MOD));

src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx

@@ -8,12 +8,13 @@ import { useObservable } from "renderer/hooks/use-observable.hook";
 import { PageStateService } from "renderer/services/page-state.service";
 import useDoubleClick from "use-double-click";
 import { gt } from "semver";
+import { useService } from "renderer/hooks/use-service.hook";
 
 type Props = { className?: string; mod: Mod; installedVersion: string; isDependency?: boolean; isSelected?: boolean; onChange?: (val: boolean) => void; wantInfo?: boolean; onWantInfo?: (mod: Mod) => void };
 
 export function ModItem({ className, mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo }: Props) {
-    const modsManager = BsModsManagerService.getInstance();
-    const pageState = PageStateService.getInstance();
+    const modsManager = useService(BsModsManagerService);
+    const pageState = useService(PageStateService);
 
     const themeColor = useThemeColor("second-color");
     const uninstalling = useObservable(modsManager.isUninstalling$);

src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx

@@ -7,12 +7,14 @@ import { BsModsManagerService } from "renderer/services/bs-mods-manager.service"
 import { PageStateService } from "renderer/services/page-state.service";
 import { Mod } from "shared/models/mods/mod.interface";
 import { ModItem } from "./mod-item.component";
+import { useService } from "renderer/hooks/use-service.hook";
 
 type Props = { modsMap: Map<string, Mod[]>; installed: Map<string, Mod[]>; modsSelected: Mod[]; onModChange: (selected: boolean, mod: Mod) => void; moreInfoMod?: Mod; onWantInfos: (mod: Mod) => void };
 
 export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos }: Props) {
-    const pageState = PageStateService.getInstance();
-    const modsManager = BsModsManagerService.getInstance();
+    
+    const pageState = useService(PageStateService);
+    const modsManager = useService(BsModsManagerService);
 
     const [filter, setFilter] = useState("");
     const [filterEnabled, setFilterEnabled] = useState(false);

src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx

@@ -18,15 +18,16 @@ import { ModalExitCode, ModalService } from "renderer/services/modale.service";
 import { ModsDisclaimerModal } from "renderer/components/modal/modal-types/mods-disclaimer-modal.component";
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
 import { lt } from "semver";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion; onDisclamerDecline: () => void }) {
     const ACCEPTED_DISCLAIMER_KEY = "accepted-mods-disclaimer";
 
-    const modsManager = BsModsManagerService.getInstance();
-    const configService = ConfigurationService.getInstance();
-    const linkOpener = LinkOpenerService.getInstance();
+    const modsManager = useService(BsModsManagerService);
+    const configService = useService(ConfigurationService);
+    const linkOpener = useService(LinkOpenerService);
     const modals = ModalService.getInsance();
-    const os = OsDiagnosticService.getInstance();
+    const os = useService(OsDiagnosticService);
 
     const ref = useRef(null);
     const isVisible = useInView(ref, { amount: 0.5 });

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

@@ -1,7 +1,12 @@
 import { I18nService } from "renderer/services/i18n.service";
+import { useService } from "./use-service.hook";
+import { useObservable } from "./use-observable.hook";
 
 export function useTranslation(): (translationKey: string, args?: Record<string, string>) => string {
-    const i18nService = I18nService.getInstance();
+    
+    const i18nService = useService(I18nService);
+
+    useObservable(i18nService.currentLanguage$);
 
     return (key: string, args?: Record<string, string>) => {
         if (!key) {

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

@@ -14,17 +14,19 @@ import { ImportVersionModal } from "renderer/components/modal/modal-types/import
 import { IpcService } from "renderer/services/ipc.service";
 import { NotificationService } from "renderer/services/notification.service";
 import { timer } from "rxjs";
+import { useService } from "renderer/hooks/use-service.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export function AvailableVersionsList() {
-    const bsDownloaderService = BsDownloaderService.getInstance();
-    const versionManagerService = BSVersionManagerService.getInstance();
-    const progressBar = ProgressBarService.getInstance();
+    const bsDownloaderService = useService(BsDownloaderService);
+    const versionManagerService = useService(BSVersionManagerService);
+    const progressBar = useService(ProgressBarService);
     const modal = ModalService.getInsance();
-    const ipc = IpcService.getInstance();
-    const installer = BsDownloaderService.getInstance();
-    const notification = NotificationService.getInstance();
+    const ipc = useService(IpcService);
+    const installer = useService(BsDownloaderService);
+    const notification = useService(NotificationService);
 
-    const [versionSelected, setVersionSelected] = useState(null as BSVersion);
+    const versionSelected = useObservable(bsDownloaderService.selectedBsVersion$);
     const [downloading, setDownloading] = useState(false);
     const t = useTranslation();
 
@@ -35,16 +37,6 @@ export function AvailableVersionsList() {
         });
     };
 
-    useEffect(() => {
-        const versionSelectedSub = bsDownloaderService.selectedBsVersion$.subscribe(version => {
-            setVersionSelected(version);
-        });
-
-        return () => {
-            versionSelectedSub.unsubscribe();
-        };
-    }, []);
-
     const importVersion = async () => {
         if (!progressBar.require()) {
             return;

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

@@ -31,21 +31,23 @@ import { PlaylistsManagerService } from "renderer/services/playlists-manager.ser
 import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { VersionFolderLinkerService } from "renderer/services/version-folder-linker.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export function SettingsPage() {
-    const configService: ConfigurationService = ConfigurationService.getInstance();
-    const themeService: ThemeService = ThemeService.getInstance();
-    const ipcService: IpcService = IpcService.getInstance();
+    
+    const configService: ConfigurationService = useService(ConfigurationService);
+    const themeService: ThemeService = useService(ThemeService);
+    const ipcService: IpcService = useService(IpcService);
     const modalService: ModalService = ModalService.getInsance();
-    const downloaderService: BsDownloaderService = BsDownloaderService.getInstance();
-    const progressBarService: ProgressBarService = ProgressBarService.getInstance();
-    const notificationService: NotificationService = NotificationService.getInstance();
-    const i18nService: I18nService = I18nService.getInstance();
-    const linkOpener: LinkOpenerService = LinkOpenerService.getInstance();
-    const mapsManager = MapsManagerService.getInstance();
-    const playlistsManager = PlaylistsManagerService.getInstance();
-    const modelsManager = ModelsManagerService.getInstance();
-    const versionLinker = VersionFolderLinkerService.getInstance();
+    const downloaderService: BsDownloaderService = useService(BsDownloaderService);
+    const progressBarService: ProgressBarService = useService(ProgressBarService);
+    const notificationService: NotificationService = useService(NotificationService);
+    const i18nService: I18nService = useService(I18nService);
+    const linkOpener: LinkOpenerService = useService(LinkOpenerService);
+    const mapsManager = useService(MapsManagerService);
+    const playlistsManager = useService(PlaylistsManagerService);
+    const modelsManager = useService(ModelsManagerService);
+    const versionLinker = useService(VersionFolderLinkerService);
 
     const { firstColor, secondColor } = useThemeColor();
 

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

@@ -24,11 +24,11 @@ import { NotificationService } from "renderer/services/notification.service";
 
 export function VersionViewer() {
 
-    const bsUninstallerService = BSUninstallerService.getInstance();
-    const bsVersionManagerService = BSVersionManagerService.getInstance();
+    const bsUninstallerService = useService(BSUninstallerService);
+    const bsVersionManagerService = useService(BSVersionManagerService);
     const modalService = ModalService.getInsance();
-    const bsDownloaderService = BsDownloaderService.getInstance();
-    const ipcService = IpcService.getInstance();
+    const bsDownloaderService = useService(BsDownloaderService);
+    const ipcService = useService(IpcService);
     const bsLauncher = useService(BSLauncherService);
     const notification = useService(NotificationService);
 

src/renderer/windows/Launcher.tsx

@@ -7,11 +7,13 @@ import { useTranslation } from "../hooks/use-translation.hook";
 import { AutoUpdaterService } from "../services/auto-updater.service";
 import { ThemeService } from "../services/theme.service";
 import { WindowManagerService } from "../services/window-manager.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export default function Launcher() {
-    const themeService = ThemeService.getInstance();
-    const updaterService = AutoUpdaterService.getInstance();
-    const windowService = WindowManagerService.getInstance();
+    
+    const themeService = useService(ThemeService);
+    const updaterService = useService(AutoUpdaterService);
+    const windowService = useService(WindowManagerService);
 
     const constraintsRef = useRef(null);
 

src/renderer/windows/OneClick/OneClickDownloadMap.tsx

@@ -13,15 +13,17 @@ import { WindowManagerService } from "renderer/services/window-manager.service";
 import { timer } from "rxjs";
 import { BsvMapDetail } from "shared/models/maps";
 import defaultImage from "../../../../assets/images/default-version-img.jpg";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export default function OneClickDownloadMap() {
-    const ipc = IpcService.getInstance();
-    const bsv = BeatSaverService.getInstance();
-    const mapsDownloader = MapsDownloaderService.getInstance();
-    const themeService = ThemeService.getInstance();
-    const progressBar = ProgressBarService.getInstance();
-    const windows = WindowManagerService.getInstance();
-    const notification = NotificationService.getInstance();
+    
+    const ipc = useService(IpcService);
+    const bsv = useService(BeatSaverService);
+    const mapsDownloader = useService(MapsDownloaderService);
+    const themeService = useService(ThemeService);
+    const progressBar = useService(ProgressBarService);
+    const windows = useService(WindowManagerService);
+    const notification = useService(NotificationService);
 
     const [mapInfo, setMapInfo] = useState<BsvMapDetail>(null);
     const t = useTranslation();

src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx

@@ -14,15 +14,17 @@ import { WindowManagerService } from "renderer/services/window-manager.service";
 import { map, filter } from "rxjs/operators";
 import { BsvPlaylist } from "shared/models/maps/beat-saver.model";
 import defaultImage from "../../../../assets/images/default-version-img.jpg";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export default function OneClickDownloadPlaylist() {
-    const ipc = IpcService.getInstance();
-    const bSaver = BeatSaverService.getInstance();
-    const themeService = ThemeService.getInstance();
-    const playlistDownloader = PlaylistDownloaderService.getInstance();
+    
+    const ipc = useService(IpcService);
+    const bSaver = useService(BeatSaverService);
+    const themeService = useService(ThemeService);
+    const playlistDownloader = useService(PlaylistDownloaderService);
     const mapsContainer = useRef<HTMLDivElement>(null);
-    const windows = WindowManagerService.getInstance();
-    const notification = NotificationService.getInstance();
+    const windows = useService(WindowManagerService);
+    const notification = useService(NotificationService);
 
     const [playlist, setPlaylist] = useState<BsvPlaylist>(null);
     const downloadedMap = useObservable(