chore: replace lingui functions with react-intl

1 files changed, 16 insertions, 4 deletions

diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx
index bdca00b..6630a03 100644
--- a/src/components/CommentsList/CommentsList.tsx
+++ b/src/components/CommentsList/CommentsList.tsx
@@ -1,6 +1,6 @@
-import { Comment as CommentData } from '@ts/types/comments';
 import Comment from '@components/Comment/Comment';
-import { t } from '@lingui/macro';
+import { Comment as CommentData } from '@ts/types/comments';
+import { useIntl } from 'react-intl';
 import styles from './CommentsList.module.scss';
 
 const CommentsList = ({
@@ -10,6 +10,8 @@ const CommentsList = ({
   articleId: number;
   comments: CommentData[];
 }) => {
+  const intl = useIntl();
+
   const getCommentsList = () => {
     return comments.map((comment) => {
       return (
@@ -20,11 +22,21 @@ const CommentsList = ({
 
   return (
     <>
-      <h2 className={styles.title}>{t`Comments`}</h2>
+      <h2 className={styles.title}>
+        {intl.formatMessage({
+          defaultMessage: 'Comments',
+          description: 'CommentsList: Comments section title',
+        })}
+      </h2>
       {comments.length > 0 ? (
         <ol className={styles.list}>{getCommentsList()}</ol>
       ) : (
-        <p className={styles['no-comments']}>{t`No comments yet.`}</p>
+        <p className={styles['no-comments']}>
+          {intl.formatMessage({
+            defaultMessage: 'No comments yet.',
+            description: 'CommentsList: No comment message',
+          })}
+        </p>
       )}
     </>
   );