Refactor adding content and add edit content button

zachspang · zachspang · commit 065eec7703d6 · 2024-11-23T13:51:53.000-08:00
diff --git a/backend/internal/entity/content.go b/backend/internal/entity/content.go
@@ -6,6 +6,7 @@ type Content struct {
 	gorm.Model
 	Title    string `gorm:"size:255;not null;" json:"title"`
 	Path     string `gorm:"size:255;not null;" json:"path"`
+	Body     string `gorm:"size:2000;" json:"body"`
 	ModuleID uint
 	Module   Module `gorm:"foreignKey:ModuleID;references:ID" json:"-"`
 }
diff --git a/backend/internal/handlers/courses.go b/backend/internal/handlers/courses.go
@@ -218,7 +218,7 @@ func CreateModule(c *fiber.Ctx) error {
 
 	//Verify that the account attempting to create a module is the creator of the course
 	if course.CreatorID != creator_id {
-		return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "User is not the course creator"})
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "User is not the course creator"})
 	}
 
 	// Create module
@@ -263,7 +263,7 @@ func CreateContent(c *fiber.Ctx) error {
 
 	//Verify that the account attempting to create content is the creator of the course
 	if module.Course.CreatorID != creator_id {
-		return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "User is not the course creator"})
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "User is not the course creator"})
 	}
 	
 	// Create content database entry
@@ -277,30 +277,84 @@ func CreateContent(c *fiber.Ctx) error {
 		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
 	}
 
-	//Save file
-	file, err := c.FormFile("file");
-	if err != nil{
-		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid file"})
+	return c.JSON(fiber.Map{
+		"message": "Content created successfully",
+		"content": content,
+	})
+}
+
+// Edit content inside a module
+func EditContent(c *fiber.Ctx) error {
+	creator_id, err := strconv.Atoi(c.Params("creator_id"))
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid creator_id"})
 	}
 
-	var fileExtension =  file.Filename[strings.LastIndex(file.Filename, "."):]
+	content_id, err := strconv.Atoi(c.Params("content_id"))
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid content_id"})
+	}
 
-	if err := os.MkdirAll(fmt.Sprintf("./content/%d/", module.Course.ID), 0777); err != nil{
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+	var content entity.Content
+	// Check if the content exists
+	if err := database.DB.Model(entity.Content{}).Preload("Module.Course").Where("id = ?", content_id).First(&content).Error; err != nil {
+		return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Course not found"})
+	}
+
+	module := content.Module
+	//Verify that the account attempting to edit is the creator of the course
+	if module.Course.CreatorID != creator_id {
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "User is not the course creator"})
 	}
 	
-	path := fmt.Sprintf("/%d/%s", module.Course.ID, strconv.FormatUint(uint64(content.ID), 10) + fileExtension)
-	if err := c.SaveFile(file, "./content"+path); err != nil{
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+	title := c.FormValue("title")
+	if title != "" {
+		if err := database.DB.Model(&content).Update("title", title).Error; err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
+	}
+
+	body := c.FormValue("body")
+	if body != "" {
+		if err := database.DB.Model(&content).Update("body", body).Error; err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
 	}
 	
-	// Add the path
-	if err := database.DB.Model(&content).Update("path", path).Error; err != nil{
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+	file, err := c.FormFile("file");
+	if err != nil {
+		if err.Error() != "there is no uploaded file associated with the given key"{
+			return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid file"})
+		}
+	}
+
+	if file != nil {
+		var fileExtension =  file.Filename[strings.LastIndex(file.Filename, "."):]
+
+		if err := os.MkdirAll(fmt.Sprintf("./content/%d/", module.Course.ID), 0777); err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
+		
+		path := fmt.Sprintf("/%d/%s", module.Course.ID, strconv.FormatUint(uint64(content.ID), 10) + fileExtension)
+
+		//Remove previous attachment if there is one
+		if _, err := os.Stat("./content"+path); os.IsExist(err){
+			if err := os.Remove("./content"+path); err != nil{
+				return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+			}
+		}
+		
+		if err := c.SaveFile(file, "./content"+path); err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
+		
+		// Add the path
+		if err := database.DB.Model(&content).Update("path", path).Error; err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
 	}
 
 	return c.JSON(fiber.Map{
-		"message": "Content created successfully",
-		"content": content,
+		"message": "Successfully updated content",
 	})
 }
diff --git a/backend/internal/router/route.go b/backend/internal/router/route.go
@@ -87,5 +87,6 @@ func SetupRoutes(app *fiber.App) {
 	app.Post("/create-course/:creator_id", handlers.CreateCourse)
 	app.Post("/create-module/:creator_id/:course_id", handlers.CreateModule)
 	app.Post("/create-content/:creator_id/:module_id", handlers.CreateContent)
+	app.Post("/edit-content/:creator_id/:content_id", handlers.EditContent)
 	app.Post("/enroll/:user_id/:course_id", handlers.Enroll)
 }
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -55,7 +55,7 @@ services:
       - WATCHPACK_POLLING=true
     volumes:
       - './frontend:/app'
-      - ./content:/app/src/content
+      - ./content:/app/public/content
 
 volumes:
   learning-platform-data:
diff --git a/frontend/src/components/Modal.js b/frontend/src/components/Modal.js
@@ -14,12 +14,20 @@ export const Modal = ({ title, trigger, inputFields, changeHandler, confirmHandl
     const fieldList = Object.entries(inputFields).map(([name, text]) => (
         <div className="p-2" key={name}>
             <label className="block font-medium">{text + ":"}</label>
-            <input
-                className="border-2 border-gray-300 rounded p-2 size-11/12"
-                type="text"
-                name={name}
-                onChange={changeHandler}
-            />
+            {name === "body" ? 
+                <textarea 
+                    className="border-2 border-gray-300 rounded p-2 size-11/12"
+                    type="text"
+                    name={name}
+                    onChange={changeHandler}
+                />: 
+                <input
+                    className="border-2 border-gray-300 rounded p-2 size-11/12"
+                    type="text"
+                    name={name}
+                    onChange={changeHandler}
+                />}
+            
         </div>
     ));
 
diff --git a/frontend/src/components/pages/Content.js b/frontend/src/components/pages/Content.js
@@ -1,14 +1,69 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import Cookies from 'js-cookie';
+import Notiflix from 'notiflix';
+import {Modal} from '../Modal.js';
 
 export function Content() {
     const { courseID }                  = useParams();
     const { contentID }                 = useParams();
     const [courseInfo, setCourseInfo]   = useState(null);
+    const [userInfo, setUserInfo]       = useState(null);
     const [contentInfo, setContentInfo] = useState(null);
     const [error, setError]             = useState(null);
-    
+    const [file, setFile]               = useState(null);
+    const [newContentInfo, setNewContentInfo] = useState({
+        title: "",
+        body: "",
+    });
+
+    const handleContentChange = (e) => {
+        const { name, value } = e.target;
+        setNewContentInfo({...newContentInfo, [name]: value });
+    };
+
+    const handleContentUpload = (e) => {
+        setFile(e.target.files[0]);
+    }
+
+    const handleEditContent = (contentID) => async (e) =>{
+        if (newContentInfo.title === "" && newContentInfo.body === "" && file === null){
+            return
+        } 
+
+        const userId = Cookies.get('userId');
+        try {
+            const formData = new FormData();
+            formData.append("file", file);
+            formData.append("title", newContentInfo.title);
+            formData.append("body", newContentInfo.body)
+            const response = await fetch(`http://localhost:4000/edit-content/${userId}/${contentID}`, {
+                method: "POST",
+                body: formData,
+            });
+
+            const data = await response.json();
+            if (response.ok) {
+                Notiflix.Notify.success("Content creation successful!");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 500);
+            } else {
+                Notiflix.Notify.failure(data.message || "Content creation failed");
+            }
+        } catch (error) {
+            Notiflix.Notify.failure("Error occurred during content creation");
+        }
+    };
+
     useEffect(() => {
+        const userId = Cookies.get('userId');
+
+        if (!userId) {
+            setError('User ID not found');
+            return;
+        }
+
         async function fetchCourse() {
             fetch(`http://localhost:4000/course/${courseID}`)
             .then((response) => {
@@ -33,28 +88,65 @@ export function Content() {
             .catch((error) => setError(error.message));
         }
 
+        async function fetchUser() {
+            await fetch(`http://localhost:4000/user/${userId}`)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then((data) => setUserInfo(data.user))
+            .catch((error) => setError(error.message));
+        }
+
         fetchCourse();
         fetchContent();
+        fetchUser();
     }, [courseID, contentID]);
 
     if (error) return <p>Error: {error}</p>;
-    if (!courseInfo) return <p>Loading...</p>;
-    
-    const images = require.context("../../content", true);
+    if (!courseInfo || !contentInfo || !userInfo) return <p>Loading...</p>;
     
+    let editButton = null;
+    if (userInfo.role === "educator") {
+        editButton = (
+            <Modal
+                title={"Edit Content"}
+                trigger={
+                    <div className="bg-blue-500 p-3 rounded shadow hover:bg-blue-700 m-auto text-center text-sm text-white font-semibold hover:cursor-pointer">
+                        <div>Edit Content</div>
+                    </div>
+                }
+                inputFields={{
+                    title: "Content Name",
+                    body: "Body",
+                }}
+                changeHandler={handleContentChange}
+                confirmHandler={handleEditContent(contentID)}
+                fileUploadHandler={handleContentUpload}
+            />
+
+        );
+    }
+
     return (
         <div className="p-6">
-            <a href={`/courses/${courseID}`}>
-                <span className="text-2xl font-bold mb-4 hover:underline ">{courseInfo.title}</span>
-            </a>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                Course id: {courseID}
+            <div className="flex justify-between">
+                <a href={`/courses/${courseID}`}>
+                    <span className="text-2xl font-bold mb-4 hover:underline ">{courseInfo.title}</span>
+                </a>
+                {editButton}
+            </div>
+            <div className="text-xl font-bold">
+                {contentInfo.title}
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                Content id: {contentID}
+            <div>
+                {contentInfo.body}
             </div>
-            <img src={images("." + contentInfo.path)} alt=""/>
-        
+            {contentInfo.path !== "" ?
+                <img src={process.env.PUBLIC_URL + "/content" + contentInfo.path} alt=""/> : null
+            }
         </div>
 
     );
diff --git a/frontend/src/components/pages/Course.js b/frontend/src/components/pages/Course.js
@@ -9,7 +9,6 @@ export function Course() {
     const [courseInfo, setCourseInfo] = useState(null);
     const [userInfo, setUserInfo]     = useState(null);
     const [error, setError]           = useState(null);
-    const [file, setFile]             = useState(null);
     const [newContentName, setNewContentName] = useState({
         title: "",
     });
@@ -58,19 +57,14 @@ export function Course() {
         setNewContentName({[name]: value });
     };
 
-    const handleContentUpload = (e) => {
-        setFile(e.target.files[0]);
-    }
-
     const handleCreateContent = (moduleID) => async (e) =>{
-        if (newContentName.title === "" || file === null){
+        if (newContentName.title === ""){
             return
         } 
 
         const userId = Cookies.get('userId');
         try {
             const formData = new FormData();
-            formData.append("file", file);
             formData.append("title", newContentName.title);
             const response = await fetch(`http://localhost:4000/create-content/${userId}/${moduleID}`, {
                 method: "POST",
@@ -162,7 +156,6 @@ export function Course() {
                             }}
                             changeHandler={handleContentChange}
                             confirmHandler={handleCreateContent(module.ID)}
-                            fileUploadHandler={handleContentUpload}
                         />
                     </div>
                     <div>
@@ -207,7 +200,6 @@ export function Course() {
                 <h1 className="text-2xl font-bold mb-4">{courseInfo.title}</h1>
                 {createButton}
             </div>
-            
             <div className="grid grid-cols-1 gap-6">
                 {moduleList}
             </div>

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ type Content struct {`
`6`	`6`	`gorm.Model`
`7`	`7`	Title string `gorm:"size:255;not null;" json:"title"`
`8`	`8`	Path string `gorm:"size:255;not null;" json:"path"`
	`9`	+ Body string `gorm:"size:2000;" json:"body"`
`9`	`10`	`ModuleID uint`
`10`	`11`	Module Module `gorm:"foreignKey:ModuleID;references:ID" json:"-"`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -87,5 +87,6 @@ func SetupRoutes(app *fiber.App) {`
`87`	`87`	`app.Post("/create-course/:creator_id", handlers.CreateCourse)`
`88`	`88`	`app.Post("/create-module/:creator_id/:course_id", handlers.CreateModule)`
`89`	`89`	`app.Post("/create-content/:creator_id/:module_id", handlers.CreateContent)`
	`90`	`+ app.Post("/edit-content/:creator_id/:content_id", handlers.EditContent)`
`90`	`91`	`app.Post("/enroll/:user_id/:course_id", handlers.Enroll)`
`91`	`92`	`}`