Merge pull request #654 from Zagrios/chore/add-outdate-bs-version-warn-modal

[chore] Added a pre-download warning modal for outdated BS versions

(cherry picked from commit e17b7f70fd)

src/renderer/components/modal/modal-types/bs-version-outdated-modal.component.tsx

@@ -0,0 +1,42 @@
+import { BsmButton } from "renderer/components/shared/bsm-button.component";
+import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { ModalComponent, ModalExitCode } from "renderer/services/modale.service";
+import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png";
+import { BSVersion } from "shared/bs-version.interface";
+import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component";
+import { useTranslationV2 } from "renderer/hooks/use-translation.hook";
+import { useState } from "react";
+import { ConfigurationService } from "renderer/services/configuration.service";
+import { useService } from "renderer/hooks/use-service.hook";
+
+export const BSVersionOutdatedModal: ModalComponent<void, { outdated: BSVersion, recommended: BSVersion }> = ({ resolver, data : { outdated, recommended }}) => {
+
+    const t = useTranslationV2();
+    const config = useService(ConfigurationService);
+
+    const [remember, setRemember] = useState(false);
+
+    const handleContinue = () => {
+        if (remember) {
+            config.set("not-show-bs-version-outdated", true);
+        }
+
+        resolver({ exitCode: ModalExitCode.COMPLETED });
+    };
+
+    return (
+        <form className="text-gray-800 dark:text-gray-200 max-w-sm">
+            <h1 className="text-3xl uppercase tracking-wide w-full text-center">{t.text("misc.warning")}</h1>
+            <BsmImage className="mx-auto h-24" image={BeatConflict} />
+            <p>{t.element("modals.bs-version-outdated.body", { outdatedVersion: <b>{outdated.BSVersion}</b>, recommendedVersion: <b>{recommended.BSVersion}</b> })}</p>
+            <div className="flex items-center relative py-2 gap-1 mt-1">
+                    <BsmCheckbox className="h-5 relative z-[1]" checked={remember} onChange={val => setRemember(() => val)} />
+                    <span className="italic">{t.text("modals.misc.remember-my-choice")}</span>
+                </div>
+            <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4 h-8">
+                <BsmButton typeColor="cancel" className="rounded-md flex justify-center items-center transition-all" onClick={() => resolver({ exitCode: ModalExitCode.CANCELED })} withBar={false} text="misc.cancel" />
+                <BsmButton typeColor="primary" className="rounded-md flex justify-center items-center transition-all" onClick={handleContinue} withBar={false} text="misc.continue" />
+            </div>
+        </form>
+    );
+};

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";
+import { useConstant } from "./use-constant.hook";
+import { createElement, Fragment } from "react";
 
+/**
+ * @deprecated Use useTranslationV2 instead
+ */
 export function useTranslation(): (translationKey: string, args?: Record<string, string>) => string {
     
     const i18nService = useService(I18nService);
@@ -16,3 +21,35 @@ export function useTranslation(): (translationKey: string, args?: Record<string,
         return tranlatables.map(key => i18nService.translate(key, args)).join(" ");
     };
 }
+
+type TranslateFunctions = {
+    text: (translationKey: string, args?: Record<string, string>) => string;
+    element: (translationKey: string, args?: Record<string, JSX.Element>) => JSX.Element;
+}
+
+export function useTranslationV2(): TranslateFunctions {
+
+    const i18nService = useService(I18nService);
+
+    useObservable(() => i18nService.currentLanguage$);
+
+    const text = useConstant(() => {
+        return (key: string, args?: Record<string, string>) => {
+            if (!key) {
+                return key;
+            }
+            return i18nService.translate(key, args);
+        };
+    });
+
+    const element = useConstant(() => {
+        return (key: string, args?: Record<string, JSX.Element>) => {
+            if (!key) {
+                return createElement(Fragment, null, key);
+            }
+            return i18nService.translateElement(key, args);
+        };
+    });
+
+    return { text, element };
+}

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

@@ -11,6 +11,12 @@ import { useService } from "renderer/hooks/use-service.hook";
 import { BSVersion } from "shared/bs-version.interface";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { BsDownloaderService } from "renderer/services/bs-version-download/bs-downloader.service";
+import { logRenderError } from "renderer";
+import { ModalExitCode, ModalService } from "renderer/services/modale.service";
+import { BSVersionOutdatedModal } from "renderer/components/modal/modal-types/bs-version-outdated-modal.component";
+import { ConfigurationService } from "renderer/services/configuration.service";
+import { coerce, lt, valid } from "semver";
+import { tryit } from "shared/helpers/error.helpers";
 
 export const AvailableVersionsContext = createContext<{ selectedVersion: BSVersion; setSelectedVersion: (version: BSVersion) => void }>(null);
 
@@ -18,6 +24,8 @@ export function AvailableVersionsList() {
 
     const bsDownloader = useService(BsDownloaderService);
     const versionManager = useService(BSVersionManagerService);
+    const modals = useService(ModalService);
+    const config = useService(ConfigurationService);
 
     const [selectedVersion, setSelectedVersion] = useState<BSVersion>(null);
     const contextValue = useMemo(() => ({ selectedVersion, setSelectedVersion }), [selectedVersion]);
@@ -25,10 +33,25 @@ export function AvailableVersionsList() {
     const downloading = useObservable(() => bsDownloader.downloadingVersion$.pipe(map(v => !!v)));
     const t = useTranslation();
 
-    const startDownload = async () => {
+    const startDownload = async (version: BSVersion) => {
+        const showOutdated = !config.get("not-show-bs-version-outdated");
+        const recommendedVersion = showOutdated ? versionManager.availableVersions$.value.find(v => v.recommended) : undefined;
 
-        return bsDownloader.downloadVersion(selectedVersion)
-            .catch(console.log)
+        const isVersionOutdated = recommendedVersion?.BSVersion ? (
+            tryit(() => lt(valid(coerce(version.BSVersion)), valid(coerce(recommendedVersion.BSVersion)))).result ?? false
+        ) : false;
+
+        if (showOutdated && isVersionOutdated) {
+
+            const res = await modals.openModal(BSVersionOutdatedModal, { outdated: version, recommended: recommendedVersion });
+
+            if (res.exitCode !== ModalExitCode.COMPLETED) {
+                return;
+            }
+        }
+
+        return bsDownloader.downloadVersion(version)
+            .catch(logRenderError)
             .finally(() => setSelectedVersion(null));
     };
 
@@ -45,17 +68,17 @@ export function AvailableVersionsList() {
 
     return (
         <div className="relative h-full w-full flex items-center flex-col pt-2">
-            
+
             <Slideshow className="absolute w-full h-full top-0" />
             <h1 className="text-gray-100 text-2xl mb-4 z-[1]">{t("pages.available-versions.title")}</h1>
 
             <AvailableVersionsContext.Provider value={contextValue}>
                 <AvailableVersionsSlider />
             </AvailableVersionsContext.Provider>
-            
+
             <AnimatePresence>
                 {selectedVersion && !downloading && (
-                    <motion.div initial={{ y: "150%" }} animate={{ y: "0%" }} exit={{ y: "150%" }} className="absolute bottom-5" onClick={startDownload}>
+                    <motion.div initial={{ y: "150%" }} animate={{ y: "0%" }} exit={{ y: "150%" }} className="absolute bottom-5" onClick={() => startDownload(selectedVersion)}>
                         <BsmButton text="misc.download" className="relative text-gray-800 dark:text-gray-100 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black" />
                     </motion.div>
                 )}

src/renderer/services/i18n.service.ts

@@ -4,6 +4,7 @@ import { Observable } from "rxjs";
 import { ConfigurationService } from "./configuration.service";
 import { getProperty } from "dot-prop";
 import { i18n } from "dateformat";
+import { createElement, Fragment } from "react";
 
 export class I18nService {
     private static instance: I18nService;
@@ -87,4 +88,30 @@ export class I18nService {
             });
         return translated;
     }
+
+    public translateElement(translationKey: string, args?: Record<string, JSX.Element>): JSX.Element {
+        let translated = this.cache.get(translationKey);
+        if (!translated) {
+            translated = getProperty(this.dictionary, translationKey) ?? translationKey;
+            this.cache.set(translationKey, translated);
+        }
+
+        if (!args) {
+            return createElement(Fragment, null, translated);
+        }
+
+        // Sort keys by length in descending order to avoid partial matches within keys
+        const sortedKeys = Object.keys(args).sort((a, b) => b.length - a.length);
+
+        const pattern = sortedKeys.map(key => `\\{${key}\\}`).join('|');
+        const regex = new RegExp(`(${pattern})`, 'g');
+        const segments = translated.split(regex);
+
+        const children = segments.map((segment) => {
+            const key = segment.slice(1, -1); // Remove surrounding {}
+            return args[key] || segment;
+        });
+
+        return createElement(Fragment, null, ...children);
+    }
 }