refactored css around hearts and added comment hearting

mdeiters · mdeiters · commit d30563d1d6f7 · 2016-02-18T12:14:25.000-08:00
diff --git a/app/assets/javascripts/components/Heart.es6.jsx b/app/assets/javascripts/components/Heart.es6.jsx
@@ -1,35 +1,64 @@
 class Heart extends React.Component {
   render() {
     let classes = {
-      root: 'heart left ml1 mr2',
-      icon: 'highlight center',
-      count: 'diminish center font-tiny'
+      root:  'heart no-hover',
+      icon:  'highlight',
+      count: 'diminish font-tiny',
+      inline: ''
     }
     if (this.props.layout === 'inline') {
       classes = {
-        root: 'heart left ml1 mr2 flat',
-        icon: 'highlight mr1',
-        count: 'diminish inline'
+        root:  'heart no-hover font-x-lg',
+        icon:  'highlight',
+        count: 'ml1 diminish bold',
+        inline: 'inline'
+      }
+    }
+    if (this.props.layout === 'simple') {
+      classes = {
+        root:  'heart pointer',
+        icon:  'highlight',
+        count: 'ml1',
+        inline: 'inline'
       }
     }
     return (
-      <div>
+      <div className='inline'>
         <a className={classes.root} onClick={() => this.props.onClick()}>
-          {this.renderHeartState(classes.icon)}
-          <div className={classes.count}>
-            {this.numberToHuman(this.props.count)}
-          </div>
+          <center className={classes.inline}>
+            {this.renderHeartState(classes.icon)}
+          </center>
+          {this.renderHeartCount(classes)}
         </a>
       </div>
     )
   }
 
+  renderHeartCount(classes){
+    if(this.props.layout != 'simple')
+    {
+      return <div className={classes.count}>
+            <center className={classes.inline}>
+              {this.numberToHuman(this.props.count)}
+            </center>
+          </div>
+    }
+  }
+
   renderHeartState(classes) {
     if (!this.props.hearted) {
-      return <div className={classes + ' pointer'}>
-        <i className="fa fa-heart-o" />
-      </div>
+      if(this.props.layout === 'simple')
+      {
+        return <span>Like?</span>
+      }
+      else
+      {
+        return <div className={classes + ' pointer'}>
+          <i className={classes + ' pointer fa fa-heart-o'} />
+        </div>
+      }
     }
+
     return <div className={classes + ' hearted default-cursor'}>
       <i className="fa fa-heart" />
     </div>
diff --git a/app/assets/javascripts/components/Heartable.es6.jsx b/app/assets/javascripts/components/Heartable.es6.jsx
@@ -1,4 +1,4 @@
-class ProtipHeart extends React.Component {
+class Heartable extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -8,8 +8,7 @@ class ProtipHeart extends React.Component {
   }
 
   componentDidMount() {
-    const userLikes = JSON.parse($('#signed-in-user-liked-payload').html()) || []
-    console.log(userLikes)
+    const userLikes = getUserLikes()
     if (userLikes.indexOf(this.props.id) > -1) {
       this.setState({hearted: true})
     }
@@ -41,7 +40,13 @@ class ProtipHeart extends React.Component {
   }
 }
 
-ProtipHeart.propTypes = {
+Heartable.propTypes = {
   initialCount: React.PropTypes.number,
-  protipId: React.PropTypes.string,
+  protipId: React.PropTypes.string
+}
+
+var _userLikes
+function getUserLikes() {
+  _userLikes = _userLikes || JSON.parse($('#current-users-liked-as-json').html())
+  return _userLikes
 }
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -17,7 +17,6 @@ $font-x-lg: 18px;
 
 $highlight-color: $red;
 .highlight {
-  display: inline;
   color: $highlight-color !important;
   a {
     color: $highlight-color !important;
@@ -47,11 +46,15 @@ $highlight-color: $red;
 	font-size: $font-lg;
 }
 
+.font-x-lg {
+	font-size: $font-x-lg;
+}
+
 .active {
 	border-bottom: solid 3px $blue;
 }
 
-$h3: 18px;
+$h3: $font-x-lg;
 
 h1, h3 {
 	a{
@@ -110,6 +113,10 @@ $placeholder: darken($silver, 20%);
 	}
 }
 
+.mt-third {
+	margin-top: .33rem;
+}
+
 .default-cursor{
 	cursor: default !important;
 }
@@ -118,26 +125,6 @@ $placeholder: darken($silver, 20%);
 	cursor: pointer;
 }
 
-a.heart {
-  padding-top: 4px;
-  font-size: $font-sm;
-  color: red;
-  text-decoration: none;
-
-  i {
-    font-size: $font-sm;
-  }
-
-  &.flat {
-    padding-top: 0px;
-    font-size: $font-lg;
-    font-weight: bold;
-    i {
-      font-size: $font-lg;
-    }
-  }
-}
-
 a.no-hover {
 	&:hover{
 		text-decoration: none;
@@ -187,3 +174,8 @@ header {
 .focus-pb3:focus {
 	padding-bottom: $space-3;
 }
+
+//neutralize rails-react wrappers affect on layout
+div[data-react-class], div[data-reactid] {
+	display: inline;
+}
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
@@ -1,5 +1,15 @@
 module UsersHelper
 
+  def current_user_liked_list
+    # what it was on protip
+    #signed-in-user-liked-payload.hide=current_user.likes?(@protip) && [dom_id(@protip)]
+    if signed_in?
+      current_user.liked
+    else
+      empty_json_array_so_font_end_continues = '[]'
+    end
+  end
+
   def finishing_signup?
     params[:finish_signup] == true
   end
diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
@@ -10,4 +10,8 @@
           &middot;
           %a{:href => comment_path(comment), 'data-method'=>'delete', 'data-confirm' => 'Are you sure you want to delete your comment?'}=icon('trash')
         &middot;
-        %a{:href => comment_likes_path(comment), 'data-remote'=>"true", 'data-method'=>'post'} Like?
+        = react_component 'Heartable',
+          id: dom_id(comment),
+          href: comment_likes_path(comment),
+          initialCount: comment.likes_count,
+          layout: 'simple'
diff --git a/app/views/protips/_protip.html.haml b/app/views/protips/_protip.html.haml
@@ -1,8 +1,10 @@
-.protip.card.clearfix.p1.mb2.likeable{id: dom_id(protip)}
-  = react_component 'ProtipHeart',
-    id: dom_id(protip),
-    href: protip_likes_path(protip),
-    initialCount: protip.likes_count
+.protip.card.clearfix.py1.mb2.likeable{id: dom_id(protip)}
+  .left.col.col-1
+    .mt-third
+      = react_component 'Heartable',
+        id: dom_id(protip),
+        href: protip_likes_path(protip),
+        initialCount: protip.likes_count
 
   .overflow-hidden
     %h3.mt0.mb0
diff --git a/app/views/protips/index.html.haml b/app/views/protips/index.html.haml
@@ -1,8 +1,7 @@
 -content_for :title do
   Coderwall : A community space for developers.
 
--if signed_in?
-  #signed-in-user-liked-payload.hide=current_user.liked
+#current-users-liked-as-json.hide=current_user_liked_list
 
 .continer
   -if protips_view_breadcrumbs.present?
diff --git a/app/views/protips/show.html.haml b/app/views/protips/show.html.haml
@@ -1,8 +1,7 @@
 =content_for :title do
   ==#{@protip.title} : #{@protip.public_id}
 
--if signed_in?
-  #signed-in-user-liked-payload.hide=current_user.likes?(@protip) && [dom_id(@protip)]
+#current-users-liked-as-json.hide=current_user_liked_list
 -# .hide
 -# - meta description: protip_summary
 -# - meta og: { description: protip_summary }
@@ -27,13 +26,12 @@
     .md-col.md-col-2.md-show &nbsp;
     .sm-col.sm-col.sm-col-12.md-col-8
       .clearfix.mt0.mb1
-        .left.mt1
-          = react_component 'ProtipHeart',
-            id: dom_id(@protip),
-            href: protip_likes_path(@protip),
-            initialCount: @protip.likes_count,
-            layout: 'inline'
-        .right.pt0.mt0
+        .left.mt-third= react_component 'Heartable',
+                id: dom_id(@protip),
+                href: protip_likes_path(@protip),
+                initialCount: @protip.likes_count,
+                layout: 'inline'
+        .right
           .diminish.inline.mr1
             =icon("eye")
             =number_to_human(@protip.views_count, precision: 4)
diff --git a/lib/tasks/db.rake b/lib/tasks/db.rake
@@ -6,18 +6,29 @@ namespace :db do
     'db:port:comments',
     'db:port:teams',
     'db:port:likes',
+    'db:fix_counters',
     'cache:score:recalculate']
 
-  namespace :port do
-
-    task :clean   => :environment do
-      Like.delete_all
-      Comment.delete_all
-      Protip.delete_all
-      Badge.delete_all
-      User.delete_all
+  task :fix_counters => :environment do
+    Comment.find_each do |comment|
+      puts comment.id
+      Comment.reset_counters(comment.id, :likes)
     end
+    Protip.find_each do |protip|
+      puts protip.id
+      Protip.reset_counters(protip.id, :likes)
+    end
+  end
 
+  task :clean   => :environment do
+    Like.delete_all
+    Comment.delete_all
+    Protip.delete_all
+    Badge.delete_all
+    User.delete_all
+  end
+
+  namespace :port do
     task :connect => :environment do
       if hide_sql_out = Rails.env.development?
         ActiveRecord::Base.logger.level = Logger::INFO

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-class ProtipHeart extends React.Component {`
	`1`	`+class Heartable extends React.Component {`
`2`	`2`	`constructor(props) {`
`3`	`3`	`super(props)`
`4`	`4`	`this.state = {`
`@@ -8,8 +8,7 @@ class ProtipHeart extends React.Component {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`componentDidMount() {`
`11`		`- const userLikes = JSON.parse($('#signed-in-user-liked-payload').html()) \|\| []`
`12`		`- console.log(userLikes)`
	`11`	`+ const userLikes = getUserLikes()`
`13`	`12`	`if (userLikes.indexOf(this.props.id) > -1) {`
`14`	`13`	`this.setState({hearted: true})`
`15`	`14`	`}`
`@@ -41,7 +40,13 @@ class ProtipHeart extends React.Component {`
`41`	`40`	`}`
`42`	`41`	`}`
`43`	`42`
`44`		`-ProtipHeart.propTypes = {`
	`43`	`+Heartable.propTypes = {`
`45`	`44`	`initialCount: React.PropTypes.number,`
`46`		`- protipId: React.PropTypes.string,`
	`45`	`+ protipId: React.PropTypes.string`
	`46`	`+}`
	`47`	`+`
	`48`	`+var _userLikes`
	`49`	`+function getUserLikes() {`
	`50`	`+ _userLikes = _userLikes \|\| JSON.parse($('#current-users-liked-as-json').html())`
	`51`	`+ return _userLikes`
`47`	`52`	`}`