Progress

app/javascript/gabsocial/components/comment_list.js

@@ -1,159 +1,27 @@
-import { Fragment } from 'react'
-import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { makeGetStatus } from '../selectors';
-import CommentHeader from './comment_header'
-import Avatar from './avatar'
-import Button from './button'
-import DisplayName from './display_name'
-import DotTextSeperator from './dot_text_seperator'
-import RelativeTimestamp from './relative_timestamp'
-import Text from './text'
-import StatusContent from './status_content'
+import Comment from './comment'
 
-const messages = defineMessages({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
-})
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus()
-
-  const mapStateToProps = (state, props) => {
-    const status = getStatus(state, props)
-    let descendantsIds = Immutable.List()
-
-    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
-@connect(makeMapStateToProps)
-class Comment extends ImmutablePureComponent {
+export default class CommentList extends ImmutablePureComponent {
 
   static propTypes = {
-    status: ImmutablePropTypes.map.isRequired,
-    descendantsIds: ImmutablePropTypes.list,
-
-  }
-
-  handleClick = () => {
-    // if (this.props.onClick) {
-    //   this.props.onClick();
-    //   return;
-    // }
-
-    // if (!this.context.router) return;
-
-    // this.context.router.history.push(
-    //   `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
-    // )
+    descendants: ImmutablePropTypes.list,
   }
 
   render() {
-    const { status } = this.props
-
-    console.log("status:", status)
+    const { descendants } = this.props
 
     return (
-      <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.mr10, _s.pt5].join(' ')}
-            >
-              <Avatar account={status.get('account')} size={32} />
-            </NavLink>
-
-            <div className={[_s.default, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
-                <div className={_s.pt2}>
-                  <CommentHeader status={status} />
-                </div>
-                <div className={[_s.py5].join(' ')}>
-                  <StatusContent
-                    status={status}
-                    onClick={this.handleClick}
-                    isComment
-                    collapsable
-                  />
-                </div>
-              </div>
-              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
-                
-                <Button
-                  text
-                  radiusSmall
-                  backgroundColor='none'
-                  color='tertiary'
-                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
-                >
-                  <Text size='extraSmall' color='inherit' weight='bold'>
-                    Like
-                  </Text>
-                </Button>
-
-                <Button
-                  text
-                  radiusSmall
-                  backgroundColor='none'
-                  color='tertiary'
-                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
-                >
-                  <Text size='extraSmall' color='inherit' weight='bold'>
-                    Reply
-                  </Text>
-                </Button>
-
-                <Button
-                  text
-                  radiusSmall
-                  backgroundColor='none'
-                  color='tertiary'
-                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
-                >
-                  <Text size='extraSmall' color='inherit' weight='bold'>
-                    ···
-                  </Text>
-                </Button>
-
-              </div>
-            </div>
-          </div>
-
-        </div>
+      <div>
+        {
+          descendants.map((descendant, i) => (
+            <Comment
+              key={`comment-${descendant.get('statusId')}-${i}`}
+              id={descendant.get('statusId')}
+              indent={descendant.get('indent')}
+            />
+          ))
+        }
       </div>
     )
   }