ref(chat): Refactor Chat components (#13550)

Remove Abstract component
Convert web component to function component

react/features/chat/components/AbstractChatMessage.tsx

@@ -3,7 +3,7 @@ import { WithTranslation } from 'react-i18next';
 
 import { getLocalizedDateFormatter } from '../../base/i18n/dateUtil';
 import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../constants';
-import { IMessage } from '../reducer';
+import { IMessage } from '../types';
 
 /**
  * Formatter string to display the message timestamp.

react/features/chat/components/AbstractMessageContainer.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 
-import { IMessage } from '../reducer';
+import { IMessage } from '../types';
 
 export interface IProps {
 

react/features/chat/components/native/Chat.tsx

@@ -1,16 +1,14 @@
 /* eslint-disable react/no-multi-comp */
 import { Route, useIsFocused } from '@react-navigation/native';
-import React, { useEffect } from 'react';
+import React, { Component, useEffect } from 'react';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { TabBarLabelCounter } from '../../../mobile/navigation/components/TabBarLabelCounter';
-import { closeChat } from '../../actions.native';
-import AbstractChat, {
-    IProps as AbstractProps,
-    _mapStateToProps
-} from '../AbstractChat';
+import { closeChat, sendMessage } from '../../actions.native';
+import { IProps as AbstractProps } from '../../types';
 
 import ChatInputBar from './ChatInputBar';
 import MessageContainer from './MessageContainer';
@@ -34,7 +32,21 @@ interface IProps extends AbstractProps {
  * Implements a React native component that renders the chat window (modal) of
  * the mobile client.
  */
-class Chat extends AbstractChat<IProps> {
+class Chat extends Component<IProps> {
+
+    /**
+     * Initializes a new {@code AbstractChat} instance.
+     *
+     * @param {Props} props - The React {@code Component} props to initialize
+     * the new {@code AbstractChat} instance with.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onSendMessage = this._onSendMessage.bind(this);
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -57,6 +69,39 @@ class Chat extends AbstractChat<IProps> {
             </JitsiScreen>
         );
     }
+
+    /**
+    * Sends a text message.
+    *
+    * @private
+    * @param {string} text - The text message to be sent.
+    * @returns {void}
+    * @type {Function}
+    */
+    _onSendMessage(text: string) {
+        this.props.dispatch(sendMessage(text));
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to {@link Chat} React {@code Component}
+ * props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @param {any} _ownProps - Components' own props.
+ * @private
+ * @returns {{
+ *     _messages: Array<Object>,
+ *     _nbUnreadMessages: number
+ * }}
+ */
+function _mapStateToProps(state: IReduxState, _ownProps: any) {
+    const { messages, nbUnreadMessages } = state['features/chat'];
+
+    return {
+        _messages: messages,
+        _nbUnreadMessages: nbUnreadMessages
+    };
 }
 
 export default translate(connect(_mapStateToProps)((props: IProps) => {

react/features/chat/components/native/ChatMessageGroup.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { FlatList } from 'react-native';
 
 import { MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from '../../constants';
-import { IMessage } from '../../reducer';
+import { IMessage } from '../../types';
 
 import ChatMessage from './ChatMessage';
 

react/features/chat/components/native/MessageContainer.tsx

@@ -3,7 +3,7 @@ import { FlatList, Text, TextStyle, View, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n/functions';
-import { IMessage } from '../../reducer';
+import { IMessage } from '../../types';
 import AbstractMessageContainer, { IProps as AbstractProps } from '../AbstractMessageContainer';
 
 import ChatMessageGroup from './ChatMessageGroup';