Rewrite emoji component logic to be more generic

src/components/Emojis/helpers/EmojisContext.tsx

@@ -1,28 +1,27 @@
-import { createContext, Dispatch } from 'react'
+import { createContext, Dispatch, RefObject, SetStateAction } from 'react'
+import { TextInput } from 'react-native'
+
+type inputProps = {
+  ref: RefObject<TextInput>
+  value: string
+  setValue: Dispatch<SetStateAction<string>>
+  selectionRange?: { start: number; end: number }
+  maxLength?: number
+}
 
 export type EmojisState = {
-  enabled: boolean
-  active: boolean
   emojis: {
     title: string
     data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
   }[]
-  shortcode: Mastodon.Emoji['shortcode'] | null
+  targetProps: inputProps | null
+  inputProps: inputProps[]
 }
 
 export type EmojisAction =
-  | {
-      type: 'load'
-      payload: NonNullable<EmojisState['emojis']>
-    }
-  | {
-      type: 'activate'
-      payload: EmojisState['active']
-    }
-  | {
-      type: 'shortcode'
-      payload: EmojisState['shortcode']
-    }
+  | { type: 'load'; payload: NonNullable<EmojisState['emojis']> }
+  | { type: 'target'; payload: EmojisState['targetProps'] }
+  | { type: 'input'; payload: EmojisState['inputProps'] }
 
 type ContextType = {
   emojisState: EmojisState
@@ -32,12 +31,12 @@ const EmojisContext = createContext<ContextType>({} as ContextType)
 
 export const emojisReducer = (state: EmojisState, action: EmojisAction) => {
   switch (action.type) {
-    case 'activate':
-      return { ...state, active: action.payload }
     case 'load':
       return { ...state, emojis: action.payload }
-    case 'shortcode':
-      return { ...state, shortcode: action.payload }
+    case 'target':
+      return { ...state, targetProps: action.payload }
+    case 'input':
+      return { ...state, inputProps: action.payload }
   }
 }