block non existant resource hook

frontend/src/lib/hooks.ts

@@ -92,20 +92,19 @@ export const useWrite = <
 >(
   type: T,
   config?: C
-) =>
-  {
-    const { toast } = useToast();
-    return useMutation({
-      mutationKey: [type],
-      mutationFn: (params: P) => client().write({ type, params } as R),
-      ...config,
-      onError: (e, v, c) => {
-        console.log("useWrite error:", e);
-        toast({ title: `Request ${type} Failed`,  });
-        config?.onError && config.onError(e, v, c);
-      },
-    });
-  };
+) => {
+  const { toast } = useToast();
+  return useMutation({
+    mutationKey: [type],
+    mutationFn: (params: P) => client().write({ type, params } as R),
+    ...config,
+    onError: (e, v, c) => {
+      console.log("useWrite error:", e);
+      toast({ title: `Request ${type} Failed` });
+      config?.onError && config.onError(e, v, c);
+    },
+  });
+};
 
 export const useExecute = <
   T extends Types.ExecuteRequest["type"],
@@ -176,11 +175,46 @@ export const useSetTitle = (more?: string) => {
       document.title = title;
     }
   }, [title]);
-}
+};
 
 export const tagsAtom = atomWithStorage<string[]>("tags-v0", []);
 
 export const useTagsFilter = () => {
   const [tags] = useAtom(tagsAtom);
   return tags;
-};
+};
+
+/** returns function that takes a resource target and checks if it exists */
+export const useCheckResourceExists = () => {
+  const servers = useRead("ListServers", {}).data;
+  const deployments = useRead("ListDeployments", {}).data;
+  const builds = useRead("ListBuilds", {}).data;
+  const repos = useRead("ListRepos", {}).data;
+  const procedures = useRead("ListProcedures", {}).data;
+  const builders = useRead("ListBuilders", {}).data;
+  const alerters = useRead("ListAlerters", {}).data;
+  return (target: Types.ResourceTarget) => {
+    switch (target.type) {
+      case "Server":
+        return servers?.some((resource) => resource.id === target.id) || false;
+      case "Deployment":
+        return (
+          deployments?.some((resource) => resource.id === target.id) || false
+        );
+      case "Build":
+        return builds?.some((resource) => resource.id === target.id) || false;
+      case "Repo":
+        return repos?.some((resource) => resource.id === target.id) || false;
+      case "Procedure":
+        return (
+          procedures?.some((resource) => resource.id === target.id) || false
+        );
+      case "Builder":
+        return builders?.some((resource) => resource.id === target.id) || false;
+      case "Alerter":
+        return alerters?.some((resource) => resource.id === target.id) || false;
+      default:
+        return false;
+    }
+  };
+};

frontend/src/pages/home/dashboard.tsx

@@ -1,10 +1,16 @@
 import { Page, Section } from "@components/layouts";
 import { Box, History, Key, Tag } from "lucide-react";
 import { Link, useNavigate } from "react-router-dom";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@ui/card";
 import { ResourceComponents } from "@components/resources";
 import { OpenAlerts } from "@components/alert";
-import { useRead, useUser } from "@lib/hooks";
+import { useCheckResourceExists, useRead, useUser } from "@lib/hooks";
 import { ResourceLink } from "@components/resources/common";
 import { Fragment } from "react";
 
@@ -51,6 +57,7 @@ const Resources = () => {
 const RecentlyViewed = () => {
   const nav = useNavigate();
   const recently_viewed = useUser().data?.recently_viewed;
+  const checkResourceExists = useCheckResourceExists();
   return (
     <Section
       title="Recently Viewed"
@@ -58,21 +65,24 @@ const RecentlyViewed = () => {
       actions=""
     >
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {recently_viewed?.slice(0, 6).map(({ type, id }) => (
-          <Fragment key={type + id}>
-            {type !== "System" && (
-              <Card
-                onClick={() => nav(`/${type.toLowerCase()}s/${id}`)}
-                className="px-3 py-2 h-fit hover:bg-accent/50 group-focus:bg-accent/50 transition-colors cursor-pointer"
-              >
-                <CardContent className="flex items-center justify-between gap-4 px-3 py-2 text-sm text-muted-foreground">
-                  <ResourceLink type={type} id={id} />
-                  {type}
-                </CardContent>
-              </Card>
-            )}
-          </Fragment>
-        ))}
+        {recently_viewed
+          ?.filter(checkResourceExists)
+          .slice(0, 6)
+          .map(({ type, id }) => (
+            <Fragment key={type + id}>
+              {type !== "System" && (
+                <Card
+                  onClick={() => nav(`/${type.toLowerCase()}s/${id}`)}
+                  className="px-3 py-2 h-fit hover:bg-accent/50 group-focus:bg-accent/50 transition-colors cursor-pointer"
+                >
+                  <CardContent className="flex items-center justify-between gap-4 px-3 py-2 text-sm text-muted-foreground">
+                    <ResourceLink type={type} id={id} />
+                    {type}
+                  </CardContent>
+                </Card>
+              )}
+            </Fragment>
+          ))}
       </div>
     </Section>
   );