Updater: Inform about more recent commits

src/components/Updater.tsx

@@ -1,13 +1,12 @@
 import gitHash from "git-hash";
-import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger, updateError } from '../utils/updater';
+import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger, updateError, isOutdated, isNewer } from '../utils/updater';
 import { React, Forms, Button, Margins, Alerts, Card, Parser, Toasts } from '../webpack/common';
 import { Flex } from "./Flex";
-import { useAwaiter } from '../utils/misc';
+import { classes, useAwaiter } from '../utils/misc';
 import { Link } from "./Link";
 import ErrorBoundary from "./ErrorBoundary";
 import { ErrorCard } from "./ErrorCard";
 
-
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
     return async () => {
         dispatcher(true);
@@ -45,33 +44,38 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
     };
 };
 
-export default ErrorBoundary.wrap(function Updater() {
-    const [repo, err, repoPending] = useAwaiter(getRepo, "Loading...");
-    const [isChecking, setIsChecking] = React.useState(false);
-    const [isUpdating, setIsUpdating] = React.useState(false);
-    const [updates, setUpdates] = React.useState(changes);
-
-    React.useEffect(() => {
-        if (err)
-            UpdateLogger.error("Failed to retrieve repo", err);
-    }, [err]);
-
-    const isOutdated = updates?.length > 0;
+interface CommonProps {
+    repo: string;
+    repoPending: boolean;
+}
 
+function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof changes; }) {
     return (
-        <Forms.FormSection tag="h1" title="Vencord Updater">
-            <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
-
-            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
-                <Link href={repo}>
-                    {repo.split("/").slice(-2).join("/")}
-                </Link>
-            )} ({gitHash})</Forms.FormText>
+        <Card style={{ padding: ".5em" }}>
+            {updates.map(({ hash, author, message }) => (
+                <div>
+                    <Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
+                        <code>{hash}</code>
+                    </Link>
+                    <span style={{
+                        marginLeft: "0.5em",
+                        color: "var(--text-normal)"
+                    }}>{message} - {author}</span>
+                </div>
+            ))}
+        </Card>
+    );
+}
 
-            <Forms.FormDivider />
+function Updatable(props: CommonProps) {
+    const [updates, setUpdates] = React.useState(changes);
+    const [isChecking, setIsChecking] = React.useState(false);
+    const [isUpdating, setIsUpdating] = React.useState(false);
 
-            <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
+    const isOutdated = updates.length > 0;
 
+    return (
+        <>
             {!updates && updateError ? (
                 <>
                     <Forms.FormText>Failed to check updates. Check the console for more info</Forms.FormText>
@@ -79,31 +83,15 @@ export default ErrorBoundary.wrap(function Updater() {
                         <p>{updateError.stderr || updateError.stdout || "An unknown error occurred"}</p>
                     </ErrorCard>
                 </>
-            ) :
-                (
-                    <Forms.FormText className={Margins.marginBottom8}>
-                        {isOutdated ? `There are ${updates.length} Updates` : "Up to Date!"}
-                    </Forms.FormText>
-                )
-            }
-
-            {isOutdated && (
-                <Card style={{ padding: ".5em" }}>
-                    {updates.map(({ hash, author, message }) => (
-                        <div>
-                            <Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
-                                <code>{hash}</code>
-                            </Link>
-                            <span style={{
-                                marginLeft: "0.5em",
-                                color: "var(--text-normal)"
-                            }}>{message} - {author}</span>
-                        </div>
-                    ))}
-                </Card>
+            ) : (
+                <Forms.FormText className={Margins.marginBottom8}>
+                    {isOutdated ? `There are ${updates.length} Updates` : "Up to Date!"}
+                </Forms.FormText>
             )}
 
-            <Flex className={`${Margins.marginBottom8} ${Margins.marginTop8}`}>
+            {isOutdated && <Changes updates={updates} {...props} />}
+
+            <Flex className={classes(Margins.marginBottom8, Margins.marginTop8)}>
                 {isOutdated && <Button
                     size={Button.Sizes.SMALL}
                     disabled={isUpdating || isChecking}
@@ -155,6 +143,49 @@ export default ErrorBoundary.wrap(function Updater() {
                     Check for Updates
                 </Button>
             </Flex>
+        </>
+    );
+}
+
+function Newer(props: CommonProps) {
+    return (
+        <>
+            <Forms.FormText className={Margins.marginBottom8}>
+                Your local copy has more recent commits. Please stash or reset them.
+            </Forms.FormText>
+            <Changes {...props} updates={changes} />
+        </>
+    );
+}
+
+export default ErrorBoundary.wrap(function Updater() {
+    const [repo, err, repoPending] = useAwaiter(getRepo, "Loading...");
+
+    React.useEffect(() => {
+        if (err)
+            UpdateLogger.error("Failed to retrieve repo", err);
+    }, [err]);
+
+    const commonProps: CommonProps = {
+        repo,
+        repoPending
+    };
+
+    return (
+        <Forms.FormSection tag="h1" title="Vencord Updater">
+            <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
+
+            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
+                <Link href={repo}>
+                    {repo.split("/").slice(-2).join("/")}
+                </Link>
+            )} ({gitHash})</Forms.FormText>
+
+            <Forms.FormDivider />
+
+            <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
+
+            {isNewer ? <Newer {...commonProps} /> : <Updatable {...commonProps} />}
         </Forms.FormSection >
     );
 });

src/utils/updater.ts

@@ -5,6 +5,7 @@ import gitHash from 'git-hash';
 
 export const UpdateLogger = new Logger("Updater", "white");
 export let isOutdated = false;
+export let isNewer = false;
 export let updateError: any;
 export let changes: Record<"hash" | "author" | "message", string>[];
 
@@ -20,8 +21,8 @@ async function Unwrap<T>(p: Promise<IpcRes<T>>) {
 export async function checkForUpdates() {
     changes = await Unwrap(VencordNative.ipc.invoke<IpcRes<typeof changes>>(IpcEvents.GET_UPDATES));
     if (changes.some(c => c.hash === gitHash)) {
-        // git log NEWER...OLDER works as well. This means it will return the more recent local commits if the
-        changes = [];
+        isNewer = true;
+        return (isOutdated = false);
     }
     return (isOutdated = changes.length > 0);
 }