Complete auto updater

src/internal/Updater.tsx

@@ -18,12 +18,12 @@ const Updater: Plugin = {
   description: "Bunker's internal updater. Provides automatic updates, as well as historical updates.",
   icon: RefreshCw,
   tile() {
-    const currentVersion = "v0.1.8";
+    const currentVersion = "v0.2.1";
     const [latestVersion, setLatestVersion] = useState<string>();
     const [installedVersion, setInstalledVersion] = useState<string>();
 
     useEffect(() => {
-      setInstalledVersion("v0.1.8");
+      setInstalledVersion("v0.2.1");
       async function getLatestVersion() {
         const response = await fetch(
           "https://api.github.com/repos/bunkerweb/bunker/tags"
@@ -119,13 +119,14 @@ const Updater: Plugin = {
     const [installedVersion, setInstalledVersion] = useState<string>();
     const [selectedVersion, setSelectedVersion] = useState("Select Version");
     const [updateText, setUpdateText] = useState<string>();
+    const [selectedBuild, setSelectedBuild] = useState<string>();
 
     useEffect(() => {
       compareVersions(installedVersion, selectedVersion);
     },[selectedVersion]) 
 
     useEffect(() => {
-      setInstalledVersion("v0.1.8");
+      setInstalledVersion("v0.2.1");
     });
 
     useState(() => {
@@ -142,22 +143,83 @@ const Updater: Plugin = {
         }
       })
       setArchivedVersions(versions);
+      console.log(versions);
     }
 
     async function compareVersions(installedVersion: string | undefined, status: string) {
       semver.clean(status);
-      if (installedVersion) { 
-        if (semver.diff(installedVersion, status) == "major") {
-          setUpdateText("Update Bunker");
-        } else if (semver.diff(installedVersion, status) == "minor") {
-          setUpdateText("Downgrade Bunker");
+      console.log(semver.valid(status))
+      console.log(semver.valid(installedVersion))
+      if (installedVersion) {
+        if (semver.gt(status, installedVersion)) {
+          if (semver.diff(status, installedVersion) == "major") {
+            setUpdateText("Upgrade Bunker");
+          } else if (semver.diff(status, installedVersion) == "minor") {
+            setUpdateText("Upgrade Bunker");
+          } else {
+            setUpdateText("Upgrade Bunker");
+          }
+        } else if (semver.eq(installedVersion, status)) {
+          setUpdateText("Already Up to Date");
         } else {
-          setUpdateText("No Update Available");
+          setUpdateText("Downgrade Bunker");
         }
       } else {
         setUpdateText("Unknown");
       }
     };
+
+    async function updateBunker() {
+      if (updateText == "Unknown") return;
+      toast("Starting update process...", {
+        action: {
+          label: "Cancel",
+          onClick: () => console.log("Update cancelled"),
+        },
+      });
+
+      try {
+        const response = await fetch(
+          // @ts-ignore
+          "https://raw.githubusercontent.com/bunkerweb/bunker/" + selectedBuild.sha + "/index.html"
+        );
+
+        const blob = await response.blob();
+        toast("Processing update package...");
+
+        // @ts-ignore
+        const fileHandle = await window.showOpenFilePicker({
+          types: [
+            {
+              description: "Please Select Bunker",
+              accept: {
+                "text/html": [".html"],
+              },
+            },
+          ],
+        });
+        const nfc = await blob.text();
+        const wf = await fileHandle[0].createWritable();
+        await wf.write(nfc);
+        await wf.close();
+        toast("Update complete! Refresh to apply changes.", {
+          action: {
+            label: "Refresh",
+            onClick: () => window.location.reload(),
+          },
+        });
+      } catch (error) {
+        toast("Error updating bunker: ", {
+          action: {
+            label: "Dismiss",
+            onClick: () => console.log("Dismissed"),
+          },
+        });
+        console.error(error);
+      }
+    }
+
+
     return (
       <>
         <div className="mx-auto mt-20 max-w-md p-5 bg-card rounded-lg">
@@ -166,6 +228,7 @@ const Updater: Plugin = {
             Bunker's internal updater. Provides automatic updates, as well as
             historical updates.
           </p>
+          <p className="mt-1 text-center text-sm italic font-bold">Current Version: {installedVersion}</p>
 
           <hr className="my-5"></hr>
 
@@ -181,6 +244,7 @@ const Updater: Plugin = {
                   key={version.commit.message}
                   onClick={() => {
                     setSelectedVersion(version.commit.message);
+                    setSelectedBuild(version);
                   }}
                 >
                   {version.commit.message}
@@ -192,7 +256,7 @@ const Updater: Plugin = {
         <div className="flex justify-center mt-1">
           <Button
             variant="secondary"
-            onClick={() => window.location.reload()}
+            onClick={() => updateBunker()}
           >
             {updateText}
           </Button>