Added frequent used emojis

src/screens/Compose/Root.tsx

@@ -30,7 +30,11 @@ import FastImage from 'react-native-fast-image'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { ComposeState } from './utils/types'
 import { useSelector } from 'react-redux'
-import { getInstanceConfigurationStatusCharsURL } from '@utils/slices/instancesSlice'
+import {
+  getInstanceConfigurationStatusCharsURL,
+  getInstanceFrequentEmojis
+} from '@utils/slices/instancesSlice'
+import { useTranslation } from 'react-i18next'
 
 const prefetchEmojis = (
   sortedEmojis: NonNullable<ComposeState['emoji']['emojis']>,
@@ -99,15 +103,29 @@ const ComposeRoot = React.memo(
       }
     }, [composeState.tag])
 
+    const { t } = useTranslation()
     const { data: emojisData } = useEmojisQuery({})
+    const frequentEmojis = useSelector(getInstanceFrequentEmojis, () => true)
     useEffect(() => {
       if (emojisData && emojisData.length) {
-        let sortedEmojis: { title: string; data: Mastodon.Emoji[][] }[] = []
+        const sortedEmojis: {
+          title: string
+          data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
+        }[] = []
         forEach(
           groupBy(sortBy(emojisData, ['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
+            )
+          })
+        }
         composeDispatch({
           type: 'emoji',
           payload: { ...composeState.emoji, emojis: sortedEmojis }

src/screens/Compose/Root/Footer/Emojis.tsx

@@ -1,5 +1,6 @@
 import haptics from '@components/haptics'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
+import { countInstanceEmoji } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useCallback, useContext, useEffect } from 'react'
@@ -14,6 +15,7 @@ import {
   View
 } from 'react-native'
 import FastImage from 'react-native-fast-image'
+import { useDispatch } from 'react-redux'
 import validUrl from 'valid-url'
 import updateText from '../../updateText'
 import ComposeContext from '../../utils/createContext'
@@ -27,6 +29,7 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
   const { reduceMotionEnabled } = useAccessibility()
   const { colors } = useTheme()
   const { t } = useTranslation()
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const tagEmojis = findNodeHandle(accessibleRefEmojis.current)
@@ -53,13 +56,14 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
                 <Pressable
                   key={emoji.shortcode}
                   onPress={() => {
+                    haptics('Light')
                     updateText({
                       composeState,
                       composeDispatch,
                       newText: `:${emoji.shortcode}:`,
                       type: 'emoji'
                     })
-                    haptics('Light')
+                    dispatch(countInstanceEmoji(emoji))
                   }}
                 >
                   <FastImage

src/screens/Compose/utils/types.d.ts

@@ -40,7 +40,12 @@ export type ComposeState = {
   }
   emoji: {
     active: boolean
-    emojis: { title: string; data: Mastodon.Emoji[][] }[] | undefined
+    emojis:
+      | {
+          title: string
+          data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
+        }[]
+      | undefined
   }
   poll: {
     active: boolean