Merge pull request #163 from shancds/fix/customer-feedback

refactor(project-view-updates): optimize comment handling and renderi…
2025-06-19 13:47:55 +05:30
parent a0cf5099f8 ece614941e
commit 69cd40dc95
4 changed files with 162 additions and 70 deletions
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
@@ -18,6 +18,7 @@ import { colors } from '@/styles/colors';
 import AttachmentsGrid from '../attachments/attachments-grid';
 import { TFunction } from 'i18next';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
+import { sanitizeHtml } from '@/utils/sanitizeInput';

 // Helper function to format date for time separators
 const formatDateForSeparator = (date: string) => {
@@ -56,6 +57,32 @@ const processMentions = (content: string) => {
  return content.replace(/@(\w+)/g, '<span class="mentions">@$1</span>');
 };

+// Utility to linkify URLs in text
+const linkify = (text: string) => {
+  if (!text) return '';
+  // Regex to match URLs (http, https, www)
+  return text.replace(/(https?:\/\/[^\s]+|www\.[^\s]+)/g, (url) => {
+    let href = url;
+    if (!href.startsWith('http')) {
+      href = 'http://' + href;
+    }
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+  });
+};
+
+// Helper function to process mentions and links in content
+const processContent = (content: string) => {
+  if (!content) return '';
+  // First, linkify URLs
+  let processed = linkify(content);
+  // Then, process mentions (if not already processed)
+  if (!hasProcessedMentions(processed)) {
+    processed = processMentions(processed);
+  }
+  // Sanitize the final HTML (allowing <a> and <span class="mentions">)
+  return sanitizeHtml(processed);
+};
+
 const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => {
  const [loading, setLoading] = useState(true);
  const [comments, setComments] = useState<ITaskCommentViewModel[]>([]);
@@ -80,10 +107,10 @@ const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => {
            return dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1;
          });

-          // Process mentions in content
+          // Process content (mentions and links)
          sortedComments.forEach(comment => {
-            if (comment.content && !hasProcessedMentions(comment.content)) {
-              comment.content = processMentions(comment.content);
+            if (comment.content) {
+              comment.content = processContent(comment.content);
            }
          });

@@ -184,9 +211,9 @@ const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => {

  const commentUpdated = (comment: ITaskCommentViewModel) => {
    comment.edit = false;
-    // Process mentions in updated content
-    if (comment.content && !hasProcessedMentions(comment.content)) {
-      comment.content = processMentions(comment.content);
+    // Process content (mentions and links) in updated comment
+    if (comment.content) {
+      comment.content = processContent(comment.content);
    }
    setComments([...comments]); // Force re-render
  };
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
@@ -103,7 +103,6 @@ const InfoTabFooter = () => {
    })) ?? [];

  const memberSelectHandler = useCallback((member: IMentionMemberSelectOption) => {
-    console.log('member', member);
    if (!member?.value || !member?.label) return;
    
    // Find the member ID from the members list using the name
--- a/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx
+++ b/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx
@@ -1,5 +1,5 @@
-import { Button, ConfigProvider, Flex, Form, Mentions, Skeleton, Space, Tooltip, Typography } from 'antd';
-import { useEffect, useState, useCallback } from 'react';
+import { Button, ConfigProvider, Flex, Form, Mentions, Skeleton, Space, Tooltip, Typography, Dropdown, Menu, Popconfirm } from 'antd';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import DOMPurify from 'dompurify';
 import { useParams } from 'react-router-dom';
@@ -10,7 +10,6 @@ import {
  IMentionMemberSelectOption,
  IMentionMemberViewModel,
 } from '@/types/project/projectComments.types';
-import { projectsApiService } from '@/api/projects/projects.api.service';
 import { projectCommentsApiService } from '@/api/projects/comments/project-comments.api.service';
 import { IProjectUpdateCommentViewModel } from '@/types/project/project.types';
 import { calculateTimeDifference } from '@/utils/calculate-time-difference';
@@ -21,6 +20,19 @@ import { DeleteOutlined } from '@ant-design/icons';

 const MAX_COMMENT_LENGTH = 2000;

+// Compile RegExp once for linkify
+const urlRegex = /((https?:\/\/|www\.)[\w\-._~:/?#[\]@!$&'()*+,;=%]+)/gi;
+
+function linkify(text: string): string {
+  return text.replace(
+    urlRegex,
+    url => {
+      const href = url.startsWith('http') ? url : `https://${url}`;
+      return `<a href="${href}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+    }
+  );
+}
+
 const ProjectViewUpdates = () => {
  const { projectId } = useParams();
  const [characterLength, setCharacterLength] = useState<number>(0);
@@ -68,7 +80,7 @@ const ProjectViewUpdates = () => {
    }
  }, [projectId]);

-  const handleAddComment = async () => {
+  const handleAddComment = useCallback(async () => {
    if (!projectId || characterLength === 0) return;

    try {
@@ -88,7 +100,16 @@ const ProjectViewUpdates = () => {

      const res = await projectCommentsApiService.createProjectComment(body);
      if (res.done) {
-        await getComments();
+        setComments(prev => [
+          ...prev,
+          {
+            ...(res.body as IProjectUpdateCommentViewModel),
+            created_by: getUserSession()?.name || '',
+            created_at: new Date().toISOString(),
+            content: commentValue.trim(),
+            mentions: (res.body as IProjectUpdateCommentViewModel).mentions ?? [undefined, undefined],
+          }
+        ]);
        handleCancel();
      }
    } catch (error) {
@@ -96,15 +117,13 @@ const ProjectViewUpdates = () => {
    } finally {
      setIsSubmitting(false);
      setCommentValue('');
-
-
    }
-  };
+  }, [projectId, characterLength, commentValue, selectedMembers, getComments]);

  useEffect(() => {
    void getMembers();
    void getComments();
-  }, [getMembers, getComments,refreshTimestamp]);
+  }, [getMembers, getComments, refreshTimestamp]);

  const handleCancel = useCallback(() => {
    form.resetFields(['comment']);
@@ -113,14 +132,16 @@ const ProjectViewUpdates = () => {
    setSelectedMembers([]);
  }, [form]);

-  const mentionsOptions =
+  const mentionsOptions = useMemo(() => 
    members?.map(member => ({
      value: member.id,
      label: member.name,
-    })) ?? [];
+    })) ?? [], [members]
+  );

  const memberSelectHandler = useCallback((member: IMentionMemberSelectOption) => {
    if (!member?.value || !member?.label) return;
+    
    setSelectedMembers(prev =>
      prev.some(mention => mention.id === member.value)
        ? prev
@@ -131,13 +152,11 @@ const ProjectViewUpdates = () => {
      const parts = prev.split('@');
      const lastPart = parts[parts.length - 1];
      const mentionText = member.label;
-      // Keep only the part before the @ and add the new mention
      return prev.slice(0, prev.length - lastPart.length) + mentionText;
    });
  }, []);

  const handleCommentChange = useCallback((value: string) => {
-    // Only update the value without trying to replace mentions    
    setCommentValue(value);
    setCharacterLength(value.trim().length);
  }, []);
@@ -157,15 +176,58 @@ const ProjectViewUpdates = () => {
    [getComments]
  );

+  // Memoize link click handler for comment links
+  const handleCommentLinkClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'A') {
+      e.preventDefault();
+      const href = (target as HTMLAnchorElement).getAttribute('href');
+      if (href) {
+        window.open(href, '_blank', 'noopener,noreferrer');
+      }
+    }
+  }, []);
+
+  const configProviderTheme = useMemo(() => ({
+    components: {
+      Button: {
+        defaultColor: colors.lightGray,
+        defaultHoverColor: colors.darkGray,
+      },
+    },
+  }), []);
+
+  // Context menu for each comment (memoized)
+  const getCommentMenu = useCallback((commentId: string) => (
+    <Menu>
+      <Menu.Item key="delete">
+        <Popconfirm
+          title="Are you sure you want to delete this comment?"
+          onConfirm={() => handleDeleteComment(commentId)}
+          okText="Yes"
+          cancelText="No"
+        >
+          Delete
+        </Popconfirm>
+      </Menu.Item>
+    </Menu>
+  ), [handleDeleteComment]);
+
+  const renderComment = useCallback(
+    (comment: IProjectUpdateCommentViewModel) => {
+      const linkifiedContent = linkify(comment.content || '');
+      const sanitizedContent = DOMPurify.sanitize(linkifiedContent);
+      const timeDifference = calculateTimeDifference(comment.created_at || '');
+      const themeClass = theme === 'dark' ? 'dark' : 'light';
+
      return (
-    <Flex gap={24} vertical>
-      <Flex vertical gap={16}>
-        {
-          isLoadingComments ? (
-            <Skeleton active />
-          ):
-          comments.map(comment => (
-          <Flex key={comment.id} gap={8}>
+        <Dropdown
+          key={comment.id ?? ''}
+          overlay={getCommentMenu(comment.id ?? '')}
+          trigger={["contextMenu"]}
+        >
+          <div>
+            <Flex gap={8}>
              <CustomAvatar avatarName={comment.created_by || ''} />
              <Flex vertical flex={1}>
                <Space>
@@ -174,39 +236,38 @@ const ProjectViewUpdates = () => {
                  </Typography.Text>
                  <Tooltip title={comment.created_at}>
                    <Typography.Text style={{ fontSize: 13, color: colors.deepLightGray }}>
-                    {calculateTimeDifference(comment.created_at || '')}
+                      {timeDifference}
                    </Typography.Text>
                  </Tooltip>
                </Space>
-              <Typography.Paragraph 
-                style={{ margin: '8px 0' }}
-                ellipsis={{ rows: 3, expandable: true }}
-              >
-                <div className={`mentions-${theme === 'dark' ? 'dark' : 'light'}`} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment.content || '') }} />
-              </Typography.Paragraph>
-              <ConfigProvider
-                wave={{ disabled: true }}
-
-                theme={{
-                  components: {
-                    Button: {
-                      defaultColor: colors.lightGray,
-                      defaultHoverColor: colors.darkGray,
-                    },
-                  },
-                }}
-              >
-                <Button
-                  icon={<DeleteOutlined />}
-                  shape="circle"
-                  type="text"
-                  size='small'
-                  onClick={() => handleDeleteComment(comment.id)}
+                <Typography.Paragraph style={{ margin: '8px 0' }} ellipsis={{ rows: 3, expandable: true }}>
+                  <div
+                    className={`mentions-${themeClass}`}
+                    dangerouslySetInnerHTML={{ __html: sanitizedContent }}
+                    onClick={handleCommentLinkClick}
                  />
-              </ConfigProvider>
+                </Typography.Paragraph>
              </Flex>
            </Flex>
-        ))}
+          </div>
+        </Dropdown>
+      );
+    },
+    [theme, configProviderTheme, handleDeleteComment, handleCommentLinkClick]
+  );
+
+  const commentsList = useMemo(() => 
+    comments.map(renderComment), [comments, renderComment]
+  );
+
+  return (
+    <Flex gap={24} vertical>
+      <Flex vertical gap={16}>
+        {isLoadingComments ? (
+          <Skeleton active />
+        ) : (
+          commentsList
+        )}
      </Flex>

      <Form onFinish={handleAddComment}>
@@ -218,11 +279,16 @@ const ProjectViewUpdates = () => {
            options={mentionsOptions}
            autoSize
            maxLength={MAX_COMMENT_LENGTH}
-            onSelect={option => memberSelectHandler(option as IMentionMemberSelectOption)}
+            onSelect={(option, prefix) => memberSelectHandler(option as IMentionMemberSelectOption)}
            onClick={() => setIsCommentBoxExpand(true)}
            onChange={handleCommentChange}
            prefix="@"
            split=""
+            filterOption={(input, option) => {
+              if (!input) return true;
+              const optionLabel = (option as any)?.label || '';
+              return optionLabel.toLowerCase().includes(input.toLowerCase());
+            }}
            style={{
              minHeight: isCommentBoxExpand ? 180 : 60,
              paddingBlockEnd: 24,
--- a/worklenz-frontend/src/utils/sanitizeInput.ts
+++ b/worklenz-frontend/src/utils/sanitizeInput.ts
@@ -29,7 +29,7 @@ export const sanitizeHtml = (input: string): string => {
  if (!input) return '';
  
  return DOMPurify.sanitize(input, {
-    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],
-    ALLOWED_ATTR: ['href', 'target', 'rel'],
+    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'span'],
+    ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
  });
 };