Add Random resource retrieval and navigation.

frontend/src/app.tsx

@@ -12,6 +12,7 @@ import UserPage from "./pages/user_page.tsx";
 import EditResourcePage from "./pages/edit_resource_page.tsx";
 import AboutPage from "./pages/about_page.tsx";
 import TagsPage from "./pages/tags_page.tsx";
+import RandomPage from "./pages/random_page.tsx";
 
 export default function App() {
   return (
@@ -30,6 +31,7 @@ export default function App() {
           <Route path={"/resource/edit/:rid"} element={<EditResourcePage />} />
           <Route path={"/about"} element={<AboutPage />} />
           <Route path={"/tags"} element={<TagsPage />} />
+          <Route path={"/random"} element={<RandomPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/components/navigator.tsx

@@ -103,6 +103,17 @@ export default function Navigator() {
                   {"Github"}
                 </a>
               </li>
+              <li
+                onClick={() => {
+                  const menu = document.getElementById(
+                    "navi_menu",
+                  ) as HTMLElement;
+                  menu.blur();
+                  navigate("/random");
+                }}
+              >
+                <a>{t("Random")}</a>
+              </li>
               <li
                 onClick={() => {
                   const menu = document.getElementById(
@@ -143,6 +154,13 @@ export default function Navigator() {
               >
                 <a>{t("Tags")}</a>
               </li>
+              <li
+                onClick={() => {
+                  navigate("/random");
+                }}
+              >
+                <a>{t("Random")}</a>
+              </li>
               <li
                 onClick={() => {
                   navigate("/about");

frontend/src/i18n.ts

@@ -211,6 +211,7 @@ export const i18nData = {
       "Ocean Breeze": "Ocean Breeze",
       "Mint Leaf": "Mint Leaf",
       "Golden Glow": "Golden Glow",
+      "Random": "Random",
     },
   },
   "zh-CN": {
@@ -414,6 +415,8 @@ export const i18nData = {
       "Ocean Breeze": "海蓝",
       "Mint Leaf": "薄荷",
       "Golden Glow": "微光",
+
+      "Random": "随机",
     },
   },
   "zh-TW": {
@@ -617,6 +620,8 @@ export const i18nData = {
       "Ocean Breeze": "海藍",
       "Mint Leaf": "薄荷",
       "Golden Glow": "微光",
+
+      "Random": "隨機",
     },
   },
 };

frontend/src/network/network.ts

@@ -613,6 +613,19 @@ class Network {
     }
   }
 
+  async getRandomResource(): Promise<Response<Resource>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/resource/random`);
+      return response.data;
+    } catch (e: any) {
+      console.error(e);
+      return {
+        success: false,
+        message: e.toString(),
+      };
+    }
+  }
+
   async deleteResource(id: number): Promise<Response<void>> {
     try {
       const response = await axios.delete(`${this.apiBaseUrl}/resource/${id}`);

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();