sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Migrate DisplayPrefsView to Typescript (#3555)

This commit is contained in:
Reinaldo Neto 2022-01-11 11:47:23 -03:00 committed by GitHub
parent 905e12380a
commit f7418791a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 72 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/constants/constantDisplayMode.js
View File

@ -1,2 +0,0 @@
export const DISPLAY_MODE_CONDENSED = 'condensed';
export const DISPLAY_MODE_EXPANDED = 'expanded';

9
app/constants/constantDisplayMode.ts Normal file
View File

@ -0,0 +1,9 @@
export enum DisplayMode {
Condensed = 'condensed',
Expanded = 'expanded'
}
export enum SortBy {
Alphabetical = 'alphabetical',
Activity = 'activity'
}

6
app/presentation/RoomItem/Actions.tsx
View File

@ -5,7 +5,7 @@ import { RectButton } from 'react-native-gesture-handler';
import { isRTL } from '../../i18n'; import { isRTL } from '../../i18n';
import { CustomIcon } from '../../lib/Icons'; import { CustomIcon } from '../../lib/Icons';
import { themes } from '../../constants/colors'; 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'; import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
interface ILeftActions { interface ILeftActions {
@ -40,7 +40,7 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
reverse reverse
); );
const isCondensed = displayMode === DISPLAY_MODE_CONDENSED; const isCondensed = displayMode === DisplayMode.Condensed;
const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null; const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
return ( return (
@ -87,7 +87,7 @@ export const RightActions = React.memo(
reverse reverse
); );
const isCondensed = displayMode === DISPLAY_MODE_CONDENSED; const isCondensed = displayMode === DisplayMode.Condensed;
const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null; const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
return ( return (

6
app/presentation/RoomItem/IconOrAvatar.js
View File

@ -3,7 +3,7 @@ import { View } from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Avatar from '../../containers/Avatar'; 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 TypeIcon from './TypeIcon';
import styles from './styles'; import styles from './styles';
@ -22,11 +22,11 @@ const IconOrAvatar = ({
}) => { }) => {
if (showAvatar) { if (showAvatar) {
return ( return (
<Avatar text={avatar} size={displayMode === DISPLAY_MODE_CONDENSED ? 36 : 48} type={type} style={styles.avatar} rid={rid} /> <Avatar text={avatar} size={displayMode === DisplayMode.Condensed ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
); );
} }
if (displayMode === DISPLAY_MODE_EXPANDED && showLastMessage) { if (displayMode === DisplayMode.Expanded && showLastMessage) {
return ( return (
<View style={styles.typeIcon}> <View style={styles.typeIcon}>
<TypeIcon <TypeIcon

4
app/presentation/RoomItem/RoomItem.tsx
View File

@ -11,7 +11,7 @@ import UpdatedAt from './UpdatedAt';
import Touchable from './Touchable'; import Touchable from './Touchable';
import Tag from './Tag'; import Tag from './Tag';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode'; import { DisplayMode } from '../../constants/constantDisplayMode';
interface IRoomItem { interface IRoomItem {
rid: string; rid: string;
@ -132,7 +132,7 @@ const RoomItem = ({
displayMode={displayMode} displayMode={displayMode}
showAvatar={showAvatar} showAvatar={showAvatar}
showLastMessage={showLastMessage}> showLastMessage={showLastMessage}>
{showLastMessage && displayMode === DISPLAY_MODE_EXPANDED ? ( {showLastMessage && displayMode === DisplayMode.Expanded ? (
<> <>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
{showAvatar ? ( {showAvatar ? (

6
app/presentation/RoomItem/Wrapper.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode'; import { DisplayMode } from '../../constants/constantDisplayMode';
import IconOrAvatar from './IconOrAvatar'; import IconOrAvatar from './IconOrAvatar';
import styles from './styles'; import styles from './styles';
@ -25,7 +25,7 @@ interface IWrapper {
const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => ( const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => (
<View <View
style={[styles.container, displayMode === DISPLAY_MODE_CONDENSED && styles.containerCondensed]} style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
accessibilityLabel={accessibilityLabel}> accessibilityLabel={accessibilityLabel}>
<IconOrAvatar theme={theme} displayMode={displayMode} {...props} /> <IconOrAvatar theme={theme} displayMode={displayMode} {...props} />
<View <View
@ -34,7 +34,7 @@ const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }:
{ {
borderColor: themes[theme].separatorColor borderColor: themes[theme].separatorColor
}, },
displayMode === DISPLAY_MODE_CONDENSED && styles.condensedPaddingVertical displayMode === DisplayMode.Condensed && styles.condensedPaddingVertical
]}> ]}>
{children} {children}
</View> </View>

6
app/reducers/sortPreferences.js
View File

@ -1,13 +1,13 @@
import { SORT_PREFERENCES } from '../actions/actionsTypes'; import { SORT_PREFERENCES } from '../actions/actionsTypes';
import { DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode'; import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
const initialState = { const initialState = {
sortBy: 'activity', sortBy: SortBy.Activity,
groupByType: false, groupByType: false,
showFavorites: false, showFavorites: false,
showUnread: false, showUnread: false,
showAvatar: true, showAvatar: true,
displayMode: DISPLAY_MODE_EXPANDED displayMode: DisplayMode.Expanded
}; };
export default (state = initialState, action) => { export default (state = initialState, action) => {

56
app/views/DisplayPrefsView.js → app/views/DisplayPrefsView.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Switch } from 'react-native'; import { Switch } from 'react-native';
import { RadioButton } from 'react-native-ui-lib'; import { RadioButton } from 'react-native-ui-lib';
import { StackNavigationProp } from '@react-navigation/stack';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { setPreference } from '../actions/sortPreferences'; import { setPreference } from '../actions/sortPreferences';
@ -15,13 +15,30 @@ import * as HeaderButton from '../containers/HeaderButton';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import { ICON_SIZE } from '../containers/List/constants'; import { ICON_SIZE } from '../containers/List/constants';
import log, { events, logEvent } from '../utils/log'; 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<SettingsStackParamList, 'DisplayPrefsView'>;
isMasterDetail: boolean;
}
const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
const { theme } = useTheme(); const { theme } = useTheme();
const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(state => state.sortPreferences); const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(
const { isMasterDetail } = useSelector(state => state.app); (state: any) => state.sortPreferences
);
const { isMasterDetail } = useSelector((state: any) => state.app);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
@ -36,7 +53,7 @@ const DisplayPrefsView = props => {
} }
}, []); }, []);
const setSortPreference = async param => { const setSortPreference = async (param: Partial<IParam>) => {
try { try {
dispatch(setPreference(param)); dispatch(setPreference(param));
await RocketChat.saveSortPreference(param); await RocketChat.saveSortPreference(param);
@ -47,12 +64,12 @@ const DisplayPrefsView = props => {
const sortByName = async () => { const sortByName = async () => {
logEvent(events.DP_SORT_CHANNELS_BY_NAME); logEvent(events.DP_SORT_CHANNELS_BY_NAME);
await setSortPreference({ sortBy: 'alphabetical' }); await setSortPreference({ sortBy: SortBy.Alphabetical });
}; };
const sortByActivity = async () => { const sortByActivity = async () => {
logEvent(events.DP_SORT_CHANNELS_BY_ACTIVITY); logEvent(events.DP_SORT_CHANNELS_BY_ACTIVITY);
await setSortPreference({ sortBy: 'activity' }); await setSortPreference({ sortBy: SortBy.Activity });
}; };
const toggleGroupByType = async () => { const toggleGroupByType = async () => {
@ -77,23 +94,23 @@ const DisplayPrefsView = props => {
const displayExpanded = async () => { const displayExpanded = async () => {
logEvent(events.DP_DISPLAY_EXPANDED); logEvent(events.DP_DISPLAY_EXPANDED);
await setSortPreference({ displayMode: DISPLAY_MODE_EXPANDED }); await setSortPreference({ displayMode: DisplayMode.Expanded });
}; };
const displayCondensed = async () => { const displayCondensed = async () => {
logEvent(events.DP_DISPLAY_CONDENSED); logEvent(events.DP_DISPLAY_CONDENSED);
await setSortPreference({ displayMode: DISPLAY_MODE_CONDENSED }); await setSortPreference({ displayMode: DisplayMode.Condensed });
}; };
const renderCheckBox = value => ( const renderCheckBox = (value: boolean) => (
<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} /> <List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} />
); );
const renderAvatarSwitch = value => ( const renderAvatarSwitch = (value: boolean) => (
<Switch value={value} onValueChange={() => toggleAvatar()} testID='display-pref-view-avatar-switch' /> <Switch value={value} onValueChange={() => toggleAvatar()} testID='display-pref-view-avatar-switch' />
); );
const renderRadio = value => ( const renderRadio = (value: boolean) => (
<RadioButton <RadioButton
selected={!!value} selected={!!value}
color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText} color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
@ -111,7 +128,7 @@ const DisplayPrefsView = props => {
left={() => <List.Icon name='view-extended' />} left={() => <List.Icon name='view-extended' />}
title='Expanded' title='Expanded'
testID='display-pref-view-expanded' testID='display-pref-view-expanded'
right={() => renderRadio(displayMode === DISPLAY_MODE_EXPANDED)} right={() => renderRadio(displayMode === DisplayMode.Expanded)}
onPress={displayExpanded} onPress={displayExpanded}
/> />
<List.Separator /> <List.Separator />
@ -119,7 +136,7 @@ const DisplayPrefsView = props => {
left={() => <List.Icon name='view-medium' />} left={() => <List.Icon name='view-medium' />}
title='Condensed' title='Condensed'
testID='display-pref-view-condensed' testID='display-pref-view-condensed'
right={() => renderRadio(displayMode === DISPLAY_MODE_CONDENSED)} right={() => renderRadio(displayMode === DisplayMode.Condensed)}
onPress={displayCondensed} onPress={displayCondensed}
/> />
<List.Separator /> <List.Separator />
@ -139,7 +156,7 @@ const DisplayPrefsView = props => {
testID='display-pref-view-activity' testID='display-pref-view-activity'
left={() => <List.Icon name='clock' />} left={() => <List.Icon name='clock' />}
onPress={sortByActivity} onPress={sortByActivity}
right={() => renderRadio(sortBy === 'activity')} right={() => renderRadio(sortBy === SortBy.Activity)}
/> />
<List.Separator /> <List.Separator />
<List.Item <List.Item
@ -147,7 +164,7 @@ const DisplayPrefsView = props => {
testID='display-pref-view-name' testID='display-pref-view-name'
left={() => <List.Icon name='sort-az' />} left={() => <List.Icon name='sort-az' />}
onPress={sortByName} onPress={sortByName}
right={() => renderRadio(sortBy === 'alphabetical')} right={() => renderRadio(sortBy === SortBy.Alphabetical)}
/> />
<List.Separator /> <List.Separator />
</List.Section> </List.Section>
@ -184,9 +201,6 @@ const DisplayPrefsView = props => {
); );
}; };
DisplayPrefsView.propTypes = { DisplayPrefsView.propTypes = {};
navigation: PropTypes.object,
isMasterDetail: PropTypes.bool
};
export default DisplayPrefsView; export default DisplayPrefsView;

6
app/views/RoomsListView/index.js
View File

@ -49,7 +49,7 @@ import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
import { E2E_BANNER_TYPE } from '../../lib/encryption/constants'; import { E2E_BANNER_TYPE } from '../../lib/encryption/constants';
import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry'; import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry';
import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../ee/omnichannel/lib'; 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 styles from './styles';
import ServerDropdown from './ServerDropdown'; import ServerDropdown from './ServerDropdown';
import ListHeader from './ListHeader'; import ListHeader from './ListHeader';
@ -453,7 +453,7 @@ class RoomsListView extends React.Component {
const defaultWhereClause = [Q.where('archived', false), Q.where('open', true)]; 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)); defaultWhereClause.push(Q.experimentalSortBy(`${this.useRealName ? 'fname' : 'name'}`, Q.asc));
} else { } else {
defaultWhereClause.push(Q.experimentalSortBy('room_updated_at', Q.desc)); 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 { loading, chats, search, searching } = this.state;
const { theme, refreshing, displayMode } = this.props; 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) { if (loading) {
return <ActivityIndicator theme={theme} />; return <ActivityIndicator theme={theme} />;

22
storybook/stories/RoomItem.js
View File

@ -7,7 +7,7 @@ import { Provider } from 'react-redux';
import { themes } from '../../app/constants/colors'; import { themes } from '../../app/constants/colors';
import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem'; import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem';
import { longText } from '../utils'; 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'; import { store } from './index';
const baseUrl = 'https://open.rocket.chat'; const baseUrl = 'https://open.rocket.chat';
@ -32,7 +32,7 @@ const RoomItem = props => (
width={width} width={width}
theme={_theme} theme={_theme}
showAvatar showAvatar
displayMode={DISPLAY_MODE_EXPANDED} displayMode={DisplayMode.Expanded}
{...updatedAt} {...updatedAt}
{...props} {...props}
/> />
@ -132,10 +132,10 @@ stories.add('Last Message', () => (
stories.add('Condensed Room Item', () => ( stories.add('Condensed Room Item', () => (
<> <>
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DISPLAY_MODE_CONDENSED} /> <RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DisplayMode.Condensed} />
<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DISPLAY_MODE_CONDENSED} /> <RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DisplayMode.Condensed} />
<RoomItem type='c' displayMode={DISPLAY_MODE_CONDENSED} autoJoin /> <RoomItem type='c' displayMode={DisplayMode.Condensed} autoJoin />
</> </>
)); ));
@ -146,11 +146,11 @@ stories.add('Condensed Room Item without Avatar', () => (
alert alert
tunread={[1]} tunread={[1]}
lastMessage={lastMessage} lastMessage={lastMessage}
displayMode={DISPLAY_MODE_CONDENSED} displayMode={DisplayMode.Condensed}
showAvatar={false} showAvatar={false}
/> />
<RoomItem type='p' displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} /> <RoomItem type='p' displayMode={DisplayMode.Condensed} showAvatar={false} />
<RoomItem name={longText} autoJoin displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} /> <RoomItem name={longText} autoJoin displayMode={DisplayMode.Condensed} showAvatar={false} />
</> </>
)); ));
@ -161,7 +161,7 @@ stories.add('Expanded Room Item without Avatar', () => (
alert alert
tunread={[1]} tunread={[1]}
lastMessage={lastMessage} lastMessage={lastMessage}
displayMode={DISPLAY_MODE_EXPANDED} displayMode={DisplayMode.Expanded}
showAvatar={false} showAvatar={false}
/> />
<RoomItem <RoomItem
@ -170,7 +170,7 @@ stories.add('Expanded Room Item without Avatar', () => (
alert alert
tunread={[1]} tunread={[1]}
lastMessage={lastMessage} lastMessage={lastMessage}
displayMode={DISPLAY_MODE_EXPANDED} displayMode={DisplayMode.Expanded}
showAvatar={false} showAvatar={false}
/> />
<RoomItem <RoomItem
@ -178,7 +178,7 @@ stories.add('Expanded Room Item without Avatar', () => (
showLastMessage showLastMessage
alert alert
lastMessage={lastMessage} lastMessage={lastMessage}
displayMode={DISPLAY_MODE_EXPANDED} displayMode={DisplayMode.Expanded}
showAvatar={false} showAvatar={false}
/> />
</> </>