Exclude invalid recent emoji, simplify items redux structure

js/storage.js

@@ -87,7 +87,13 @@
   }
 
   function getItemsState() {
-    return _.clone(items);
+    const data = _.clone(items);
+    const ids = Object.keys(data);
+    ids.forEach(id => {
+      data[id] = data[id].value;
+    });
+
+    return data;
   }
 
   function reset() {

ts/components/emoji/lib.ts

@@ -112,6 +112,10 @@ export const dataByCategory = mapValues(
   arr => sortBy(arr, 'sort_order')
 );
 
+export function isShortNameValid(shortName: string) {
+  return Boolean(dataByShortName[shortName]);
+}
+
 export function getSheetCoordinates(
   shortName: keyof typeof dataByShortName,
   skinTone?: SkinToneKey | number

ts/state/smart/EmojiButton.tsx

@@ -5,6 +5,7 @@ import { mapDispatchToProps } from '../actions';
 import { EmojiButton, Props } from '../../components/emoji/EmojiButton';
 import { StateType } from '../reducer';
 
+import { isShortNameValid } from '../../components/emoji/lib';
 import { getIntl } from '../selectors/user';
 
 const mapStateToProps = (state: StateType) => {
@@ -12,8 +13,8 @@ const mapStateToProps = (state: StateType) => {
 
   return {
     i18n: getIntl(state),
-    recentEmojis: recents,
-    skinTone: get(state, ['items', 'skinTone', 'value'], 0),
+    recentEmojis: recents.filter(isShortNameValid),
+    skinTone: get(state, ['items', 'skinTone'], 0),
   };
 };
 

ts/state/smart/StickerButton.tsx

@@ -24,11 +24,11 @@ const mapStateToProps = (state: StateType) => {
   const installedPack = getRecentlyInstalledStickerPack(state);
   const showIntroduction = get(
     state.items,
-    ['showStickersIntroduction', 'value'],
+    ['showStickersIntroduction'],
     false
   );
   const showPickerHint =
-    get(state.items, ['showStickerPickerHint', 'value'], false) &&
+    get(state.items, ['showStickerPickerHint'], false) &&
     receivedPacks.length > 0;
 
   return {