feat: add reply modal

src/components/challenge-modal/challenge-modal.module.css

@@ -74,7 +74,6 @@
 }
 
 .challengeFooter button {
-  margin: 5px 5px 0 0;
   cursor: pointer;
   filter: var(--filter80);
   text-transform: capitalize;

src/components/challenge-modal/challenge-modal.tsx

@@ -5,6 +5,7 @@ import { Challenge as ChallengeType } from '@plebbit/plebbit-react-hooks';
 import { getPublicationType } from '../../lib/utils/challenge-utils';
 import useChallenges from '../../hooks/use-challenges';
 import styles from './challenge-modal.module.css';
+import _ from 'lodash';
 
 interface ChallengeProps {
   challenge: ChallengeType;
@@ -62,7 +63,7 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
         </div>
         <div className={styles.publication}>
           <div className={styles.name}>
-            <input type='text' value={displayName || 'Anonymous'} disabled />
+            <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
           </div>
           {title && (
             <div className={styles.subject}>

src/components/post/post.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Role, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
@@ -11,10 +11,13 @@ import useReplies from '../../hooks/use-replies';
 import useStateString from '../../hooks/use-state-string';
 import useWindowWidth from '../../hooks/use-window-width';
 import styles from './post.module.css';
-import LoadingEllipsis from '../loading-ellipsis';
-import Markdown from '../markdown';
 import CommentMedia from '../comment-media';
 import { canEmbed } from '../embed';
+import LoadingEllipsis from '../loading-ellipsis';
+import Markdown from '../markdown';
+import ReplyModal from '../reply-modal';
+import _ from 'lodash';
+import { getDisplayMediaInfoType } from '../../lib/utils/media-utils';
 
 interface PostProps {
   index?: number;
@@ -22,9 +25,10 @@ interface PostProps {
   reply?: any;
   roles?: Role[];
   showAllReplies?: boolean;
+  openReplyModal?: (cid: string) => void;
 }
 
-const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
+const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
@@ -53,6 +57,10 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
 
   const [menuBtnRotated, setMenuBtnRotated] = useState(false);
 
+  // pending reply by account is not yet published
+  const account = useAccount();
+  const accountShortAddress = account?.author?.shortAddress;
+
   return (
     <div className={styles.postDesktop}>
       <div className={styles.hrWrapper}>
@@ -115,7 +123,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
             {displayName || _.capitalize(t('anonymous'))}
             {authorRole && ` ## Board ${authorRole}`}{' '}
           </span>
-          {!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress}) </span>}
+          {!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress || accountShortAddress}) </span>}
         </span>
         <span className={styles.dateTime}>
           {getFormattedDate(timestamp)}
@@ -124,13 +132,13 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
         <span className={styles.postNum}>
           {!(isDescription || isRules) && (
             <span className={styles.postNumLink}>
-              <Link to={`/p/${subplebbitAddress}/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
+              <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
                 c/
               </Link>
               {!cid ? (
                 <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
               ) : (
-                <span className={styles.replyToPost} title={t('reply_to_post')}>
+                <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
                 </span>
               )}
@@ -187,15 +195,15 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
       {!(pinned && !isInPostPage) &&
         replies &&
         (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
-          <div key={reply.cid} className={styles.replyContainer}>
-            <ReplyDesktop index={index} reply={reply} roles={roles} />
+          <div key={index} className={styles.replyContainer}>
+            <ReplyDesktop index={index} reply={reply} roles={roles} openReplyModal={openReplyModal} />
           </div>
         ))}
     </div>
   );
 };
 
-const ReplyDesktop = ({ reply, roles }: PostProps) => {
+const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {};
   const { address, displayName, shortAddress } = author || {};
@@ -216,6 +224,10 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
     <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
   );
 
+  // pending reply by account is not yet published
+  const account = useAccount();
+  const accountShortAddress = account?.author?.shortAddress;
+
   return (
     <div className={styles.replyDesktop}>
       <div className={styles.sideArrows}>{'>>'}</div>
@@ -229,18 +241,18 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
               {displayName || _.capitalize(t('anonymous'))}
               {authorRole && ` ## Board ${authorRole}`}{' '}
             </span>
-            <span className={styles.userAddress}>(u/{shortAddress}) </span>
+            <span className={styles.userAddress}>(u/{shortAddress || accountShortAddress}) </span>
           </span>
           <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
           <span className={styles.postNum}>
             <span className={styles.postNumLink}>
-              <Link to={`/p/${subplebbitAddress}/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
+              <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
                 c/
               </Link>
               {!cid ? (
                 <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
               ) : (
-                <span className={styles.replyToPost} title={t('reply_to_post')}>
+                <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
                 </span>
               )}
@@ -314,7 +326,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
               </>
             )}
             <Markdown content={content} />
-            {!cid && (
+            {!cid && state === 'pending' && (
               <>
                 <br />
                 {loadingString}
@@ -327,7 +339,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
   );
 };
 
-const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
+const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
@@ -349,6 +361,10 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
 
   const replies = useReplies(post);
 
+  // pending reply by account is not yet published
+  const account = useAccount();
+  const accountShortAddress = account?.author?.shortAddress;
+
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -366,7 +382,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
                   {displayName || _.capitalize(t('anonymous'))}
                   {authorRole && ` ## Board ${authorRole}`}{' '}
                 </span>
-                {!(isDescription || isRules) && <span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>}
+                {!(isDescription || isRules) && <span className={styles.address}>(u/{shortAddress || accountShortAddress})</span>}
                 {pinned && (
                   <span className={styles.stickyIconWrapper}>
                     <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -394,7 +410,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
                     {!cid ? (
                       <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
                     ) : (
-                      <span className={styles.replyToPost} title={t('reply_to_post')}>
+                      <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                         {shortCid}
                       </span>
                     )}
@@ -441,7 +457,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
           replies &&
           (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
             <div key={reply.cid} className={styles.replyContainer}>
-              <ReplyMobile index={index} reply={reply} roles={roles} />
+              <ReplyMobile index={index} reply={reply} roles={roles} openReplyModal={openReplyModal} />
             </div>
           ))}
       </div>
@@ -449,7 +465,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
   );
 };
 
-const ReplyMobile = ({ reply, roles }: PostProps) => {
+const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
   const { t } = useTranslation();
   const { author, content, cid, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {};
   const { address, displayName, shortAddress } = author || {};
@@ -461,6 +477,15 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
 
   const isReplyingToReply = postCid !== parentCid;
 
+  // pending reply by account is not yet published
+  const account = useAccount();
+  const accountShortAddress = account?.author?.shortAddress;
+
+  const stateString = useStateString(reply);
+  const loadingString = stateString && (
+    <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
+  );
+
   return (
     <div className={styles.replyMobile}>
       <div className={styles.reply}>
@@ -472,7 +497,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
                 {displayName || _.capitalize(t('anonymous'))}
                 {authorRole && ` ## Board ${authorRole}`}{' '}
               </span>
-              <span className={styles.address}>(u/{shortAddress})</span>
+              <span className={styles.address}>(u/{shortAddress || accountShortAddress})</span>
               {pinned && (
                 <span className={styles.stickyIconWrapper}>
                   <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -489,7 +514,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
               {!cid ? (
                 <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
               ) : (
-                <span className={styles.replyToPost} title={t('reply_to_post')}>
+                <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
                 </span>
               )}
@@ -516,6 +541,12 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
                 </>
               )}
               <Markdown content={content} />
+              {!cid && state === 'pending' && (
+                <>
+                  <br />
+                  {loadingString}
+                </>
+              )}
             </blockquote>
           )}
         </div>
@@ -527,14 +558,36 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
 const Post = ({ post, showAllReplies = false }: PostProps) => {
   const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
   const isMobile = useWindowWidth() < 640;
+
+  const [showReplyModal, setShowReplyModal] = useState(false);
+  const [activeCid, setActiveCid] = useState<string | null>(null);
+
+  const openReplyModal = (cid: string) => {
+    if (activeCid && activeCid !== cid) {
+      closeModal();
+      setActiveCid(cid);
+      setShowReplyModal(true);
+    } else if (!activeCid) {
+      setActiveCid(cid);
+      setShowReplyModal(true);
+    } else {
+      return;
+    }
+  };
+
+  const closeModal = () => {
+    setActiveCid(null);
+    setShowReplyModal(false);
+  };
+
   return (
     <div className={styles.thread}>
-      {showReplyModal && <ReplyModal closeModal={closeModal} parentCid={post?.cid} />}
+      {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} />}
       <div className={styles.postContainer}>
         {isMobile ? (
-          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openModal={openModal} closeModal={closeModal} activeCid={activeCid} />
+          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} />
         ) : (
-          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openModal={openModal} closeModal={closeModal} activeCid={activeCid} />
+          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} />
         )}
       </div>
     </div>

src/components/reply-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './reply-modal';

src/components/reply-modal/reply-modal.module.css

@@ -0,0 +1,60 @@
+.container {
+  position: fixed;
+  top: calc(50% - 150px);
+  left: calc(50% - 150px);
+  display: block;
+  padding: 2px;
+  font-size: 10pt;
+  border-left: none;
+  border-top: none;
+  z-index: 1000;
+  background-color: var(--challenge-modal-background-color);
+  border: var(--challenge-modal-border);
+}
+
+.title {
+  font-size: var(--challenge-modal-title-font-size);
+  text-align: center;
+  margin-bottom: 1px;
+  padding: 0;
+  height: 18px;
+  line-height: 18px;
+  cursor: move;
+  font-weight: var(--challenge-modal-title-font-weight);
+  background-color: var(--challenge-modal-title-background-color);
+  color: var(--challenge-modal-title-text-color);
+  border: var(--challenge-modal-title-border);
+}
+
+.closeIcon {
+  all: unset;
+  float: right;
+  cursor: pointer;
+  margin-bottom: -4px;
+  width: 18px;
+  height: 18px;
+  border: none;
+  image-rendering: pixelated;
+  background-image: var(--close-button-background-image);
+}
+
+.container input, .container textarea {
+  border: 1px solid #aaa;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 10pt;
+  outline: medium none;
+  width: 298px;
+  filter: var(--filter80);
+  padding: 2px;
+  margin-bottom: 1px;
+}
+
+.content textarea {
+  vertical-align: top;
+}
+
+.footer button {
+  text-transform: capitalize;
+  float: right;
+  cursor: pointer;
+}

src/components/reply-modal/reply-modal.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import Draggable from 'react-draggable';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
+import { isValidURL } from '../../lib/utils/url-utils';
+import useReply from '../../hooks/use-reply';
+import styles from './reply-modal.module.css';
+import _ from 'lodash';
+
+interface ReplyModalProps {
+  closeModal: () => void;
+  parentCid: string;
+}
+
+const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => {
+  const { t } = useTranslation();
+  const { subplebbitAddress } = useParams() as { subplebbitAddress: string };
+  const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid: parentCid, subplebbitAddress });
+
+  const account = useAccount();
+  const { displayName } = account?.author || {};
+
+  const textRef = useRef<HTMLTextAreaElement>(null);
+  const urlRef = useRef<HTMLInputElement>(null);
+
+  const onPublishReply = () => {
+    const currentContent = textRef.current?.value || '';
+    const currentUrl = urlRef.current?.value || '';
+
+    if (!currentContent.trim() && !currentUrl) {
+      alert(`Cannot post empty comment`);
+      return;
+    }
+
+    if (currentUrl && !isValidURL(currentUrl)) {
+      alert('The provided link is not a valid URL.');
+      return;
+    }
+    publishReply();
+  };
+
+  useEffect(() => {
+    if (typeof replyIndex === 'number') {
+      closeModal();
+      resetContent();
+    }
+  }, [replyIndex, resetContent, closeModal]);
+
+  // react-draggable requires a ref to the modal node
+  const nodeRef = useRef(null);
+
+  return (
+    <Draggable handle='.replyModalHandle' nodeRef={nodeRef}>
+      <div className={styles.container} ref={nodeRef}>
+        <div className={`replyModalHandle ${styles.title}`}>
+          Reply to c/{parentCid && Plebbit.getShortCid(parentCid)}
+          <button className={styles.closeIcon} onClick={closeModal} title='close' />
+        </div>
+        <div className={styles.replyForm}>
+          <div className={styles.name}>
+            <input type='text' defaultValue={displayName} placeholder={displayName ? undefined : _.capitalize(t('anonymous'))} />
+          </div>
+          <div className={styles.link}>
+            <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
+          </div>
+          <div className={styles.content}>
+            <textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
+          </div>
+          <div className={styles.footer}>
+            <button onClick={onPublishReply}>{t('reply')}</button>
+          </div>
+        </div>
+      </div>
+    </Draggable>
+  );
+};
+
+export default ReplyModal;