Added frequent used emojis

src/components/Emojis.tsx

@@ -2,6 +2,7 @@ import EmojisButton from '@components/Emojis/Button'
 import EmojisList from '@components/Emojis/List'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useEmojisQuery } from '@utils/queryHooks/emojis'
+import { getInstanceFrequentEmojis } from '@utils/slices/instancesSlice'
 import { chunk, forEach, groupBy, sortBy } from 'lodash'
 import React, {
   Dispatch,
@@ -11,11 +12,16 @@ import React, {
   useEffect,
   useReducer
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import FastImage from 'react-native-fast-image'
+import { useSelector } from 'react-redux'
 import EmojisContext, { emojisReducer } from './Emojis/helpers/EmojisContext'
 
 const prefetchEmojis = (
-  sortedEmojis: { title: string; data: Mastodon.Emoji[][] }[],
+  sortedEmojis: {
+    title: string
+    data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
+  }[],
   reduceMotionEnabled: boolean
 ) => {
   const prefetches: { uri: string }[] = []
@@ -101,14 +107,28 @@ const ComponentEmojis: React.FC<Props> = ({
     [value, selectionRange.current?.start, selectionRange.current?.end]
   )
 
+  const { t } = useTranslation()
   const { data } = useEmojisQuery({ options: { enabled } })
+  const frequentEmojis = useSelector(getInstanceFrequentEmojis, () => true)
   useEffect(() => {
     if (data && data.length) {
-      let sortedEmojis: { title: string; data: Mastodon.Emoji[][] }[] = []
+      let sortedEmojis: {
+        title: string
+        data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
+      }[] = []
       forEach(
         groupBy(sortBy(data, ['category', 'shortcode']), 'category'),
         (value, key) => sortedEmojis.push({ title: key, data: chunk(value, 5) })
       )
+      if (frequentEmojis.length) {
+        sortedEmojis.unshift({
+          title: t('componentEmojis:frequentUsed'),
+          data: chunk(
+            frequentEmojis.map(e => e.emoji),
+            5
+          )
+        })
+      }
       emojisDispatch({
         type: 'load',
         payload: sortedEmojis

src/components/Emojis/List.tsx

@@ -1,4 +1,5 @@
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
+import { countInstanceEmoji } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -14,11 +15,13 @@ import {
   View
 } from 'react-native'
 import FastImage from 'react-native-fast-image'
+import { useDispatch } from 'react-redux'
 import validUrl from 'valid-url'
 import EmojisContext from './helpers/EmojisContext'
 
 const EmojisList = React.memo(
   () => {
+    const dispatch = useDispatch()
     const { reduceMotionEnabled } = useAccessibility()
     const { t } = useTranslation()
 
@@ -42,12 +45,13 @@ const EmojisList = React.memo(
                 return (
                   <Pressable
                     key={emoji.shortcode}
-                    onPress={() =>
+                    onPress={() => {
                       emojisDispatch({
                         type: 'shortcode',
                         payload: `:${emoji.shortcode}:`
                       })
-                    }
+                      dispatch(countInstanceEmoji(emoji))
+                    }}
                   >
                     <FastImage
                       accessibilityLabel={t(

src/components/Emojis/helpers/EmojisContext.tsx

@@ -3,7 +3,10 @@ import { createContext, Dispatch } from 'react'
 export type EmojisState = {
   enabled: boolean
   active: boolean
-  emojis: { title: string; data: Mastodon.Emoji[][] }[]
+  emojis: {
+    title: string
+    data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
+  }[]
   shortcode: Mastodon.Emoji['shortcode'] | null
 }