style(post): translate link types, anonymous displayName

src/components/comment-media/comment-media.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import styles from './comment-media.module.css';
-import { CommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
-import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
-import Embed, { canEmbed } from '../embed';
 import { useTranslation } from 'react-i18next';
-import useWindowWidth from '../../hooks/use-window-width';
+import styles from './comment-media.module.css';
+import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getHostname } from '../../lib/utils/url-utils';
+import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
+import useWindowWidth from '../../hooks/use-window-width';
+import Embed, { canEmbed } from '../embed';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
@@ -129,7 +129,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
           <a href={url} target='_blank' rel='noopener noreferrer'>
             {url && url.length > 30 ? url.slice(0, 30) + '...' : url}
           </a>{' '}
-          ({type})
+          ({getDisplayMediaInfoType(type, t)})
         </div>
       )}
       {isMobile && (type === 'iframe' || type === 'video' || type === 'audio') && (
@@ -144,8 +144,10 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
 };
 
 const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+  const { t } = useTranslation();
   const isMobile = useWindowWidth() < 640;
   const { type, url } = commentMediaInfo || {};
+
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
@@ -160,7 +162,7 @@ const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, link
             setShowThumbnail={setShowThumbnail}
           />
         )}
-        {isMobile && type && <div className={styles.fileInfo}>{type}</div>}
+        {isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
       </span>
       {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={isReply} setShowThumbnail={setShowThumbnail} />}
     </span>

src/components/post/post.tsx

@@ -70,7 +70,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
             <a href={url} target='_blank' rel='noopener noreferrer'>
               {url.length > 30 ? url.slice(0, 30) + '...' : url}
             </a>{' '}
-            ({type})
+            ({type && getDisplayMediaInfoType(type, t)})
             {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
               <span>
                 {' '}
@@ -112,7 +112,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
         {title && <span className={styles.subject}>{displayTitle} </span>}
         <span className={styles.nameBlock}>
           <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
-            {displayName || 'Anonymous'}
+            {displayName || _.capitalize(t('anonymous'))}
             {authorRole && ` ## Board ${authorRole}`}{' '}
           </span>
           {!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress}) </span>}
@@ -226,7 +226,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
           </span>
           <span className={styles.nameBlock}>
             <span className={`${styles.name} ${authorRole && styles.capcodeMod}`}>
-              {displayName || 'Anonymous'}
+              {displayName || _.capitalize(t('anonymous'))}
               {authorRole && ` ## Board ${authorRole}`}{' '}
             </span>
             <span className={styles.userAddress}>(u/{shortAddress}) </span>
@@ -268,7 +268,8 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
               {t('link')}:{' '}
               <a href={link} target='_blank' rel='noopener noreferrer'>
                 {link.length > 30 ? link?.slice(0, 30) + '...' : link}
-              </a>
+              </a>{' '}
+              ({type && getDisplayMediaInfoType(type, t)})
               {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
                 <span>
                   {' '}
@@ -362,7 +363,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
               </span>
               <span className={styles.nameBlock}>
                 <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
-                  {displayName || 'Anonymous'}
+                  {displayName || _.capitalize(t('anonymous'))}
                   {authorRole && ` ## Board ${authorRole}`}{' '}
                 </span>
                 {!(isDescription || isRules) && <span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>}
@@ -468,7 +469,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
             <span className={styles.postMenuBtn}>...</span>
             <span className={styles.nameBlock}>
               <span className={`${styles.name} ${authorRole && styles.capcodeMod}`}>
-                {displayName || 'Anonymous'}
+                {displayName || _.capitalize(t('anonymous'))}
                 {authorRole && ` ## Board ${authorRole}`}{' '}
               </span>
               <span className={styles.address}>(u/{shortAddress})</span>
@@ -528,11 +529,12 @@ const Post = ({ post, showAllReplies = false }: PostProps) => {
   const isMobile = useWindowWidth() < 640;
   return (
     <div className={styles.thread}>
+      {showReplyModal && <ReplyModal closeModal={closeModal} parentCid={post?.cid} />}
       <div className={styles.postContainer}>
         {isMobile ? (
-          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
+          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openModal={openModal} closeModal={closeModal} activeCid={activeCid} />
         ) : (
-          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
+          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openModal={openModal} closeModal={closeModal} activeCid={activeCid} />
         )}
       </div>
     </div>

src/lib/utils/media-utils.ts

@@ -11,6 +11,21 @@ export interface CommentMediaInfo {
   patternThumbnailUrl?: string;
 }
 
+export const getDisplayMediaInfoType = (type: string, t: any) => {
+  switch (type) {
+    case 'image':
+      return t('image');
+    case 'iframe':
+      return t('iframe');
+    case 'video':
+      return t('video');
+    case 'audio':
+      return t('audio');
+    default:
+      return t('webpage');
+  }
+};
+
 export const getHasThumbnail = (commentMediaInfo: CommentMediaInfo | undefined, link: string | undefined): boolean => {
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
   return link &&