fix: code clean up

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -27,7 +27,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<
     MessageInputContextValue,
-    'isCommandUIEnabled' | 'maxMessageLength' | 'numberOfLines' | 'onChangeText' | 'setInputBoxRef'
+    'maxMessageLength' | 'numberOfLines' | 'onChangeText' | 'setInputBoxRef'
   > &
   Pick<TranslationContextValue, 't'> & {
     /**
@@ -166,21 +166,13 @@ const MemoizedAutoCompleteInput = React.memo(
 ) as typeof AutoCompleteInputWithContext;
 
 export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
-  const {
-    isCommandUIEnabled,
-    additionalTextInputProps,
-    maxMessageLength,
-    numberOfLines,
-    onChangeText,
-    setInputBoxRef,
-  } = useMessageInputContext();
+  const { maxMessageLength, numberOfLines, onChangeText, setInputBoxRef } =
+    useMessageInputContext();
   const { t } = useTranslationContext();
 
   return (
     <MemoizedAutoCompleteInput
       {...{
-        additionalTextInputProps,
-        isCommandUIEnabled,
         maxMessageLength,
         numberOfLines,
         onChangeText,

package/src/components/Channel/Channel.tsx

@@ -1725,9 +1725,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     hideStickyDateHeader,
     highlightedMessageId,
     isChannelActive: shouldSyncChannel,
-    isCommandUIEnabled:
-      isCommandUIEnabled ??
-      !!(clientChannelConfig?.commands || [])?.some((command) => command.name === 'giphy'),
+    isCommandUIEnabled: isCommandUIEnabled ?? !!clientChannelConfig?.commands?.length,
     lastRead,
     loadChannelAroundMessage,
     loadChannelAtFirstUnreadMessage,

package/src/components/MessageInput/InputButtons.tsx

@@ -12,10 +12,6 @@ import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 
-const styles = StyleSheet.create({
-  attachButtonContainer: { paddingRight: 5 },
-});
-
 export type InputButtonsProps = Partial<InputButtonsWithContextProps>;
 
 export type InputButtonsWithContextProps = Pick<
@@ -28,13 +24,10 @@ export type InputButtonsWithContextProps = Pick<
   | 'hasImagePicker'
   | 'MoreOptionsButton'
   | 'selectedPicker'
-  | 'setShowMoreOptions'
-  | 'showMoreOptions'
   | 'toggleAttachmentPicker'
 >;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
-  suggestions: state.suggestions,
   text: state.text,
 });
 
@@ -107,7 +100,6 @@ const areEqual = (
     hasFilePicker: prevHasFilePicker,
     hasImagePicker: prevHasImagePicker,
     selectedPicker: prevSelectedPicker,
-    showMoreOptions: prevShowMoreOptions,
   } = prevProps;
 
   const {
@@ -116,7 +108,6 @@ const areEqual = (
     hasFilePicker: nextHasFilePicker,
     hasImagePicker: nextHasImagePicker,
     selectedPicker: nextSelectedPicker,
-    showMoreOptions: nextShowMoreOptions,
   } = nextProps;
 
   if (prevHasCameraPicker !== nextHasCameraPicker) {
@@ -139,10 +130,6 @@ const areEqual = (
     return false;
   }
 
-  if (prevShowMoreOptions !== nextShowMoreOptions) {
-    return false;
-  }
-
   return true;
 };
 
@@ -161,8 +148,6 @@ export const InputButtons = (props: InputButtonsProps) => {
     hasImagePicker,
     MoreOptionsButton,
     selectedPicker,
-    setShowMoreOptions,
-    showMoreOptions,
     toggleAttachmentPicker,
   } = useMessageInputContext();
 
@@ -177,11 +162,13 @@ export const InputButtons = (props: InputButtonsProps) => {
         hasImagePicker,
         MoreOptionsButton,
         selectedPicker,
-        setShowMoreOptions,
-        showMoreOptions,
         toggleAttachmentPicker,
       }}
       {...props}
     />
   );
 };
+
+const styles = StyleSheet.create({
+  attachButtonContainer: { paddingRight: 5 },
+});

package/src/components/MessageInput/components/CommandInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { CustomDataManagerState } from 'stream-chat';
 
@@ -16,27 +16,6 @@ import { CircleClose, GiphyLightning } from '../../../icons';
 import { AutoCompleteInput } from '../../AutoCompleteInput/AutoCompleteInput';
 import { useCountdown } from '../hooks/useCountdown';
 
-const styles = StyleSheet.create({
-  autoCompleteInputContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingLeft: 8,
-    paddingRight: 10,
-  },
-  giphyContainer: {
-    alignItems: 'center',
-    borderRadius: 12,
-    flexDirection: 'row',
-    marginRight: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-  },
-  giphyText: {
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
-});
-
 export type CommandInputProps = Partial<
   Pick<
     MessageInputContextValue,
@@ -71,7 +50,7 @@ export const CommandInput = ({
       colors: { accent_blue, grey, white },
       messageInput: {
         autoCompleteInputContainer,
-        giphyCommandInput: { giphyContainer, giphyText },
+        commandInput: { closeButton, container, text },
       },
     },
   } = useTheme();
@@ -82,25 +61,56 @@ export const CommandInput = ({
     setShowMoreOptions(true);
   };
 
+  if (!command) {
+    return null;
+  }
+
   return (
     <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
-      {command ? (
-        <View style={[styles.giphyContainer, { backgroundColor: accent_blue }, giphyContainer]}>
-          <GiphyLightning fill={white} size={16} />
-          <Text style={[styles.giphyText, { color: white }, giphyText]}>
-            {command.toUpperCase()}
-          </Text>
-        </View>
-      ) : null}
+      <View style={[styles.giphyContainer, { backgroundColor: accent_blue }, container]}>
+        <GiphyLightning fill={white} size={16} />
+        <Text style={[styles.giphyText, { color: white }, text]}>{command.toUpperCase()}</Text>
+      </View>
 
       <AutoCompleteInput cooldownActive={!!cooldownRemainingSeconds} />
-      {command ? (
-        <TouchableOpacity disabled={disabled} onPress={onCloseHandler} testID='close-button'>
-          <CircleClose height={20} pathFill={grey} width={20} />
-        </TouchableOpacity>
-      ) : null}
+      <Pressable
+        disabled={disabled}
+        onPress={onCloseHandler}
+        style={({ pressed }) => {
+          return [
+            {
+              opacity: pressed ? 0.8 : 1,
+            },
+            closeButton,
+          ];
+        }}
+        testID='close-button'
+      >
+        <CircleClose height={20} pathFill={grey} width={20} />
+      </Pressable>
     </View>
   );
 };
 
 CommandInput.displayName = 'CommandInput{messageInput}';
+
+const styles = StyleSheet.create({
+  autoCompleteInputContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingLeft: 8,
+    paddingRight: 10,
+  },
+  giphyContainer: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    marginRight: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  giphyText: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+});

package/src/contexts/themeContext/utils/theme.ts

@@ -307,6 +307,11 @@ export type Theme = {
       waveform: ViewStyle;
     };
     autoCompleteInputContainer: ViewStyle;
+    commandInput: {
+      closeButton: ViewStyle;
+      container: ViewStyle;
+      text: TextStyle;
+    };
     commandsButton: ViewStyle;
     commandsButtonContainer: ViewStyle;
     composerContainer: ViewStyle;
@@ -331,10 +336,7 @@ export type Theme = {
       flatList: ViewStyle;
     };
     focusedInputBoxContainer: ViewStyle;
-    giphyCommandInput: {
-      giphyContainer: ViewStyle;
-      giphyText: TextStyle;
-    };
+
     imageUploadPreview: {
       dismiss: ViewStyle;
       dismissIconColor: ColorValue;
@@ -1072,6 +1074,11 @@ export const defaultTheme: Theme = {
     },
     audioRecordingWaveform: { container: {}, waveform: {} },
     autoCompleteInputContainer: {},
+    commandInput: {
+      closeButton: {},
+      container: {},
+      text: {},
+    },
     commandsButton: {},
     commandsButtonContainer: {},
     composerContainer: {},
@@ -1096,10 +1103,6 @@ export const defaultTheme: Theme = {
       flatList: {},
     },
     focusedInputBoxContainer: {},
-    giphyCommandInput: {
-      giphyContainer: {},
-      giphyText: {},
-    },
     imageUploadPreview: {
       dismiss: {},
       dismissIconColor: '',

package/src/index.ts

@@ -13,8 +13,6 @@ export * from './types/types';
 
 export * from './utils/patchMessageTextCommand';
 export * from './utils/i18n/Streami18n';
-export * from './utils/queryMembers';
-export * from './utils/queryUsers';
 export * from './utils/utils';
 
 export { default as enTranslations } from './i18n/en.json';