Add pre-fetch data handling for resources, users, and comments

frontend/src/app.ts

@@ -63,6 +63,21 @@ class App {
   canUpload() {
     return this.isLoggedIn() && (this.user?.can_upload || this.isAdmin());
   }
+
+  getPreFetchData() {
+    const preFetchDataElement = document.getElementById("pre_fetch_data");
+    if (preFetchDataElement) {
+      let content = preFetchDataElement.textContent
+      if (!content) {
+        return null;
+      }
+      content = decodeURIComponent(content);
+      const res = JSON.parse(content);
+      preFetchDataElement.remove();
+      return res;
+    }
+    return null;
+  }
 }
 
 export const app = new App();

frontend/src/pages/comment_page.tsx

@@ -54,6 +54,11 @@ export default function CommentPage() {
       });
       return;
     }
+    const preFetchData = app.getPreFetchData();
+    if (preFetchData?.comment?.id === id) {
+      setComment(preFetchData.comment);
+      return;
+    }
     network.getComment(id).then((res) => {
       if (res.success) {
         setComment(res.data!);

frontend/src/pages/resource_details_page.tsx

@@ -90,14 +90,19 @@ export default function ResourcePage() {
       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" });
-          }
-        });
+        const preFetchData = app.getPreFetchData();
+        if (preFetchData?.resource?.id === id) {
+          setResource(preFetchData.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, location.state]);

frontend/src/pages/user_page.tsx

@@ -14,6 +14,7 @@ import {
   MdOutlinePhotoAlbum,
 } from "react-icons/md";
 import { useTranslation } from "react-i18next";
+import { app } from "../app.ts";
 
 export default function UserPage() {
   const [user, setUser] = useState<User | null>(null);
@@ -50,6 +51,11 @@ export default function UserPage() {
   };
 
   useEffect(() => {
+    const preFetchData = app.getPreFetchData();
+    if (preFetchData?.user?.username === username) {
+      setUser(preFetchData.user);
+      return;
+    }
     network.getUserInfo(username || "").then((res) => {
       if (res.success) {
         setUser(res.data!);