SUMMA-35: ImageService processing frontend

backend/src/modules/content/controllers/content.controller.ts

@@ -45,7 +45,7 @@ export class ContentController {
       const file = files.thumbnail[0];
       const fileName = file.newFilename;
       const fileType = file.mimetype;
-      const filePath = file.filepath; // Use 'filepath' for formidable v2+
+      const filePath = file.filepath; 
 
       try {
         if (!filePath) {
@@ -54,10 +54,10 @@ export class ContentController {
 
         // Pass the file object with the correct path to StorageService
         const response = await StorageService.uploadFile(
-          { ...file, path: filePath }, // Ensure 'path' is set if your StorageService expects it
+          { ...file, path: filePath }, 
           "thumbnails",
           fileName,
-          fileType,
+          fileType
         );
         res.status(201).json(response);
       } catch (error: any) {
@@ -86,15 +86,16 @@ export class ContentController {
 
   static async editContent(req: Request, res: Response) {
     console.log("Fetching Content...");
-    const { contentId, userId } = req.params;
-    const { data } = req.body;
+    const { contentId } = req.params;
+    const data = req.body;
+    const uid = req.user?.uid;
 
     try {
       // const confirmation = await axios.get(`${apiURL}/content/${contentId}`)
       const confirmation = await ContentService.getContent(contentId);
       const owner_id = confirmation?.creatorUID;
 
-      if (userId == owner_id) {
+      if (uid == owner_id) {
         //check whether they are allowed to edit the content
         const response = await ContentService.editContent(contentId, data);
         res.status(200).json(response);
@@ -104,7 +105,7 @@ export class ContentController {
     } catch (error: any) {
       console.log(error);
       res
-        .status(401)
+        .status(500)
         .json({ error: error.message || "Failed to edit content" });
     }
   }
@@ -156,7 +157,7 @@ export class ContentController {
               file,
               "thumbnails",
               fileName,
-              fileType,
+              fileType
             );
 
             const updateData = JSON.parse(fields.data);

backend/src/modules/content/routes/content.routes.ts

@@ -1,6 +1,7 @@
 import { Router } from "express";
 import { ContentController } from "../controllers/content.controller";
 import commentRouter from "./comment.routes";
+import { authenticateToken } from "../../../shared/middleware/auth";
 
 const contentRoutes = Router();
 
@@ -23,7 +24,11 @@ contentRoutes.put("/shares/:contentId", ContentController.incrementShareCount);
 
 contentRoutes.delete("/:contentId", ContentController.deleteContent); // Delete content by ID
 
-contentRoutes.put("/:contentId/:userId", ContentController.editContent); // Edit content by ID
+contentRoutes.put(
+  "/:contentId",
+  authenticateToken,
+  ContentController.editContent
+); // Edit content by ID
 contentRoutes.put(
   "/editThumbnail/:contentId/:userId",
   ContentController.editContentAndThumbnail

backend/src/modules/storage/services/storage.service.ts

@@ -107,14 +107,18 @@ export class StorageService {
         throw new Error("No valid file data found (no filepath or buffer).");
       }
 
+      // Saving File to direct path
       fileName = `${fileName}${fileType ? `.${fileType.split("/")[1]}` : ""}`;
-
       const fullPath = path.join(dir, fileName);
       await fs.writeFile(fullPath, fileBuffer);
       logger.info(`File saved locally at ${fullPath}`);
 
+      // Returning URL for the file
+      const urlPath = `${filePath}/${fileName}`;
+      const url = `http://localhost:3000/local_uploads/${urlPath}`;
+
       // Return the absolute file system path
-      return { url: fullPath };
+      return { url };
     } catch (error: any) {
       logger.error("Local upload error:", error);
       throw new Error(`Local upload failed: ${error.message}`);

frontend/eslint.config.js

@@ -1,28 +1,29 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
+      "react-hooks/exhaustive-deps": "off",
     },
-  },
-)
+  }
+);

frontend/src/App.tsx

@@ -100,7 +100,14 @@ export default function App() {
             <Route path='/legal/accessibility' element={<Accessibility />} />
 
             {/* CONTENT */}
-            <Route path='/content/create' element={<ContentEditor />} />
+            <Route
+              path='/content/create'
+              element={<ContentEditor isEditMode={false} />}
+            />
+            <Route
+              path='/content/edit/:id'
+              element={<ContentEditor isEditMode={true} />}
+            />
             <Route path='/content/:id' element={<ContentView />} />
 
             {/* PRO */}

frontend/src/components/content/CommentList.tsx

@@ -54,8 +54,11 @@ export default function CommentList({
       setLoading(false);
       return;
     }
-    setComments(commentsResult);
-    setNumComments(commentsResult.length);
+
+    if (commentsResult) {
+      setComments(commentsResult);
+      setNumComments(commentsResult.length);
+    }
     setLoading(false);
   };