Skip to content
GitLab
Unverified Commit f7418791 authored by Reinaldo Neto's avatar Reinaldo Neto Committed by GitHub
Browse files

Chore: Migrate DisplayPrefsView to Typescript (#3555)

parent 905e1238
Hide whitespace changes
Inline Side-by-side
app/constants/constantDisplayMode.js deleted 100644 → 0
View file @ 905e1238
export const DISPLAY_MODE_CONDENSED = 'condensed';
export const DISPLAY_MODE_EXPANDED = 'expanded';
app/constants/constantDisplayMode.ts 0 → 100644
View file @ f7418791
export enum DisplayMode {
Condensed = 'condensed',
Expanded = 'expanded'
}
export enum SortBy {
Alphabetical = 'alphabetical',
Activity = 'activity'
}
app/presentation/RoomItem/Actions.tsx
View file @ f7418791
......@@ -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 (
......
app/presentation/RoomItem/IconOrAvatar.js
View file @ f7418791
......@@ -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 (
<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 (
<View style={styles.typeIcon}>
<TypeIcon
......
app/presentation/RoomItem/RoomItem.tsx
View file @ f7418791
......@@ -11,7 +11,7 @@ import UpdatedAt from './UpdatedAt';
import Touchable from './Touchable';
import Tag from './Tag';
import I18n from '../../i18n';
import { DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode';
import { DisplayMode } from '../../constants/constantDisplayMode';
interface IRoomItem {
rid: string;
......@@ -132,7 +132,7 @@ const RoomItem = ({
displayMode={displayMode}
showAvatar={showAvatar}
showLastMessage={showLastMessage}>
{showLastMessage && displayMode === DISPLAY_MODE_EXPANDED ? (
{showLastMessage && displayMode === DisplayMode.Expanded ? (
<>
<View style={styles.titleContainer}>
{showAvatar ? (
......
app/presentation/RoomItem/Wrapper.tsx
View file @ f7418791
......@@ -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) => (
<View
style={[styles.container, displayMode === DISPLAY_MODE_CONDENSED && styles.containerCondensed]}
style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
accessibilityLabel={accessibilityLabel}>
<IconOrAvatar theme={theme} displayMode={displayMode} {...props} />
<View
......@@ -34,7 +34,7 @@ const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }:
{
borderColor: themes[theme].separatorColor
},
displayMode === DISPLAY_MODE_CONDENSED && styles.condensedPaddingVertical
displayMode === DisplayMode.Condensed && styles.condensedPaddingVertical
]}>
{children}
</View>
......
app/reducers/sortPreferences.js
View file @ f7418791
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) => {
......
app/views/DisplayPrefsView.js → app/views/DisplayPrefsView.tsx
View file @ f7418791
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';
const DisplayPrefsView = props => {
import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
import { SettingsStackParamList } from '../stacks/types';
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 { 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<IParam>) => {
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) => (
<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' />
);
const renderRadio = value => (
const renderRadio = (value: boolean) => (
<RadioButton
selected={!!value}
color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
......@@ -111,7 +128,7 @@ const DisplayPrefsView = props => {
left={() => <List.Icon name='view-extended' />}
title='Expanded'
testID='display-pref-view-expanded'
right={() => renderRadio(displayMode === DISPLAY_MODE_EXPANDED)}
right={() => renderRadio(displayMode === DisplayMode.Expanded)}
onPress={displayExpanded}
/>
<List.Separator />
......@@ -119,7 +136,7 @@ const DisplayPrefsView = props => {
left={() => <List.Icon name='view-medium' />}
title='Condensed'
testID='display-pref-view-condensed'
right={() => renderRadio(displayMode === DISPLAY_MODE_CONDENSED)}
right={() => renderRadio(displayMode === DisplayMode.Condensed)}
onPress={displayCondensed}
/>
<List.Separator />
......@@ -139,7 +156,7 @@ const DisplayPrefsView = props => {
testID='display-pref-view-activity'
left={() => <List.Icon name='clock' />}
onPress={sortByActivity}
right={() => renderRadio(sortBy === 'activity')}
right={() => renderRadio(sortBy === SortBy.Activity)}
/>
<List.Separator />
<List.Item
......@@ -147,7 +164,7 @@ const DisplayPrefsView = props => {
testID='display-pref-view-name'
left={() => <List.Icon name='sort-az' />}
onPress={sortByName}
right={() => renderRadio(sortBy === 'alphabetical')}
right={() => renderRadio(sortBy === SortBy.Alphabetical)}
/>
<List.Separator />
</List.Section>
......@@ -184,9 +201,6 @@ const DisplayPrefsView = props => {
);
};
DisplayPrefsView.propTypes = {
navigation: PropTypes.object,
isMasterDetail: PropTypes.bool
};
DisplayPrefsView.propTypes = {};
export default DisplayPrefsView;
app/views/RoomsListView/index.js
View file @ f7418791
......@@ -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 <ActivityIndicator theme={theme} />;
......
storybook/stories/RoomItem.js
View file @ f7418791
......@@ -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', () => (
<>
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DISPLAY_MODE_CONDENSED} />
<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DISPLAY_MODE_CONDENSED} />
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DisplayMode.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
tunread={[1]}
lastMessage={lastMessage}
displayMode={DISPLAY_MODE_CONDENSED}
displayMode={DisplayMode.Condensed}
showAvatar={false}
/>
<RoomItem type='p' displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
<RoomItem name={longText} autoJoin displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
<RoomItem type='p' displayMode={DisplayMode.Condensed} showAvatar={false} />
<RoomItem name={longText} autoJoin 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}
/>
<RoomItem
......@@ -170,7 +170,7 @@ stories.add('Expanded Room Item without Avatar', () => (
alert
tunread={[1]}
lastMessage={lastMessage}
displayMode={DISPLAY_MODE_EXPANDED}
displayMode={DisplayMode.Expanded}
showAvatar={false}
/>
<RoomItem
......@@ -178,7 +178,7 @@ stories.add('Expanded Room Item without Avatar', () => (
showLastMessage
alert
lastMessage={lastMessage}
displayMode={DISPLAY_MODE_EXPANDED}
displayMode={DisplayMode.Expanded}
showAvatar={false}
/>
</>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

gitlab project and software management by fairkom.eu - more open source web apps at fairapps.net