aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Message.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2023-01-22 22:55:18 +0300
committerGravatar Vitaly Takmazov2023-01-22 22:55:18 +0300
commit10c81f1ccd538a77d5801ff39bc48274bbea470c (patch)
treea833a0c7a4b817dbf889d72b4d14c202fd1b5f43 /vnext/src/ui/Message.js
parentb7cd753624abb10933f388ca01ecc148a6b67846 (diff)
Message: subscribe/unsubscribe
Diffstat (limited to 'vnext/src/ui/Message.js')
-rw-r--r--vnext/src/ui/Message.js42
1 files changed, 32 insertions, 10 deletions
diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js
index d45395bb..3bb59a4a 100644
--- a/vnext/src/ui/Message.js
+++ b/vnext/src/ui/Message.js
@@ -15,8 +15,15 @@ import { format, embedUrls } from '../utils/embed';
import { useVisitor } from './VisitorContext';
/**
+ * @callback ToggleSubscriptionCallback
+ * @param { import('../client').Message } message
+ */
+
+/**
* @typedef {object} MessageProps
* @property { import('../client').Message } data data
+ * @property {boolean} isThread
+ * @property {ToggleSubscriptionCallback} onToggleSubscription
*/
/**
@@ -24,7 +31,7 @@ import { useVisitor } from './VisitorContext';
*
* @param {React.PropsWithChildren<{}> & MessageProps} props props
*/
-export default function Message({ data, children }) {
+export default function Message({ data, isThread = false, onToggleSubscription, children }) {
const [visitor] = useVisitor();
const isCode = (data.tags || []).indexOf('code') >= 0;
const likesSummary = data.likes ? `${data.likes}` : 'Recommend';
@@ -68,7 +75,7 @@ export default function Message({ data, children }) {
<span>&nbsp;&middot;&nbsp;</span>
<Link to={{
pathname: '/post',
- }} state={{data: data}}>Edit</Link>
+ }} state={{ data: data }}>Edit</Link>
</>
}
</div>
@@ -109,16 +116,31 @@ export default function Message({ data, children }) {
<span>{likesSummary}</span>
</Link>
)}
- {data.user && canComment && (
- <Link to={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button"
- state={{ data: data }}>
- <Icon name="ei-comment" size="s" />
- <span>{commentsSummary}</span>
- </Link>
- )}
+ {
+ data.user && canComment && ((
+ isThread ? (
+ <Link className="msg-button" onClick={() => { onToggleSubscription(data); }}>
+ {
+ data.subscribed ? (<>
+ <Icon name="ei-check" size="s" />
+ <span>Subscribed</span>
+ </>) : (<>
+ <Icon name="ei-eye" size="s" />
+ <span>Subscribe</span>
+ </>)}
+ </Link>
+ ) : (
+ <Link to={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button"
+ state={{ data: data }}>
+ <Icon name="ei-comment" size="s" />
+ <span>{commentsSummary}</span>
+ </Link>
+ )
+ ))
+ }
</nav>
{children}
- </div>
+ </div >
);
}