feat: add reply modal

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;