From 0eedb5052a28f8918cb9c2ec1745fc00e4afd524 Mon Sep 17 00:00:00 2001
From: DreamBot706 <187842058+DreamBot706@users.noreply.github.com>
Date: Fri, 11 Jul 2025 06:54:19 +0000
Subject: [PATCH] refresh thumbnail link if expred

---
 client/src/api/File.js                        |  7 ++
 .../browse/components/file-display/index.jsx  | 66 ++++++++++++-------
 server/modules/onedrive/onedrive.routes.js    | 18 +++++
 3 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/client/src/api/File.js b/client/src/api/File.js
index 55e7a1c4..2e2a360f 100644
--- a/client/src/api/File.js
+++ b/client/src/api/File.js
@@ -11,3 +11,10 @@ export const previewFile = async (fileId) => {
     const { data } = await axios.get(`${serverRoot}/api/file/preview/${fileId}`);
     return data;
 };
+
+export const getThumbnail = async (fileId) => {
+    const resp = await axios.post(`${serverRoot}/api/file/thumbnail`, {
+        fileId: fileId,
+    });
+    console.log("Thumbnail Refreshed");
+}
diff --git a/client/src/screens/browse/components/file-display/index.jsx b/client/src/screens/browse/components/file-display/index.jsx
index b14520d1..9337598a 100644
--- a/client/src/screens/browse/components/file-display/index.jsx
+++ b/client/src/screens/browse/components/file-display/index.jsx
@@ -4,12 +4,13 @@ import { AddToFavourites } from "../../../../api/User";
 import { toast } from "react-toastify";
 import { useDispatch, useSelector } from "react-redux";
 import { UpdateFavourites } from "../../../../actions/user_actions";
-import { donwloadFile, previewFile } from "../../../../api/File";
-import { AddPreviewUrl, AddDownloadUrl } from "../../../../actions/url_actions";
-import { CopyToClipboard } from "react-copy-to-clipboard";
+import { getCourse } from "../../../../api/Course.js";
+import { UpdateCourses } from "../../../../actions/filebrowser_actions.js";
+import { donwloadFile, previewFile, getThumbnail } from "../../../../api/File";
 import clientRoot from "../../../../api/client";
 import capitalise from "../../../../utils/capitalise.js";
 import Share from "../../../share";
+
 const FileDisplay = ({ file, path, code }) => {
     const fileSize = formatFileSize(file.size);
     const fileType = formatFileType(file.name);
@@ -36,7 +37,6 @@ const FileDisplay = ({ file, path, code }) => {
     const dispatch = useDispatch();
 
     const preview_url = file.webUrl;
-
     const handleShare = () => {
         const sectionShare = document.getElementById("share");
         sectionShare.classList.add("show");
@@ -48,27 +48,27 @@ const FileDisplay = ({ file, path, code }) => {
             return;
         }
         window.open(file.downloadUrl);
-    //     const openedWindow = window.open("", "_blank");
-    //     openedWindow.document.write("Please close this window after download starts.");
-    //     const existingUrl = urls.downloadUrls.find((data) => data.id === file.id);
-    //     if (existingUrl) {
-    //         openedWindow.location.href = existingUrl.url;
-    //         return;
-    //     }
-    //     const response = donwloadFile(file.id);
-    //     toast.promise(response, {
-    //         pending: "Generating download link...",
-    //         success: "Downloading file....",
-    //         error: "Something went wrong!",
-    //     });
-    //     response
-    //         .then((data) => {
-    //             dispatch(AddDownloadUrl(file.id, data.url));
-    //             openedWindow.location.href = data.url;
-    //         })
-    //         .catch(() => {
-    //             openedWindow.close();
-    //         });
+        //     const openedWindow = window.open("", "_blank");
+        //     openedWindow.document.write("Please close this window after download starts.");
+        //     const existingUrl = urls.downloadUrls.find((data) => data.id === file.id);
+        //     if (existingUrl) {
+        //         openedWindow.location.href = existingUrl.url;
+        //         return;
+        //     }
+        //     const response = donwloadFile(file.id);
+        //     toast.promise(response, {
+        //         pending: "Generating download link...",
+        //         success: "Downloading file....",
+        //         error: "Something went wrong!",
+        //     });
+        //     response
+        //         .then((data) => {
+        //             dispatch(AddDownloadUrl(file.id, data.url));
+        //             openedWindow.location.href = data.url;
+        //         })
+        //         .catch(() => {
+        //             openedWindow.close();
+        //         });
     };
 
     const handlePreview = async () => {
@@ -88,6 +88,22 @@ const FileDisplay = ({ file, path, code }) => {
 
     return (
         <div className="file-display">
+            <img
+                src={file.thumbnail}
+                style={{ display: "none" }}
+                onError={() => {
+                    async function thumbnailrefresh() {
+                        await getThumbnail(file.fileId);
+                        let loadingCourseToastId = toast.loading("Loading course data...");
+                        const currCourse = await getCourse(code);
+                        const { data } = currCourse;
+                        toast.dismiss(loadingCourseToastId);
+                        dispatch(UpdateCourses(data));
+                        location.reload();
+                    }
+                    thumbnailrefresh();
+                }}
+            />
             <div
                 className="img-preview"
                 style={{
diff --git a/server/modules/onedrive/onedrive.routes.js b/server/modules/onedrive/onedrive.routes.js
index 4efb4e62..26c158bd 100644
--- a/server/modules/onedrive/onedrive.routes.js
+++ b/server/modules/onedrive/onedrive.routes.js
@@ -118,6 +118,24 @@ router.get(
         res.send(data);
     })
 );
+router.post(
+    "/thumbnail",
+    catchAsync(async (req, res, next) => {
+        const fileId = req.body.fileId;
+        const thumbnaillink = `https://graph.microsoft.com/v1.0/me/drive/items/${fileId}/thumbnails`;
+        const access_token = await getAccessToken();
+        const thumbnaildata = await axios.get(thumbnaillink,
+            {
+                headers: {
+                    Authorization: `Bearer ${access_token}`,
+                }
+            }
+        )
+        const thumbnailurl = thumbnaildata.data.value?.[0]?.medium?.url;
+        await FileModel.updateOne({fileId}, { $set: {thumbnail: thumbnailurl}});
+        return res.status(200).json(thumbnailurl);
+    })
+)
 
 router.get(
     "/:id",