Merge pull request #891 from steemit/develop

release 0.1.161221

app/ResolveRoute.js

@@ -2,7 +2,10 @@ export const routeRegex = {
     PostsIndex: /^\/(@[\w\.\d-]+)\/feed\/?$/,
     UserProfile1: /^\/(@[\w\.\d-]+)\/?$/,
     UserProfile2: /^\/(@[\w\.\d-]+)\/(blog|posts|comments|recommended|transfers|curation-rewards|author-rewards|permissions|created|recent-replies|feed|password|followed|followers|settings)\/?$/,
-    PostNoCategory: /^\/(@[\w\.\d-]+)\/([\w\d-]+)/
+    UserEndPoints: /^(blog|posts|comments|recommended|transfers|curation-rewards|author-rewards|permissions|created|recent-replies|feed|password|followed|followers|settings)$/,
+    CategoryFilters: /^\/(hot|created|trending|active|promoted)\/?$/ig,
+    PostNoCategory: /^\/(@[\w\.\d-]+)\/([\w\d-]+)/,
+    UserJson: /^\/(@[\w\.\d-]+)(\/json)$/
 }
 
 export default function resolveRoute(path)

app/components/cards/Comment.jsx

@@ -22,30 +22,13 @@ export function sortComments( cont, comments, sort_order ) {
 
   let sort_orders = {
   /** sort replies by active */
-      active: (a,b) => {
+      votes: (a,b) => {
                 let acontent = cont.get(a);
                 let bcontent = cont.get(b);
-                if (netNegative(acontent)) {
-                    return 1;
-                } else if (netNegative(bcontent)) {
-                    return -1;
-                }
-                let aactive = Date.parse( acontent.get('active') );
-                let bactive = Date.parse( bcontent.get('active') );
+                let aactive = acontent.get('active_votes').size;
+                let bactive = bcontent.get('active_votes').size;
                 return bactive - aactive;
               },
-      update: (a,b) => {
-                let acontent = cont.get(a);
-                let bcontent = cont.get(b);
-                if (netNegative(acontent)) {
-                    return 1;
-                } else if (netNegative(bcontent)) {
-                    return -1;
-                }
-                let aactive = Date.parse( acontent.get('last_update') );
-                let bactive = Date.parse( bcontent.get('last_update') );
-                return bactive.getTime() - aactive.getTime();
-              },
       new:  (a,b) =>  {
                 let acontent = cont.get(a);
                 let bcontent = cont.get(b);
@@ -84,7 +67,7 @@ class CommentImpl extends React.Component {
         // html props
         cont: React.PropTypes.object.isRequired,
         content: React.PropTypes.string.isRequired,
-        sort_order: React.PropTypes.oneOf(['active', 'updated', 'new', 'trending']).isRequired,
+        sort_order: React.PropTypes.oneOf(['votes', 'new', 'trending']).isRequired,
         root: React.PropTypes.bool,
         showNegativeComments: React.PropTypes.bool,
         onHide: React.PropTypes.func,

app/components/cards/Comment.scss

@@ -83,14 +83,6 @@
   }
 }
 
-.Comment > div > .Comment__header > .Comment__header_collapse > .Voting {
-  visibility: hidden;
-}
-
-.Comment:hover > div > .Comment__header > .Comment__header_collapse > .Voting {
-  visibility: visible;
-}
-
 .Comment__body {
   margin-left: 62px;
   max-width: 50rem;

app/components/cards/PostFull.jsx

@@ -4,8 +4,6 @@ import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
 import pluralize from 'pluralize';
 import Icon from 'app/components/elements/Icon';
 import { connect } from 'react-redux';
-// import FormattedAsset from 'app/components/elements/FormattedAsset';
-// import Userpic from 'app/components/elements/Userpic';
 import user from 'app/redux/User';
 import transaction from 'app/redux/Transaction'
 import Voting from 'app/components/elements/Voting';
@@ -23,6 +21,7 @@ import {repLog10, parsePayoutAmount} from 'app/utils/ParsersAndFormatters';
 import DMCAList from 'app/utils/DMCAList'
 import PageViewsCounter from 'app/components/elements/PageViewsCounter';
 import ShareMenu from 'app/components/elements/ShareMenu';
+import {serverApiRecordEvent} from 'app/utils/ServerApiClient';
 
 function TimeAuthorCategory({content, authorRepLog10, showTags}) {
     return (
@@ -101,6 +100,7 @@ class PostFull extends React.Component {
     }
 
     fbShare(e) {
+        serverApiRecordEvent('FbShare', this.share_params.link);
         e.preventDefault();
         window.FB.ui({
             method: 'share',
@@ -109,6 +109,7 @@ class PostFull extends React.Component {
     }
 
     twitterShare(e) {
+        serverApiRecordEvent('TwitterShare', this.share_params.link);
         e.preventDefault();
         const winWidth = 640;
         const winHeight = 320;
@@ -120,6 +121,7 @@ class PostFull extends React.Component {
     }
 
     linkedInShare(e) {
+        serverApiRecordEvent('LinkedInShare', this.share_params.link);
         e.preventDefault();
         const winWidth = 720;
         const winHeight = 480;
@@ -174,6 +176,7 @@ class PostFull extends React.Component {
             net_rshares.compare(Long.ZERO) <= 0
 
         this.share_params = {
+            link,
             url: 'https://steemit.com' + link,
             title: title + ' — Steemit',
             desc: p.desc
@@ -260,14 +263,14 @@ class PostFull extends React.Component {
                     </span>
                 }
 
-                {showPromote && <button className="float-right button hollow tiny" onClick={this.showPromotePost}>Promote</button>}
+                {showPromote && <button className="Promote__button float-right button hollow tiny" onClick={this.showPromotePost}>Promote</button>}
                 <TagList post={content} horizontal />
                 <div className="PostFull__footer row">
                     <div className="column">
                         <TimeAuthorCategory content={content} authorRepLog10={authorRepLog10} />
                         <Voting post={post} />
                     </div>
-                    <div className="right-sub-menu small-10 medium-5 large-5 columns text-right">
+                    <div className="RightShare__Menu small-10 medium-5 large-5 columns text-right">
                         {!readonly && <Reblog author={author} permlink={permlink} />}
                         {!readonly &&
                             <span className="PostFull__reply">

app/components/cards/PostFull.scss

@@ -118,6 +118,10 @@
   }
 }
 
+.Promote__button {
+  margin-right: 0px!important;
+}
+
 /* Small only */
 @media screen and (max-width: 39.9375em) {
   .Post {
@@ -129,7 +133,7 @@
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
   }
-  .PostFull__footer > .right-sub-menu {
+  .PostFull__footer > .RightShare__Menu {
     text-align: left;
   }
 }

app/components/cards/PostSummary.jsx

@@ -40,13 +40,28 @@ class PostSummary extends React.Component {
         netVoteSign: React.PropTypes.number,
         currentCategory: React.PropTypes.string,
         thumbSize: React.PropTypes.string,
+        nsfwPref: React.PropTypes.string,
         onClick: React.PropTypes.func
     };
 
-    shouldComponentUpdate(props) {
+    constructor() {
+        super();
+        this.state = {revealNsfw: false}
+        this.onRevealNsfw = this.onRevealNsfw.bind(this)
+    }
+
+    shouldComponentUpdate(props, state) {
         return props.thumbSize !== this.props.thumbSize ||
                props.pending_payout !== this.props.pending_payout ||
-               props.total_payout !== this.props.total_payout;
+               props.total_payout !== this.props.total_payout ||
+               props.username !== this.props.username ||
+               props.nsfwPref !== this.props.nsfwPref ||
+               state.revealNsfw !== this.state.revealNsfw;
+    }
+
+    onRevealNsfw(e) {
+        e.preventDefault();
+        this.setState({revealNsfw: true})
     }
 
     render() {
@@ -70,7 +85,7 @@ class PostSummary extends React.Component {
                          </div>
         }
 
-        const {gray, pictures, authorRepLog10, hasFlag} = content.get('stats', Map()).toJS()
+        const {gray, pictures, authorRepLog10, hasFlag, isNsfw} = content.get('stats', Map()).toJS()
         const p = extractContent(immutableAccessor, content);
         let desc = p.desc
         if(p.image_link)// image link is already shown in the preview
@@ -96,6 +111,7 @@ class PostSummary extends React.Component {
         </div>;
         let content_title = <h1 className="entry-title">
             <a href={title_link_url} onClick={e => navigate(e, onClick, post, title_link_url)}>
+                {isNsfw && <span className="nsfw-flag">nsfw</span>}
                 {title_text}
                 {full_power && <span title="Powered Up 100%"><Icon name="steem" /></span>}
             </a>
@@ -108,10 +124,26 @@ class PostSummary extends React.Component {
             {} in <TagList post={p} single />
         </span>
 
-        if( !(currentCategory && currentCategory.match( /nsfw/ )) ) {
-           if (currentCategory !== '-' && currentCategory !== p.category && p.category.match(/nsfw/) ) {
-               return null;
-           }
+        const {nsfwPref, username} = this.props
+        const {revealNsfw} = this.state
+
+        if(isNsfw) {
+            if(nsfwPref === 'hide') {
+                // user wishes to hide these posts entirely
+                return null;
+            } else if(!revealNsfw && nsfwPref !== 'show') {
+                // warn the user, unless they have chosen to reveal this post or have their preference set to "show always"
+                return (
+                    <article className={'PostSummary hentry'} itemScope itemType ="http://schema.org/blogPost">
+                        <div className="PostSummary__nsfw-warning">
+                            This post is <span className="nsfw-flag">nsfw</span>.
+                            You can <a href="#" onClick={this.onRevealNsfw}>reveal it</a> or{' '}
+                            {username ? <span>adjust your <Link to={`/@${username}/settings`}>display preferences</Link>.</span>
+                                      : <span><Link to="/enter_email">create an account</Link> to save your preferences.</span>}
+                        </div>
+                    </article>
+                )
+            }
         }
 
         let thumb = null;
@@ -139,7 +171,6 @@ class PostSummary extends React.Component {
                 </div>
                 <div className="PostSummary__time_author_category_small show-for-small-only">
                     {author_category}
-
                 </div>
                 {thumb}
                 <div className="PostSummary__content">
@@ -171,7 +202,10 @@ export default connect(
             pending_payout = content.get('pending_payout_value');
             total_payout = content.get('total_payout_value');
         }
-        return {post, content, pending_payout, total_payout};
+        return {
+            post, content, pending_payout, total_payout,
+            username: state.user.getIn(['current', 'username']) || state.offchain.get('account')
+        };
     },
 
     (dispatch) => ({

app/components/cards/PostSummary.scss

@@ -8,6 +8,24 @@ ul.PostsList__summaries {
   background-color: #fff;
   clear: left;
   @include clearfix;
+
+  .PostSummary__nsfw-warning {
+    border: 1px solid $medium-gray;
+    border-radius: 0.5rem;
+    padding: 1.5rem 2rem;
+    min-height: 80px;
+  }
+
+  .nsfw-flag {
+     color: #C00;
+     border: 1px solid #C00;
+     font-size: 75%;
+     border-radius: 3px;
+     font-weight: normal;
+     font-family: Arial;
+     margin: 0 0.1rem;
+     padding: 0 0.2rem;
+  }
 }
 
 .PostSummary__image {
@@ -61,6 +79,9 @@ ul.PostsList__summaries {
       }
     }
   }
+  .nsfw-flag {
+    margin-right: 0.25rem;
+  }
 }
 .PostSummary__collapse {
   visibility: hidden;

app/components/cards/PostsList.jsx

@@ -36,6 +36,7 @@ class PostsList extends React.Component {
         this.state = {
             thumbSize: 'desktop',
             showNegativeComments: false,
+            nsfwPref: 'warn',
             showPost: null
         }
         this.scrollListener = this.scrollListener.bind(this);
@@ -45,6 +46,18 @@ class PostsList extends React.Component {
         this.shouldComponentUpdate = shouldComponentUpdate(this, 'PostsList')
     }
 
+    componentWillMount() {
+        this.readNsfwPref()
+    }
+
+    readNsfwPref() {
+        if(!process.env.BROWSER) return
+        const {username} = this.props
+        const key = 'nsfwPref' + (username ? '-' + username : '')
+        const nsfwPref = localStorage.getItem(key) || 'warn'
+        this.setState({nsfwPref})
+    }
+
     componentDidMount() {
         this.attachScrollListener();
     }
@@ -54,6 +67,7 @@ class PostsList extends React.Component {
         if (this.state.showPost && (location !== this.post_url)) {
             this.setState({showPost: null});
         }
+        this.readNsfwPref();
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -158,7 +172,7 @@ class PostsList extends React.Component {
     render() {
         const {posts, showSpam, loading, category, content,
             ignore_result, account} = this.props;
-        const {thumbSize, showPost} = this.state
+        const {thumbSize, showPost, nsfwPref} = this.state
         const postsInfo = [];
         posts.forEach(item => {
             const cont = content.get(item);
@@ -183,6 +197,7 @@ class PostsList extends React.Component {
                 netVoteSign={item.netVoteSign}
                 authorRepLog10={item.authorRepLog10}
                 onClick={this.onPostClick}
+                nsfwPref={nsfwPref}
             />
         </li>)
 
@@ -217,7 +232,7 @@ export default connect(
     (state, props) => {
         const pathname = state.app.get('location').pathname;
         const current = state.user.get('current')
-        const username = current ? current.get('username') : null
+        const username = current ? current.get('username') : state.offchain.get('account')
         const content = state.global.get('content');
         const ignore_result = state.global.getIn(['follow', 'get_following', username, 'ignore_result']);
         return {...props, username, content, ignore_result, pathname};