refactor add to recently viewed to own hook

frontend/src/hooks.ts

@@ -110,3 +110,19 @@ export const useServerStats = (server_id: string) => {
 
   return stats;
 };
+
+export const useAddRecentlyViewed = (
+  type: Types.ResourceTarget["type"],
+  id: string
+) => {
+  const invalidate = useInvalidate();
+  const push = useWrite("PushRecentlyViewed", {
+    onSuccess: () => invalidate(["GetUser"]),
+  }).mutate;
+
+  useEffect(() => {
+    push({ resource: { type, id } } as any);
+  }, []);
+
+  return push;
+};

frontend/src/resources/alerter/index.tsx

@@ -1,5 +1,5 @@
 import { ResourceUpdates } from "@components/updates/resource";
-import { useRead, useWrite } from "@hooks";
+import { useAddRecentlyViewed, useRead, useWrite } from "@hooks";
 import { Resource } from "@layouts/resource";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -20,12 +20,8 @@ const AlerterInfo = ({ id }: { id: string }) => {
 
 export const Alerter = () => {
   const id = useParams().alerterId;
-  const push = useWrite("PushRecentlyViewed").mutate;
-
   if (!id) return null;
-  useEffect(() => {
-    push({ resource: { type: "Deployment", id } });
-  }, []);
+  useAddRecentlyViewed("Alerter", id);
 
   return (
     <Resource

frontend/src/resources/build/index.tsx

@@ -1,4 +1,4 @@
-import { useWrite } from "@hooks";
+import { useAddRecentlyViewed, useWrite } from "@hooks";
 import { Resource } from "@layouts/resource";
 import { BuildName, BuildVersion } from "./util";
 import { Link, useParams } from "react-router-dom";
@@ -13,12 +13,8 @@ import { ResourceCard } from "@layouts/card";
 
 export const BuildPage = () => {
   const id = useParams().buildId;
-  const push = useWrite("PushRecentlyViewed").mutate;
-
   if (!id) return null;
-  useEffect(() => {
-    push({ resource: { type: "Build", id } });
-  }, []);
+  useAddRecentlyViewed("Build", id);
 
   return (
     <Resource

frontend/src/resources/builder/index.tsx

@@ -1,9 +1,8 @@
 import { ResourceCard } from "@layouts/card";
 import { Bot, Cloud, Factory } from "lucide-react";
 import { ResourceUpdates } from "@components/updates/resource";
-import { useRead, useWrite } from "@hooks";
+import { useAddRecentlyViewed, useRead } from "@hooks";
 import { Resource } from "@layouts/resource";
-import { useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
 
 const BuilderName = ({ id }: { id: string }) => {
@@ -14,12 +13,9 @@ const BuilderName = ({ id }: { id: string }) => {
 
 export const BuilderPage = () => {
   const id = useParams().builderId;
-  const push = useWrite("PushRecentlyViewed").mutate;
 
   if (!id) return null;
-  useEffect(() => {
-    push({ resource: { type: "Builder", id } });
-  }, []);
+  useAddRecentlyViewed("Builder", id);
 
   return (
     <Resource title={<BuilderName id={id} />} info={<></>} actions={<></>}>

frontend/src/resources/deployment/index.tsx

@@ -1,5 +1,5 @@
 import { ResourceUpdates } from "@components/updates/resource";
-import { useRead, useWrite } from "@hooks";
+import { useAddRecentlyViewed, useRead, useWrite } from "@hooks";
 import { ResourceCard } from "@layouts/card";
 import { Resource } from "@layouts/resource";
 import {
@@ -17,17 +17,13 @@ import {
   DeploymentStatusIcon,
 } from "@resources/deployment/util";
 import { CardDescription } from "@ui/card";
-import { useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
 
 export const DeploymentPage = () => {
   const id = useParams().deploymentId;
-  const push = useWrite("PushRecentlyViewed").mutate;
 
   if (!id) return null;
-  useEffect(() => {
-    push({ resource: { type: "Deployment", id } });
-  }, []);
+  useAddRecentlyViewed("Deployment", id);
 
   return (
     <Resource

frontend/src/resources/server/index.tsx

@@ -1,9 +1,8 @@
 import { ResourceUpdates } from "@components/updates/resource";
-import { useWrite, useRead } from "@hooks";
+import { useRead, useAddRecentlyViewed } from "@hooks";
 import { ResourceCard } from "@layouts/card";
 import { Resource } from "@layouts/resource";
 import { CardDescription } from "@ui/card";
-import { useEffect } from "react";
 import { useParams, Link } from "react-router-dom";
 import { ServerConfig } from "./config";
 import { ServerStats } from "./stats";
@@ -16,12 +15,9 @@ import {
 
 export const ServerPage = () => {
   const id = useParams().serverId;
-  const push = useWrite("PushRecentlyViewed").mutate;
 
   if (!id) return null;
-  useEffect(() => {
-    push({ resource: { type: "Server", id } });
-  }, []);
+  useAddRecentlyViewed("Server", id);
 
   return (
     <Resource