Add warning for existing client mod

replugged-org · Feb 20, 2023 · 7db8f5d · 7db8f5d
1 parent 303f8c6
commit 7db8f5d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 13 deletions.
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -3,7 +3,7 @@ import "./App.css";
 import { ChooseAction, ChoosePlatform, Download, License, Progress } from "./steps";
 import logo from "../../assets/logo.png";
 import { useEffect, useState } from "react";
-import { DiscordPlatform } from "./types";
+import { DiscordPlatform, PlatformData } from "./types";
 import { getPlatforms } from "./util";
 
 function Header(): React.ReactElement {
@@ -18,24 +18,25 @@ function Header(): React.ReactElement {
 export default function App(): React.ReactElement {
   const [action, setAction] = useState<"plug" | "unplug">("plug");
   const [platforms, setPlatforms] = useState<DiscordPlatform[]>([]);
-  const [availablePlatforms, setAvailablePlatforms] = useState<DiscordPlatform[]>([]);
+  const [platformData, setPlatformData] = useState<Record<DiscordPlatform, PlatformData> | null>(
+    null,
+  );
 
   const init = async (reset = false): Promise<void> => {
     if (reset) {
       setAction("plug");
       setPlatforms([]);
-      setAvailablePlatforms([]);
+      setPlatformData(null);
     }
 
     const data = await getPlatforms();
-    const platforms = Object.entries(data)
-      .filter(([, value]) => value.installed)
+    setPlatformData(data);
+
+    const unplugged = Object.entries(data)
+      .filter(([, value]) => value.installed && !value.plugged)
       .map(([key]) => key as DiscordPlatform);
 
-    setAvailablePlatforms(platforms);
-    if (platforms[0]) {
-      setPlatforms([platforms[0]]);
-    }
+    setPlatforms(unplugged);
   };
 
   useEffect(() => {
@@ -58,7 +59,7 @@ export default function App(): React.ReactElement {
             path="/platform"
             element={
               <ChoosePlatform
-                availablePlatforms={availablePlatforms}
+                platformData={platformData}
                 platforms={platforms}
                 setPlatforms={setPlatforms}
                 init={init}

diff --git a/src/renderer/steps/ChoosePlatform.css b/src/renderer/steps/ChoosePlatform.css
@@ -36,6 +36,17 @@
   background-color: var(--blurple);
 }
 
+.platform-warning {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-top: 10px;
+  border: 1px solid rgba(240, 178, 50, 1);
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgba(240, 178, 50, 0.1);
+}
+
 .platform-bottom {
   width: 100%;
   margin-top: 10px;

diff --git a/src/renderer/steps/ChoosePlatform.tsx b/src/renderer/steps/ChoosePlatform.tsx
@@ -1,23 +1,43 @@
 import { Link } from "react-router-dom";
-import { DiscordPlatform } from "../types";
+import { DiscordPlatform, PlatformData } from "../types";
 import "./ChoosePlatform.css";
 import "../App.css";
 import { PLATFORM_LABELS } from "../util";
 import { useState } from "react";
 
 export function ChoosePlatform({
-  availablePlatforms,
+  platformData,
   platforms,
   setPlatforms,
   init,
 }: {
-  availablePlatforms: DiscordPlatform[];
+  platformData: Record<DiscordPlatform, PlatformData> | null;
   platforms: DiscordPlatform[];
   setPlatforms: (platforms: DiscordPlatform[]) => void;
   init: (reset?: boolean) => Promise<void>;
 }): React.ReactElement {
   const [isFetchingPlatforms, setIsFetchingPlatforms] = useState(false);
 
+  const availablePlatforms = (
+    platformData
+      ? Object.entries(platformData)
+          .filter(([, v]) => v.installed)
+          .map((x) => x[0])
+      : []
+  ) as DiscordPlatform[];
+
+  const pluggedPlatforms = (
+    platformData
+      ? Object.entries(platformData)
+          .filter(([, v]) => v.plugged)
+          .map((x) => x[0])
+      : []
+  ) as DiscordPlatform[];
+
+  const hasAlreadyPluggedPlatform = platforms.some((platform) =>
+    pluggedPlatforms.includes(platform),
+  );
+
   const togglePlatform = (platform: DiscordPlatform): void => {
     if (platforms.includes(platform)) {
       setPlatforms(platforms.filter((p) => p !== platform));
@@ -52,6 +72,12 @@ export function ChoosePlatform({
             ))}
           </div>
           <div className="platform-note">Please quit Discord before continuing.</div>
+          {hasAlreadyPluggedPlatform && (
+            <div className="platform-warning">
+              One of the selected platforms is already plugged or has another client mod installed.
+              Plugging it again will overwrite the existing mod.
+            </div>
+          )}
           <div className="platform-bottom">
             <Link to="/action" className="button button-secondary">
               Back