Message: subscribe/unsubscribe

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 >
     );
 }