Progress

app/javascript/gabsocial/components/comment.js

@@ -18,14 +18,42 @@ const messages = defineMessages({
 })
 
 const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
+  const getStatus = makeGetStatus()
 
-  const mapStateToProps = (state, props) => ({
-    status: getStatus(state, props),
-  });
+  const mapStateToProps = (state, props) => {
+    const status = getStatus(state, props)
+    let descendantsIds = Immutable.List()
 
-  return mapStateToProps;
-};
+    if (status) {
+      // ALL descendants
+      descendantsIds = descendantsIds.withMutations(mutable => {
+        const ids = [status.get('id')]
+
+        while (ids.length > 0) {
+          let id = ids.shift();
+          const replies = state.getIn(['contexts', 'replies', id])
+
+          if (status.get('id') !== id) {
+            mutable.push(id)
+          }
+
+          if (replies) {
+            replies.reverse().forEach(reply => {
+              ids.unshift(reply)
+            });
+          }
+        }
+      })
+    }
+
+    return {
+      status,
+      descendantsIds,
+    }
+  }
+
+  return mapStateToProps
+}
 
 export default
 @injectIntl
@@ -34,6 +62,7 @@ class Comment extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    descendantsIds: ImmutablePropTypes.list,
   }
 
   handleClick = () => {
@@ -55,24 +84,24 @@ class Comment extends ImmutablePureComponent {
     console.log("status:", status)
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX, _s.paddingVertical5PX].join(' ')} data-comment={status.get('id')}>
+      <div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
         <div className={[_s.default].join(' ')}>
 
           <div className={[_s.default, _s.flexRow].join(' ')}>
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s.default, _s.marginRight10PX, _s.paddingTop5PX].join(' ')}
+              className={[_s.default, _s.mr10, _s.pt5].join(' ')}
             >
               <Avatar account={status.get('account')} size={32} />
             </NavLink>
 
             <div className={[_s.default, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical5PX, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
-                <div className={_s.paddingTop2PX}>
+              <div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
+                <div className={_s.pt2}>
                   <CommentHeader status={status} />
                 </div>
-                <div className={[_s.paddingVertical5PX].join(' ')}>
+                <div className={[_s.py5].join(' ')}>
                   <StatusContent
                     status={status}
                     onClick={this.handleClick}
@@ -81,14 +110,14 @@ class Comment extends ImmutablePureComponent {
                   />
                 </div>
               </div>
-              <div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
+              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
                 
                 <Button
                   text
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
-                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
                 >
                   <Text size='extraSmall' color='inherit' weight='bold'>
                     Like
@@ -100,7 +129,7 @@ class Comment extends ImmutablePureComponent {
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
-                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
                 >
                   <Text size='extraSmall' color='inherit' weight='bold'>
                     Reply
@@ -112,7 +141,7 @@ class Comment extends ImmutablePureComponent {
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
-                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
                 >
                   <Text size='extraSmall' color='inherit' weight='bold'>
                     ···