Add emojis to recent category on click

src/components/category.js

@@ -1,4 +1,6 @@
 import React from 'react'
+
+import {frequently} from '../utils'
 import {Emoji} from '.'
 
 export default class Category extends React.Component {
@@ -47,12 +49,28 @@ export default class Category extends React.Component {
   }
 
   render() {
-    var { name, emojis, hasStickyPosition, emojiProps } = this.props,
-        emojis = emojis ? emojis.slice(0) : null,
+    var { name, emojis, perLine, hasStickyPosition, emojiProps } = this.props,
         labelStyles = {},
         labelSpanStyles = {},
         containerStyles = {}
 
+    if (name == 'Recent') {
+      let frequentlyUsed = frequently.get(perLine * 4)
+
+      if (frequentlyUsed.length) {
+        emojis = frequentlyUsed
+      }
+    }
+
+    if (emojis) {
+      emojis = emojis.slice(0)
+    } else {
+      containerStyles = {
+        height: 1,
+        overflow: 'hidden',
+      }
+    }
+
     if (!hasStickyPosition) {
       labelStyles = {
         height: 28,
@@ -63,13 +81,6 @@ export default class Category extends React.Component {
       }
     }
 
-    if (!emojis) {
-      containerStyles = {
-        height: 1,
-        overflow: 'hidden',
-      }
-    }
-
     return <div ref='container' className='emoji-picker-category' style={containerStyles}>
       <div style={labelStyles} data-name={name} className='emoji-picker-category-label'>
         <span style={labelSpanStyles} ref='label'>{name}</span>
@@ -104,6 +115,7 @@ Category.propTypes = {
   emojis: React.PropTypes.array,
   hasStickyPosition: React.PropTypes.bool,
   name: React.PropTypes.string.isRequired,
+  perLine: React.PropTypes.number.isRequired,
   emojiProps: React.PropTypes.object.isRequired,
 }
 

src/components/picker.js

@@ -3,7 +3,7 @@ import '../vendor/raf-polyfill'
 import React from 'react'
 import data from '../../data'
 
-import {store} from '../utils'
+import {store, frequently} from '../utils'
 import {Anchors, Category, Preview, Search} from '.'
 
 const DEFAULT_CATEGORIES = [
@@ -53,6 +53,29 @@ export default class Picker extends React.Component {
     }, 16)
   }
 
+  handleEmojiClick(emoji) {
+    this.props.onClick(emoji)
+    frequently.add(emoji)
+
+    var component = this.refs['category-0']
+    if (component && component.props.name == 'Recent') {
+      let maxMargin = component.maxMargin
+      component.forceUpdate()
+
+      window.requestAnimationFrame(() => {
+        if (maxMargin == component.maxMargin) return
+        var { categories } = this.state
+
+        for (let i = 0, l = categories.length; i < l; i++) {
+          let component = this.refs[`category-${i}`]
+          if (component) component.memoizeSize()
+        }
+
+        this.handleScrollPaint()
+      })
+    }
+  }
+
   handleScroll() {
     if (!this.waitingForPaint) {
       this.waitingForPaint = true
@@ -65,7 +88,7 @@ export default class Picker extends React.Component {
 
     var target = this.refs.scroll,
         scrollTop = target.scrollTop,
-        scrollingDown = scrollTop > (this.scrollTop || 0),
+        scrollingDown = scrollTop >= (this.scrollTop || 0),
         activeCategory = null,
         { categories } = this.state
 
@@ -154,6 +177,7 @@ export default class Picker extends React.Component {
             key={category.name}
             name={category.name}
             emojis={category.emojis}
+            perLine={perLine}
             hasStickyPosition={this.hasStickyPosition}
             emojiProps={{
               skin: skin,
@@ -161,7 +185,7 @@ export default class Picker extends React.Component {
               sheetURL: sheetURL,
               onOver: this.handleEmojiOver.bind(this),
               onLeave: this.handleEmojiLeave.bind(this),
-              onClick: this.props.onClick,
+              onClick: this.handleEmojiClick.bind(this),
             }}
           />
         })}