zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[fix] custom mods should be appended on version page load (#878)

Browse Source 
* [fix] custom mods should be appended on version page load

* refactored the code to use hooks for readability

* Use "useCallback" to avoid unnecessary redeclarations

---------

Co-authored-by: Zagrios <40181755+Zagrios@users.noreply.github.com>
This commit is contained in:
silentrald
2025-06-14 20:53:56 +08:00
committed by GitHub
parent e1b55e4019
commit b00d41f98f
1 changed files with 108 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/version-viewer/slides/launch/launch-slide.component.tsx
+108 -44
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { BsmButton } from "renderer/components/shared/bsm-button.component";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { useTranslationV2 } from "renderer/hooks/use-translation.hook";
@@ -30,29 +30,13 @@ import { CreateCustomLaunchOptionModal } from "renderer/components/modal/modal-t
type Props = { version: BSVersion };
export function LaunchSlide({ version }: Props) {
const { text: t, element: te } = useTranslationV2();
const configService = useService(ConfigurationService);
function useLaunchMods() {
const bsLauncherService = useService(BSLauncherService);
const bsDownloader = useService(BsDownloaderService);
const versions = useService(BSVersionManagerService);
const modal = useService(ModalService);
const configService = useService(ConfigurationService);
const [advancedLaunch, setAdvancedLaunch] = useState(false);
const [command, setCommand] = useState<string>(configService.get<string>("launch-command") || "");
const customLaunchOptions = useObservable<CustomLaunchOption[]>(() => configService.watch<CustomLaunchOption[]>("custom-launch-options"), []);
const [customLaunchModsArgs, setCustomLaunchModsArgs] = useState<string[]>([]);
const versionDownloading = useObservable(() => bsDownloader.downloadingVersion$);
const [activeLaunchMods, setActiveLaunchMods] = useState<string[]>(configService.get("launch-mods") ?? []);
const [pinnedLaunchMods, setPinnedLaunchMods] = useState<string[]>(configService.get("pinned-launch-mods" as DefaultConfigKey) ?? []);
const versionRunning = useObservable(() => bsLauncherService.versionRunning$);
useEffect(() => {
configService.set("launch-command", command);
}, [command]);
useEffect(() => {
configService.set("pinned-launch-mods", pinnedLaunchMods);
}, [pinnedLaunchMods])
@@ -65,24 +49,66 @@ export function LaunchSlide({ version }: Props) {
}
}, [activeLaunchMods]);
const toggleActiveLaunchMod = (checked: boolean, launchMod: string) => checked
const toggleActiveLaunchMod = useCallback((checked: boolean, launchMod: string) => checked
? setActiveLaunchMods(prev => [...prev, launchMod])
: setActiveLaunchMods(prev => prev.filter(mod => mod !== launchMod));
: setActiveLaunchMods(prev => prev.filter(mod => mod !== launchMod)),
[]);
const togglePinnedLaunchMod = (pinned: boolean, launchMod: string) => pinned
const togglePinnedLaunchMod = useCallback((pinned: boolean, launchMod: string) => pinned
? setPinnedLaunchMods(prev => [...prev, launchMod])
: setPinnedLaunchMods(prev => prev.filter(mod => mod !== launchMod));
: setPinnedLaunchMods(prev => prev.filter(mod => mod !== launchMod)),
[]);
const launchModItems = useMemo<LaunchModItemProps[]>(() => {
return {
activeLaunchMods,
pinnedLaunchMods,
toggleActiveLaunchMod,
togglePinnedLaunchMod,
}
}
let protonLogsPath: string[] = [];
if (window.electron.platform === "linux") {
protonLogsPath = version.steam
? [version.path, "Logs"]
: ["BSInstances", version.name, "Logs"];
}
function useCustomLaunchMods({
activeLaunchMods, pinnedLaunchMods,
toggleActiveLaunchMod,
togglePinnedLaunchMod,
}: {
activeLaunchMods: string[];
pinnedLaunchMods: string[];
const customOptions = customLaunchOptions?.map<LaunchModItemProps>(option => ({
toggleActiveLaunchMod: (checked: boolean, launchMod: string) => void;
togglePinnedLaunchMod: (checked: boolean, launchMod: string) => void;
}) {
const configService = useService(ConfigurationService);
const modalService = useService(ModalService);
const customLaunchOptions = useObservable<CustomLaunchOption[]>(() => (
configService.watch<CustomLaunchOption[]>("custom-launch-options")
), []);
const [customLaunchModsArgs, setCustomLaunchModsArgs] = useState<string[]>([]);
useEffect(() => {
const command = customLaunchOptions
?.map(option => option.data.command || "")
.filter(Boolean);
setCustomLaunchModsArgs(() => command ?? []);
}, [customLaunchOptions]);
const deleteCustomLaunchOption = useCallback((id: string) => {
const newCustomLaunchOptions = (customLaunchOptions ?? []).filter(mode => mode.id !== id);
configService.set("custom-launch-options", newCustomLaunchOptions);
}, [customLaunchOptions]);
const saveCustomLaunchOption = useCallback(async (option: Partial<CustomLaunchOption>) => {
const result = await modalService.openModal(CreateCustomLaunchOptionModal, { data: option });
if(result.exitCode !== ModalExitCode.COMPLETED) { return; }
const newCustomLaunchOptions = (customLaunchOptions ?? []).filter(mode => mode.id !== result.data.id);
newCustomLaunchOptions.push(result.data);
configService.set("custom-launch-options", newCustomLaunchOptions);
}, [customLaunchOptions]);
const getCustomLaunch = useCallback(() => {
return customLaunchOptions?.map<LaunchModItemProps>(option => ({
id: option.id,
label: option.label,
active: activeLaunchMods.includes(option.id),
@@ -104,6 +130,57 @@ export function LaunchSlide({ version }: Props) {
deleteCustomLaunchOption(option.id);
},
})) ?? [];
}, [customLaunchOptions, activeLaunchMods, pinnedLaunchMods])
return {
customLaunchOptions,
customLaunchModsArgs,
getCustomLaunch,
saveCustomLaunchOption
};
}
export function LaunchSlide({ version }: Props) {
const { text: t, element: te } = useTranslationV2();
const configService = useService(ConfigurationService);
const bsLauncherService = useService(BSLauncherService);
const bsDownloader = useService(BsDownloaderService);
const versions = useService(BSVersionManagerService);
const [advancedLaunch, setAdvancedLaunch] = useState(false);
const [command, setCommand] = useState<string>(configService.get<string>("launch-command") || "");
const versionDownloading = useObservable(() => bsDownloader.downloadingVersion$);
const versionRunning = useObservable(() => bsLauncherService.versionRunning$);
const {
activeLaunchMods, pinnedLaunchMods,
toggleActiveLaunchMod, togglePinnedLaunchMod,
} = useLaunchMods();
const {
customLaunchOptions, customLaunchModsArgs,
getCustomLaunch, saveCustomLaunchOption,
} = useCustomLaunchMods({
activeLaunchMods, pinnedLaunchMods,
toggleActiveLaunchMod,
togglePinnedLaunchMod,
});
useEffect(() => {
configService.set("launch-command", command);
}, [command]);
const launchModItems = useMemo<LaunchModItemProps[]>(() => {
let protonLogsPath: string[] = [];
if (window.electron.platform === "linux") {
protonLogsPath = version.steam
? [version.path, "Logs"]
: ["BSInstances", version.name, "Logs"];
}
const customOptions = getCustomLaunch();
return [
{
@@ -187,19 +264,6 @@ export function LaunchSlide({ version }: Props) {
return safeLt(version?.BSVersion, versions.getRecommendedVersion()?.BSVersion);
}, [version]);
const saveCustomLaunchOption = async (option: Partial<CustomLaunchOption>) => {
const result = await modal.openModal(CreateCustomLaunchOptionModal, { data: option });
if(result.exitCode !== ModalExitCode.COMPLETED) { return; }
const newCustomLaunchOptions = (customLaunchOptions ?? []).filter(mode => mode.id !== result.data.id);
newCustomLaunchOptions.push(result.data);
configService.set("custom-launch-options", newCustomLaunchOptions);
}
const deleteCustomLaunchOption = (id: string) => {
const newCustomLaunchOptions = (customLaunchOptions ?? []).filter(mode => mode.id !== id);
configService.set("custom-launch-options", newCustomLaunchOptions);
}
return (
<div className="w-full shrink-0 items-center relative flex flex-col justify-start overflow-hidden">
<div className="flex flex-col gap-3 justify-center items-center mb-4">