From 6e920cc257989e145f0534740369437693811a19 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Sun, 16 Jul 2023 13:58:01 +0200 Subject: [PATCH] [chore-245] use appropriate hook everywhere --- .../available-version-item.component.tsx | 24 +++++++---------- .../available-versions-slide.component.tsx | 22 +++++++--------- .../available-versions-slider.component.tsx | 19 +++++++------- .../local-maps-list-panel.component.tsx | 9 ++++--- .../map-item.component.tsx | 6 +++-- .../maps-playlists-panel.component.tsx | 10 ++++--- .../delete-maps-modal.component.tsx | 4 ++- .../download-maps-modal.component.tsx | 9 ++++--- .../edit-version-modal.component.tsx | 3 ++- .../models/delete-models-modal.component.tsx | 3 ++- .../share-folders-modal.component.tsx | 11 ++++---- .../why-credentials-modal.component.tsx | 3 ++- .../nav-bar/bsmanager-icon.component.tsx | 4 ++- .../bs-version-item.component.tsx | 11 ++++---- .../components/nav-bar/nav-bar.component.tsx | 6 ++--- .../notification-overlay.component.tsx | 3 ++- .../bsm-progress-bar.component.tsx | 3 ++- .../supporter-item.component.tsx | 3 ++- .../supporters-view.component.tsx | 3 ++- .../components/shared/bsm-link.component.tsx | 4 ++- .../shared/iframe-view.component.tsx | 3 ++- .../title-bar/title-bar.component.tsx | 8 +++--- .../slides/launch/launch-slide.component.tsx | 5 ++-- .../slides/mods/mod-item.component.tsx | 5 ++-- .../slides/mods/mods-grid.component.tsx | 6 +++-- .../slides/mods/mods-slide.component.tsx | 9 ++++--- src/renderer/hooks/use-translation.hook.ts | 7 ++++- .../available-versions-list.components.tsx | 26 +++++++------------ .../pages/settings-page.component.tsx | 26 ++++++++++--------- .../pages/version-viewer.component.tsx | 8 +++--- src/renderer/windows/Launcher.tsx | 8 +++--- .../windows/OneClick/OneClickDownloadMap.tsx | 16 +++++++----- .../OneClick/OneClickDownloadPlaylist.tsx | 14 +++++----- 33 files changed, 163 insertions(+), 138 deletions(-) diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx index 67144238..c77fdfe0 100644 --- a/src/renderer/components/available-versions/available-version-item.component.tsx +++ b/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 ( setHovered(true)} onHoverEnd={() => setHovered(false)}> diff --git a/src/renderer/components/available-versions/available-versions-slide.component.tsx b/src/renderer/components/available-versions/available-versions-slide.component.tsx index 7539bd34..48b42f08 100644 --- a/src/renderer/components/available-versions/available-versions-slide.component.tsx +++ b/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 (
    diff --git a/src/renderer/components/available-versions/available-versions-slider.component.tsx b/src/renderer/components/available-versions/available-versions-slider.component.tsx index 6bdbc84c..a82ae620 100644 --- a/src/renderer/components/available-versions/available-versions-slider.component.tsx +++ b/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 (
    diff --git a/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx b/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx index 1222c771..e7af8ece 100644 --- a/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx +++ b/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); diff --git a/src/renderer/components/maps-mangement-components/map-item.component.tsx b/src/renderer/components/maps-mangement-components/map-item.component.tsx index 6c1e8cf6..50d95fb1 100644 --- a/src/renderer/components/maps-mangement-components/map-item.component.tsx +++ b/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 = { }; 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(); diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx index 89f83e5c..3dd5c414 100644 --- a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx +++ b/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({}); diff --git a/src/renderer/components/modal/modal-types/delete-maps-modal.component.tsx b/src/renderer/components/modal/modal-types/delete-maps-modal.component.tsx index a610ebc9..819d1915 100644 --- a/src/renderer/components/modal/modal-types/delete-maps-modal.component.tsx +++ b/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 = ({ resolver, data: { linked, maps } }) => { - const config = ConfigurationService.getInstance(); + + const config = useService(ConfigurationService); const t = useTranslation(); diff --git a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx index 73d673b4..a42e710f 100644 --- a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx +++ b/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 = ({ 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$); diff --git a/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx b/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx index 8c971dd8..fc1e549b 100644 --- a/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx +++ b/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("second-color" as DefaultConfigKey)); diff --git a/src/renderer/components/modal/modal-types/models/delete-models-modal.component.tsx b/src/renderer/components/modal/modal-types/models/delete-models-modal.component.tsx index 6f38a022..e219c93d 100644 --- a/src/renderer/components/modal/modal-types/models/delete-models-modal.component.tsx +++ b/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 = ({ resolver, data }) => { - const config = useConstant(() => ConfigurationService.getInstance()); + const config = useService(ConfigurationService); const t = useTranslation(); const [remember, setRemember] = useState(config.get(ModelsManagerService.REMEMBER_CHOICE_DELETE_MODEL_KEY) || false); diff --git a/src/renderer/components/modal/modal-types/share-folders-modal.component.tsx b/src/renderer/components/modal/modal-types/share-folders-modal.component.tsx index 6bae79cf..dd30d933 100644 --- a/src/renderer/components/modal/modal-types/share-folders-modal.component.tsx +++ b/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 = ({ 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(); diff --git a/src/renderer/components/modal/modal-types/why-credentials-modal.component.tsx b/src/renderer/components/modal/modal-types/why-credentials-modal.component.tsx index 06134170..48e56283 100644 --- a/src/renderer/components/modal/modal-types/why-credentials-modal.component.tsx +++ b/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 = () => { const t = useTranslation(); - const linkOpener = LinkOpenerService.getInstance(); + const linkOpener = useService(LinkOpenerService); const openTutorial = () => { linkOpener.open("https://steamcommunity.com/sharedfiles/filedetails/?id=1805934840"); diff --git a/src/renderer/components/nav-bar/bsmanager-icon.component.tsx b/src/renderer/components/nav-bar/bsmanager-icon.component.tsx index 564e2eff..0a0ddcda 100644 --- a/src/renderer/components/nav-bar/bsmanager-icon.component.tsx +++ b/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$); diff --git a/src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx b/src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx index 04d81b7d..e024e0fd 100644 --- a/src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx +++ b/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(); diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index 534dd008..f4909db1 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/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 (