refactor: various refactoring

Improve maintenance (meta splitting) and try to
improve performance (dynamic imports).

1 files changed, 41 insertions, 0 deletions

diff --git a/src/components/MetaItems/CommentsCount/CommentsCount.tsx b/src/components/MetaItems/CommentsCount/CommentsCount.tsx
new file mode 100644
index 0000000..bd1990d
--- /dev/null
+++ b/src/components/MetaItems/CommentsCount/CommentsCount.tsx
@@ -0,0 +1,41 @@
+import { MetaKind } from '@ts/types/app';
+import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
+import { MetaItem } from '..';
+
+const CommentsCount = ({ total, kind }: { total: number; kind: MetaKind }) => {
+  const intl = useIntl();
+  const { asPath } = useRouter();
+
+  const isArticle = () => asPath.includes('/article/');
+
+  const getCommentsCount = () => {
+    return intl.formatMessage(
+      {
+        defaultMessage:
+          '{total, plural, =0 {No comments} one {# comment} other {# comments}}',
+        description: 'CommentsCount: comment count value',
+      },
+      { total }
+    );
+  };
+
+  return (
+    <MetaItem
+      title={intl.formatMessage({
+        defaultMessage: 'Comments:',
+        description: 'CommentsCount: comment count meta label',
+      })}
+      value={
+        isArticle() ? (
+          <a href="#comments">{getCommentsCount()}</a>
+        ) : (
+          getCommentsCount()
+        )
+      }
+      kind={kind}
+    />
+  );
+};
+
+export default CommentsCount;