fix vnc hydration errors

components/CopyButton/CopyButton.tsx

@@ -38,10 +38,7 @@ export type CopyButtonProps = {
   className?: string;
 };
 
-const CopyButton = forwardRef(function CopyButton(
-  { source, timeout = 2000, className }: CopyButtonProps,
-  ref: Ref<HTMLButtonElement>
-) {
+const CopyButton = ({ source, timeout = 2000, className }: CopyButtonProps, ref: Ref<HTMLButtonElement>) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -84,6 +81,6 @@ const CopyButton = forwardRef(function CopyButton(
       <Icon as={copied ? CheckOcticon : ClipboardOcticon} />
     </Button>
   );
-});
+};
 
-export default CopyButton;
+export default forwardRef(CopyButton);

components/VNC/VNC.tsx

@@ -1,8 +1,9 @@
-import { useRef, useEffect, useState, memo } from "react";
+import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from "react";
 import { useRouter } from "next/router";
 import RFB from "@novnc/novnc/core/rfb";
 import Terminal from "../Terminal";
 import { styled } from "../../lib/styles/stitches.config";
+import type { Ref, CSSProperties } from "react";
 
 const Display = styled(
   "div",
@@ -32,17 +33,13 @@ const Display = styled(
   }
 );
 
-const DOS = styled(Terminal, {
-  height: "400px",
-  width: "100%",
-  maxWidth: "700px",
-});
-
 export type VNCProps = {
   server: string;
+  style?: CSSProperties;
+  className?: string;
 };
 
-const VNC = ({ server }: VNCProps) => {
+const VNC = ({ server, style, className }: VNCProps, ref: Ref<Partial<RFB>>) => {
   const router = useRouter();
 
   // we definitely do NOT want this page to connect more than once!
@@ -54,17 +51,49 @@ const VNC = ({ server }: VNCProps) => {
   const [message, setMessage] = useState({ message: "", anyKey: false });
 
   // the actual connection and virtual screen (injected by noVNC when it's ready)
-  const rfbRef = useRef<RFB>();
+  const rfbRef = useRef<RFB | null>(null);
   const screenRef = useRef<HTMLDivElement>(null);
 
   // ends the session forcefully
   const disconnectVM = () => {
     try {
-      rfbRef.current?.disconnect();
-      setConnected(false);
+      rfbRef?.current?.disconnect();
     } catch (error) {} // eslint-disable-line no-empty
+
+    rfbRef.current = null;
+    setConnected(false);
   };
 
+  // expose some of noVNC's functionality to the parent of this component
+  useImperativeHandle(ref, () => ({
+    rfb: rfbRef?.current,
+    disconnect: () => {
+      rfbRef.current?.disconnect();
+    },
+    focus: () => {
+      rfbRef.current?.focus();
+    },
+    blur: () => {
+      rfbRef.current?.blur();
+    },
+    sendCtrlAltDel: () => {
+      rfbRef.current?.sendCtrlAltDel();
+    },
+    machineShutdown: () => {
+      rfbRef.current?.machineShutdown();
+    },
+    machineReboot: () => {
+      rfbRef.current?.machineReboot();
+    },
+    machineReset: () => {
+      rfbRef.current?.machineReset();
+    },
+    clipboardPasteFrom: (text: string) => {
+      rfbRef.current?.clipboardPasteFrom(text);
+    },
+    connected,
+  }));
+
   // prepare for possible navigation away from this page, and disconnect if/when it happens
   useEffect(() => {
     router.events.on("routeChangeStart", disconnectVM);
@@ -122,15 +151,30 @@ const VNC = ({ server }: VNCProps) => {
 
   return (
     <>
-      <DOS style={{ display: connected ? "none" : undefined }}>
+      {!connected && (
+        <Terminal
+          css={{
+            height: "400px",
+            width: "100%",
+            maxWidth: "700px",
+          }}
+        >
           {message.message}
           {message.anyKey && "\n\nPress the Any key (refresh the page) to continue."}
-      </DOS>
+        </Terminal>
+      )}
 
       {/* the VNC canvas is hidden until we've successfully connected to the socket */}
-      <Display ref={screenRef} style={{ display: !connected ? "none" : undefined }} />
+      <Display
+        ref={screenRef}
+        style={{
+          display: !connected ? "none" : undefined,
+          ...style,
+        }}
+        className={className}
+      />
     </>
   );
 };
 
-export default memo(VNC);
+export default forwardRef(VNC);

pages/y2k.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import dynamic from "next/dynamic";
 import Head from "next/head";
@@ -25,21 +25,18 @@ const Wallpaper = styled("main", {
   backgroundPosition: "center",
 });
 
-const DOS = styled(Terminal, {
-  height: "400px",
-  width: "100%",
-  maxWidth: "700px",
-});
-
-const RandomWallpaper = ({ style, ...rest }: ComponentProps<typeof Wallpaper>) => {
-  const [wallpaperUrl, setWallpaperUrl] = useState("");
+const RandomWallpaper = ({ ...rest }: ComponentProps<typeof Wallpaper>) => {
+  const wallpaperRef = useRef<HTMLDivElement>(null);
 
   // set a random retro Windows ME desktop tile for the entire content area
   useEffect(() => {
-    setWallpaperUrl(`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`);
+    const wallpaperUrl = `/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`;
+    if (wallpaperRef.current) {
+      wallpaperRef.current.style.backgroundImage = `url(${wallpaperUrl})`;
+    }
   }, []);
 
-  return <Wallpaper style={{ backgroundImage: wallpaperUrl ? `url(${wallpaperUrl})` : "", ...style }} {...rest} />;
+  return <Wallpaper ref={wallpaperRef} {...rest} />;
 };
 
 const Y2K = () => {
@@ -79,7 +76,19 @@ const Y2K = () => {
         }}
       />
 
-      <ErrorBoundary fallback={<DOS>Oh no, it looks like something's gone VERY wrong. Sorry about that!</DOS>}>
+      <ErrorBoundary
+        fallback={
+          <Terminal
+            css={{
+              height: "400px",
+              width: "100%",
+              maxWidth: "700px",
+            }}
+          >
+            Oh no, it looks like something's gone VERY wrong. Sorry about that!
+          </Terminal>
+        }
+      >
         <VNC server={SOCKET_PROXY} />
       </ErrorBoundary>
     </>