verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Evaluate MessagesView - TypeScript (#4113)

This commit is contained in:
Alex Junior 2022-05-10 23:22:17 -03:00 committed by GitHub
parent e233058e22
commit 1d452ed9e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/definitions/IMessage.ts
View File

@ -89,11 +89,7 @@ export interface IMessageFromServer {
drid?: string; drid?: string;
dcount?: number; dcount?: number;
dml: string | Date; dml: string | Date;
starred?: starred?: boolean;
| {
_id: string;
}
| boolean;
pinned?: boolean; pinned?: boolean;
pinnedAt?: string | Date; pinnedAt?: string | Date;
pinnedBy?: { pinnedBy?: {
@ -120,11 +116,6 @@ export interface IMessage extends IMessageFromServer {
emoji?: string; emoji?: string;
status?: number; status?: number;
pinned?: boolean; pinned?: boolean;
starred?:
| {
_id: string;
}
| boolean;
editedBy?: IEditedBy; editedBy?: IEditedBy;
reactions?: IReaction[]; reactions?: IReaction[];
role?: string; role?: string;
@ -144,6 +135,8 @@ export interface IMessage extends IMessageFromServer {
tshow?: boolean; tshow?: boolean;
comment?: string; comment?: string;
subscription?: { id: string }; subscription?: { id: string };
user?: string;
editedAt?: string | Date;
} }
export type TMessageModel = IMessage & Model; export type TMessageModel = IMessage & Model;

4
app/lib/services/restApi.ts
View File

@ -254,7 +254,7 @@ export const markAsUnread = ({ messageId }: { messageId: string }) =>
// RC 0.65.0 // RC 0.65.0
sdk.post('subscriptions.unread', { firstUnreadMessage: { _id: messageId } }); sdk.post('subscriptions.unread', { firstUnreadMessage: { _id: messageId } });
export const toggleStarMessage = (messageId: string, starred: boolean) => { export const toggleStarMessage = (messageId: string, starred?: boolean) => {
if (starred) { if (starred) {
// RC 0.59.0 // RC 0.59.0
return sdk.post('chat.unStarMessage', { messageId }); return sdk.post('chat.unStarMessage', { messageId });
@ -263,7 +263,7 @@ export const toggleStarMessage = (messageId: string, starred: boolean) => {
return sdk.post('chat.starMessage', { messageId }); return sdk.post('chat.starMessage', { messageId });
}; };
export const togglePinMessage = (messageId: string, pinned: boolean) => { export const togglePinMessage = (messageId: string, pinned?: boolean) => {
if (pinned) { if (pinned) {
// RC 0.59.0 // RC 0.59.0
return sdk.post('chat.unPinMessage', { messageId }); return sdk.post('chat.unPinMessage', { messageId });

76
app/views/MessagesView/index.tsx
View File

@ -20,7 +20,17 @@ import getThreadName from '../../lib/methods/getThreadName';
import styles from './styles'; import styles from './styles';
import { ChatsStackParamList } from '../../stacks/types'; import { ChatsStackParamList } from '../../stacks/types';
import { IRoomInfoParam } from '../SearchMessagesView'; import { IRoomInfoParam } from '../SearchMessagesView';
import { TMessageModel, IEmoji, ISubscription, SubscriptionType, IUrl } from '../../definitions'; import {
IApplicationState,
TMessageModel,
IEmoji,
ISubscription,
SubscriptionType,
IAttachment,
IMessage,
TAnyMessageModel,
IUrl
} from '../../definitions';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
interface IMessagesViewProps { interface IMessagesViewProps {
@ -37,36 +47,19 @@ interface IMessagesViewProps {
route: RouteProp<ChatsStackParamList, 'MessagesView'>; route: RouteProp<ChatsStackParamList, 'MessagesView'>;
customEmojis: { [key: string]: IEmoji }; customEmojis: { [key: string]: IEmoji };
theme: TSupportedThemes; theme: TSupportedThemes;
showActionSheet: Function; showActionSheet: (params: { options: string[]; hasCancel: boolean }) => void;
useRealName: boolean; useRealName: boolean;
isMasterDetail: boolean; isMasterDetail: boolean;
} }
interface IMessagesViewState { interface IMessagesViewState {
loading: boolean; loading: boolean;
messages: []; messages: IMessage[];
message?: IMessage;
fileLoading: boolean; fileLoading: boolean;
total: number; total: number;
} }
interface IMessageItem {
u?: string;
user?: string;
editedAt?: Date;
attachments?: any;
_id: string;
tmid?: string;
ts?: Date;
uploadedAt?: Date;
name?: string;
description?: string;
msg?: string;
starred: boolean;
pinned: boolean;
type: string;
url: string;
}
interface IParams { interface IParams {
rid: string; rid: string;
t: SubscriptionType; t: SubscriptionType;
@ -75,24 +68,25 @@ interface IParams {
name?: string; name?: string;
fname?: string; fname?: string;
prid?: string; prid?: string;
room: ISubscription; room?: ISubscription;
jumpToMessageId?: string; jumpToMessageId?: string;
jumpToThreadId?: string; jumpToThreadId?: string;
roomUserId?: string; roomUserId?: string;
} }
class MessagesView extends React.Component<IMessagesViewProps, any> { class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewState> {
private rid: string; private rid: string;
private t: SubscriptionType; private t: SubscriptionType;
private content: any; private content: any;
private room: any; private room?: ISubscription;
constructor(props: IMessagesViewProps) { constructor(props: IMessagesViewProps) {
super(props); super(props);
this.state = { this.state = {
loading: false, loading: false,
messages: [], messages: [],
fileLoading: true fileLoading: true,
total: 0
}; };
this.setHeader(); this.setHeader();
this.rid = props.route.params?.rid; this.rid = props.route.params?.rid;
@ -104,7 +98,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
this.load(); this.load();
} }
shouldComponentUpdate(nextProps: IMessagesViewProps, nextState: any) { shouldComponentUpdate(nextProps: IMessagesViewProps, nextState: IMessagesViewState) {
const { loading, messages, fileLoading } = this.state; const { loading, messages, fileLoading } = this.state;
const { theme } = this.props; const { theme } = this.props;
if (nextProps.theme !== theme) { if (nextProps.theme !== theme) {
@ -137,7 +131,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
navigation.navigate('RoomInfoView', navParam); navigation.navigate('RoomInfoView', navParam);
}; };
jumpToMessage = async ({ item }: { item: IMessageItem }) => { jumpToMessage = async ({ item }: { item: IMessage }) => {
const { navigation, isMasterDetail } = this.props; const { navigation, isMasterDetail } = this.props;
let params: IParams = { let params: IParams = {
rid: this.rid, rid: this.rid,
@ -165,7 +159,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
defineMessagesViewContent = (name: string) => { defineMessagesViewContent = (name: string) => {
const { user, baseUrl, theme, useRealName } = this.props; const { user, baseUrl, theme, useRealName } = this.props;
const renderItemCommonProps = (item: IMessageItem) => ({ const renderItemCommonProps = (item: TAnyMessageModel) => ({
item, item,
baseUrl, baseUrl,
user, user,
@ -224,8 +218,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
}, },
noDataMsg: I18n.t('No_mentioned_messages'), noDataMsg: I18n.t('No_mentioned_messages'),
testID: 'mentioned-messages-view', testID: 'mentioned-messages-view',
// @ts-ignore TODO: unify IMessage renderItem: (item: TAnyMessageModel) => <Message {...renderItemCommonProps(item)} msg={item.msg} theme={theme} />
renderItem: (item: IMessageItem) => <Message {...renderItemCommonProps(item)} msg={item.msg} theme={theme} />
}, },
// Starred Messages Screen // Starred Messages Screen
Starred: { Starred: {
@ -236,16 +229,15 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
}, },
noDataMsg: I18n.t('No_starred_messages'), noDataMsg: I18n.t('No_starred_messages'),
testID: 'starred-messages-view', testID: 'starred-messages-view',
renderItem: (item: IMessageItem) => ( renderItem: (item: TAnyMessageModel) => (
// @ts-ignore TODO: unify IMessage
<Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => this.onLongPress(item)} theme={theme} /> <Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => this.onLongPress(item)} theme={theme} />
), ),
action: (message: IMessageItem) => ({ action: (message: IMessage) => ({
title: I18n.t('Unstar'), title: I18n.t('Unstar'),
icon: message.starred ? 'star-filled' : 'star', icon: message.starred ? 'star-filled' : 'star',
onPress: this.handleActionPress onPress: this.handleActionPress
}), }),
handleActionPress: (message: IMessageItem) => Services.toggleStarMessage(message._id, message.starred) handleActionPress: (message: IMessage) => Services.toggleStarMessage(message._id, message.starred)
}, },
// Pinned Messages Screen // Pinned Messages Screen
Pinned: { Pinned: {
@ -256,14 +248,12 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
}, },
noDataMsg: I18n.t('No_pinned_messages'), noDataMsg: I18n.t('No_pinned_messages'),
testID: 'pinned-messages-view', testID: 'pinned-messages-view',
renderItem: (item: IMessageItem) => ( renderItem: (item: TAnyMessageModel) => (
// @ts-ignore TODO: unify IMessage
<Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => this.onLongPress(item)} theme={theme} /> <Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => this.onLongPress(item)} theme={theme} />
), ),
action: () => ({ title: I18n.t('Unpin'), icon: 'pin', onPress: this.handleActionPress }), action: () => ({ title: I18n.t('Unpin'), icon: 'pin', onPress: this.handleActionPress }),
handleActionPress: (message: IMessageItem) => Services.togglePinMessage(message._id, message.pinned) handleActionPress: (message: IMessage) => Services.togglePinMessage(message._id, message.pinned)
} }
// @ts-ignore
}[name]; }[name];
}; };
@ -316,12 +306,12 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
return null; return null;
}; };
showAttachment = (attachment: any) => { showAttachment = (attachment: IAttachment) => {
const { navigation } = this.props; const { navigation } = this.props;
navigation.navigate('AttachmentView', { attachment }); navigation.navigate('AttachmentView', { attachment });
}; };
onLongPress = (message: IMessageItem) => { onLongPress = (message: IMessage) => {
this.setState({ message }, this.showActionSheet); this.setState({ message }, this.showActionSheet);
}; };
@ -338,7 +328,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
const result = await this.content.handleActionPress(message); const result = await this.content.handleActionPress(message);
if (result.success) { if (result.success) {
this.setState((prevState: IMessagesViewState) => ({ this.setState((prevState: IMessagesViewState) => ({
messages: prevState.messages.filter((item: IMessageItem) => item._id !== message._id), messages: prevState.messages.filter((item: IMessage) => item._id !== message?._id),
total: prevState.total - 1 total: prevState.total - 1
})); }));
} }
@ -360,7 +350,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
); );
}; };
renderItem = ({ item }: { item: IMessageItem }) => this.content.renderItem(item); renderItem = ({ item }: { item: IMessage }) => this.content.renderItem(item);
render() { render() {
const { messages, loading } = this.state; const { messages, loading } = this.state;
@ -386,7 +376,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
} }
} }
const mapStateToProps = (state: any) => ({ const mapStateToProps = (state: IApplicationState) => ({
baseUrl: state.server.server, baseUrl: state.server.server,
user: getUserSelector(state), user: getUserSelector(state),
customEmojis: state.customEmojis, customEmojis: state.customEmojis,