Fixed error message in PostCard.tsx

public/locales/en/translation.json

@@ -1092,7 +1092,9 @@
     "comments": "Comments",
     "viewPost": "View Post",
     "editPost": "Edit Post",
-    "postedOn": "Posted on {{date}}"
+    "postedOn": "Posted on {{date}}",
+    "emptyCommentError": "Please enter a comment before submitting.",
+    "unexpectedError": "An unexpected error occurred. Please try again."
   },
   "home": {
     "posts": "Posts",

public/locales/fr/translation.json

@@ -1052,7 +1052,9 @@
     "comments": "commentaires",
     "viewPost": "Voir le message",
     "editPost": "Modifier le message",
-    "postedOn": "Publié le {{date}}"
+    "postedOn": "Publié le {{date}}",
+    "emptyCommentError": "Veuillez saisir un commentaire avant de soumettre.",
+    "unexpectedError": "Une erreur inattendue s'est produite. Veuillez réessayer."
   },
   "home": {
     "posts": "Des postes",

public/locales/hi/translation.json

@@ -1052,7 +1052,9 @@
     "comments": "टिप्पणियाँ",
     "viewPost": "पोस्ट देखें",
     "editPost": "पोस्ट संपादित करें",
-    "postedOn": "{{date}} को पोस्ट किया गया"
+    "postedOn": "{{date}} को पोस्ट किया गया",
+    "emptyCommentError": "कृपया टिप्पणी करने से पहले एक टिप्पणी दर्ज करें।",
+    "unexpectedError": "एक अप्रत्याशित त्रुटि हुई। कृपया फिर से प्रयास करें।"
   },
   "home": {
     "title": "पदों",

public/locales/sp/translation.json

@@ -1053,7 +1053,9 @@
     "comments": "Comentarios",
     "viewPost": "Ver publicación",
     "editPost": "Editar publicación",
-    "postedOn": "Publicado el {{date}}"
+    "postedOn": "Publicado el {{date}}",
+    "emptyCommentError": "Por favor ingrese un comentario antes de enviarlo.",
+    "unexpectedError": "Ocurrió un error inesperado. Por favor, inténtelo de nuevo."
   },
   "home": {
     "posts": "Publicaciones",

public/locales/zh/translation.json

@@ -1052,7 +1052,9 @@
     "comments": "评论",
     "viewPost": "查看帖子",
     "editPost": "编辑帖子",
-    "postedOn": "发布于 {{date}}"
+    "postedOn": "发布于 {{date}}",
+    "emptyCommentError": "请在提交前输入评论。",
+    "unexpectedError": "发生了意外错误。请重试。"
   },
   "home": {
     "title": "帖子",

src/components/UserPortal/PostCard/PostCard.spec.tsx

@@ -1,6 +1,6 @@
 import React, { act } from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
@@ -661,6 +661,119 @@ describe('Testing PostCard Component [User Portal]', () => {
     await wait();
   });
 
+  test('Comment validation displays an error toast when an empty comment is submitted', async () => {
+    console.log('Starting empty comment validation test');
+
+    const cardProps = {
+      id: '1',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: '[email protected]',
+        id: '1',
+      },
+      postedAt: '',
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: vi.fn(),
+    };
+
+    expect(toast.error).toBeDefined();
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByTestId('viewPostBtn')); // Open the post view
+    userEvent.type(screen.getByTestId('commentInput'), ''); // Type an empty comment
+    userEvent.click(screen.getByTestId('createCommentBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(
+        i18nForTest.t('postCard.emptyCommentError'),
+      );
+    });
+  });
+
+  test('Comment submission displays error toast when network error occurs', async () => {
+    const cardProps = {
+      id: '1',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: '[email protected]',
+        id: '1',
+      },
+      postedAt: '',
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: vi.fn(),
+    };
+
+    const errorLink = new StaticMockLink([
+      {
+        request: {
+          query: CREATE_COMMENT_POST,
+          variables: {
+            postId: '1',
+            comment: 'test comment',
+          },
+        },
+        error: new Error('Network error'),
+      },
+    ]);
+
+    render(
+      <MockedProvider link={errorLink}>
+        <PostCard {...cardProps} />
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+    userEvent.type(screen.getByTestId('commentInput'), 'test comment');
+    userEvent.click(screen.getByTestId('createCommentBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(
+        i18nForTest.t('postCard.unexpectedError'),
+      );
+    });
+  });
+
   test(`Comment should be liked when like button is clicked`, async () => {
     const cardProps = {
       id: '1',

src/components/UserPortal/PostCard/PostCard.tsx

@@ -196,6 +196,12 @@
   // Create a new comment
   const createComment = async (): Promise<void> => {
     try {
+      // Ensure the input is not empty
+      if (!commentInput.trim()) {
+        toast.error(t('emptyCommentError'));
+        return;
+      }
+
       const { data: createEventData } = await create({
         variables: {
           postId: props.id,
@@ -225,7 +231,21 @@
         setComments([...comments, newComment]);
       }
     } catch (error: unknown) {
-      errorHandler(t, error);
+      // Handle errors
+      // Log error with context for debugging
+      console.error('Error creating comment:', error);
+
+      // Show user-friendly translated message based on error type
+      if (error instanceof Error) {
+        const isValidationError = error.message.includes(
+          'Comment validation failed',
+        );
+        toast.error(
+          isValidationError ? t('emptyCommentError') : t('unexpectedError'),
+        );
+      } else {
+        toast.error(t('unexpectedError'));
+      }
     }
   };