refactor updates to use new apis

frontend/src/components/updates/desktop.tsx

@@ -6,8 +6,44 @@ import {
   DropdownMenuTrigger,
 } from "@ui/dropdown";
 import { Bell } from "lucide-react";
-import { SingleUpdate } from "./update";
 import { Button } from "@ui/button";
+import { version_to_string } from "@util/helpers";
+import { Calendar, User } from "lucide-react";
+import { UpdateDetails, UpdateUser } from "./details";
+import { UpdateListItem, UpdateStatus } from "@monitor/client/dist/types";
+
+const fmt_date = (d: Date) =>
+  `${d.getDate()}/${d.getMonth() + 1} @ ${d.getHours()}:${d.getMinutes()}`;
+
+export const SingleUpdate = ({ update }: { update: UpdateListItem }) => (
+  <UpdateDetails id={update.id}>
+    <div className="px-2 py-4 hover:bg-muted transition-colors border-b last:border-none cursor-pointer">
+      <div
+        className="grid gap-4 justify-start items-center"
+        style={{ gridTemplateColumns: "1fr 1.75fr 1fr" }}
+      >
+        <div className="flex items-center gap-2">
+          <Calendar className="w-4 h-4" />
+          <div className="text-xs">
+            {update.status === UpdateStatus.InProgress
+              ? "ongoing"
+              : fmt_date(new Date(update.start_ts))}
+          </div>
+        </div>
+
+        <div className="text-sm w-full">
+          {update.operation.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ")}{" "}
+          {version_to_string(update.version)}
+        </div>
+
+        <div className="flex items-center gap-2 text-sm">
+          <User className="w-4 h-4" />
+          <UpdateUser user_id={update.operator} />
+        </div>
+      </div>
+    </div>
+  </UpdateDetails>
+);
 
 export const DesktopUpdates = () => {
   const updates = useRead("ListUpdates", {}).data;
@@ -22,7 +58,7 @@ export const DesktopUpdates = () => {
       <DropdownMenuContent className="w-[500px] h-[500px] overflow-auto">
         <DropdownMenuGroup>
           {updates?.updates.map((update) => (
-            <SingleUpdate update={update} key={update._id?.$oid} />
+            <SingleUpdate update={update} key={update.id} />
           ))}
         </DropdownMenuGroup>
       </DropdownMenuContent>

frontend/src/components/updates/details.tsx

@@ -6,7 +6,6 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@ui/sheet";
-import { Update } from "@monitor/client/dist/types";
 import {
   readableDuration,
   readableVersion,
@@ -34,7 +33,6 @@ import { ServerName } from "@resources/server/util";
 import { DeploymentName } from "@resources/deployment/util";
 import { BuildName } from "@resources/build/util";
 import { useRead } from "@hooks";
-// import { useRead } from "@hooks";
 
 export const UpdateUser = ({ user_id }: { user_id: string }) => {
   const username = useRead("GetUsername", { user_id }).data;
@@ -44,12 +42,15 @@ export const UpdateUser = ({ user_id }: { user_id: string }) => {
 };
 
 export const UpdateDetails = ({
-  update,
+  id,
   children,
 }: {
-  update: Update;
+  id: string;
   children: ReactNode;
 }) => {
+  const update = useRead("GetUpdate", { id }).data;
+  if (!update) return null;
+
   return (
     <Sheet>
       <SheetTrigger asChild>{children}</SheetTrigger>
@@ -65,7 +66,7 @@ export const UpdateDetails = ({
           <SheetDescription className="flex flex-col gap-2">
             <div className="flex items-center gap-2">
               <User className="w-4 h-4" />
-              <UpdateUser userId={update.operator} />
+              <UpdateUser user_id={update.operator} />
             </div>
             <div className="flex gap-4">
               <div className="flex items-center gap-2">

frontend/src/components/updates/update.tsx

@@ -1,35 +0,0 @@
-import { version_to_string } from "@util/helpers";
-import { Calendar, User } from "lucide-react";
-import { UpdateDetails, UpdateUser } from "./details";
-import { Update } from "@monitor/client/dist/types";
-
-const fmt_date = (d: Date) =>
-  `${d.getDate()}/${d.getMonth() + 1} @ ${d.getHours()}:${d.getMinutes()}`;
-
-export const SingleUpdate = ({ update }: { update: Update }) => (
-  <UpdateDetails update={update}>
-    <div className="px-2 py-4 hover:bg-muted transition-colors border-b last:border-none cursor-pointer">
-      <div
-        className="grid gap-4 justify-start items-center"
-        style={{ gridTemplateColumns: "1fr 1.75fr 1fr" }}
-      >
-        <div className="flex items-center gap-2">
-          <Calendar className="w-4 h-4" />
-          <div className="text-xs">
-            {update.end_ts ? fmt_date(new Date(update.end_ts)) : "ongoing"}
-          </div>
-        </div>
-
-        <div className="text-sm w-full">
-          {update.operation.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ")}{" "}
-          {version_to_string(update.version)}
-        </div>
-
-        <div className="flex items-center gap-2 text-sm">
-          <User className="w-4 h-4" />
-          <UpdateUser userId={update.operator} />
-        </div>
-      </div>
-    </div>
-  </UpdateDetails>
-);