From f7418791a2ebb911d87bc811cfbe38175e844d18 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Tue, 11 Jan 2022 11:47:23 -0300 Subject: [PATCH] Chore: Migrate DisplayPrefsView to Typescript (#3555) --- app/constants/constantDisplayMode.js | 2 - app/constants/constantDisplayMode.ts | 9 +++ app/presentation/RoomItem/Actions.tsx | 6 +- app/presentation/RoomItem/IconOrAvatar.js | 6 +- app/presentation/RoomItem/RoomItem.tsx | 4 +- app/presentation/RoomItem/Wrapper.tsx | 6 +- app/reducers/sortPreferences.js | 6 +- ...splayPrefsView.js => DisplayPrefsView.tsx} | 56 ++++++++++++------- app/views/RoomsListView/index.js | 6 +- storybook/stories/RoomItem.js | 22 ++++---- 10 files changed, 72 insertions(+), 51 deletions(-) delete mode 100644 app/constants/constantDisplayMode.js create mode 100644 app/constants/constantDisplayMode.ts rename app/views/{DisplayPrefsView.js => DisplayPrefsView.tsx} (76%) diff --git a/app/constants/constantDisplayMode.js b/app/constants/constantDisplayMode.js deleted file mode 100644 index d7d7e1d53..000000000 --- a/app/constants/constantDisplayMode.js +++ /dev/null @@ -1,2 +0,0 @@ -export const DISPLAY_MODE_CONDENSED = 'condensed'; -export const DISPLAY_MODE_EXPANDED = 'expanded'; diff --git a/app/constants/constantDisplayMode.ts b/app/constants/constantDisplayMode.ts new file mode 100644 index 000000000..ecb6bd4b7 --- /dev/null +++ b/app/constants/constantDisplayMode.ts @@ -0,0 +1,9 @@ +export enum DisplayMode { + Condensed = 'condensed', + Expanded = 'expanded' +} + +export enum SortBy { + Alphabetical = 'alphabetical', + Activity = 'activity' +} diff --git a/app/presentation/RoomItem/Actions.tsx b/app/presentation/RoomItem/Actions.tsx index 19c63baaf..2b53955a9 100644 --- a/app/presentation/RoomItem/Actions.tsx +++ b/app/presentation/RoomItem/Actions.tsx @@ -5,7 +5,7 @@ import { RectButton } from 'react-native-gesture-handler'; import { isRTL } from '../../i18n'; import { CustomIcon } from '../../lib/Icons'; import { themes } from '../../constants/colors'; -import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode'; +import { DisplayMode } from '../../constants/constantDisplayMode'; import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles'; interface ILeftActions { @@ -40,7 +40,7 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR reverse ); - const isCondensed = displayMode === DISPLAY_MODE_CONDENSED; + const isCondensed = displayMode === DisplayMode.Condensed; const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null; return ( @@ -87,7 +87,7 @@ export const RightActions = React.memo( reverse ); - const isCondensed = displayMode === DISPLAY_MODE_CONDENSED; + const isCondensed = displayMode === DisplayMode.Condensed; const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null; return ( diff --git a/app/presentation/RoomItem/IconOrAvatar.js b/app/presentation/RoomItem/IconOrAvatar.js index cedd3b0ff..29343477a 100644 --- a/app/presentation/RoomItem/IconOrAvatar.js +++ b/app/presentation/RoomItem/IconOrAvatar.js @@ -3,7 +3,7 @@ import { View } from 'react-native'; import PropTypes from 'prop-types'; import Avatar from '../../containers/Avatar'; -import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode'; +import { DisplayMode } from '../../constants/constantDisplayMode'; import TypeIcon from './TypeIcon'; import styles from './styles'; @@ -22,11 +22,11 @@ const IconOrAvatar = ({ }) => { if (showAvatar) { return ( - + ); } - if (displayMode === DISPLAY_MODE_EXPANDED && showLastMessage) { + if (displayMode === DisplayMode.Expanded && showLastMessage) { return ( - {showLastMessage && displayMode === DISPLAY_MODE_EXPANDED ? ( + {showLastMessage && displayMode === DisplayMode.Expanded ? ( <> {showAvatar ? ( diff --git a/app/presentation/RoomItem/Wrapper.tsx b/app/presentation/RoomItem/Wrapper.tsx index cb4d6e1bd..30c3283d3 100644 --- a/app/presentation/RoomItem/Wrapper.tsx +++ b/app/presentation/RoomItem/Wrapper.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { View } from 'react-native'; import { themes } from '../../constants/colors'; -import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode'; +import { DisplayMode } from '../../constants/constantDisplayMode'; import IconOrAvatar from './IconOrAvatar'; import styles from './styles'; @@ -25,7 +25,7 @@ interface IWrapper { const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => ( {children} diff --git a/app/reducers/sortPreferences.js b/app/reducers/sortPreferences.js index 31b501852..4ad9e797d 100644 --- a/app/reducers/sortPreferences.js +++ b/app/reducers/sortPreferences.js @@ -1,13 +1,13 @@ import { SORT_PREFERENCES } from '../actions/actionsTypes'; -import { DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode'; +import { DisplayMode, SortBy } from '../constants/constantDisplayMode'; const initialState = { - sortBy: 'activity', + sortBy: SortBy.Activity, groupByType: false, showFavorites: false, showUnread: false, showAvatar: true, - displayMode: DISPLAY_MODE_EXPANDED + displayMode: DisplayMode.Expanded }; export default (state = initialState, action) => { diff --git a/app/views/DisplayPrefsView.js b/app/views/DisplayPrefsView.tsx similarity index 76% rename from app/views/DisplayPrefsView.js rename to app/views/DisplayPrefsView.tsx index 09da4edc9..959682c4c 100644 --- a/app/views/DisplayPrefsView.js +++ b/app/views/DisplayPrefsView.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; import { Switch } from 'react-native'; import { RadioButton } from 'react-native-ui-lib'; +import { StackNavigationProp } from '@react-navigation/stack'; import { useDispatch, useSelector } from 'react-redux'; import { setPreference } from '../actions/sortPreferences'; @@ -15,13 +15,30 @@ import * as HeaderButton from '../containers/HeaderButton'; import SafeAreaView from '../containers/SafeAreaView'; import { ICON_SIZE } from '../containers/List/constants'; import log, { events, logEvent } from '../utils/log'; -import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode'; +import { DisplayMode, SortBy } from '../constants/constantDisplayMode'; +import { SettingsStackParamList } from '../stacks/types'; -const DisplayPrefsView = props => { +interface IParam { + sortBy: SortBy; + groupByType: boolean; + showFavorites: boolean; + showUnread: boolean; + showAvatar: boolean; + displayMode: DisplayMode; +} + +interface IDisplayPrefsView { + navigation: StackNavigationProp; + isMasterDetail: boolean; +} + +const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => { const { theme } = useTheme(); - const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(state => state.sortPreferences); - const { isMasterDetail } = useSelector(state => state.app); + const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector( + (state: any) => state.sortPreferences + ); + const { isMasterDetail } = useSelector((state: any) => state.app); const dispatch = useDispatch(); useEffect(() => { @@ -36,7 +53,7 @@ const DisplayPrefsView = props => { } }, []); - const setSortPreference = async param => { + const setSortPreference = async (param: Partial) => { try { dispatch(setPreference(param)); await RocketChat.saveSortPreference(param); @@ -47,12 +64,12 @@ const DisplayPrefsView = props => { const sortByName = async () => { logEvent(events.DP_SORT_CHANNELS_BY_NAME); - await setSortPreference({ sortBy: 'alphabetical' }); + await setSortPreference({ sortBy: SortBy.Alphabetical }); }; const sortByActivity = async () => { logEvent(events.DP_SORT_CHANNELS_BY_ACTIVITY); - await setSortPreference({ sortBy: 'activity' }); + await setSortPreference({ sortBy: SortBy.Activity }); }; const toggleGroupByType = async () => { @@ -77,23 +94,23 @@ const DisplayPrefsView = props => { const displayExpanded = async () => { logEvent(events.DP_DISPLAY_EXPANDED); - await setSortPreference({ displayMode: DISPLAY_MODE_EXPANDED }); + await setSortPreference({ displayMode: DisplayMode.Expanded }); }; const displayCondensed = async () => { logEvent(events.DP_DISPLAY_CONDENSED); - await setSortPreference({ displayMode: DISPLAY_MODE_CONDENSED }); + await setSortPreference({ displayMode: DisplayMode.Condensed }); }; - const renderCheckBox = value => ( + const renderCheckBox = (value: boolean) => ( ); - const renderAvatarSwitch = value => ( + const renderAvatarSwitch = (value: boolean) => ( toggleAvatar()} testID='display-pref-view-avatar-switch' /> ); - const renderRadio = value => ( + const renderRadio = (value: boolean) => ( { left={() => } title='Expanded' testID='display-pref-view-expanded' - right={() => renderRadio(displayMode === DISPLAY_MODE_EXPANDED)} + right={() => renderRadio(displayMode === DisplayMode.Expanded)} onPress={displayExpanded} /> @@ -119,7 +136,7 @@ const DisplayPrefsView = props => { left={() => } title='Condensed' testID='display-pref-view-condensed' - right={() => renderRadio(displayMode === DISPLAY_MODE_CONDENSED)} + right={() => renderRadio(displayMode === DisplayMode.Condensed)} onPress={displayCondensed} /> @@ -139,7 +156,7 @@ const DisplayPrefsView = props => { testID='display-pref-view-activity' left={() => } onPress={sortByActivity} - right={() => renderRadio(sortBy === 'activity')} + right={() => renderRadio(sortBy === SortBy.Activity)} /> { testID='display-pref-view-name' left={() => } onPress={sortByName} - right={() => renderRadio(sortBy === 'alphabetical')} + right={() => renderRadio(sortBy === SortBy.Alphabetical)} /> @@ -184,9 +201,6 @@ const DisplayPrefsView = props => { ); }; -DisplayPrefsView.propTypes = { - navigation: PropTypes.object, - isMasterDetail: PropTypes.bool -}; +DisplayPrefsView.propTypes = {}; export default DisplayPrefsView; diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 518e10c48..9dc3bca73 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -49,7 +49,7 @@ import { showConfirmationAlert, showErrorAlert } from '../../utils/info'; import { E2E_BANNER_TYPE } from '../../lib/encryption/constants'; import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry'; import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../ee/omnichannel/lib'; -import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode'; +import { DisplayMode, SortBy } from '../../constants/constantDisplayMode'; import styles from './styles'; import ServerDropdown from './ServerDropdown'; import ListHeader from './ListHeader'; @@ -453,7 +453,7 @@ class RoomsListView extends React.Component { const defaultWhereClause = [Q.where('archived', false), Q.where('open', true)]; - if (sortBy === 'alphabetical') { + if (sortBy === SortBy.Alphabetical) { defaultWhereClause.push(Q.experimentalSortBy(`${this.useRealName ? 'fname' : 'name'}`, Q.asc)); } else { defaultWhereClause.push(Q.experimentalSortBy('room_updated_at', Q.desc)); @@ -973,7 +973,7 @@ class RoomsListView extends React.Component { const { loading, chats, search, searching } = this.state; const { theme, refreshing, displayMode } = this.props; - const height = displayMode === DISPLAY_MODE_CONDENSED ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT; + const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT; if (loading) { return ; diff --git a/storybook/stories/RoomItem.js b/storybook/stories/RoomItem.js index 1538c118a..e6ae40e7b 100644 --- a/storybook/stories/RoomItem.js +++ b/storybook/stories/RoomItem.js @@ -7,7 +7,7 @@ import { Provider } from 'react-redux'; import { themes } from '../../app/constants/colors'; import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem'; import { longText } from '../utils'; -import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../../app/constants/constantDisplayMode'; +import { DisplayMode } from '../../app/constants/constantDisplayMode'; import { store } from './index'; const baseUrl = 'https://open.rocket.chat'; @@ -32,7 +32,7 @@ const RoomItem = props => ( width={width} theme={_theme} showAvatar - displayMode={DISPLAY_MODE_EXPANDED} + displayMode={DisplayMode.Expanded} {...updatedAt} {...props} /> @@ -132,10 +132,10 @@ stories.add('Last Message', () => ( stories.add('Condensed Room Item', () => ( <> - - + + - + )); @@ -146,11 +146,11 @@ stories.add('Condensed Room Item without Avatar', () => ( alert tunread={[1]} lastMessage={lastMessage} - displayMode={DISPLAY_MODE_CONDENSED} + displayMode={DisplayMode.Condensed} showAvatar={false} /> - - + + )); @@ -161,7 +161,7 @@ stories.add('Expanded Room Item without Avatar', () => ( alert tunread={[1]} lastMessage={lastMessage} - displayMode={DISPLAY_MODE_EXPANDED} + displayMode={DisplayMode.Expanded} showAvatar={false} /> ( alert tunread={[1]} lastMessage={lastMessage} - displayMode={DISPLAY_MODE_EXPANDED} + displayMode={DisplayMode.Expanded} showAvatar={false} /> ( showLastMessage alert lastMessage={lastMessage} - displayMode={DISPLAY_MODE_EXPANDED} + displayMode={DisplayMode.Expanded} showAvatar={false} />