Merge pull request #49 from KleeGroup/feature-external-refresh

Add callback to force refresh comments
klee-contrib · Aug 21, 2017 · d833cc9 · d833cc9
2 parents e6966cd + f54c960
commit d833cc9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -40,3 +40,5 @@ Please note that you must you React with addons, so choose the appropriate built
 - **messageSentCallback** (`function`): a callback to know when a message has been sent
 - **timeDisplay** (`string`): the display format, either `ago` or `dateTime`, `ago` by default
 - **dateTimeFormat** (`string`): the dateTime format if **timeDisplay** is set to `dateTime`
+- **registerRefreshCommentsMethod** (`function`): method to register the refresh comment method into parent
+- **unregisterRefreshCommentsMethod** (`function`): method to unregister the refresh comment method from parent
diff --git a/src/component/index.js b/src/component/index.js
@@ -28,7 +28,9 @@ const propTypes = {
     locale: PropTypes.string.isRequired,
     messageSentCallback: PropTypes.func,
     timeDisplay: PropTypes.oneOf(['ago', 'dateTime']),
-    dateTimeFormat: PropTypes.string
+    dateTimeFormat: PropTypes.string,
+    registerRefreshCommentsMethod: PropTypes.func,
+    unregisterRefreshCommentsMethod: PropTypes.func
 }
 
 const defaultProps = {
@@ -47,18 +49,27 @@ const defaultProps = {
     },
     locale: 'en',
     timeDisplay: 'ago',
-    dateTimeFormat: 'DD/MM/YYYY HH:mm'
+    dateTimeFormat: 'DD/MM/YYYY HH:mm',
+    registerRefreshCommentsMethod: undefined,
+    unregisterRefreshCommentsMethod: undefined
 }
 
 class Container extends Component {
-    _refreshComments() {
-        const { dispatch, concept, conceptId, apiRootUrl } = this.props;
-        dispatch(getComments(concept, conceptId, apiRootUrl));
+
+    constructor(props) {
+        super(props);
+
+        this._refreshComments = this._refreshComments.bind(this);
     }
 
     componentWillMount() {
+        const { dispatch, apiRootUrl, concept, conceptId, locale, registerRefreshCommentsMethod } = this.props;
+
+        if (registerRefreshCommentsMethod) {
+            registerRefreshCommentsMethod(this._refreshComments);
+        }
+
         moment.locale(this.props.locale);
-        const { dispatch, apiRootUrl, concept, conceptId } = this.props;
         dispatch(getComments(concept, conceptId, apiRootUrl));
     }
 
@@ -70,10 +81,21 @@ class Container extends Component {
     }
 
     componentWillUnmount() {
-        this.props.dispatch(clearComments());
+        const { dispatch, unregisterRefreshCommentsMethod } = this.props;
+
+        if (unregisterRefreshCommentsMethod) {
+            unregisterRefreshCommentsMethod();
+        }
+
+        dispatch(clearComments());
         clearInterval(this.refreshInterval);
     }
 
+    _refreshComments() {
+        const { dispatch, concept, conceptId, apiRootUrl } = this.props;
+        dispatch(getComments(concept, conceptId, apiRootUrl));
+    }
+
     render() {
         const { comments, dispatch, isLoading, lastUpdate, error, ...otherProps } = this.props;
         return (
@@ -82,7 +104,7 @@ class Container extends Component {
                     <div data-focus='title'>{this.props.texts.title}</div>
                     <div data-focus='last-update'>{isLoading ? this.props.texts.loading : `${this.props.texts.lastUpdate} ${moment(lastUpdate).fromNow()}`}</div>
                     <div data-focus='refresh'>
-                        <button className='mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--raised' onClick={this._refreshComments.bind(this)}>
+                        <button className='mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--raised' onClick={this._refreshComments}>
                             {isLoading ?
                                 <i className="fa fa-circle-o-notch fa-spin"></i>
                                 :