From d5d9481c0f4c1ddd86f2e30f798da50c37f56a3a Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 30 Jun 2015 20:01:35 -0700 Subject: Added new files for adding new loading animation --- web/react/components/loading_posts.jsx | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 web/react/components/loading_posts.jsx (limited to 'web/react/components') diff --git a/web/react/components/loading_posts.jsx b/web/react/components/loading_posts.jsx new file mode 100644 index 000000000..f6d859954 --- /dev/null +++ b/web/react/components/loading_posts.jsx @@ -0,0 +1,3 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + -- cgit v1.2.3-1-g7c22 From 483b37a64f978db84cd0d128665d2c79775c6e60 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 1 Jul 2015 16:51:26 -0700 Subject: Added logic for loading animation to appear when posts have yet to be loaded. Added markup necessary for loading animation css. Removed a file that was no longer needed for the design. --- web/react/components/loading_posts.jsx | 3 --- web/react/components/post_list.jsx | 17 +++++++++++++++-- 2 files changed, 15 insertions(+), 5 deletions(-) delete mode 100644 web/react/components/loading_posts.jsx (limited to 'web/react/components') diff --git a/web/react/components/loading_posts.jsx b/web/react/components/loading_posts.jsx deleted file mode 100644 index f6d859954..000000000 --- a/web/react/components/loading_posts.jsx +++ /dev/null @@ -1,3 +0,0 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. -// See License.txt for license information. - diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index ad8cfa20f..a860804cc 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -295,7 +295,7 @@ module.exports = React.createClass({ }, render: function() { var order = []; - var posts = {}; + var posts; var last_viewed = Number.MAX_VALUE; @@ -408,7 +408,7 @@ module.exports = React.createClass({ } var postCtls = []; - var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); + var previousPostDay = posts && posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); var currentPostDay = new Date(); for (var i = order.length-1; i >= 0; i--) { @@ -459,6 +459,19 @@ module.exports = React.createClass({ previousPostDay = utils.getDateForUnixTicks(post.create_at); } + if (posts == undefined) { + postCtls.push( +
+
+

Loading

+
+
+
+
+
+ ); + } + return (
-- cgit v1.2.3-1-g7c22 From 1a1b29ee6c1aa20a5f608f57616b078f0dbbbe51 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 2 Jul 2015 16:38:34 -0700 Subject: Restructured logic to flow more naturally and be cleaner --- web/react/components/post_list.jsx | 86 +++++++++++++++++++------------------- 1 file changed, 44 insertions(+), 42 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index a860804cc..169efc766 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -408,58 +408,60 @@ module.exports = React.createClass({ } var postCtls = []; - var previousPostDay = posts && posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); - var currentPostDay = new Date(); - for (var i = order.length-1; i >= 0; i--) { - var post = posts[order[i]]; - var parentPost; + if (posts != undefined) { + var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); + var currentPostDay = new Date(); - if (post.parent_id) { - parentPost = posts[post.parent_id]; - } else { - parentPost = null; - } + for (var i = order.length-1; i >= 0; i--) { + var post = posts[order[i]]; + var parentPost; - var sameUser = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && post.create_at - posts[order[i+1]].create_at <= 1000*60*5 ? "same--user" : ""; - var sameRoot = i < order.length-1 && post.root_id != "" && (posts[order[i+1]].id === post.root_id || posts[order[i+1]].root_id === post.root_id) ? true : false; + if (post.parent_id) { + parentPost = posts[post.parent_id]; + } else { + parentPost = null; + } - // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post - var hideProfilePic = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && posts[order[i+1]].root_id === '' && post.root_id === ''; + var sameUser = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && post.create_at - posts[order[i+1]].create_at <= 1000*60*5 ? "same--user" : ""; + var sameRoot = i < order.length-1 && post.root_id != "" && (posts[order[i+1]].id === post.root_id || posts[order[i+1]].root_id === post.root_id) ? true : false; - // check if it's the last comment in a consecutive string of comments on the same post - var isLastComment = false; - if (utils.isComment(post)) { - // it is the last comment if it is last post in the channel or the next post has a different root post - isLastComment = (i === 0 || posts[order[i-1]].root_id != post.root_id); - } + // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post + var hideProfilePic = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && posts[order[i+1]].root_id === '' && post.root_id === ''; - var postCtl = ; + // check if it's the last comment in a consecutive string of comments on the same post + var isLastComment = false; + if (utils.isComment(post)) { + // it is the last comment if it is last post in the channel or the next post has a different root post + isLastComment = (i === 0 || posts[order[i-1]].root_id != post.root_id); + } - currentPostDay = utils.getDateForUnixTicks(post.create_at); - if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) { - postCtls.push( -
-
-
{currentPostDay.toDateString()}
-
- ); - } + var postCtl = ; - if (post.create_at > last_viewed && !rendered_last_viewed) { - rendered_last_viewed = true; - postCtls.push( -
-
-
New Messages
-
- ); + currentPostDay = utils.getDateForUnixTicks(post.create_at); + if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) { + postCtls.push( +
+
+
{currentPostDay.toDateString()}
+
+ ); + } + + if (post.create_at > last_viewed && !rendered_last_viewed) { + rendered_last_viewed = true; + postCtls.push( +
+
+
New Messages
+
+ ); + } + postCtls.push(postCtl); + previousPostDay = utils.getDateForUnixTicks(post.create_at); } - postCtls.push(postCtl); - previousPostDay = utils.getDateForUnixTicks(post.create_at); } - - if (posts == undefined) { + else { postCtls.push(
-- cgit v1.2.3-1-g7c22