Add ability to set featured blogs

backend/apimanager/serializers.py

@@ -1,8 +1,3 @@
-from django.contrib.auth import get_user_model, authenticate, login, logout
-from django.contrib.auth.models import User
-from django.db.models import Q
-from django.urls import reverse
-from django.utils import timezone
 from rest_framework import serializers
 from .models import (
 	UserData, 
@@ -59,7 +54,7 @@ class BlogSerializer(serializers.ModelSerializer):
 
 
 class UnifiedCategoryBlogSerializer(serializers.ModelSerializer):
-	blog_metadata = serializers.SerializerMethodField()  # Custom field for related blogs
+	blog_metadata = serializers.SerializerMethodField()
 
 	class Meta:
 		model = Category
@@ -74,22 +69,18 @@ class UnifiedCategoryBlogSerializer(serializers.ModelSerializer):
 		]
 
 	def get_blog_metadata(self, obj):
-		# Serializes all blogs related to the category, assuming `blogs` as the related_name
 		blogs = obj.blogs.all()
 		return [{
-			'blog_id': blog.blog_id,  # Using UUID
+			'blog_id': blog.blog_id,
 			'name': blog.name,
 			'description': blog.description,
 			'cover_image': blog.cover_image,
 			'tagline': blog.tagline,
 			'parent_category': blog.parent_category.category_id
-			# Assuming parent_category is a reference to a Category object
 		} for blog in blogs]
 
 	def to_representation(self, instance):
 		representation = super().to_representation(instance)
-		# Set a featured blog based on some logic, e.g., the first blog
-		representation['featured_id'] = instance.blogs.first().blog_id if instance.blogs.exists() else None
 		return representation
 
 class MediaSerializer(serializers.Serializer):

frontend/src/components/editable/blog-list.jsx

@@ -81,6 +81,15 @@ function BlogList(props) {
       });
   }
 
+  const updateFeaturedBlog = (featuredId) => {
+    EditableDataService.updateData(`/data/category/update/${categoryID}/`, {"featured_id": featuredId}).then(response=>{
+      if (featuredId)
+        props.notificationToggler('Blog set as featured')
+      else props.notificationToggler('Featured blog removed')
+      loadBlogs()
+    })
+  }
+
   if (GlobalTheme && ThemeConfig) {
 return (
   <Container fluid className={`mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}>
@@ -105,6 +114,8 @@ return (
                 <CardListViewer
                   key={item.blog_id} // Ensuring keys are unique and correct
                   totalItems={categoryData.blogMetadata.length}
+                  featuredBlog={categoryData.featuredBlog}
+                  updateFeaturedBlog={updateFeaturedBlog}
                   cardType={"smallCard"}
                   resourceType={"blog"}
                   textColor={ThemeConfig[GlobalTheme].textColor}

frontend/src/components/editable/blog.jsx

@@ -101,7 +101,7 @@ function Blog(props) {
   return (
     <Container fluid className={`${ThemeConfig[GlobalTheme].background}`}>
       <ModalComponent modalText={modalText} modalTitle={modalTitle} modal={modal} toggle={toggle} confirmAction={deleteResource}/>
-      <MediaUpload setMedia={setCoverImage} notificationToggler={props.notificationToggler} modal={fileModal} toggle={toggleFileModal} resourceType='homepage' resourceId='homepage'></MediaUpload>
+      <MediaUpload setMedia={setCoverImage} notificationToggler={props.notificationToggler} modal={fileModal} toggle={toggleFileModal} resourceType='blog' resourceId={blogData.id}></MediaUpload>
       <Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/${blogData.parentCategory}`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
       <CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
       <Row className="mb-4">

frontend/src/components/editable/category-list.jsx

@@ -79,7 +79,7 @@ function Blogs(props) {
   const addNewCategory = () => {
     EditableDataService.createData('/data/category/create/', {
       "name": "Enter name",
-      "featured_blog": "",
+      "featured_id": "",
       "description": "Enter description",
       "tagline": "Enter tagline",
       "cover_image": ""

frontend/src/components/editable/shared/card-list-viewer.jsx

@@ -139,6 +139,22 @@ function CardListViewer(props) {
             </CardText>
             </Link>
           </CardBody>
+          <ButtonGroup>
+            <Button
+              outline
+              active={itemObject.id === props.featuredBlog}
+              onClick={() => props.updateFeaturedBlog(itemObject.id)}
+            >
+              Set this as featured
+            </Button>
+            <Button
+              outline
+              onClick={() => props.updateFeaturedBlog('')}
+            >
+              Unset featured blog
+            </Button>
+          </ButtonGroup>
+
         </Card>
       )
   }