toHex, basic deleteDownload func, fix badge display token

frontend/src/components/Demo.tsx

@@ -1,7 +1,7 @@
 import Badge from "@/components/Badge";
 import Emboldened from "@/components/Emboldened";
 import useSocket from "@/components/useSocket";
-import { cn, plural, type ClassValue } from "@/util";
+import { cn, plural, toHex, type ClassValue } from "@/util";
 import { useRef, useState } from "preact/hooks";
 
 type DemoProps = {
@@ -42,7 +42,7 @@ const Demo = ({ class: className }: DemoProps) => {
         <br />
         Your session is{" "}
         <Emboldened skeletonWidth="0x1234567890ABCDEF" copyable={true}>
-          {id != null ? "0x" + id?.toString(16).toUpperCase() : null}
+          {id != null ? toHex(id) : null}
         </Emboldened>
         . You have{" "}
         <Emboldened className="text-teal-400 font-inter">
@@ -66,7 +66,7 @@ const Demo = ({ class: className }: DemoProps) => {
               audio.play();
             }}
           >
-            {download}
+            {toHex(download.token)}
           </Badge>
         ))}
       </div>

frontend/src/components/useSocket.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 
 interface Download {
   token: number;
@@ -24,8 +24,23 @@ function useSocket(): UseSocketResult {
   const [id, setId] = useState<number | null>(null);
   const [downloads, setDownloads] = useState<Download[] | null>(null);
   const [executables, setExecutables] = useState<Executable[] | null>(null);
+  const socketRef = useRef<WebSocket | null>(null);
 
-  function deleteDownload() {}
+  function deleteDownload(download_token: number) {
+    if (socketRef.current == null) {
+      console.error("Socket is null");
+      return;
+    } else if (socketRef.current.readyState !== WebSocket.OPEN) {
+      console.error("Socket is not open", socketRef.current.readyState);
+      return;
+    }
+    socketRef.current.send(
+      JSON.stringify({
+        type: "delete",
+        token: download_token,
+      })
+    );
+  }
 
   useEffect(() => {
     const socket = new WebSocket(
@@ -33,6 +48,7 @@ function useSocket(): UseSocketResult {
         (import.meta.env.DEV ? "localhost:5800" : window.location.host) +
         "/ws"
     );
+    socketRef.current = socket;
 
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
@@ -42,7 +58,7 @@ function useSocket(): UseSocketResult {
 
       switch (data.type) {
         case "state":
-          setId(data.id as number);
+          setId(data.session.id as number);
           setDownloads(data.session.downloads as Download[]);
           break;
         case "executables":

frontend/src/util.ts

@@ -18,3 +18,7 @@ export function os(): Platform | "other" {
   else if (navigator.userAgent.includes("linux")) return "linux";
   return "other";
 }
+
+export function toHex(value: number): string {
+  return "0x" + value.toString(16).toUpperCase();
+}