✨(frontend) add UI support for reaction limit on comments

Prevent users from adding more reactions once the per-message
limit has been exceeded. It Disables reaction buttons
when limit is reached

Signed-off-by: Mohamed El Amine BOUKERFA <[email protected]>

Author: maboukerfa

src/backend/core/api/viewsets.py

@@ -2956,9 +2956,11 @@ class CommentViewSet(
     permission_classes = [permissions.CommentPermission]
     pagination_class = Pagination
     serializer_class = serializers.CommentSerializer
-    queryset = models.Comment.objects.select_related("user").prefetch_related(
-        "reactions__users"
-    ).all()
+    queryset = (
+        models.Comment.objects.select_related("user")
+        .prefetch_related("reactions__users")
+        .all()
+    )
 
     def get_queryset(self):
         """Override to filter on related resource."""

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -56,6 +56,7 @@ export interface ConfigResponse {
   MEDIA_BASE_URL?: string;
   POSTHOG_KEY?: PostHogConf;
   SENTRY_DSN?: string;
+  REACTIONS_MAX_PER_COMMENT: number;
   TRASHBIN_CUTOFF_DAYS?: number;
   theme_customization?: ThemeCustomization;
 }

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStoreAuth.tsx

@@ -6,6 +6,7 @@ export class DocsThreadStoreAuth extends ThreadStoreAuth {
   constructor(
     private readonly userId: string,
     public canSee: boolean,
+    private readonly maxReactions: number,
   ) {
     super();
   }
@@ -68,13 +69,27 @@ export class DocsThreadStoreAuth extends ThreadStoreAuth {
     }
 
     if (!emoji) {
-      return true;
+      return comment.reactions.length < this.maxReactions;
     }
 
-    return !comment.reactions.some(
+    const hasReactedWithEmoji = comment.reactions.some(
       (reaction) =>
         reaction.emoji === emoji && reaction.userIds.includes(this.userId),
     );
+
+    if (hasReactedWithEmoji) {
+      return false;
+    }
+
+    const reactionExists = comment.reactions.some(
+      (reaction) => reaction.emoji === emoji,
+    );
+
+    if (reactionExists) {
+      return true;
+    }
+
+    return comment.reactions.length < this.maxReactions;
   }
 
   canDeleteReaction(comment: ClientCommentData, emoji?: string): boolean {

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts

@@ -5,6 +5,7 @@ import { useCunninghamTheme } from '@/cunningham';
 import { User, avatarUrlFromName } from '@/features/auth';
 import { useEditorStore } from '@/features/docs/doc-editor/stores';
 import { Doc, useProviderStore } from '@/features/docs/doc-management';
+import { useConfig } from '@/core';
 
 import { DocsThreadStore } from './DocsThreadStore';
 import { DocsThreadStoreAuth } from './DocsThreadStoreAuth';
@@ -18,6 +19,7 @@ export function useComments(
   const { t } = useTranslation();
   const { themeTokens } = useCunninghamTheme();
   const { setThreadStore } = useEditorStore();
+  const { data: config } = useConfig();
 
   const threadStore = useMemo(() => {
     return new DocsThreadStore(
@@ -26,9 +28,16 @@ export function useComments(
       new DocsThreadStoreAuth(
         encodeURIComponent(user?.full_name || ''),
         canComment,
+        config?.REACTIONS_MAX_PER_COMMENT ?? 0,
       ),
     );
-  }, [docId, canComment, provider?.awareness, user?.full_name]);
+  }, [
+    docId,
+    canComment,
+    provider?.awareness,
+    user?.full_name,
+    config?.REACTIONS_MAX_PER_COMMENT,
+  ]);
 
   useEffect(() => {
     if (canComment) {