fix(app): refactor chat

Author: luke-h1

src/components/Chat/Chat.tsx

@@ -0,0 +1,207 @@
+import { SanitisiedEmoteSet } from '@app/services/seventv-service';
+import { ChatUser } from '@app/store/chatStore';
+import { useCallback, useEffect, useState, forwardRef, useMemo } from 'react';
+import {
+  TextInput,
+  TextInputProps,
+  View,
+  LayoutChangeEvent,
+} from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { ChatInput } from './components/ChatInput';
+import { EmoteSuggestions } from './components/EmoteSuggestions';
+import { UserSuggestions } from './components/UserSuggestions';
+import { useEmoteSuggestions } from './hooks/useEmoteSuggestions';
+import { useSuggestionAnimations } from './hooks/useSuggestionAnimations';
+import { useUserSuggestions } from './hooks/useUserSuggestions';
+import { useWordInfo } from './hooks/useWordInfo';
+
+export type SuggestionType = 'emote' | 'user';
+
+interface ChatComposerProps extends TextInputProps {
+  onEmoteSelect?: (emote: SanitisiedEmoteSet) => void;
+  maxSuggestions?: number;
+  prioritizeChannelEmotes?: boolean;
+  placeholder?: string;
+}
+
+export const ChatComposer = forwardRef<TextInput, ChatComposerProps>(
+  (
+    {
+      onEmoteSelect,
+      onChangeText,
+      maxSuggestions = 50,
+      prioritizeChannelEmotes = true,
+      value = '',
+      placeholder = 'Search emotes...',
+      ...textFieldProps
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [cursorPosition, setCursorPosition] = useState(0);
+    const [inputLayout, setInputLayout] = useState({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    });
+
+    const { wordInfo, isUserMention, isEmoteSearch } = useWordInfo({
+      text: value,
+      cursorPosition,
+    });
+
+    const { filteredEmotes } = useEmoteSuggestions({
+      searchTerm: wordInfo.searchTerm,
+      maxSuggestions,
+      prioritizeChannelEmotes,
+    });
+
+    const { filteredUsers } = useUserSuggestions({
+      searchTerm: wordInfo.word,
+      enabled: isUserMention,
+    });
+
+    const handleHideComplete = useCallback(() => {
+      setShowSuggestions(false);
+    }, []);
+
+    const { opacity, scale, translateY, hide } = useSuggestionAnimations({
+      shouldShow: showSuggestions,
+      onHideComplete: handleHideComplete,
+    });
+
+    const shouldShowEmoteSuggestions =
+      isFocused &&
+      isEmoteSearch &&
+      filteredEmotes.length > 0 &&
+      wordInfo.word.length > 0;
+
+    const shouldShowUserSuggestions =
+      isFocused && isUserMention && filteredUsers.length > 0;
+
+    const validUsers = useMemo(
+      () =>
+        filteredUsers.filter((user): user is typeof user => user !== undefined),
+      [filteredUsers],
+    );
+
+    useEffect(() => {
+      if (shouldShowEmoteSuggestions) {
+        setShowSuggestions(true);
+      } else if (!shouldShowEmoteSuggestions && !shouldShowUserSuggestions) {
+        setShowSuggestions(false);
+      }
+    }, [shouldShowEmoteSuggestions, shouldShowUserSuggestions]);
+
+    const handleInputLayout = useCallback((event: LayoutChangeEvent) => {
+      const { x, y, width, height } = event.nativeEvent.layout;
+      setInputLayout({ x, y, width, height });
+    }, []);
+
+    const handleTextChange = useCallback(
+      (text: string) => {
+        onChangeText?.(text);
+      },
+      [onChangeText],
+    );
+
+    const handleSelectionChange = useCallback(
+      (event: {
+        nativeEvent: { selection: { start: number; end: number } };
+      }) => {
+        setCursorPosition(event.nativeEvent.selection.start);
+      },
+      [],
+    );
+
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+    }, []);
+
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+    }, []);
+
+    const handleEmotePress = useCallback(
+      (emote: SanitisiedEmoteSet) => {
+        const beforeWord = value.substring(0, wordInfo.start);
+        const afterWord = value.substring(wordInfo.end);
+        const newText = `${beforeWord}${emote.name}${afterWord}`;
+        const newCursorPosition = wordInfo.start + emote.name.length;
+
+        onEmoteSelect?.(emote);
+        onChangeText?.(newText);
+
+        setShowSuggestions(false);
+        hide();
+
+        setTimeout(() => {
+          setCursorPosition(newCursorPosition);
+        }, 10);
+      },
+      [value, wordInfo, onEmoteSelect, onChangeText, hide],
+    );
+
+    const handleUserSelect = useCallback(
+      (user: ChatUser) => {
+        const beforeWord = value.substring(0, wordInfo.start);
+        const afterWord = value.substring(wordInfo.end);
+        const newText = `${beforeWord}${user.name} ${afterWord}`;
+        const newCursorPosition = wordInfo.start + user.name.length + 1;
+
+        onChangeText?.(newText);
+
+        setTimeout(() => {
+          setCursorPosition(newCursorPosition);
+        }, 10);
+      },
+      [value, wordInfo, onChangeText],
+    );
+    return (
+      <View style={styles.mainContainer}>
+        <EmoteSuggestions
+          emotes={filteredEmotes}
+          handleEmotePress={handleEmotePress}
+          showSuggestions={showSuggestions}
+          setShowSuggestions={setShowSuggestions}
+          inputLayout={inputLayout}
+          suggestionOpacity={opacity}
+          suggestionScale={scale}
+          suggestionTranslateY={translateY}
+        />
+        <UserSuggestions
+          users={validUsers}
+          showUserSuggestions={shouldShowUserSuggestions}
+          handleUserSelect={handleUserSelect}
+        />
+        <View style={styles.inputWrapper}>
+          <ChatInput
+            ref={ref}
+            value={value}
+            placeholder={placeholder}
+            onChangeText={handleTextChange}
+            onSelectionChange={handleSelectionChange}
+            onLayout={handleInputLayout}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...textFieldProps}
+          />
+        </View>
+      </View>
+    );
+  },
+);
+
+ChatComposer.displayName = 'ChatComposer';
+
+const styles = StyleSheet.create(() => ({
+  inputWrapper: {
+    width: '100%',
+  },
+  mainContainer: {
+    width: '100%',
+  },
+}));

src/components/Chat/components/ChatComposer/ChatComposer.tsx

@@ -0,0 +1,74 @@
+import Input, { InputProps } from '@app/components/Input/Input';
+import { forwardRef, useCallback } from 'react';
+import { TextInput, View, LayoutChangeEvent, FocusEvent } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+interface ChatInputProps extends Omit<InputProps, 'onChangeText'> {
+  value?: string;
+  onChangeText?: (text: string) => void;
+  onSelectionChange?: (event: {
+    nativeEvent: { selection: { start: number; end: number } };
+  }) => void;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+}
+
+export const ChatInput = forwardRef<TextInput, ChatInputProps>(
+  (
+    {
+      value = '',
+      onChangeText,
+      onSelectionChange,
+      onLayout,
+      onFocus,
+      onBlur,
+      placeholder = 'Send a message...',
+      ...textFieldProps
+    },
+    ref,
+  ) => {
+    const handleTextChange = useCallback(
+      (text: string) => {
+        onChangeText?.(text);
+      },
+      [onChangeText],
+    );
+
+    return (
+      <View style={styles.container} onLayout={onLayout}>
+        <Input
+          ref={ref}
+          {...textFieldProps}
+          value={value}
+          placeholder={placeholder}
+          onChangeText={handleTextChange}
+          onSelectionChange={onSelectionChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          multiline
+          scrollEnabled
+          textAlignVertical="top"
+          style={[styles.input, textFieldProps.style]}
+        />
+      </View>
+    );
+  },
+);
+
+ChatInput.displayName = 'ChatInput';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.gray.ui,
+    borderRadius: theme.radii.lg,
+  },
+  input: {
+    fontSize: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingHorizontal: 14,
+    minHeight: 40,
+    maxHeight: 100,
+  },
+}));