Implement pagination

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
 import {name} from '../../package.json';
-import {timeago} from 'coral-framework/services/i18n';
+import {timeago} from 'plugin-api/beta/client/services';
 import {Slot} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 

plugins/talk-plugin-featured-comments/client/components/LoadMore.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Button} from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
+
+class LoadMore extends React.Component {
+  render () {
+    const {loadingState, loadMore} = this.props;
+    const disabled = loadingState === 'loading';
+    return (
+      <div className='talk-load-more'>
+        <Button
+          onClick={loadMore}
+          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          disabled={disabled}
+        >
+          {t('framework.view_more_comments')}
+        </Button>
+      </div>
+    );
+  }
+}
+
+LoadMore.propTypes = {
+  loadMore: PropTypes.func.isRequired,
+  loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
+};
+
+export default LoadMore;

plugins/talk-plugin-featured-comments/client/components/Tab.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {TabCount} from 'plugin-api/beta/client/components/ui';
+import {t} from 'plugin-api/beta/client/services';
 
-// TODO: This is just example code, and needs to replaced by an actual implementation.
 export default ({active, asset: {featuredCommentsCount}}) => (
   <span>
-    Featured <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+    {t('featured')} <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
   </span>
 );

plugins/talk-plugin-featured-comments/client/components/TabPane.js

@@ -1,16 +1,47 @@
 import React from 'react';
 import Comment from '../containers/Comment';
+import LoadMore from './LoadMore';
+import {forEachError} from 'plugin-api/beta/client/utils';
 
-export default ({root, data, asset: {featuredComments, ...asset}, viewComment}) => (
-  <div>
-    {featuredComments.nodes.map((comment) =>
-      <Comment
-        key={comment.id}
-        root={root}
-        data={data}
-        comment={comment}
-        asset={asset}
-        viewComment={viewComment} />
-    )}
-  </div>
-);
+class TabPane extends React.Component {
+  state = {
+    loadingState: '',
+  };
+
+  loadMore = () => {
+    this.setState({loadingState: 'loading'});
+    this.props.loadMore()
+      .then(() => {
+        this.setState({loadingState: 'success'});
+      })
+      .catch((error) => {
+        this.setState({loadingState: 'error'});
+        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+      });
+  }
+
+  render() {
+    const {root, data, asset: {featuredComments, ...asset}, viewComment} = this.props;
+    return (
+      <div>
+        {featuredComments.nodes.map((comment) =>
+          <Comment
+            key={comment.id}
+            root={root}
+            data={data}
+            comment={comment}
+            asset={asset}
+            viewComment={viewComment} />
+        )}
+        {featuredComments.hasNextPage &&
+          <LoadMore
+            loadMore={this.loadMore}
+            loadingState={this.loadingState}
+          />
+        }
+      </div>
+    );
+  }
+}
+
+export default TabPane;