Add tagged resources page.

frontend/src/app.tsx

@@ -8,6 +8,7 @@ import SearchPage from "./pages/search_page.tsx";
 import ResourcePage from "./pages/resource_details_page.tsx";
 import "./i18n.ts"
 import ManagePage from "./pages/manage_page.tsx";
+import TaggedResourcesPage from "./pages/tagged_resources_page.tsx";
 
 export default function App() {
   return (
@@ -21,6 +22,7 @@ export default function App() {
           <Route path={"/search"} element={<SearchPage/>} />
           <Route path={"/resources/:id"} element={<ResourcePage/>}/>
           <Route path={"/manage"} element={<ManagePage/>}/>
+          <Route path={"/tag/:tag"} element={<TaggedResourcesPage/>}/>
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/components/resources_view.tsx

@@ -17,7 +17,7 @@ export default function ResourcesView({loader}: {loader: (page: number) => Promi
     isLoadingRef.current = true
     const res = await loader(pageRef.current)
     if (!res.success) {
-      showToast({message: "Error loading resources", type: "error"})
+      showToast({message: res.message, type: "error"})
     } else {
       isLoadingRef.current = false
       pageRef.current = pageRef.current + 1

frontend/src/index.css

@@ -124,4 +124,9 @@ body {
     100% {
         top: -100%;
     }
+}
+
+.text-md {
+    font-size: 1rem;
+    line-height: 1.5rem;
 }

frontend/src/network/network.ts

@@ -308,6 +308,23 @@ class Network {
     }
   }
 
+  async getResourcesByTag(tag: string, page: number): Promise<PageResponse<Resource>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/resource/tag/${tag}`, {
+        params: {
+          page
+        }
+      })
+      return response.data
+    } catch (e: any) {
+      console.error(e)
+      return {
+        success: false,
+        message: e.toString(),
+      }
+    }
+  }
+
   async searchResources(keyword: string, page: number): Promise<PageResponse<Resource>> {
     try {
       const response = await axios.get(`${this.apiBaseUrl}/resource/search`, {

frontend/src/pages/resource_details_page.tsx

@@ -1,4 +1,4 @@
-import {useParams} from "react-router";
+import {useNavigate, useParams} from "react-router";
 import {createContext, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {ResourceDetails, RFile, Storage, Comment} from "../network/models.ts";
 import {network} from "../network/network.ts";
@@ -49,6 +49,8 @@ export default function ResourcePage() {
     }
   }, [id])
 
+  const navigate = useNavigate()
+
   if (isNaN(id)) {
     return <div className="alert alert-error shadow-lg">
       <div>
@@ -84,7 +86,9 @@ export default function ResourcePage() {
       <p className={"px-4 pt-2"}>
         {
           resource.tags.map((e) => {
-            return <span key={e.id} className="badge badge-primary mr-2 text-sm">{e.name}</span>
+            return <span key={e.id} className="badge badge-primary mr-2 text-sm cursor-pointer" onClick={() => {
+              navigate(`/tag/${e.name}`);
+            }}>{e.name}</span>
           })
         }
       </p>

frontend/src/pages/tagged_resources_page.tsx

@@ -0,0 +1,23 @@
+import {useParams} from "react-router";
+import {ErrorAlert} from "../components/alert.tsx";
+import ResourcesView from "../components/resources_view.tsx";
+import {network} from "../network/network.ts";
+
+export default function TaggedResourcesPage() {
+  const {tag} = useParams()
+
+  if (!tag) {
+    return <div>
+      <ErrorAlert message={"Tag not found"}/>
+    </div>
+  }
+
+  return <div>
+    <h1 className={"text-2xl pt-4 pb-2 px-4"}>
+      {tag}
+    </h1>
+    <ResourcesView loader={(page) => {
+      return network.getResourcesByTag(tag, page)
+    }}></ResourcesView>
+  </div>
+}