From 4c8c0f8f62d492687ac12006c2825a1c4027e794 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Sun, 15 Dec 2024 18:04:37 +0100 Subject: [PATCH] [chore] rework link unlink modals --- .../link-contents-modal.component.tsx | 108 ++++++++++++++++++ .../unlink-contents-modal.component.tsx | 105 +++++++++++++++++ 2 files changed, 213 insertions(+) create mode 100644 src/renderer/components/modal/modal-types/link-contents-modal.component.tsx create mode 100644 src/renderer/components/modal/modal-types/unlink-contents-modal.component.tsx diff --git a/src/renderer/components/modal/modal-types/link-contents-modal.component.tsx b/src/renderer/components/modal/modal-types/link-contents-modal.component.tsx new file mode 100644 index 00000000..cb342b67 --- /dev/null +++ b/src/renderer/components/modal/modal-types/link-contents-modal.component.tsx @@ -0,0 +1,108 @@ +import { BsmButton } from "renderer/components/shared/bsm-button.component"; +import { BsmImage } from "renderer/components/shared/bsm-image.component"; +import { useTranslationV2 } from "renderer/hooks/use-translation.hook"; +import { ModalComponent, ModalExitCode } from "renderer/services/modale.service"; +import BeatRunning from "../../../../../assets/images/apngs/beat-running.png"; +import Tippy from "@tippyjs/react"; +import { BsmLink } from "renderer/components/shared/bsm-link.component"; +import { BSVersion } from "shared/bs-version.interface"; +import { useConstant } from "renderer/hooks/use-constant.hook"; +import { useService } from "renderer/hooks/use-service.hook"; +import { VersionFolderLinkerService } from "renderer/services/version-folder-linker.service"; +import { useObservable } from "renderer/hooks/use-observable.hook"; +import { useEffect, useState } from "react"; +import { noop } from "shared/helpers/function.helpers"; +import { MODEL_TYPE_FOLDERS } from "shared/models/models/constants"; +import { PlaylistsManagerService } from "renderer/services/playlists-manager.service"; +import { MapsManagerService } from "renderer/services/maps-manager.service"; +import { map } from "rxjs"; + +export const LinkContentModal: ModalComponent = ({options: { data: { version, contentType } }, resolver }) => { + const { text: t, element: te } = useTranslationV2(); + + const versionLinker = useService(VersionFolderLinkerService); + + const sharedPath = useObservable(() => versionLinker.getSharedFolder().pipe(map(sharedPath => { + switch(contentType){ + case "maps": + return window.electron.path.join(sharedPath, "SharedMaps", "CustomLevels"); + case "playlists": + return window.electron.path.join(sharedPath, PlaylistsManagerService.RELATIVE_PLAYLISTS_FOLDER); + case "avatars": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.avatar); + case "sabers": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.saber); + case "platforms": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.platform); + case "blocks": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.bloq); + default: + return ""; + } + })), ""); + + const contentsPath = useConstant(() => { + switch(contentType){ + case "maps": + return window.electron.path.join(version.path, MapsManagerService.RELATIVE_MAPS_FOLDER); + case "playlists": + return window.electron.path.join(version.path, PlaylistsManagerService.RELATIVE_PLAYLISTS_FOLDER); + case "avatars": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.avatar); + case "sabers": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.saber); + case "platforms": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.platform); + case "blocks": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.bloq); + default: + return ""; + } + }); + const [pathCopied, setPathCopied] = useState<"maps"|"shared">(null); + + useEffect(() => { + if(!pathCopied){ + return noop; + } + + const timeout = setTimeout(() => { + setPathCopied(() => null); + }, 1000); + + return () => clearTimeout(timeout); + }, [pathCopied]) + + const putInClipboard = (text: string, element: "maps"|"shared") => { + navigator.clipboard.writeText(text); + setPathCopied(() => element); + } + + return ( +
+

{t("modals.link-contents.title", { contentType: t(`misc.${contentType}`).toLowerCase() })}

+ +

{t("modals.link-contents.p-1", { contentType: t(`misc.${contentType}`).toLowerCase() })}

+

+ {te("modals.link-contents.p-2", {itemsHtml: ( + + + + ), sharedHtml: ( + + + + ), contentType: <>{t(`misc.${contentType}`).toLowerCase()} })} +

+

{t("modals.link-contents.warning", {contentType: t(`misc.${contentType}`).toLowerCase()})}

+
+ {t("modals.link-contents.what-is-a-symbolic-link")} + {t("modals.link-contents.i-need-help")} +
+
+ resolver({ exitCode: ModalExitCode.CANCELED })} withBar={false} text="misc.cancel" /> + resolver({ exitCode: ModalExitCode.COMPLETED })} withBar={false} text={t("modals.link-contents.valid-btn", { contentType: t(`misc.${contentType}`).toLowerCase() })} /> +
+ + ); +}; diff --git a/src/renderer/components/modal/modal-types/unlink-contents-modal.component.tsx b/src/renderer/components/modal/modal-types/unlink-contents-modal.component.tsx new file mode 100644 index 00000000..0cc2df3d --- /dev/null +++ b/src/renderer/components/modal/modal-types/unlink-contents-modal.component.tsx @@ -0,0 +1,105 @@ +import { useState } from "react"; +import { BsmButton } from "renderer/components/shared/bsm-button.component"; +import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component"; +import { BsmImage } from "renderer/components/shared/bsm-image.component"; +import { useTranslationV2 } from "renderer/hooks/use-translation.hook"; +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 Tippy from "@tippyjs/react"; +import { useObservable } from "renderer/hooks/use-observable.hook"; +import { useService } from "renderer/hooks/use-service.hook"; +import { VersionFolderLinkerService } from "renderer/services/version-folder-linker.service"; +import { map } from "rxjs"; +import { PlaylistsManagerService } from "renderer/services/playlists-manager.service"; +import { MODEL_TYPE_FOLDERS } from "shared/models/models/constants"; +import { useConstant } from "renderer/hooks/use-constant.hook"; +import { MapsManagerService } from "renderer/services/maps-manager.service"; +import { BsmLink } from "renderer/components/shared/bsm-link.component"; + +export const UnlinkContentsModal: ModalComponent = ({options: { data: { version, contentType } }, resolver }) => { + const { text: t, element: te } = useTranslationV2(); + + const versionLinker = useService(VersionFolderLinkerService); + + const sharedPath = useObservable(() => versionLinker.getSharedFolder().pipe(map(sharedPath => { + switch(contentType){ + case "maps": + return window.electron.path.join(sharedPath, "SharedMaps", "CustomLevels"); + case "playlists": + return window.electron.path.join(sharedPath, PlaylistsManagerService.RELATIVE_PLAYLISTS_FOLDER); + case "avatars": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.avatar); + case "sabers": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.saber); + case "platforms": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.platform); + case "blocks": + return window.electron.path.join(sharedPath, MODEL_TYPE_FOLDERS.bloq); + default: + return ""; + } + })), ""); + + const contentsPath = useConstant(() => { + switch(contentType){ + case "maps": + return window.electron.path.join(version.path, MapsManagerService.RELATIVE_MAPS_FOLDER); + case "playlists": + return window.electron.path.join(version.path, PlaylistsManagerService.RELATIVE_PLAYLISTS_FOLDER); + case "avatars": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.avatar); + case "sabers": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.saber); + case "platforms": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.platform); + case "blocks": + return window.electron.path.join(version.path, MODEL_TYPE_FOLDERS.bloq); + default: + return ""; + } + }); + + const [keepsContents, setKeepContents] = useState(true); + const [pathCopied, setPathCopied] = useState<"maps"|"shared">(null); + + const putInClipboard = (text: string, element: "maps"|"shared") => { + navigator.clipboard.writeText(text); + setPathCopied(() => element); + } + + return ( +
+

{t("modals.unlink-contents.title", { contentType: t(`misc.${contentType}`).toLowerCase() })}

+ +

{t("modals.unlink-contents.p-1", { contentType: t(`misc.${contentType}`).toLowerCase() })}

+

+ {te("modals.unlink-contents.p-2", { sharedHtml: ( + + + + ), itemsHtml: ( + + + + ), contentType: <>{t(`misc.${contentType}`).toLowerCase()}})} +

+
+ {t("modals.link-contents.what-is-a-symbolic-link")} + {t("modals.link-contents.i-need-help")} +
+ +
+ setKeepContents(!v)} /> + + {t("modals.unlink-contents.do-not-copy-contents", { contentType: t(`misc.${contentType}`).toLowerCase() })} + +
+ +
+ resolver({ exitCode: ModalExitCode.CANCELED })} withBar={false} text="misc.cancel" /> + resolver({ exitCode: ModalExitCode.COMPLETED, data: keepsContents })} withBar={false} text={t("modals.unlink-contents.valid-btn", { contentType: t(`misc.${contentType}`).toLowerCase() })} /> +
+ + ); +};