Fuzzy-Searchable Emoji Picker

js/modules/data.d.ts

@@ -18,3 +18,8 @@ export function getRecentStickers(): Promise<
     packId: string;
   }>
 >;
+
+export function updateEmojiUsage(shortName: string): Promise<void>;
+export function getRecentEmojis(
+  limit: number
+): Promise<Array<{ shortName: string; lastUsage: string }>>;

js/modules/data.js

@@ -150,6 +150,9 @@ module.exports = {
   getAllStickers,
   getRecentStickers,
 
+  updateEmojiUsage,
+  getRecentEmojis,
+
   removeAll,
   removeAllConfiguration,
 
@@ -934,6 +937,14 @@ async function getRecentStickers() {
   return recentStickers;
 }
 
+// Emojis
+async function updateEmojiUsage(shortName) {
+  await channels.updateEmojiUsage(shortName);
+}
+async function getRecentEmojis(limit = 32) {
+  return channels.getRecentEmojis(limit);
+}
+
 // Other
 
 async function removeAll() {

js/modules/emojis.js

@@ -0,0 +1,28 @@
+const { take } = require('lodash');
+const { getRecentEmojis } = require('./data');
+const { replaceColons } = require('../../ts/components/emoji/lib');
+
+module.exports = {
+  getInitialState,
+  load,
+  replaceColons,
+};
+
+let initialState = null;
+
+async function load() {
+  const recents = await getRecentEmojisForRedux();
+
+  initialState = {
+    recents: take(recents, 32),
+  };
+}
+
+async function getRecentEmojisForRedux() {
+  const recent = await getRecentEmojis();
+  return recent.map(e => e.shortName);
+}
+
+function getInitialState() {
+  return initialState;
+}

js/modules/signal.js

@@ -5,6 +5,7 @@ const Backbone = require('../../ts/backbone');
 const Crypto = require('./crypto');
 const Data = require('./data');
 const Database = require('./database');
+const Emojis = require('./emojis');
 const Emoji = require('../../ts/util/emoji');
 const IndexedDB = require('./indexeddb');
 const Notifications = require('../../ts/notifications');
@@ -69,6 +70,7 @@ const {
 } = require('../../ts/components/conversation/VerificationNotification');
 
 // State
+const { createEmojiButton } = require('../../ts/state/roots/createEmojiButton');
 const { createLeftPane } = require('../../ts/state/roots/createLeftPane');
 const {
   createStickerButton,
@@ -82,6 +84,7 @@ const {
 
 const { createStore } = require('../../ts/state/createStore');
 const conversationsDuck = require('../../ts/state/ducks/conversations');
+const emojisDuck = require('../../ts/state/ducks/emojis');
 const itemsDuck = require('../../ts/state/ducks/items');
 const stickersDuck = require('../../ts/state/ducks/stickers');
 const userDuck = require('../../ts/state/ducks/user');
@@ -262,6 +265,7 @@ exports.setup = (options = {}) => {
   };
 
   const Roots = {
+    createEmojiButton,
     createLeftPane,
     createStickerButton,
     createStickerManager,
@@ -269,6 +273,7 @@ exports.setup = (options = {}) => {
   };
   const Ducks = {
     conversations: conversationsDuck,
+    emojis: emojisDuck,
     items: itemsDuck,
     user: userDuck,
     stickers: stickersDuck,
@@ -308,6 +313,7 @@ exports.setup = (options = {}) => {
     Crypto,
     Data,
     Database,
+    Emojis,
     Emoji,
     IndexedDB,
     LinkPreviews,