add update flow

src/renderer/index.tsx

@@ -5,7 +5,7 @@ import * as Sentry from "@sentry/electron/renderer";
 import { SnackbarProvider } from "notistack";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import packageJson from "../../package.json";
-import { Main } from "./pages/Main";
+import { IndexPage } from "./pages/Main";
 import { HomePage } from "./pages/Home";
 import { theme } from "./lib/theme";
 import { ConfigProvider } from "./hooks/useConfig";
@@ -63,7 +63,7 @@ root.render(
           <CssBaseline />
           <HashRouter>
             <Routes>
-              <Route path="/" element={<Main />} />
+              <Route path="/" element={<IndexPage />} />
               <Route path="/home" element={<HomePage />} />
               <Route path="/settings" element={<SettingsPage />} />
               <Route path="/event-editor" element={<EventEditorPage />} />

src/renderer/pages/Main.tsx

@@ -1,21 +1,163 @@
-import React from "react";
-import log from "electron-log/renderer";
-import { Loader } from "../components/shared/Loader";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  Button,
+  CircularProgress,
+  Stack,
+  Typography,
+  styled,
+} from "@mui/material";
+import log from "electron-log";
+import { ipcRenderer, shell } from "electron";
+import { ErrorOutlineRounded } from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
+import { useHotkeys } from "react-hotkeys-hook";
+import { theme } from "../lib/theme";
 
-export const Main = () => {
-  const initApp = async () => {
+const Container = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  height: "100vh",
+  gap: theme.spacing(2),
+});
+
+const Content = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100vh",
+  padding: theme.spacing(2),
+  gap: theme.spacing(4),
+});
+
+const handleDownloadUpdateManually = () => {
+  switch (process.platform) {
+    case "win32":
+      shell.openExternal(
+        "https://api.jstt.me/api/v2/f1mvli/download/latest/win",
+      );
+      break;
+    case "darwin":
+      if (process.arch === "arm64") {
+        shell.openExternal(
+          "https://api.jstt.me/api/v2/f1mvli/download/latest/mac-arm",
+        );
+      } else {
+        shell.openExternal(
+          "https://api.jstt.me/api/v2/f1mvli/download/latest/mac",
+        );
+      }
+      break;
+    case "linux":
+      shell.openExternal(
+        "https://api.jstt.me/api/v2/f1mvli/download/latest/linux",
+      );
+      break;
+  }
+};
+
+export function IndexPage() {
+  const [loading, setLoading] = useState(true);
+  const [updating, setUpdating] = useState(false);
+  const [doneChecking, setDoneChecking] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
     if (process.env.VITE_DEV_SERVER_URL) {
       log.transports.console.level = "debug";
     } else {
       log.transports.console.level = false;
     }
+  }, []);
 
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-  };
+  useEffect(() => {
+    (async () => {
+      try {
+        await window.f1mvli.updater.checkForUpdates();
+        const isAvailable = await window.f1mvli.updater.getUpdateAvailable();
+        setUpdating(isAvailable);
+        setDoneChecking(true);
+      } catch (err) {
+        setError(err);
+        setDoneChecking(true);
+        setUpdating(false);
+      }
+    })();
+  }, []);
 
-  initApp().then(() => {
-    window.location.hash = "/home";
-  });
+  useEffect(() => {
+    if (!updating && !doneChecking) return;
 
-  return <Loader />;
-};
+    const handleInstallUpdate = async () => {
+      await window.f1mvli.updater.quitAndInstall().catch((err) => {
+        setError(err);
+        setUpdating(false);
+      });
+    };
+
+    const handleUpdateError = () => {
+      setError(new Error("Failed to install update"));
+      setUpdating(false);
+    };
+
+    ipcRenderer.on("update-downloaded", handleInstallUpdate);
+    ipcRenderer.on("update-error", handleUpdateError);
+
+    return () => {
+      ipcRenderer.removeListener("update-downloaded", handleInstallUpdate);
+    };
+  }, [updating, doneChecking]);
+
+  const handleContinue = useCallback(() => {
+    navigate("/home");
+  }, [navigate]);
+
+  useHotkeys("shift+s", handleContinue);
+
+  useEffect(() => {
+    if (!updating && doneChecking) {
+      setLoading(false);
+      if (!error) {
+        navigate("/home");
+      }
+    }
+  }, [updating, doneChecking, navigate, error]);
+
+  return (
+    <Container>
+      <Content>
+        {loading && <CircularProgress />}
+        {error && <ErrorOutlineRounded color="warning" />}
+        <Typography>
+          {loading
+            ? "Checking for updates..."
+            : updating
+              ? "Installing update..."
+              : error
+                ? "Failed to automatically update, please download the latest version manually."
+                : ""}
+        </Typography>
+        {!updating && error && (
+          <Stack direction="row" gap={2}>
+            <Button onClick={handleContinue}>
+              Continue with outdated version
+            </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleDownloadUpdateManually}
+            >
+              Download update
+            </Button>
+          </Stack>
+        )}
+        {updating && (
+          <Button onClick={handleContinue} sx={{ mt: 5 }}>
+            Skip checking for updates
+          </Button>
+        )}
+      </Content>
+    </Container>
+  );
+}