Add Random resource retrieval and navigation.

frontend/src/pages/random_page.tsx

@@ -0,0 +1,28 @@
+import Loading from "../components/loading.tsx";
+import { useNavigate } from "react-router";
+import { useEffect } from "react";
+import { network } from "../network/network.ts";
+import showToast from "../components/toast.ts";
+
+export default function RandomPage() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    network.getRandomResource().then((res) => {
+      if (res.success) {
+        navigate(`/resources/${res.data!.id}`, {
+          state: {
+            resource: res.data,
+          },
+        });
+      } else {
+        showToast({
+          type: "error",
+          message: res.message || "Failed to fetch random resource",
+        });
+      }
+    });
+  }, [navigate]);
+
+  return <Loading />;
+}

frontend/src/pages/resource_details_page.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from "react-router";
+import { useLocation, useNavigate, useParams } from "react-router";
 import {
   createContext,
   createRef,
@@ -57,6 +57,8 @@ export default function ResourcePage() {
 
   const [page, setPage] = useState(0);
 
+  const location = useLocation();
+
   const reload = useCallback(async () => {
     if (!isNaN(id)) {
       setResource(null);
@@ -76,16 +78,20 @@ export default function ResourcePage() {
   useEffect(() => {
     setResource(null);
     if (!isNaN(id)) {
-      network.getResourceDetails(id).then((res) => {
-        if (res.success) {
-          setResource(res.data!);
-          document.title = res.data!.title;
-        } else {
-          showToast({ message: res.message, type: "error" });
-        }
-      });
+      if (location.state) {
+        setResource(location.state.resource);
+      } else {
+        network.getResourceDetails(id).then((res) => {
+          if (res.success) {
+            setResource(res.data!);
+            document.title = res.data!.title;
+          } else {
+            showToast({ message: res.message, type: "error" });
+          }
+        });
+      }
     }
-  }, [id]);
+  }, [id, location.state]);
 
   const navigate = useNavigate();