From 196c9d875ff21ccb8dba800926a65f38253fc459 Mon Sep 17 00:00:00 2001
From: Rykkel <220993G@mymail.nyp.edu.sg>
Date: Sat, 10 Aug 2024 13:32:44 +0800
Subject: [PATCH] Compressed img & fixed img in postpage

---
 client/src/pages/CommunityPage.tsx |  3 +--
 client/src/pages/PostPage.tsx      | 13 +++++++++++--
 server/routes/post.js              | 27 ++++++++++++++++++++++-----
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/CommunityPage.tsx b/client/src/pages/CommunityPage.tsx
index 51660bf..278175c 100644
--- a/client/src/pages/CommunityPage.tsx
+++ b/client/src/pages/CommunityPage.tsx
@@ -261,8 +261,7 @@ export default function CommunityPage() {
                           <img
                             src={`${config.serverAddress}/post/post-image/${post.id}`}
                             className="w-[300px] h-auto rounded-lg object-cover"
-                            onError={() => handleImageError(post.id)}
-                          />
+                            onError={() => handleImageError(post.id)} />
                         </div>
                       )}
                     </div>
diff --git a/client/src/pages/PostPage.tsx b/client/src/pages/PostPage.tsx
index 22af39a..e3c8ceb 100644
--- a/client/src/pages/PostPage.tsx
+++ b/client/src/pages/PostPage.tsx
@@ -54,10 +54,18 @@ const PostPage: React.FC = () => {
 
   useEffect(() => {
     if (id) {
+      console.log("useEffect for fetching post called, id:", id);
       instance.get(`${config.serverAddress}/post/${id}`)
-        .then((res) => setPost(res.data))
+        .then((res) => {
+          setPost(res.data);
+          console.log("Post fetch successfully");
+        })
         .catch((error) => console.error("Error fetching post:", error));
     }
+  }, [id]);
+
+  useEffect(() => {
+    console.log("PostPage component mounted");
   }, []);
 
   useEffect(() => {
@@ -189,7 +197,8 @@ const PostPage: React.FC = () => {
                     </div>
                     {!imageErrorFlags[post.id] && post.postImage && post.postImage !== null && (
                       <div>
-                        <img src={`${config.serverAddress}/post/post-image/${post.id}`}
+                        <img
+                          src={`${config.serverAddress}/post/post-image/${post.id}`}
                           alt="PostImage"
                           className="w-[300px] h-auto rounded-lg object-cover"
                           onError={() => handleImageError(post.id)} />
diff --git a/server/routes/post.js b/server/routes/post.js
index d68fd7a..2ca13a9 100644
--- a/server/routes/post.js
+++ b/server/routes/post.js
@@ -61,6 +61,17 @@ router.post(
 
       let postImage = files.postImage ? files.postImage[0].buffer : null;
 
+      // Resize and compress image if it exists
+      if (postImage) {
+        postImage = await sharp(postImage)
+          .resize(512, 512, {
+            fit: sharp.fit.inside,
+            withoutEnlargement: true,
+          })
+          .jpeg({ quality: 80 })
+          .toBuffer();
+      }
+
       // Process valid data
       let result = await Post.create({ ...data, postImage });
       res.json(result);
@@ -82,7 +93,6 @@ router.post(
 router.get("/", async (req, res) => {
   let condition = {
     where: {},
-    attributes: { exclude: ["postImage"] },
     order: [["createdAt", "DESC"]],
   };
 
@@ -102,9 +112,8 @@ router.get("/", async (req, res) => {
 
 router.get("/:id", async (req, res) => {
   let id = req.params.id;
-  let post = await Post.findByPk(id, {
-    attributes: { exclude: ["postImage"] },
-  });
+  let post = await Post.findByPk(id);
+
   if (!post) {
     res.sendStatus(404);
     return;
@@ -170,8 +179,16 @@ router.put(
         });
       }
 
-      // Include the postImage if present
+      // Include the postImage if present 
       if (postImage) {
+        postImage = await sharp(postImage)
+          .resize(512, 512, {
+            fit: sharp.fit.inside,
+            withoutEnlargement: true,
+          })
+          .jpeg({ quality: 80 })
+          .toBuffer();
+
         data.postImage = postImage;
       }