verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMPROVE] migrating component the Header to reduce lint errors

This commit is contained in:
AlexAlexandre 2021-07-20 17:01:35 -03:00
parent 8ef11eab49
commit b795b6fc5a
2 changed files with 96 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/containers/MessageActions/Header.js → app/containers/MessageActions/Header.tsx
View File

@ -1,8 +1,5 @@
import React, { useEffect, useState, useCallback } from 'react'; import React, { useEffect, useState, useCallback } from 'react';
import PropTypes from 'prop-types'; import { View, Text, FlatList, StyleSheet } from 'react-native';
import {
View, Text, FlatList, StyleSheet
} from 'react-native';
import { withTheme } from '../../theme'; import { withTheme } from '../../theme';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
@ -13,6 +10,27 @@ import database from '../../lib/database';
import { Button } from '../ActionSheet'; import { Button } from '../ActionSheet';
import { useDimensions } from '../../dimensions'; import { useDimensions } from '../../dimensions';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
import {TEmoji} from "../EmojiPicker";
interface IHeader {
handleReaction: Function;
server: string;
message: object;
isMasterDetail: boolean;
theme: string;
}
interface THeaderItem {
item: TEmoji;
onReaction: Function;
server: string;
theme: string;
}
interface THeaderFooter {
onReaction: any;
theme: string;
}
export const HEADER_HEIGHT = 36; export const HEADER_HEIGHT = 36;
const ITEM_SIZE = 36; const ITEM_SIZE = 36;
@ -43,13 +61,11 @@ const styles = StyleSheet.create({
} }
}); });
const keyExtractor = item => item?.id || item; const keyExtractor = (item: any) => item?.id || item;
const DEFAULT_EMOJIS = ['clap', '+1', 'heart_eyes', 'grinning', 'thinking_face', 'smiley']; const DEFAULT_EMOJIS = ['clap', '+1', 'heart_eyes', 'grinning', 'thinking_face', 'smiley'];
const HeaderItem = React.memo(({ const HeaderItem = React.memo(({ item, onReaction, server, theme }: THeaderItem) => (
item, onReaction, server, theme
}) => (
<Button <Button
testID={`message-actions-emoji-${ item.content || item }`} testID={`message-actions-emoji-${ item.content || item }`}
onPress={() => onReaction({ emoji: `:${ item.content || item }:` })} onPress={() => onReaction({ emoji: `:${ item.content || item }:` })}
@ -65,14 +81,8 @@ const HeaderItem = React.memo(({
)} )}
</Button> </Button>
)); ));
HeaderItem.propTypes = {
item: PropTypes.string,
onReaction: PropTypes.func,
server: PropTypes.string,
theme: PropTypes.string
};
const HeaderFooter = React.memo(({ onReaction, theme }) => ( const HeaderFooter = React.memo(({ onReaction, theme }: THeaderFooter) => (
<Button <Button
testID='add-reaction' testID='add-reaction'
onPress={onReaction} onPress={onReaction}
@ -82,16 +92,10 @@ const HeaderFooter = React.memo(({ onReaction, theme }) => (
<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} /> <CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
</Button> </Button>
)); ));
HeaderFooter.propTypes = {
onReaction: PropTypes.func,
theme: PropTypes.string
};
const Header = React.memo(({ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, theme }: IHeader) => {
handleReaction, server, message, isMasterDetail, theme
}) => {
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
const { width, height } = useDimensions(); const { width, height }: any = useDimensions();
const setEmojis = async() => { const setEmojis = async() => {
try { try {
@ -114,11 +118,11 @@ const Header = React.memo(({
setEmojis(); setEmojis();
}, []); }, []);
const onReaction = ({ emoji }) => handleReaction(emoji, message); const onReaction = ({ emoji }: {emoji: TEmoji}) => handleReaction(emoji, message);
const renderItem = useCallback(({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />); const renderItem = useCallback(({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />, []);
const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />); const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />, []);
return ( return (
<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}> <View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
@ -135,11 +139,5 @@ const Header = React.memo(({
</View> </View>
); );
}); });
Header.propTypes = {
handleReaction: PropTypes.func,
server: PropTypes.string,
message: PropTypes.object,
isMasterDetail: PropTypes.bool,
theme: PropTypes.string
};
export default withTheme(Header); export default withTheme(Header);

119
app/containers/MessageActions/index.js → app/containers/MessageActions/index.tsx
View File

@ -17,6 +17,37 @@ import { useActionSheet } from '../ActionSheet';
import Header, { HEADER_HEIGHT } from './Header'; import Header, { HEADER_HEIGHT } from './Header';
import events from '../../utils/log/events'; import events from '../../utils/log/events';
interface IMessageActions {
room: {
rid: string | number;
autoTranslateLanguage: any;
autoTranslate: any;
reactWhenReadOnly: any;
};
tmid: string;
user: {
id: string | number;
};
editInit: Function;
reactionInit: Function;
onReactionPress: Function;
replyInit: Function;
isMasterDetail: boolean;
isReadOnly: boolean;
Message_AllowDeleting: boolean;
Message_AllowDeleting_BlockDeleteInMinutes: number;
Message_AllowEditing: boolean;
Message_AllowEditing_BlockEditInMinutes: number;
Message_AllowPinning: boolean;
Message_AllowStarring: boolean;
Message_Read_Receipt_Store_Users: boolean;
server: string;
editMessagePermission: [];
deleteMessagePermission: [];
forceDeleteMessagePermission: [];
pinMessagePermission: [];
}
const MessageActions = React.memo(forwardRef(({ const MessageActions = React.memo(forwardRef(({
room, room,
tmid, tmid,
@ -39,9 +70,9 @@ const MessageActions = React.memo(forwardRef(({
deleteMessagePermission, deleteMessagePermission,
forceDeleteMessagePermission, forceDeleteMessagePermission,
pinMessagePermission pinMessagePermission
}, ref) => { }: IMessageActions, ref): any => {
let permissions = {}; let permissions: any = {};
const { showActionSheet, hideActionSheet } = useActionSheet(); const { showActionSheet, hideActionSheet }: any = useActionSheet();
const getPermissions = async() => { const getPermissions = async() => {
try { try {
@ -58,9 +89,9 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const isOwn = message => message.u && message.u._id === user.id; const isOwn = (message: any) => message.u && message.u._id === user.id;
const allowEdit = (message) => { const allowEdit = (message: any) => {
if (isReadOnly) { if (isReadOnly) {
return false; return false;
} }
@ -75,7 +106,7 @@ const MessageActions = React.memo(forwardRef(({
if (message.ts != null) { if (message.ts != null) {
msgTs = moment(message.ts); msgTs = moment(message.ts);
} }
let currentTsDiff; let currentTsDiff: any;
if (msgTs != null) { if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes'); currentTsDiff = moment().diff(msgTs, 'minutes');
} }
@ -84,7 +115,7 @@ const MessageActions = React.memo(forwardRef(({
return true; return true;
}; };
const allowDelete = (message) => { const allowDelete = (message: any) => {
if (isReadOnly) { if (isReadOnly) {
return false; return false;
} }
@ -106,7 +137,7 @@ const MessageActions = React.memo(forwardRef(({
if (message.ts != null) { if (message.ts != null) {
msgTs = moment(message.ts); msgTs = moment(message.ts);
} }
let currentTsDiff; let currentTsDiff: any;
if (msgTs != null) { if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes'); currentTsDiff = moment().diff(msgTs, 'minutes');
} }
@ -115,19 +146,19 @@ const MessageActions = React.memo(forwardRef(({
return true; return true;
}; };
const getPermalink = message => RocketChat.getPermalinkMessage(message); const getPermalink = (message: any) => RocketChat.getPermalinkMessage(message);
const handleReply = (message) => { const handleReply = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_REPLY); logEvent(events.ROOM_MSG_ACTION_REPLY);
replyInit(message, true); replyInit(message, true);
}; };
const handleEdit = (message) => { const handleEdit = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_EDIT); logEvent(events.ROOM_MSG_ACTION_EDIT);
editInit(message); editInit(message);
}; };
const handleCreateDiscussion = (message) => { const handleCreateDiscussion = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_DISCUSSION); logEvent(events.ROOM_MSG_ACTION_DISCUSSION);
const params = { message, channel: room, showCloseModal: true }; const params = { message, channel: room, showCloseModal: true };
if (isMasterDetail) { if (isMasterDetail) {
@ -137,7 +168,7 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handleUnread = async(message) => { const handleUnread = async(message: any) => {
logEvent(events.ROOM_MSG_ACTION_UNREAD); logEvent(events.ROOM_MSG_ACTION_UNREAD);
const { id: messageId, ts } = message; const { id: messageId, ts } = message;
const { rid } = room; const { rid } = room;
@ -149,7 +180,7 @@ const MessageActions = React.memo(forwardRef(({
const subRecord = await subCollection.find(rid); const subRecord = await subCollection.find(rid);
await db.action(async() => { await db.action(async() => {
try { try {
await subRecord.update(sub => sub.lastOpen = ts); await subRecord.update((sub: any) => sub.lastOpen = ts);
} catch { } catch {
// do nothing // do nothing
} }
@ -162,10 +193,10 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handlePermalink = async(message) => { const handlePermalink = async(message: any) => {
logEvent(events.ROOM_MSG_ACTION_PERMALINK); logEvent(events.ROOM_MSG_ACTION_PERMALINK);
try { try {
const permalink = await getPermalink(message); const permalink: any = await getPermalink(message);
Clipboard.setString(permalink); Clipboard.setString(permalink);
EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') }); EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') });
} catch { } catch {
@ -173,28 +204,28 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handleCopy = async(message) => { const handleCopy = async(message: any) => {
logEvent(events.ROOM_MSG_ACTION_COPY); logEvent(events.ROOM_MSG_ACTION_COPY);
await Clipboard.setString(message?.attachments?.[0]?.description || message.msg); await Clipboard.setString(message?.attachments?.[0]?.description || message.msg);
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') }); EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
}; };
const handleShare = async(message) => { const handleShare = async(message: any) => {
logEvent(events.ROOM_MSG_ACTION_SHARE); logEvent(events.ROOM_MSG_ACTION_SHARE);
try { try {
const permalink = await getPermalink(message); const permalink: any = await getPermalink(message);
Share.share({ message: permalink }); Share.share({ message: permalink });
} catch { } catch {
logEvent(events.ROOM_MSG_ACTION_SHARE_F); logEvent(events.ROOM_MSG_ACTION_SHARE_F);
} }
}; };
const handleQuote = (message) => { const handleQuote = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_QUOTE); logEvent(events.ROOM_MSG_ACTION_QUOTE);
replyInit(message, false); replyInit(message, false);
}; };
const handleStar = async(message) => { const handleStar = async(message: any) => {
logEvent(message.starred ? events.ROOM_MSG_ACTION_UNSTAR : events.ROOM_MSG_ACTION_STAR); logEvent(message.starred ? events.ROOM_MSG_ACTION_UNSTAR : events.ROOM_MSG_ACTION_STAR);
try { try {
await RocketChat.toggleStarMessage(message.id, message.starred); await RocketChat.toggleStarMessage(message.id, message.starred);
@ -205,7 +236,7 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handlePin = async(message) => { const handlePin = async(message: any) => {
logEvent(events.ROOM_MSG_ACTION_PIN); logEvent(events.ROOM_MSG_ACTION_PIN);
try { try {
await RocketChat.togglePinMessage(message.id, message.pinned); await RocketChat.togglePinMessage(message.id, message.pinned);
@ -215,7 +246,7 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handleReaction = (shortname, message) => { const handleReaction = (shortname: any, message: any) => {
logEvent(events.ROOM_MSG_ACTION_REACTION); logEvent(events.ROOM_MSG_ACTION_REACTION);
if (shortname) { if (shortname) {
onReactionPress(shortname, message.id); onReactionPress(shortname, message.id);
@ -226,7 +257,7 @@ const MessageActions = React.memo(forwardRef(({
hideActionSheet(); hideActionSheet();
}; };
const handleReadReceipt = (message) => { const handleReadReceipt = (message: any) => {
if (isMasterDetail) { if (isMasterDetail) {
Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } }); Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } });
} else { } else {
@ -234,11 +265,11 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handleToggleTranslation = async(message) => { const handleToggleTranslation = async(message: any) => {
try { try {
const db = database.active; const db = database.active;
await db.action(async() => { await db.action(async() => {
await message.update((m) => { await message.update((m: any) => {
m.autoTranslate = !m.autoTranslate; m.autoTranslate = !m.autoTranslate;
m._updatedAt = new Date(); m._updatedAt = new Date();
}); });
@ -258,7 +289,7 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handleReport = async(message) => { const handleReport = async(message: any) => {
logEvent(events.ROOM_MSG_ACTION_REPORT); logEvent(events.ROOM_MSG_ACTION_REPORT);
try { try {
await RocketChat.reportMessage(message.id); await RocketChat.reportMessage(message.id);
@ -269,7 +300,9 @@ const MessageActions = React.memo(forwardRef(({
} }
}; };
const handleDelete = (message) => { const handleDelete = (message: any) => {
// TODO - migrate this function for ts when fix the lint erros
// @ts-ignore
showConfirmationAlert({ showConfirmationAlert({
message: I18n.t('You_will_not_be_able_to_recover_this_message'), message: I18n.t('You_will_not_be_able_to_recover_this_message'),
confirmationText: I18n.t('Delete'), confirmationText: I18n.t('Delete'),
@ -285,8 +318,8 @@ const MessageActions = React.memo(forwardRef(({
}); });
}; };
const getOptions = (message) => { const getOptions = (message: any) => {
let options = []; let options: any = [];
// Reply // Reply
if (!isReadOnly) { if (!isReadOnly) {
@ -409,7 +442,7 @@ const MessageActions = React.memo(forwardRef(({
return options; return options;
}; };
const showMessageActions = async(message) => { const showMessageActions = async(message: any) => {
logEvent(events.ROOM_SHOW_MSG_ACTIONS); logEvent(events.ROOM_SHOW_MSG_ACTIONS);
await getPermissions(); await getPermissions();
showActionSheet({ showActionSheet({
@ -428,30 +461,8 @@ const MessageActions = React.memo(forwardRef(({
useImperativeHandle(ref, () => ({ showMessageActions })); useImperativeHandle(ref, () => ({ showMessageActions }));
})); }));
MessageActions.propTypes = {
room: PropTypes.object,
tmid: PropTypes.string,
user: PropTypes.object,
editInit: PropTypes.func,
reactionInit: PropTypes.func,
onReactionPress: PropTypes.func,
replyInit: PropTypes.func,
isReadOnly: PropTypes.bool,
Message_AllowDeleting: PropTypes.bool,
Message_AllowDeleting_BlockDeleteInMinutes: PropTypes.number,
Message_AllowEditing: PropTypes.bool,
Message_AllowEditing_BlockEditInMinutes: PropTypes.number,
Message_AllowPinning: PropTypes.bool,
Message_AllowStarring: PropTypes.bool,
Message_Read_Receipt_Store_Users: PropTypes.bool,
server: PropTypes.string,
editMessagePermission: PropTypes.array,
deleteMessagePermission: PropTypes.array,
forceDeleteMessagePermission: PropTypes.array,
pinMessagePermission: PropTypes.array
};
const mapStateToProps = state => ({ const mapStateToProps = (state: any) => ({
server: state.server.server, server: state.server.server,
Message_AllowDeleting: state.settings.Message_AllowDeleting, Message_AllowDeleting: state.settings.Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes, Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes,