Merge pull request #52 from RileyTheFox/old-version-warning

Old version warning and version tag for latest release

src/dialogs/Dialogs/OldVersionDialog.tsx

@@ -0,0 +1,33 @@
+import Button, { ButtonColor } from "@app/components/Button";
+import { BaseDialog } from "./BaseDialog";
+import { closeDialog } from "..";
+
+export class OldVersionDialog extends BaseDialog<Record<string, never>> {
+    constructor(props: Record<string, unknown>) {
+        super(props);
+    }
+
+    getInnerContents() {
+        return <>
+            <p>
+                <strong>You are trying to select an old version of this application!</strong>
+                &#32;These versions may be missing features, contain bugs and potentially corrupt your game data. Use at your own risk!
+            </p>
+        </>;
+    }
+
+    getTitle() {
+        return <>Old Application Version</>;
+    }
+
+    getButtons() {
+        return <>
+            <Button color={ButtonColor.RED} rounded onClick={() => closeDialog("cancel")}>
+                Cancel
+            </Button>
+            <Button color={ButtonColor.GREEN} rounded onClick={() => closeDialog("okay")}>
+                Okay
+            </Button>
+        </>;
+    }
+}

src/routes/AppProfile/AppSettings.tsx

@@ -8,8 +8,9 @@ import InputBox from "@app/components/InputBox";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useOfflineStatus } from "@app/hooks/useOfflineStatus";
 import { useQuery } from "@tanstack/react-query";
-import { showErrorDialog } from "@app/dialogs";
+import { createAndShowDialog, showErrorDialog } from "@app/dialogs";
 import { distanceFromToday } from "@app/utils/timeFormat";
+import { OldVersionDialog } from "@app/dialogs/Dialogs/OldVersionDialog";
 
 interface VersionListProps {
     activeProfile: ActiveProfile,
@@ -29,6 +30,18 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
                 .then(res => res.json())
     });
 
+    const selectVersion = async (uuid: string, index: number) => {
+        if (index !== 0) {
+            const versionDialogOutput = await createAndShowDialog(OldVersionDialog);
+
+            if (versionDialogOutput === "okay") {
+                setSelectedVersion(uuid);
+            }   
+        } else {
+            setSelectedVersion(uuid);
+        }
+    };
+
     if (versionListQuery.isLoading) {
         return <span className={styles.centered}>
             Loading...
@@ -57,15 +70,15 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
                 data-state={selectedVersion === undefined ? "active" : "inactive"}
                 onClick={() => setSelectedVersion(undefined)}>
 
-                <header>Latest Release</header>
+                <header>Latest Release ({versionList.length > 0 ? versionList[0].tag : ""})</header>
                 <div>Recommended</div>
             </div>
             {
-                versionList.map(i =>
+                versionList.map((i, index) =>
                     <div
                         data-state={selectedVersion === i.uuid ? "active" : "inactive"}
                         key={i.uuid}
-                        onClick={() => setSelectedVersion(i.uuid)}>
+                        onClick={async () => await selectVersion(i.uuid, index)}>
 
                         <header>{i.tag}</header>
                         <div>{distanceFromToday(i.release)}</div>