[TS migration] Migrate 'ReportReactionList' component to TypeScript

src/pages/home/report/ReactionList/BaseReactionList.js → src/pages/home/report/ReactionList/BaseReactionList.tsx

@@ -1,45 +1,43 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
 import Str from 'expensify-common/lib/str';
-import PropTypes from 'prop-types';
 import React from 'react';
-import {FlatList} from 'react-native';
+import {FlatList, type FlatListProps} from 'react-native';
 import OptionRow from '@components/OptionRow';
-import participantPropTypes from '@components/participantPropTypes';
-import withWindowDimensions from '@components/withWindowDimensions';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import * as UserUtils from '@libs/UserUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import type {PersonalDetails} from '@src/types/onyx';
 import HeaderReactionList from './HeaderReactionList';
-import reactionPropTypes from './reactionPropTypes';
+import type {ReactionListProps} from './reactionPropTypes';
 
-const propTypes = {
+type BaseReactionListProps = ReactionListProps & {
     /**
      *  Array of personal detail objects
      */
-    users: PropTypes.arrayOf(participantPropTypes).isRequired,
+    users: PersonalDetails[];
 
     /**
      * Returns true if the current account has reacted to the report action (with the given skin tone).
      */
-    hasUserReacted: PropTypes.bool,
+    hasUserReacted: boolean;
 
-    ...reactionPropTypes,
-};
-
-const defaultProps = {
-    hasUserReacted: false,
+    /**
+     * Returns true if the reaction list is visible
+     */
+    isVisible: boolean;
 };
 
 /**
  * Create a unique key for each action in the FlatList.
  * @param {Object} item
  * @param {Number} index
  * @return {String}
  */
-const keyExtractor = (item, index) => `${item.login}+${index}`;
+const keyExtractor: FlatListProps<PersonalDetails>['keyExtractor'] = (item, index) => `${item.login}+${index}`;
 
 /**
  * This function will be used with FlatList getItemLayout property for optimization purpose that allows skipping
@@ -47,18 +45,19 @@
  * Generate and return an object with properties length(height of each individual row),
  * offset(distance of the current row from the top of the FlatList), index(current row index)
  *
  * @param {*} _ FlatList item
  * @param {Number} index row index
  * @returns {Object}
  */
-const getItemLayout = (_, index) => ({
+const getItemLayout = (_: any, index: number): {length: number; offset: number; index: number} => ({
     index,
     length: variables.listItemHeightNormal,
     offset: variables.listItemHeightNormal * index,
 });
 
-function BaseReactionList(props) {
-    const styles = useThemeStyles();
+function BaseReactionList(props: BaseReactionListProps) {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const {hoveredComponentBG, reactionListContainer, reactionListContainerFixedWidth, pv2} = useThemeStyles();
     if (!props.isVisible) {
         return null;
     }
@@ -68,29 +67,29 @@
      * Items with the code "SPACER" return nothing and are used to fill rows up to 8
      * so that the sticky headers function properly
      *
      * @param {Object} params
      * @param {Object} params.item
      * @return {React.Component}
      */
-    const renderItem = ({item}) => (
+    const renderItem: FlatListProps<PersonalDetails>['renderItem'] = ({item}) => (
         <OptionRow
-            item={item}
             boldStyle
             style={{maxWidth: variables.mobileResponsiveWidthBreakpoint}}
-            hoverStyle={styles.hoveredComponentBG}
+            hoverStyle={hoveredComponentBG}
             onSelectRow={() => {
-                props.onClose();
+                props.onClose && props.onClose();
                 Navigation.navigate(ROUTES.PROFILE.getRoute(item.accountID));
             }}
             option={{
-                text: Str.removeSMSDomain(item.displayName),
+                reportID: String(item.accountID),
+                text: Str.removeSMSDomain(item.displayName || ''),
                 alternateText: Str.removeSMSDomain(item.login || ''),
                 participantsList: [item],
                 icons: [
                     {
                         id: item.accountID,
                         source: UserUtils.getAvatar(item.avatar, item.accountID),
-                        name: item.login,
+                        name: item.login || '',
                         type: CONST.ICON_TYPE_AVATAR,
                     },
                 ],
@@ -113,15 +112,13 @@
                 renderItem={renderItem}
                 keyExtractor={keyExtractor}
                 getItemLayout={getItemLayout}
-                contentContainerStyle={styles.pv2}
-                style={[styles.reactionListContainer, !props.isSmallScreenWidth && styles.reactionListContainerFixedWidth]}
+                contentContainerStyle={pv2}
+                style={[reactionListContainer, !isSmallScreenWidth && reactionListContainerFixedWidth]}
             />
         </>
     );
 }
 
-BaseReactionList.propTypes = propTypes;
-BaseReactionList.defaultProps = defaultProps;
 BaseReactionList.displayName = 'BaseReactionList';
 
-export default withWindowDimensions(BaseReactionList);
+export default BaseReactionList;

src/pages/home/report/ReactionList/HeaderReactionList.tsx

@@ -0,0 +1,48 @@
+import {View} from 'react-native';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import type {ReactionListProps} from './reactionPropTypes';
+
+type HeaderReactionListProps = ReactionListProps & {
+    /**
+     * Returns true if the current account has reacted to the report action (with the given skin tone).
+     */
+    hasUserReacted: boolean;
+};
+
+function HeaderReactionList(props: HeaderReactionListProps) {
+    const {
+        flexRow,
+        justifyContentBetween,
+        alignItemsCenter,
+        emojiReactionListHeader,
+        pt4,
+        emojiReactionListHeaderBubble,
+        miniQuickEmojiReactionText,
+        reactionCounterText,
+        reactionListHeaderText,
+    } = useThemeStyles();
+    const {getEmojiReactionBubbleStyle, getEmojiReactionBubbleTextStyle, getEmojiReactionCounterTextStyle} = useStyleUtils();
+    const {preferredLocale} = useLocalize();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    return (
+        <View style={[flexRow, justifyContentBetween, alignItemsCenter, emojiReactionListHeader, !isSmallScreenWidth && pt4]}>
+            <View style={flexRow}>
+                <View style={[emojiReactionListHeaderBubble, getEmojiReactionBubbleStyle(false, props.hasUserReacted)]}>
+                    <Text style={[miniQuickEmojiReactionText, getEmojiReactionBubbleTextStyle(true)]}>{props.emojiCodes.join('')}</Text>
+                    <Text style={[reactionCounterText, getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.emojiCount}</Text>
+                </View>
+                <Text style={reactionListHeaderText}>{`:${EmojiUtils.getLocalizedEmojiName(props.emojiName, preferredLocale)}:`}</Text>
+            </View>
+        </View>
+    );
+}
+
+HeaderReactionList.displayName = 'HeaderReactionList';
+
+export default HeaderReactionList;