Move some reusable logic into utils

src/components/category.js

@@ -138,7 +138,7 @@ export default class Category extends React.Component {
 
       {emojis && emojis.map((emoji) =>
         <Emoji
-          key={emoji.short_name || emoji}
+          key={emoji.id || emoji}
           emoji={emoji}
           {...emojiProps}
         />

src/components/emoji.js

@@ -1,18 +1,15 @@
 import React from 'react'
 import data from '../../data'
 
+import {getData, getSanitizedData} from '../utils'
+
 const SHEET_COLUMNS = 41
-const SKINS = [
-  '1F3FA', '1F3FB', '1F3FC',
-  '1F3FD', '1F3FE', '1F3FF',
-]
 
 export default class Emoji extends React.Component {
   constructor(props) {
     super(props)
 
-    var emojiData = this.getEmojiData()
+    this.hasSkinVariations = !!this.getData().skin_variations
-    this.hasSkinVariations = !!emojiData.skin_variations
   }
 
   shouldComponentUpdate(nextProps) {
@@ -23,79 +20,51 @@ export default class Emoji extends React.Component {
     )
   }
 
-  getEmojiData() {
+  getPosition() {
-    var { emoji, skin, sheetURL } = this.props,
+    var { sheet_x, sheet_y } = this.getData(),
-        emojiData = emoji
-
-    if (typeof emoji == 'string') {
-      emojiData = data.emojis[emoji]
-    }
-
-    if (this.hasSkinVariations && skin > 1) {
-      emojiData = JSON.parse(JSON.stringify(emojiData))
-
-      var skinKey = SKINS[skin - 1],
-          variationKey = `${emojiData.unified}-${skinKey}`,
-          variationData = emojiData.skin_variations[variationKey],
-          kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/),
-          kit = kitMatches[0]
-
-      if (variationData[`has_img_${kit}`]) {
-        emojiData.skin_tone = skin
-
-        for (let k in variationData) {
-          let v = variationData[k]
-          emojiData[k] = v
-        }
-      }
-    }
-
-    return emojiData
-  }
-
-  getPosition(emojiData) {
-    var { sheet_x, sheet_y } = emojiData,
         multiply = 100 / (SHEET_COLUMNS - 1)
 
     return `${multiply * sheet_x}% ${multiply * sheet_y}%`
   }
 
-  getNative(emojiData) {
+  getData() {
-    var { unified } = emojiData,
+    var { emoji, skin, sheetURL } = this.props
-        unicodes = unified.split('-'),
+    return getData(emoji, skin, sheetURL)
-        codePoints = unicodes.map((u) => `0x${u}`)
-
-    return String.fromCodePoint(...codePoints)
   }
 
-  handleClick(emojiData) {
+  getSanitizedData() {
+    var { emoji, skin, sheetURL } = this.props
+    return getSanitizedData(emoji, skin, sheetURL)
+  }
+
+  handleClick() {
     var { onClick } = this.props,
-        { name, short_names, skin_tone, emoticons, unified } = emojiData,
+        emoji = this.getSanitizedData()
-        id = short_names[0],
-        colons = `:${id}:`
 
-    if (skin_tone) {
+    onClick(emoji)
-      colons += `:skin-tone-${skin_tone}:`
+  }
-    }
 
-    onClick({
+  handleOver() {
-      id,
+    var { onOver } = this.props,
-      name,
+        emoji = this.getSanitizedData()
-      colons,
+
-      emoticons,
+    onOver(emoji)
-      skin: skin_tone || 1,
+  }
-      native: this.getNative(emojiData),
+
-    })
+  handleLeave() {
+    var { onLeave } = this.props,
+        emoji = this.getSanitizedData()
+
+    onLeave(emoji)
   }
 
   render() {
-    var { sheetURL, size, onOver, onLeave } = this.props,
+    var { sheetURL, size, onOver, onLeave } = this.props
-        emojiData = this.getEmojiData()
 
     return <span
-      onClick={() => this.handleClick(emojiData)}
+      onClick={this.handleClick.bind(this)}
-      onMouseEnter={() => onOver(emojiData)}
+      onMouseEnter={this.handleOver.bind(this)}
-      onMouseLeave={() => onLeave(emojiData)}
+      onMouseLeave={this.handleLeave.bind(this)}
       className='emoji-picker-emoji'>
       <span style={{
         width: size,
@@ -103,7 +72,7 @@ export default class Emoji extends React.Component {
         display: 'inline-block',
         backgroundImage: `url(${sheetURL})`,
         backgroundSize: `${100 * SHEET_COLUMNS}%`,
-        backgroundPosition: this.getPosition(emojiData),
+        backgroundPosition: this.getPosition(),
       }}>
       </span>
     </span>

src/components/picker.js

@@ -260,6 +260,7 @@ export default class Picker extends React.Component {
           emoji={emoji}
           emojiProps={{
             size: 38,
+            skin: skin,
             sheetURL: sheetURL,
           }}
           skinsProps={{

src/components/preview.js

@@ -1,5 +1,7 @@
 import React from 'react'
+
 import {Emoji, Skins} from '.'
+import {getData} from '../utils'
 
 export default class Preview extends React.Component {
   constructor(props) {
@@ -12,7 +14,8 @@ export default class Preview extends React.Component {
         { emojiProps, skinsProps, title, emoji: idleEmoji } = this.props
 
     if (emoji) {
-      var { emoticons } = emoji,
+      var emojiData = getData(emoji),
+          { emoticons } = emojiData,
           knownEmoticons = [],
           listedEmoticons = []
 
@@ -26,7 +29,7 @@ export default class Preview extends React.Component {
       return <div className='emoji-picker-preview'>
         <div className='emoji-picker-preview-emoji'>
           <Emoji
-            key={emoji.short_name || emoji}
+            key={emoji.id}
             emoji={emoji}
             {...emojiProps}
           />
@@ -35,7 +38,7 @@ export default class Preview extends React.Component {
         <div className='emoji-picker-preview-data'>
           <div className='emoji-picker-preview-name'>{emoji.name}</div>
           <div className='emoji-picker-preview-shortnames'>
-            {emoji.short_names.map((short_name) =>
+            {emojiData.short_names.map((short_name) =>
               <span key={short_name} className='emoji-picker-preview-shortname'>:{short_name}:</span>
             )}
           </div>

src/utils/emoji-index.js

@@ -1,6 +1,8 @@
 import lunr from 'lunr'
 import data from '../../data'
 
+import {getSanitizedData} from '.'
+
 var emoticonsList = []
 
 var index = lunr(function() {
@@ -36,7 +38,7 @@ function search(value, maxResults = 75) {
 
   if (value.length) {
     results = index.search(tokenize(value)).map((result) =>
-      data.emojis[result.ref]
+      getSanitizedData(result.ref)
     )
 
     results = results.slice(0, maxResults)

src/utils/index.js

@@ -1,3 +1,74 @@
+import data from '../../data'
+
+const SKINS = [
+  '1F3FA', '1F3FB', '1F3FC',
+  '1F3FD', '1F3FE', '1F3FF',
+]
+
+function unifiedToNative(unified) {
+  var unicodes = unified.split('-'),
+      codePoints = unicodes.map((u) => `0x${u}`)
+
+  return String.fromCodePoint(...codePoints)
+}
+
+function sanitize(emoji) {
+  var { name, short_names, skin_tone, emoticons, unified } = emoji,
+      id = short_names[0],
+      colons = `:${id}:`
+
+  if (skin_tone) {
+    colons += `:skin-tone-${skin_tone}:`
+  }
+
+  return {
+    id,
+    name,
+    colons,
+    emoticons,
+    skin: skin_tone || 1,
+    native: unifiedToNative(unified),
+  }
+}
+
+function getSanitizedData() {
+  return sanitize(getData(...arguments))
+}
+
+function getData(emoji, skin, sheetURL) {
+  var emojiData = {}
+
+  if (typeof emoji == 'string') {
+    emojiData = data.emojis[emoji]
+  } else if (emoji.id) {
+    emojiData = data.emojis[emoji.id]
+    skin || (skin = emoji.skin)
+  }
+
+  if (emojiData.skin_variations && skin > 1 && sheetURL) {
+    emojiData = JSON.parse(JSON.stringify(emojiData))
+
+    var skinKey = SKINS[skin - 1],
+        variationKey = `${emojiData.unified}-${skinKey}`,
+        variationData = emojiData.skin_variations[variationKey],
+        kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/),
+        kit = kitMatches[0]
+
+    if (variationData[`has_img_${kit}`]) {
+      emojiData.skin_tone = skin
+
+      for (let k in variationData) {
+        let v = variationData[k]
+        emojiData[k] = v
+      }
+    }
+  }
+
+  return emojiData
+}
+
 export {default as store} from './store'
 export {default as emojiIndex} from './emoji-index'
 export {default as frequently} from './frequently'
+
+export { getData, getSanitizedData }