__tests__/blogs/BlogsViewScreen.js

@@ -7,7 +7,9 @@ import BlogModel from '../../src/blogs/BlogModel';
 import UserStore from '../../src/auth/UserStore';
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
+import NavigationService from '../../src/navigation/NavigationService';
 
+jest.mock('../../src/navigation/NavigationService');
 jest.mock('../../src/blogs/BlogsViewStore');
 jest.mock('../../src/auth/UserStore');
 jest.mock('../../src/blogs/BlogViewHTML', () => 'BlogViewHTML');
@@ -21,6 +23,8 @@ describe('blog view screen component', () => {
   let store, user;
 
   beforeEach(() => {
+    NavigationService.getCurrentState.mockClear();
+    NavigationService.getCurrentState.mockReturnValue({});
     store = new BlogsViewStore();
     user = new UserStore();
     user.me = {

__tests__/blogs/__snapshots__/BlogsViewScreen.js.snap

@@ -899,7 +899,9 @@ exports[`blog view screen component should renders correctly 1`] = `
           "setRichEmbedPromise": null,
         },
         "entity": null,
+        "focusedUrn": null,
         "guid": "",
+        "level": 0,
         "loadNext": "",
         "loadPrevious": "",
         "onAttachedMedia": [Function],

package.json

@@ -31,7 +31,7 @@
     "jwt-simple": "^0.5.5",
     "lodash": "^4.13.1",
     "mobx": "^5.9.4",
-    "mobx-react": "^5.4.3",
+    "mobx-react": "^5.4.4",
     "mobx-utils": "3.2.2",
     "moment": "^2.20.1",
     "moment-timezone": "^0.5.16",

src/blogs/BlogsViewScreen.js

@@ -72,7 +72,6 @@ export default class BlogsViewScreen extends Component {
   constructor(props) {
     super(props);
 
-    const params = props.navigation.state.params;
     this.comments = commentsStoreProvider.get();
   }
 
@@ -155,15 +154,6 @@ export default class BlogsViewScreen extends Component {
         <SafeAreaView style={styles.header}>
           <Icon raised color={colors.primary} size={22} name='arrow-back' onPress={() => this.props.navigation.goBack()}/>
         </SafeAreaView>
-        { this.comments.loadPrevious && !this.comments.loading ?
-            <TouchableHighlight
-            onPress={() => { this.loadComments()}}
-            underlayColor = 'transparent'
-            style = {styles.loadCommentsContainer}
-          >
-            <Text style={styles.loadCommentsText}> LOAD EARLIER </Text>
-          </TouchableHighlight> : null
-        }
       </View>
     )
   }

src/comments/Comment.js

@@ -21,10 +21,8 @@ import {
 } from 'react-native';
 
 import ActionSheet from 'react-native-actionsheet';
-import { thumbActivity } from '../newsfeed/activity/ActionsService';
 import CommentEditor from './CommentEditor';
 import { CommonStyle } from '../styles/Common';
-import OwnerBlock from '../newsfeed/activity/OwnerBlock';
 import formatDate from '../common/helpers/date';
 import ThumbUpAction from '../newsfeed/activity/actions/ThumbUpAction';
 import ThumbDownAction from '../newsfeed/activity/actions/ThumbDownAction';
@@ -36,9 +34,9 @@ import {
 } from '../config/Config';
 
 import CommentList from './CommentList';
-import commentsStoreProvider from '../comments/CommentsStoreProvider';
 import DoubleTap from '../common/components/DoubleTap';
 import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';
+import colors from '../styles/Colors';
 
 const DoubleTapText = DoubleTap(Text);
 
@@ -84,7 +82,7 @@ export default class Comment extends Component {
     )
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, comment.focused ? styles.focused : null]}>
         <TouchableOpacity onPress={this._navToChannel} style={styles.avatarContainer}>
           <Image source={avatarSrc} style={styles.avatar}/>
         </TouchableOpacity>
@@ -114,7 +112,7 @@ export default class Comment extends Component {
             <CommentList
               entity={this.props.entity}
               parent={comment}
-              store={this.comments}
+              store={comment.comments}
               onInputFocus={this.onInputFocus}
               navigation={this.props.navigation}
             />
@@ -151,10 +149,6 @@ export default class Comment extends Component {
    * Toggle expand
    */
   toggleExpand = () => {
-    if (!this.props.comment.expanded && !this.comments) {
-      this.comments = commentsStoreProvider.get();
-      this.comments.setParent(this.props.comment);
-    }
     this.props.comment.toggleExpanded();
   }
 
@@ -296,6 +290,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'stretch',
   },
+  focused: {
+    borderLeftColor: colors.primary,
+    borderLeftWidth: 4
+  },
   media: {
     flex: 1,
     margin: 8,

src/comments/CommentList.js

@@ -177,7 +177,7 @@ export default class CommentList extends React.Component<Props, State> {
 
   onLayout = (e) => {
     if (!this.props.parent) {
-      this.height = e.nativeEvent.layout.height;
+      this.height = e.nativeEvent.layout.height || 0;
     }
   }
 
@@ -385,7 +385,7 @@ export default class CommentList extends React.Component<Props, State> {
     return (
       <View>
         { header }
-        { this.props.store.loadPrevious && !this.props.store.loading ?
+        { this.props.store.loadPrevious && !this.props.store.loadingPrevious ?
           <TouchableHighlight
             onPress={() => { this.loadComments(true)}}
             underlayColor = 'transparent'
@@ -394,8 +394,8 @@ export default class CommentList extends React.Component<Props, State> {
             <Text style={[CS.fontM, CS.colorPrimary]}><IconMC name="update" size={16} /> LOAD EARLIER </Text>
           </TouchableHighlight> : null
         }
-        {this.props.store.loading && this.props.store.loaded && <ActivityIndicator size="small" style={CS.paddingTop2x}/>}
-        {this.getErrorLoading()}
+        {this.props.store.loadingPrevious && this.props.store.loaded && <ActivityIndicator size="small" style={CS.paddingTop2x}/>}
+        {this.getErrorLoading(this.props.store.errorLoadingPrevious, true)}
       </View>
     )
   }
@@ -409,8 +409,8 @@ export default class CommentList extends React.Component<Props, State> {
     this.props.store.refreshDone();
   }
 
-  getErrorLoading() {
-    if (this.props.store.errorLoading) {
+  getErrorLoading(errorLoading, descending) {
+    if (errorLoading) {
       const message = this.props.store.comments.length ?
         "Can't load more\nTry again" :
         "Can't load the comments\nTry again";
@@ -420,6 +420,28 @@ export default class CommentList extends React.Component<Props, State> {
     return null;
   }
 
+  /**
+   * Get list footer
+   */
+  getFooter() {
+    return (
+      <View>
+        { this.props.store.loadNext && !this.props.store.loadingNext ?
+          <TouchableHighlight
+            onPress={() => this.loadComments(true, false)}
+            underlayColor = 'transparent'
+            style = {[CS.rowJustifyCenter, CS.padding2x]}
+          >
+            <Text style={[CS.fontM, CS.colorPrimary]}><IconMC name="update" size={16} /> LOAD LATER </Text>
+          </TouchableHighlight> : null
+        }
+        {this.props.store.loadingNext && this.props.store.loaded && <ActivityIndicator size="small" style={CS.paddingTop2x}/>}
+        {this.getErrorLoading(this.props.store.errorLoadingNext, false)}
+      </View>
+    )
+  }
+
+
   getComments() {
     if (!this.props.store.comments) {
       return [];
@@ -435,11 +457,37 @@ export default class CommentList extends React.Component<Props, State> {
       this.props.store.comments.length !== this.getComments().length;
   }
 
+  /**
+   * @param {object} ref
+   */
+  setListRef = ref => this.listRef = ref;
+
+  /**
+   * @param {object} ref
+   */
+  setActionSheetRef = o => this.actionAttachmentSheet = o;
+
+
+  componentWillReact(){
+    if (this.props.store.getLevel() == 1)  console.log('will react',
+                                                      {comments : this.props.store.comments.length,
+                                                      refreshing : this.props.store.refreshing,
+                                                      loaded : this.props.store.loaded,
+                                                      saving : this.props.store.saving,
+                                                      text : this.props.store.text,
+                                                      loadingPrevious : this.props.store.loadingPrevious,
+                                                      loadingNext : this.props.store.loadingNext})
+  }
+
   /**
    * Render
    */
   render() {
 
+
+
+    if (this.props.store.getLevel() == 1) console.log('RENDERING');
+
     const header = this.getHeader();
 
     let actionsheet = null;
@@ -454,6 +502,7 @@ export default class CommentList extends React.Component<Props, State> {
     }
 
     const comments = this.getComments();
+    const footer = this.getFooter();
 
     const emptyThread = (<View style={[CS.textCenter]}>
       {this.isWholeThreadBlocked() && <Text style={[CS.textCenter, CS.marginBottom2x, CS.marginTop2x, CS.fontLight]}>
@@ -467,8 +516,9 @@ export default class CommentList extends React.Component<Props, State> {
           keyboardVerticalOffset={vPadding} enabled={this.state.focused && !this.props.parent}>
           <View style={CS.flexContainer}>
             <FlatList
-              ref={ref => this.listRef = ref}
+              ref={this.setListRef}
               ListHeaderComponent={header}
+              ListFooterComponent={footer}
               data={comments}
               keyboardShouldPersistTaps={'handled'}
               renderItem={this.renderComment}
@@ -489,7 +539,7 @@ export default class CommentList extends React.Component<Props, State> {
           </View>
           {actionsheet}
           <ActionSheet
-            ref={o => this.actionAttachmentSheet = o}
+            ref={this.setActionSheetRef}
             options={['Cancel', 'Gallery', 'Photo', 'Video']}
             onPress={this.selectMediaSource}
             cancelButtonIndex={0}

src/comments/CommentModel.js

 import { computed, action, observable, decorate } from 'mobx';
 
 import ActivityModel from '../newsfeed/ActivityModel';
+import commentsStoreProvider from '../comments/CommentsStoreProvider';
 import {
   MINDS_CDN_URI
 } from '../config/Config';
@@ -12,9 +13,29 @@ export default class CommentModel extends ActivityModel {
 
   @observable expanded = false;
 
+  /**
+   * Store for child comments
+   */
+  comments = null;
+
+  /**
+   * The parent comment
+   */
+  parent = null;
+
   @action
   toggleExpanded() {
     this.expanded = !this.expanded;
+    this.buildCommentsStore();
+  }
+
+  buildCommentsStore(parent) {
+    if (this.expanded && !this.comments) {
+      console.log('BUILD STORE FOR '+this.description)
+      this.comments = commentsStoreProvider.get();
+      this.comments.setParent(this);
+      this.parent = parent;
+    }
   }
 
   /**

src/comments/CommentsService.js

 import api from './../common/services/api.service';
 
+const decodeUrn = (urn) => {
+  let parts = urn.split(':');
+
+  const obj = {
+    entity_guid: parts[2],
+    parent_guid_l1: parts[3],
+    parent_guid_l2: parts[4],
+    parent_guid_l3: parts[5],
+    guid: parts[6],
+    parent_path: parts[5] ? `${parts[3]}:${parts[4]}:0` : `${parts[3]}:0:0`,
+  };
+
+  return obj;
+}
+
 /**
  * Get comments
  * @param {string} guid
@@ -7,13 +22,57 @@ import api from './../common/services/api.service';
  * @param {string} offset
  * @param {integer} limit
  */
-export async function getComments(guid, parent_path, descending, token, include_offset, limit = 12, comment_guid = 0) {
-  const params = { limit, descending, reversed: false};
-  if (token) params.token = token;
-  if (include_offset) params.include_offset = include_offset;
+export async function getComments(focusedUrn, entity_guid, parent_path, level, limit, loadNext, loadPrevious, descending ) {
+
+  let focusedUrnObject = focusedUrn ? decodeUrn(focusedUrn) : null;
+  if (focusedUrn) {
+    if (entity_guid != focusedUrnObject.entity_guid)
+       focusedUrn = null; //wrong comment thread to focus on
+    if (loadNext || loadPrevious)
+      focusedUrn = null; //can not focus and have pagination
+    if (focusedUrn && parent_path === '0:0:0') {
+      loadNext = focusedUrnObject.parent_guid_l1;
+    }
+    if (focusedUrn && parent_path === `${focusedUrnObject.parent_guid_l1}:0:0`) {
+      loadNext = focusedUrnObject.parent_guid_l2;
+    }
+    if (focusedUrn && parent_path === `${focusedUrnObject.parent_guid_l1}:${focusedUrnObject.parent_guid_l2}:0`) {
+      loadNext = focusedUrnObject.guid;
+    }
+  }
+
+  const opts = {
+    entity_guid,
+    parent_path,
+    focused_urn: focusedUrn,
+    limit: limit,
+    'load-previous': loadPrevious || null,
+    'load-next': loadNext || null,
+  };
+
+  let uri = `api/v2/comments/${opts.entity_guid}/0/${opts.parent_path}`;
+
+  let response = await api.get(uri, opts);
+
+  if (focusedUrn && focusedUrnObject) {
+    for (let comment of response.comments) {
+      switch (level) {
+        case 0:
+          comment.expanded = (comment.child_path === `${focusedUrnObject.parent_guid_l1}:0:0`);
+          break;
+        case 1:
+          comment.expanded = comment.child_path === `${focusedUrnObject.parent_guid_l1}:${focusedUrnObject.parent_guid_l2}:0`;
+          break;
+        default:
+          console.log('Level out of scope', level);
+      }
+      comment.focused = (comment._guid === focusedUrnObject.guid);
+    }
+  }
 
-  const data = await api.get(`api/v1/comments/${guid}/${comment_guid}/${parent_path}`, params);
-  return data;
+  //only use once
+  focusedUrn = null;
+  return response;
 }
 
 /**

src/comments/CommentsStore.js

 import {
   observable,
-  action
+  action,
+  runInAction
 } from 'mobx'
 
 import { Platform } from 'react-native';
@@ -9,11 +10,7 @@ import {
   getComments,
   postComment,
   updateComment,
-  deleteComment,
-  getCommentsReply,
-  postReplyComment,
-  updateReplyComment,
-  deleteReplyComment
+  deleteComment
 } from './CommentsService';
 
 import Comment from './Comment';
@@ -25,8 +22,9 @@ import attachmentService from '../common/services/attachment.service';
 import {toggleExplicit} from '../newsfeed/NewsfeedService';
 import RichEmbedStore from '../common/stores/RichEmbedStore';
 import logService from '../common/services/log.service';
+import NavigationService from '../navigation/NavigationService';
 
-const COMMENTS_PAGE_SIZE = 6;
+const COMMENTS_PAGE_SIZE = 3;
 
 /**
  * Comments Store
@@ -38,8 +36,14 @@ export default class CommentsStore {
   @observable loaded = false;
   @observable saving = false;
   @observable text = '';
-  @observable loading = false;
-  @observable errorLoading = false;
+  @observable loadingPrevious = false;
+  @observable loadingNext = false;
+
+  @observable errorLoadingPrevious = false;
+  @observable errorLoadingNext = false;
+
+  level = 0;
+  focusedUrn = null;
 
   // attachment store
   attachment = new AttachmentStore();
@@ -56,6 +60,10 @@ export default class CommentsStore {
   // parent for reply
   parent = null;
 
+  constructor() {
+    this.focusedUrn = this.getFocuedUrn();
+  }
+
   getParentPath() {
     return (this.parent && this.parent.child_path) ? this.parent.child_path : '0:0:0';
   }
@@ -68,42 +76,110 @@ export default class CommentsStore {
     this.entity = entity;
   }
 
+  /**
+   * Set focused urn
+   * @param {String|null} value
+   */
+  setFocusedUrn(value) {
+    this.focusedUrn = value;
+  }
+
+  /**
+   * Get level
+   */
+  getLevel() {
+    if (this.parent) {
+      if (this.parent.parent) {
+        return 2;
+      }
+      return 1;
+    }
+    return 0
+  }
+
+  /**
+   * Get focused urn
+   */
+  getFocuedUrn() {
+    const params = NavigationService.getCurrentState().params;
+
+    let value = null;
+
+    if (params && params.focusedUrn) value = params.focusedUrn;
+
+    return value;
+  }
+
   /**
    * Load Comments
    */
   @action
-  async loadComments(guid, descending = true, comment_guid = 0) {
-    if (this.cantLoadMore(guid)) {
+  async loadComments(guid, descending = true) {
+    if (this.cantLoadMore(guid, descending)) {
       return;
     }
     this.guid = guid;
 
-    this.loading = true;
-    this.setErrorLoading(false);
+    if (descending) {
+      this.setErrorLoadingPrevious(false);
+      this.loadingPrevious = true;
+    } else {
+      this.setErrorLoadingNext(false);
+      this.loadingNext = true;
+    }
 
     this.include_offset = '';
     const parent_path = this.getParentPath();
 
     try {
 
-      const response = await getComments(this.guid, parent_path, descending, this.loadPrevious, this.include_offset, COMMENTS_PAGE_SIZE, comment_guid);
+      const response = await getComments(
+        this.focusedUrn,
+        this.guid,
+        parent_path,
+        this.getLevel(),
+        COMMENTS_PAGE_SIZE,
+        descending ? null : this.loadNext,
+        descending ? this.loadPrevious : null,
+        descending,
+      );
+
+      runInAction(() => {
+        this.loaded = true;
+        this.setComments(response, descending);
+      });
 
-      this.loaded = true;
-      this.setComments(response, descending);
       this.checkListen(response);
     } catch (err) {
-      this.setErrorLoading(true);
+      if (descending) {
+        this.setErrorLoadingPrevious(true);
+      } else {
+        this.setErrorLoadingNext(true);
+      }
       if (!(typeof err === 'TypeError' && err.message === 'Network request failed')) {
         logService.exception('[CommentsStore] loadComments', err);
       }
     } finally {
-      this.loading = false;
+      runInAction(() => {
+        if (descending) {
+          this.loadingPrevious = false;
+        } else {
+          this.loadingNext = false;
+        }
+      })
+      // use only once
+      this.focusedUrn = null;
     }
   }
 
   @action
-  setErrorLoading(value) {
-    this.errorLoading = value;
+  setErrorLoadingNext(value) {
+    this.errorLoadingNext = value;
+  }
+
+  @action
+  setErrorLoadingPrevious(value) {
+    this.errorLoadingPrevious = value;
   }
 
   /**
@@ -209,20 +285,31 @@ export default class CommentsStore {
    */
   @action
   setComments(response, descending) {
+
+    if (this.comments.length) {
+      if (descending) {
+        this.loadPrevious = response['load-previous'];
+      } else {
+        this.loadNext = response['load-next'];
+      }
+    } else {
+      this.loadPrevious = response['load-previous'];
+      this.loadNext = response['load-next'];
+    }
+
     if (response.comments) {
       const comments = CommentModel.createMany(response.comments)
-      comments.reverse().forEach(c => this.comments.unshift(c));
 
-      if (response.comments.length < COMMENTS_PAGE_SIZE) { //nothing more to load
-        response['load-previous'] = '';
+      // check and build child comments store if necessary
+      comments.forEach(c => c.buildCommentsStore(this.parent))
+
+      if (descending) {
+        comments.reverse().forEach(c => this.comments.unshift(c));
+      } else {
+        comments.forEach(c => this.comments.push(c));
       }
     }
     this.reversed = response.reversed;
-    if (descending) {
-      this.loadPrevious = response['load-previous'];
-    } else {
-      this.loadNext = response['load-previous'];
-    }
   }
 
   /**
@@ -341,9 +428,10 @@ export default class CommentsStore {
   /**
    * Cant load more
    * @param {string} guid
+   * @param {boolean} descending
    */
-  cantLoadMore(guid) {
-    return this.loaded && !(this.loadPrevious) && !this.refreshing && this.guid === guid;
+  cantLoadMore(guid, descending) {
+    return this.loaded && !(descending ? this.loadPrevious : this.loadNext) && !this.refreshing && this.guid === guid;
   }
 
   /**
@@ -505,5 +593,4 @@ export default class CommentsStore {
       this.comments.splice(index, 1);
     }
   }
-
 }
\ No newline at end of file

src/notifications/NotificationsService.js

 import api from './../common/services/api.service';
 import { abort } from '../common/helpers/abortableFetch';
+import logService from '../common/services/log.service';
 
 export default class NotificationsService {
 

src/notifications/notification/view/CommentView.js

@@ -41,21 +41,21 @@ export default class CommentView extends Component {
   navTo = () => {
     switch (this.props.entity.entityObj.type ) {
       case 'activity':
-        this.props.navigation.push('Activity', { entity: this.props.entity.entityObj, hydrate: true });
+        this.props.navigation.push('Activity', { entity: this.props.entity.entityObj, hydrate: true, focusedUrn: this.props.entity.params.focusedCommentUrn });
         break;
       case 'object':
         switch(this.props.entity.entityObj.subtype) {
           case 'blog':
-            this.props.navigation.push('BlogView', { blog: this.props.entity.entityObj, hydrate: true });
+            this.props.navigation.push('BlogView', { blog: this.props.entity.entityObj, hydrate: true, focusedUrn: this.props.entity.params.focusedCommentUrn });
             break;
           case 'image':
           case 'video':
-            this.props.navigation.push('Activity', { entity: this.props.entity.entityObj, hydrate: true });
+            this.props.navigation.push('Activity', { entity: this.props.entity.entityObj, hydrate: true, focusedUrn: this.props.entity.params.focusedCommentUrn });
             break;
         }
         break;
       case 'group':
-        this.props.navigation.push('GroupView', { group: this.props.entity.entityObj, hydrate: true, tab: 'conversation' });
+        this.props.navigation.push('GroupView', { group: this.props.entity.entityObj, hydrate: true, tab: 'conversation', focusedUrn: this.props.entity.params.focusedCommentUrn  });
         break;
     }
   }

yarn.lock

@@ -5841,10 +5841,10 @@ mkdirp@*, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mobx-react@^5.4.3:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.4.3.tgz#6709b7dd89670c40e9815914ac2ca49cc02bfb47"
-  integrity sha512-WC8yFlwvJ91hy8j6CrydAuFteUafcuvdITFQeHl3LRIf5ayfT/4W3M/byhEYD2BcJWejeXr8y4Rh2H26RunCRQ==
+mobx-react@^5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.4.4.tgz#b3de9c6eabcd0ed8a40036888cb0221ab9568b80"
+  integrity sha512-2mTzpyEjVB/RGk2i6KbcmP4HWcAUFox5ZRCrGvSyz49w20I4C4qql63grPpYrS9E9GKwgydBHQlA4y665LuRCQ==
   dependencies:
     hoist-non-react-statics "^3.0.0"
     react-lifecycles-compat "^3.0.2"