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

Merge branch 'develop' into chore/migration-ts-redux-connect-v2

This commit is contained in:
Gleidson Daniel Silva 2022-01-26 09:56:22 -03:00 committed by GitHub
parent 0cdf516bf4 782bdda2c7
commit 2704f44c84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
83 changed files with 463 additions and 425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/AppContainer.tsx
View File

@ -3,7 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { SetUsernameStackParamList, StackParamList } from './navigationTypes'; import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
import Navigation from './lib/Navigation'; import Navigation from './lib/Navigation';
import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation'; import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app'; import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';

10
app/containers/BackgroundContainer/index.tsx
View File

@ -6,9 +6,9 @@ import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
interface IBackgroundContainer { interface IBackgroundContainer {
text: string; text?: string;
theme: string; theme?: string;
loading: boolean; loading?: boolean;
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -35,8 +35,8 @@ const styles = StyleSheet.create({
const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => ( const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} /> <ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null} {text ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null} {loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
</View> </View>
); );

10
app/containers/HeaderButton/Common.tsx
View File

@ -29,9 +29,9 @@ export const CloseModal = React.memo(
export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => ( export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container left> <Container left>
{isIOS ? ( {isIOS ? (
<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} /> <Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
) : ( ) : (
<Item iconName='close' onPress={onPress} testID={testID} /> <Item iconName='close' onPress={onPress!} testID={testID} />
)} )}
</Container> </Container>
)); ));
@ -39,19 +39,19 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
// Right // Right
export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => ( export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container> <Container>
<Item iconName='kebab' onPress={onPress} testID={testID} /> <Item iconName='kebab' onPress={onPress!} testID={testID} />
</Container> </Container>
)); ));
export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => ( export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container> <Container>
<Item iconName='download' onPress={onPress} testID={testID} {...props} /> <Item iconName='download' onPress={onPress!} testID={testID} {...props} />
</Container> </Container>
)); ));
export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => ( export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container> <Container>
<Item iconName='settings' onPress={onPress} testID={testID} {...props} /> <Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
</Container> </Container>
)); ));

16
app/containers/HeaderButton/HeaderButtonItem.tsx
View File

@ -8,12 +8,12 @@ import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
interface IHeaderButtonItem { interface IHeaderButtonItem {
title: string; title?: string;
iconName: string; iconName?: string;
onPress(): void; onPress: <T>(arg: T) => void;
testID: string; testID?: string;
theme: string; theme?: string;
badge(): void; badge?(): void;
} }
export const BUTTON_HIT_SLOP = { export const BUTTON_HIT_SLOP = {
@ -44,9 +44,9 @@ const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonI
<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}> <Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
<> <>
{iconName ? ( {iconName ? (
<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} /> <CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
) : ( ) : (
<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text> <Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
)} )}
{badge ? badge() : null} {badge ? badge() : null}
</> </>

4
app/containers/List/ListContainer.tsx
View File

@ -11,10 +11,10 @@ const styles = StyleSheet.create({
}); });
interface IListContainer { interface IListContainer {
children: JSX.Element; children: React.ReactNode;
testID?: string;
} }
const ListContainer = React.memo(({ children, ...props }: IListContainer) => ( const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
// @ts-ignore
<ScrollView <ScrollView
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444 scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444

6
app/containers/List/ListHeader.tsx
View File

@ -20,13 +20,13 @@ const styles = StyleSheet.create({
interface IListHeader { interface IListHeader {
title: string; title: string;
theme: string; theme?: string;
translateTitle: boolean; translateTitle?: boolean;
} }
const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => ( const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}> <Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title} {translateTitle ? I18n.t(title) : title}
</Text> </Text>
</View> </View>

12
app/containers/List/ListIcon.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons'; import { CustomIcon } from '../../lib/Icons';
@ -7,11 +7,11 @@ import { withTheme } from '../../theme';
import { ICON_SIZE } from './constants'; import { ICON_SIZE } from './constants';
interface IListIcon { interface IListIcon {
theme: string; theme?: string;
name: string; name: string;
color: string; color?: string;
style: object; style?: StyleProp<ViewStyle>;
testID: string; testID?: string;
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -23,7 +23,7 @@ const styles = StyleSheet.create({
const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => ( const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
<View style={[styles.icon, style]}> <View style={[styles.icon, style]}>
<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} /> <CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
</View> </View>
)); ));

6
app/containers/List/ListInfo.tsx
View File

@ -20,13 +20,13 @@ const styles = StyleSheet.create({
interface IListHeader { interface IListHeader {
info: string; info: string;
theme: string; theme?: string;
translateInfo: boolean; translateInfo?: boolean;
} }
const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => ( const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text> <Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View> </View>
)); ));

41
app/containers/List/ListItem.tsx
View File

@ -56,11 +56,11 @@ const styles = StyleSheet.create({
interface IListItemContent { interface IListItemContent {
title?: string; title?: string;
subtitle?: string; subtitle?: string;
left?: Function; left?: () => JSX.Element | null;
right?: Function; right?: () => JSX.Element | null;
disabled?: boolean; disabled?: boolean;
testID?: string; testID?: string;
theme: string; theme?: string;
color?: string; color?: string;
translateTitle?: boolean; translateTitle?: boolean;
translateSubtitle?: boolean; translateSubtitle?: boolean;
@ -89,15 +89,15 @@ const Content = React.memo(
{left ? <View style={styles.leftContainer}>{left()}</View> : null} {left ? <View style={styles.leftContainer}>{left()}</View> : null}
<View style={styles.textContainer}> <View style={styles.textContainer}>
<View style={styles.textAlertContainer}> <View style={styles.textAlertContainer}>
<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title} {translateTitle ? I18n.t(title) : title}
</Text> </Text>
{alert ? ( {alert ? (
<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' /> <CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
) : null} ) : null}
</View> </View>
{subtitle ? ( {subtitle ? (
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{translateSubtitle ? I18n.t(subtitle) : subtitle} {translateSubtitle ? I18n.t(subtitle) : subtitle}
</Text> </Text>
) : null} ) : null}
@ -112,38 +112,39 @@ const Content = React.memo(
) )
); );
interface IListItemButton { interface IListButtonPress {
onPress?: Function;
}
interface IListItemButton extends IListButtonPress {
title?: string; title?: string;
onPress: Function;
disabled?: boolean; disabled?: boolean;
theme: string; theme?: string;
backgroundColor: string; backgroundColor?: string;
underlayColor?: string; underlayColor?: string;
} }
const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => ( const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
<Touch <Touch
onPress={() => onPress(props.title)} onPress={() => onPress!(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
underlayColor={underlayColor} underlayColor={underlayColor}
enabled={!props.disabled} enabled={!props.disabled}
theme={props.theme}> theme={props.theme!}>
<Content {...props} /> <Content {...props} />
</Touch> </Touch>
)); ));
interface IListItem { interface IListItem extends IListItemContent, IListButtonPress {
onPress: Function; backgroundColor?: string;
theme: string;
backgroundColor: string;
} }
const ListItem = React.memo(({ ...props }: IListItem) => { const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
if (props.onPress) { if (props.onPress) {
return <Button {...props} />; return <Button {...props} />;
} }
return ( return (
<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}> <View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
<Content {...props} /> <Content {...props} />
</View> </View>
); );

6
app/containers/List/ListSection.tsx
View File

@ -11,9 +11,9 @@ const styles = StyleSheet.create({
}); });
interface IListSection { interface IListSection {
children: JSX.Element; children: React.ReactNode;
title: string; title?: string;
translateTitle: boolean; translateTitle?: boolean;
} }
const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => ( const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (

8
app/containers/List/ListSeparator.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { withTheme } from '../../theme'; import { withTheme } from '../../theme';
@ -11,12 +11,12 @@ const styles = StyleSheet.create({
}); });
interface IListSeparator { interface IListSeparator {
style: object; style?: ViewStyle;
theme: string; theme?: string;
} }
const ListSeparator = React.memo(({ style, theme }: IListSeparator) => ( const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
<View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} /> <View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
)); ));
ListSeparator.displayName = 'List.Separator'; ListSeparator.displayName = 'List.Separator';

6
app/containers/Loading.tsx
View File

@ -19,7 +19,7 @@ const styles = StyleSheet.create({
interface ILoadingProps { interface ILoadingProps {
visible: boolean; visible: boolean;
theme: string; theme?: string;
} }
class Loading extends React.PureComponent<ILoadingProps, any> { class Loading extends React.PureComponent<ILoadingProps, any> {
@ -97,7 +97,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
const opacityAnimation = opacity.interpolate({ const opacityAnimation = opacity.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity], outputRange: [0, themes[theme!].backdropOpacity],
extrapolate: 'clamp' extrapolate: 'clamp'
}); });
@ -109,7 +109,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
{ {
// @ts-ignore // @ts-ignore
...StyleSheet.absoluteFill, ...StyleSheet.absoluteFill,
backgroundColor: themes[theme].backdropColor, backgroundColor: themes[theme!].backdropColor,
opacity: opacityAnimation opacity: opacityAnimation
} }
]} ]}

10
app/containers/MessageActions/Header.tsx
View File

@ -17,7 +17,7 @@ interface IHeader {
server: string; server: string;
message: object; message: object;
isMasterDetail: boolean; isMasterDetail: boolean;
theme: string; theme?: string;
} }
interface THeaderItem { interface THeaderItem {
@ -117,19 +117,19 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, th
const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message); const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message);
const renderItem = useCallback( const renderItem = useCallback(
({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />, ({ 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 }]}>
<FlatList <FlatList
data={items} data={items}
renderItem={renderItem} renderItem={renderItem}
ListFooterComponent={renderFooter} ListFooterComponent={renderFooter}
style={{ backgroundColor: themes[theme].focusedBackground }} style={{ backgroundColor: themes[theme!].focusedBackground }}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
scrollEnabled={false} scrollEnabled={false}

2
app/containers/MessageActions/index.tsx
View File

@ -18,7 +18,7 @@ import events from '../../utils/log/events';
interface IMessageActions { interface IMessageActions {
room: { room: {
rid: string | number; rid: string;
autoTranslateLanguage: any; autoTranslateLanguage: any;
autoTranslate: any; autoTranslate: any;
reactWhenReadOnly: any; reactWhenReadOnly: any;

4
app/containers/MessageBox/CommandsPreview/Item.tsx
View File

@ -14,7 +14,7 @@ interface IMessageBoxCommandsPreviewItem {
id: string; id: string;
value: string; value: string;
}; };
theme: string; theme?: string;
} }
const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => { const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
@ -37,7 +37,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
{loading ? <ActivityIndicator theme={theme} /> : null} {loading ? <ActivityIndicator theme={theme} /> : null}
</FastImage> </FastImage>
) : ( ) : (
<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} /> <CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
)} )}
</TouchableOpacity> </TouchableOpacity>
); );

4
app/containers/MessageBox/CommandsPreview/index.tsx
View File

@ -10,7 +10,7 @@ import { withTheme } from '../../../theme';
interface IMessageBoxCommandsPreview { interface IMessageBoxCommandsPreview {
commandPreview: []; commandPreview: [];
showCommandPreview: boolean; showCommandPreview: boolean;
theme: string; theme?: string;
} }
const CommandsPreview = React.memo( const CommandsPreview = React.memo(
@ -21,7 +21,7 @@ const CommandsPreview = React.memo(
return ( return (
<FlatList <FlatList
testID='commandbox-container' testID='commandbox-container'
style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]} style={[styles.mentionList, { backgroundColor: themes[theme!].messageboxBackground }]}
data={commandPreview} data={commandPreview}
renderItem={({ item }) => <Item item={item} theme={theme} />} renderItem={({ item }) => <Item item={item} theme={theme} />}
keyExtractor={(item: any) => item.id} keyExtractor={(item: any) => item.id}

29
app/containers/MessageBox/index.tsx
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Alert, Keyboard, NativeModules, Text, View } from 'react-native'; import { Alert, Keyboard, NativeModules, Text, View } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard'; import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
import ImagePicker from 'react-native-image-crop-picker'; import ImagePicker, { Image, ImageOrVideo } from 'react-native-image-crop-picker';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import DocumentPicker from 'react-native-document-picker'; import DocumentPicker from 'react-native-document-picker';
import { Q } from '@nozbe/watermelondb'; import { Q } from '@nozbe/watermelondb';
@ -27,7 +27,7 @@ import LeftButtons from './LeftButtons';
// @ts-ignore // @ts-ignore
// eslint-disable-next-line import/extensions,import/no-unresolved // eslint-disable-next-line import/extensions,import/no-unresolved
import RightButtons from './RightButtons'; import RightButtons from './RightButtons';
import { isAndroid, isTablet } from '../../utils/deviceInfo'; import { isAndroid, isIOS, isTablet } from '../../utils/deviceInfo';
import { canUploadFile } from '../../utils/media'; import { canUploadFile } from '../../utils/media';
import EventEmiter from '../../utils/events'; import EventEmiter from '../../utils/events';
import { KEY_COMMAND, handleCommandShowUpload, handleCommandSubmit, handleCommandTyping } from '../../commands'; import { KEY_COMMAND, handleCommandShowUpload, handleCommandSubmit, handleCommandTyping } from '../../commands';
@ -54,15 +54,16 @@ if (isAndroid) {
const imagePickerConfig = { const imagePickerConfig = {
cropping: true, cropping: true,
compressImageQuality: 0.8,
avoidEmptySpaceAroundImage: false, avoidEmptySpaceAroundImage: false,
freeStyleCropEnabled: true freeStyleCropEnabled: true,
forceJpg: true
}; };
const libraryPickerConfig = { const libraryPickerConfig = {
multiple: true, multiple: true,
compressVideoPreset: 'Passthrough', compressVideoPreset: 'Passthrough',
mediaType: 'any' mediaType: 'any',
forceJpg: true
}; };
const videoPickerConfig = { const videoPickerConfig = {
@ -129,6 +130,18 @@ interface IMessageBoxState {
permissionToUpload: boolean; permissionToUpload: boolean;
} }
const forceJpgExtension = (attachment: ImageOrVideo) => {
if (isIOS && attachment.mime === 'image/jpeg' && attachment.filename) {
const regex = new RegExp(/.heic$/i);
if (attachment.filename.match(regex)) {
attachment.filename = attachment.filename.replace(regex, '.jpg');
} else {
attachment.filename += '.jpg';
}
}
return attachment;
};
class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> { class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
private text: string; private text: string;
@ -692,7 +705,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
takePhoto = async () => { takePhoto = async () => {
logEvent(events.ROOM_BOX_ACTION_PHOTO); logEvent(events.ROOM_BOX_ACTION_PHOTO);
try { try {
const image = await ImagePicker.openCamera(this.imagePickerConfig); let image = (await ImagePicker.openCamera(this.imagePickerConfig)) as Image;
image = forceJpgExtension(image);
if (this.canUploadFile(image)) { if (this.canUploadFile(image)) {
this.openShareView([image]); this.openShareView([image]);
} }
@ -716,7 +730,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
chooseFromLibrary = async () => { chooseFromLibrary = async () => {
logEvent(events.ROOM_BOX_ACTION_LIBRARY); logEvent(events.ROOM_BOX_ACTION_LIBRARY);
try { try {
const attachments = await ImagePicker.openPicker(this.libraryPickerConfig); let attachments = (await ImagePicker.openPicker(this.libraryPickerConfig)) as ImageOrVideo[];
attachments = attachments.map(att => forceJpgExtension(att));
this.openShareView(attachments); this.openShareView(attachments);
} catch (e) { } catch (e) {
logEvent(events.ROOM_BOX_ACTION_LIBRARY_F); logEvent(events.ROOM_BOX_ACTION_LIBRARY_F);

16
app/containers/RoomHeader/RoomHeader.tsx
View File

@ -68,11 +68,11 @@ interface IRoomHeader {
tmid: string; tmid: string;
teamMain: boolean; teamMain: boolean;
status: string; status: string;
theme: string; theme?: string;
usersTyping: []; usersTyping: [];
isGroupChat: boolean; isGroupChat: boolean;
parentTitle: string; parentTitle: string;
onPress: Function; onPress: () => void;
testID: string; testID: string;
} }
@ -164,7 +164,7 @@ const Header = React.memo(
renderFunc = () => ( renderFunc = () => (
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} /> <RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{parentTitle} {parentTitle}
</Text> </Text>
</View> </View>
@ -186,9 +186,15 @@ const Header = React.memo(
{tmid ? null : ( {tmid ? null : (
<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} /> <RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
)} )}
<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme} testID={testID} /> <HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme!} testID={testID} />
</View> </View>
<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} theme={theme} renderFunc={renderFunc} scale={scale} /> <SubTitle
usersTyping={tmid ? [] : usersTyping}
subtitle={subtitle}
theme={theme!}
renderFunc={renderFunc}
scale={scale}
/>
</TouchableOpacity> </TouchableOpacity>
); );
} }

7
app/containers/RoomHeader/index.tsx
View File

@ -13,7 +13,7 @@ interface IRoomHeaderContainerProps {
prid: string; prid: string;
tmid: string; tmid: string;
teamMain: boolean; teamMain: boolean;
usersTyping: string; usersTyping: [];
status: string; status: string;
statusText: string; statusText: string;
connecting: boolean; connecting: boolean;
@ -79,14 +79,12 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
teamMain, teamMain,
prid, prid,
tmid, tmid,
widthOffset,
status = 'offline', status = 'offline',
statusText, statusText,
connecting, connecting,
connected, connected,
usersTyping, usersTyping,
onPress, onPress,
roomUserId,
width, width,
height, height,
parentTitle, parentTitle,
@ -115,9 +113,6 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
width={width} width={width}
height={height} height={height}
usersTyping={usersTyping} usersTyping={usersTyping}
widthOffset={widthOffset}
roomUserId={roomUserId}
connecting={connecting}
parentTitle={parentTitle} parentTitle={parentTitle}
isGroupChat={isGroupChat} isGroupChat={isGroupChat}
testID={testID} testID={testID}

20
app/containers/RoomTypeIcon.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleSheet } from 'react-native'; import { StyleSheet, ViewStyle } from 'react-native';
import { CustomIcon } from '../lib/Icons'; import { CustomIcon } from '../lib/Icons';
import { STATUS_COLORS, themes } from '../constants/colors'; import { STATUS_COLORS, themes } from '../constants/colors';
@ -13,13 +13,13 @@ const styles = StyleSheet.create({
}); });
interface IRoomTypeIcon { interface IRoomTypeIcon {
theme: string; theme?: string;
type: string; type: string;
isGroupChat: boolean; isGroupChat?: boolean;
teamMain: boolean; teamMain?: boolean;
status: string; status?: string;
size: number; size?: number;
style: any; style?: ViewStyle;
} }
const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, teamMain, size = 16 }: IRoomTypeIcon) => { const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, teamMain, size = 16 }: IRoomTypeIcon) => {
@ -27,11 +27,13 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, team
return null; return null;
} }
const color = themes[theme].titleText; const color = themes[theme!].titleText;
const iconStyle = [styles.icon, { color }, style]; const iconStyle = [styles.icon, { color }, style];
if (type === 'd' && !isGroupChat) { if (type === 'd' && !isGroupChat) {
return <Status style={[iconStyle, { color: STATUS_COLORS[status] ?? STATUS_COLORS.offline }]} size={size} status={status} />; return (
<Status style={[iconStyle, { color: STATUS_COLORS[status!] ?? STATUS_COLORS.offline }]} size={size} status={status!} />
);
} }
// TODO: move this to a separate function // TODO: move this to a separate function

12
app/containers/SafeAreaView.tsx
View File

@ -12,16 +12,16 @@ const styles = StyleSheet.create({
}); });
interface ISafeAreaView { interface ISafeAreaView {
testID: string; testID?: string;
theme: string; theme?: string;
vertical: boolean; vertical?: boolean;
style: object; style?: object;
children: JSX.Element; children: React.ReactNode;
} }
const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => ( const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => (
<SafeAreaContext <SafeAreaContext
style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]} style={[styles.view, { backgroundColor: themes[theme!].auxiliaryBackground }, style]}
edges={vertical ? ['right', 'left'] : undefined} edges={vertical ? ['right', 'left'] : undefined}
testID={testID} testID={testID}
{...props}> {...props}>

24
app/containers/SearchBox.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, TextInputProps, View } from 'react-native'; import { NativeSyntheticEvent, StyleSheet, Text, TextInputFocusEventData, TextInputProps, View } from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import TextInput from '../presentation/TextInput'; import TextInput from '../presentation/TextInput';
@ -45,13 +45,15 @@ const styles = StyleSheet.create({
}); });
interface ISearchBox { interface ISearchBox {
value?: string;
onChangeText: TextInputProps['onChangeText']; onChangeText: TextInputProps['onChangeText'];
onSubmitEditing: () => void; onSubmitEditing?: () => void;
hasCancel: boolean; hasCancel?: boolean;
onCancelPress: Function; onCancelPress?: Function;
theme: string; theme?: string;
inputRef: any; inputRef?: React.Ref<unknown>;
testID?: string; testID?: string;
onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
} }
const CancelButton = (onCancelPress: Function, theme: string) => ( const CancelButton = (onCancelPress: Function, theme: string) => (
@ -73,10 +75,10 @@ const SearchBox = ({
<View <View
style={[ style={[
styles.container, styles.container,
{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground } { backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground }
]}> ]}>
<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}> <View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}>
<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} /> <CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} />
<TextInput <TextInput
ref={inputRef} ref={inputRef}
autoCapitalize='none' autoCapitalize='none'
@ -90,11 +92,11 @@ const SearchBox = ({
underlineColorAndroid='transparent' underlineColorAndroid='transparent'
onChangeText={onChangeText} onChangeText={onChangeText}
onSubmitEditing={onSubmitEditing} onSubmitEditing={onSubmitEditing}
theme={theme} theme={theme!}
{...props} {...props}
/> />
</View> </View>
{hasCancel ? CancelButton(onCancelPress, theme) : null} {hasCancel ? CancelButton(onCancelPress!, theme!) : null}
</View> </View>
); );

16
app/containers/SearchHeader.js → app/containers/SearchHeader.tsx
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import { withTheme } from '../theme'; import { withTheme } from '../theme';
import sharedStyles from '../views/Styles'; import sharedStyles from '../views/Styles';
@ -20,9 +19,14 @@ const styles = StyleSheet.create({
} }
}); });
interface ISearchHeader {
theme?: string;
onSearchChangeText?: (text: string) => void;
}
// TODO: it might be useful to refactor this component for reusage // TODO: it might be useful to refactor this component for reusage
const SearchHeader = ({ theme, onSearchChangeText }) => { const SearchHeader = ({ theme, onSearchChangeText }: ISearchHeader) => {
const titleColorStyle = { color: themes[theme].headerTitleColor }; const titleColorStyle = { color: themes[theme!].headerTitleColor };
const isLight = theme === 'light'; const isLight = theme === 'light';
const { isLandscape } = useOrientation(); const { isLandscape } = useOrientation();
const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1; const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
@ -35,15 +39,11 @@ const SearchHeader = ({ theme, onSearchChangeText }) => {
style={[styles.title, isLight && titleColorStyle, { fontSize: titleFontSize }]} style={[styles.title, isLight && titleColorStyle, { fontSize: titleFontSize }]}
placeholder='Search' placeholder='Search'
onChangeText={onSearchChangeText} onChangeText={onSearchChangeText}
theme={theme} theme={theme!}
testID='thread-messages-view-search-header' testID='thread-messages-view-search-header'
/> />
</View> </View>
); );
}; };
SearchHeader.propTypes = {
theme: PropTypes.string,
onSearchChangeText: PropTypes.func
};
export default withTheme(SearchHeader); export default withTheme(SearchHeader);

8
app/containers/StatusBar.tsx
View File

@ -5,9 +5,9 @@ import { themes } from '../constants/colors';
import { withTheme } from '../theme'; import { withTheme } from '../theme';
interface IStatusBar { interface IStatusBar {
theme: string; theme?: string;
barStyle: any; barStyle?: any;
backgroundColor: string; backgroundColor?: string;
} }
const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar) => { const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar) => {
@ -17,7 +17,7 @@ const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar)
barStyle = 'dark-content'; barStyle = 'dark-content';
} }
} }
return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme].headerBackground} barStyle={barStyle} animated />; return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme!].headerBackground} barStyle={barStyle} animated />;
}); });
export default withTheme(StatusBar); export default withTheme(StatusBar);

2
app/containers/TextInput.tsx
View File

@ -50,7 +50,7 @@ const styles = StyleSheet.create({
} }
}); });
interface IRCTextInputProps extends TextInputProps { export interface IRCTextInputProps extends TextInputProps {
label?: string; label?: string;
error?: { error?: {
error: any; error: any;

33
app/containers/ThreadDetails.tsx
View File

@ -1,11 +1,12 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import { CustomIcon } from '../lib/Icons'; import { CustomIcon } from '../lib/Icons';
import { themes } from '../constants/colors'; import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles'; import sharedStyles from '../views/Styles';
import { withTheme } from '../theme'; import { withTheme } from '../theme';
import { TThreadModel } from '../definitions/IThread';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -40,33 +41,25 @@ const styles = StyleSheet.create({
}); });
interface IThreadDetails { interface IThreadDetails {
item: { item: Partial<TThreadModel>;
tcount: number | string;
replies: any;
id: string;
};
user: { user: {
id: string; id: string;
}; };
badgeColor: string; badgeColor?: string;
toggleFollowThread: Function; toggleFollowThread: Function;
style: object; style: ViewStyle;
theme: string; theme?: string;
} }
const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, theme }: IThreadDetails) => { const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, theme }: IThreadDetails) => {
let { tcount } = item; let { tcount } = item;
if (tcount >= 1000) { if (tcount! >= 1000) {
tcount = '+999'; tcount = '+999';
} else if (tcount >= 100) {
tcount = '+99';
} }
let replies = item?.replies?.length ?? 0; let replies: number | string = item?.replies?.length ?? 0;
if (replies >= 1000) { if (replies >= 1000) {
replies = '+999'; replies = '+999';
} else if (replies >= 100) {
replies = '+99';
} }
const isFollowing = item.replies?.find((u: any) => u === user?.id); const isFollowing = item.replies?.find((u: any) => u === user?.id);
@ -75,15 +68,15 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them
<View style={[styles.container, style]}> <View style={[styles.container, style]}>
<View style={styles.detailsContainer}> <View style={styles.detailsContainer}>
<View style={styles.detailContainer}> <View style={styles.detailContainer}>
<CustomIcon name='threads' size={24} color={themes[theme].auxiliaryText} /> <CustomIcon name='threads' size={24} color={themes[theme!].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{tcount} {tcount}
</Text> </Text>
</View> </View>
<View style={styles.detailContainer}> <View style={styles.detailContainer}>
<CustomIcon name='user' size={24} color={themes[theme].auxiliaryText} /> <CustomIcon name='user' size={24} color={themes[theme!].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{replies} {replies}
</Text> </Text>
</View> </View>
@ -95,7 +88,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them
<CustomIcon <CustomIcon
size={24} size={24}
name={isFollowing ? 'notification' : 'notification-disabled'} name={isFollowing ? 'notification' : 'notification-disabled'}
color={themes[theme].auxiliaryTintColor} color={themes[theme!].auxiliaryTintColor}
/> />
</Touchable> </Touchable>
</View> </View>

6
app/containers/Toast.tsx
View File

@ -22,7 +22,7 @@ const styles = StyleSheet.create({
export const LISTENER = 'Toast'; export const LISTENER = 'Toast';
interface IToastProps { interface IToastProps {
theme: string; theme?: string;
} }
class Toast extends React.Component<IToastProps, any> { class Toast extends React.Component<IToastProps, any> {
@ -61,8 +61,8 @@ class Toast extends React.Component<IToastProps, any> {
ref={this.getToastRef} ref={this.getToastRef}
// @ts-ignore // @ts-ignore
position='center' position='center'
style={[styles.toast, { backgroundColor: themes[theme].toastBackground }]} style={[styles.toast, { backgroundColor: themes[theme!].toastBackground }]}
textStyle={[styles.text, { color: themes[theme].buttonText }]} textStyle={[styles.text, { color: themes[theme!].buttonText }]}
opacity={0.9} opacity={0.9}
/> />
); );

8
app/containers/TwoFactor/index.tsx
View File

@ -19,7 +19,7 @@ import styles from './styles';
export const TWO_FACTOR = 'TWO_FACTOR'; export const TWO_FACTOR = 'TWO_FACTOR';
interface ITwoFactor { interface ITwoFactor {
theme: string; theme?: string;
isMasterDetail: boolean; isMasterDetail: boolean;
} }
@ -87,7 +87,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
setData({}); setData({});
}; };
const color = themes[theme].titleText; const color = themes[theme!].titleText;
return ( return (
<Modal <Modal
// @ts-ignore // @ts-ignore
@ -101,7 +101,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
style={[ style={[
styles.content, styles.content,
isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet], isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
{ backgroundColor: themes[theme].backgroundColor } { backgroundColor: themes[theme!].backgroundColor }
]}> ]}>
<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text> <Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null} {method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
@ -128,7 +128,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
<Button <Button
title={I18n.t('Cancel')} title={I18n.t('Cancel')}
type='secondary' type='secondary'
backgroundColor={themes[theme].chatComponentBackground} backgroundColor={themes[theme!].chatComponentBackground}
style={styles.button} style={styles.button}
onPress={onCancel} onPress={onCancel}
theme={theme} theme={theme}

9
app/containers/markdown/index.tsx
View File

@ -5,6 +5,7 @@ import Renderer from 'commonmark-react-renderer';
import removeMarkdown from 'remove-markdown'; import removeMarkdown from 'remove-markdown';
import { MarkdownAST } from '@rocket.chat/message-parser'; import { MarkdownAST } from '@rocket.chat/message-parser';
import { UserMention } from '../message/interfaces';
import shortnameToUnicode from '../../utils/shortnameToUnicode'; import shortnameToUnicode from '../../utils/shortnameToUnicode';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
@ -23,14 +24,6 @@ import styles from './styles';
import { isValidURL } from '../../utils/url'; import { isValidURL } from '../../utils/url';
import NewMarkdown from './new'; import NewMarkdown from './new';
interface IUser {
_id: string;
username: string;
name: string;
}
type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
interface IMarkdownProps { interface IMarkdownProps {
msg: string; msg: string;
md: MarkdownAST; md: MarkdownAST;

2
app/containers/message/Audio.tsx
View File

@ -30,7 +30,7 @@ interface IMessageAudioProps {
}; };
theme: string; theme: string;
getCustomEmoji: Function; getCustomEmoji: Function;
scale: number; scale?: number;
} }
interface IMessageAudioState { interface IMessageAudioState {

2
app/containers/message/Reactions.tsx
View File

@ -24,7 +24,7 @@ interface IMessageReaction {
} }
interface IMessageReactions { interface IMessageReactions {
reactions: object[]; reactions?: object[];
getCustomEmoji: Function; getCustomEmoji: Function;
theme: string; theme: string;
} }

6
app/containers/message/Urls.tsx
View File

@ -68,8 +68,8 @@ interface IMessageUrl {
} }
interface IMessageUrls { interface IMessageUrls {
urls: any; urls?: any;
theme: string; theme?: string;
} }
const UrlImage = React.memo( const UrlImage = React.memo(
@ -156,7 +156,7 @@ const Urls = React.memo(
return null; return null;
} }
return urls.map((url: any, index: number) => <Url url={url} key={url.url} index={index} theme={theme} />); return urls.map((url: any, index: number) => <Url url={url} key={url.url} index={index} theme={theme!} />);
}, },
(oldProps, newProps) => dequal(oldProps.urls, newProps.urls) && oldProps.theme === newProps.theme (oldProps, newProps) => dequal(oldProps.urls, newProps.urls) && oldProps.theme === newProps.theme
); );

22
app/containers/message/User.tsx
View File

@ -38,17 +38,17 @@ const styles = StyleSheet.create({
}); });
interface IMessageUser { interface IMessageUser {
isHeader: boolean; isHeader?: boolean;
hasError: boolean; hasError?: boolean;
useRealName: boolean; useRealName: boolean;
author: { author?: {
_id: string; _id: string;
name: string; name?: string;
username: string; username?: string;
}; };
alias: string; alias?: string;
ts: Date; ts?: Date;
timeFormat: string; timeFormat?: string;
theme: string; theme: string;
navToRoomInfo: Function; navToRoomInfo: Function;
type: string; type: string;
@ -59,16 +59,16 @@ const User = React.memo(
if (isHeader || hasError) { if (isHeader || hasError) {
const navParam = { const navParam = {
t: 'd', t: 'd',
rid: author._id rid: author!._id
}; };
const { user } = useContext(MessageContext); const { user } = useContext(MessageContext);
const username = (useRealName && author.name) || author.username; const username = (useRealName && author!.name) || author!.username;
const aliasUsername = alias ? ( const aliasUsername = alias ? (
<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text> <Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>
) : null; ) : null;
const time = moment(ts).format(timeFormat); const time = moment(ts).format(timeFormat);
const onUserPress = () => navToRoomInfo(navParam); const onUserPress = () => navToRoomInfo(navParam);
const isDisabled = author._id === user.id; const isDisabled = author!._id === user.id;
const textContent = ( const textContent = (
<> <>

100
app/containers/message/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Keyboard } from 'react-native'; import { Keyboard, ViewStyle } from 'react-native';
import Message from './Message'; import Message from './Message';
import MessageContext from './Context'; import MessageContext from './Context';
@ -17,53 +17,55 @@ interface IMessageContainerProps {
username: string; username: string;
token: string; token: string;
}; };
rid: string; msg?: string;
rid?: string;
timeFormat: string; timeFormat: string;
style: any; style?: ViewStyle;
archived: boolean; archived?: boolean;
broadcast: boolean; broadcast?: boolean;
previousItem: { previousItem?: {
ts: any; ts: any;
u: any; u: any;
groupable: any; groupable: any;
id: any; id: string;
tmid: any; tmid: string;
status: any; status: any;
}; };
isHeader: boolean;
baseUrl: string; baseUrl: string;
Message_GroupingPeriod: number; Message_GroupingPeriod?: number;
isReadReceiptEnabled: boolean; isReadReceiptEnabled?: boolean;
isThreadRoom: boolean; isThreadRoom: boolean;
useRealName: boolean; useRealName: boolean;
autoTranslateRoom: boolean; autoTranslateRoom?: boolean;
autoTranslateLanguage: string; autoTranslateLanguage?: string;
status: number; status?: number;
isIgnored: boolean; isIgnored?: boolean;
highlighted: boolean; highlighted?: boolean;
getCustomEmoji(): void; getCustomEmoji(name: string): void;
onLongPress: Function; onLongPress?: Function;
onReactionPress: Function; onReactionPress?: Function;
onEncryptedPress: Function; onEncryptedPress?: Function;
onDiscussionPress: Function; onDiscussionPress?: Function;
onThreadPress: Function; onThreadPress?: Function;
errorActionsShow: Function; errorActionsShow?: Function;
replyBroadcast: Function; replyBroadcast?: Function;
reactionInit: Function; reactionInit?: Function;
fetchThreadName: Function; fetchThreadName?: Function;
showAttachment: Function; showAttachment?: Function;
onReactionLongPress: Function; onReactionLongPress?: Function;
navToRoomInfo: Function; navToRoomInfo?: Function;
callJitsi: Function; callJitsi?: Function;
blockAction: Function; blockAction?: Function;
onAnswerButtonPress: Function; onAnswerButtonPress?: Function;
theme: string; theme: string;
threadBadgeColor: string; threadBadgeColor?: string;
toggleFollowThread: Function; toggleFollowThread?: Function;
jumpToMessage: Function; jumpToMessage?: Function;
onPress: Function; onPress: Function;
} }
class MessageContainer extends React.Component<IMessageContainerProps, any> { class MessageContainer extends React.Component<IMessageContainerProps> {
static defaultProps = { static defaultProps = {
getCustomEmoji: () => {}, getCustomEmoji: () => {},
onLongPress: () => {}, onLongPress: () => {},
@ -224,7 +226,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
previousItem.ts.toDateString() === item.ts.toDateString() && previousItem.ts.toDateString() === item.ts.toDateString() &&
previousItem.u.username === item.u.username && previousItem.u.username === item.u.username &&
!(previousItem.groupable === false || item.groupable === false || broadcast === true) && !(previousItem.groupable === false || item.groupable === false || broadcast === true) &&
item.ts - previousItem.ts < Message_GroupingPeriod * 1000 && item.ts - previousItem.ts < Message_GroupingPeriod! * 1000 &&
previousItem.tmid === item.tmid previousItem.tmid === item.tmid
) { ) {
return false; return false;
@ -299,7 +301,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
const { item, theme, jumpToMessage } = this.props; const { item, theme, jumpToMessage } = this.props;
const isMessageLink = item?.attachments?.findIndex((att: any) => att?.message_link === link) !== -1; const isMessageLink = item?.attachments?.findIndex((att: any) => att?.message_link === link) !== -1;
if (isMessageLink) { if (isMessageLink) {
return jumpToMessage(link); return jumpToMessage!(link);
} }
openLink(link, theme); openLink(link, theme);
}; };
@ -365,7 +367,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
// "autoTranslateRoom" and "autoTranslateLanguage" are properties from the subscription // "autoTranslateRoom" and "autoTranslateLanguage" are properties from the subscription
// "autoTranslateMessage" is a toggle between "View Original" and "Translate" state // "autoTranslateMessage" is a toggle between "View Original" and "Translate" state
if (autoTranslateRoom && autoTranslateMessage) { if (autoTranslateRoom && autoTranslateMessage) {
message = getMessageTranslation(item, autoTranslateLanguage) || message; message = getMessageTranslation(item, autoTranslateLanguage!) || message;
} }
return ( return (
@ -393,7 +395,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
id={id} id={id}
msg={message} msg={message}
md={md} md={md}
rid={rid} rid={rid!}
author={u} author={u}
ts={ts} ts={ts}
type={t} type={t}
@ -407,10 +409,10 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
emoji={emoji} emoji={emoji}
timeFormat={timeFormat} timeFormat={timeFormat}
style={style} style={style}
archived={archived} archived={archived!}
broadcast={broadcast} broadcast={broadcast!}
useRealName={useRealName} useRealName={useRealName}
isReadReceiptEnabled={isReadReceiptEnabled} isReadReceiptEnabled={isReadReceiptEnabled!}
unread={unread} unread={unread}
role={role} role={role}
drid={drid} drid={drid}
@ -420,10 +422,10 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
tcount={tcount} tcount={tcount}
tlm={tlm} tlm={tlm}
tmsg={tmsg} tmsg={tmsg}
fetchThreadName={fetchThreadName} fetchThreadName={fetchThreadName!}
mentions={mentions} mentions={mentions}
channels={channels} channels={channels}
isIgnored={this.isIgnored} isIgnored={this.isIgnored!}
isEdited={editedBy && !!editedBy.username} isEdited={editedBy && !!editedBy.username}
isHeader={this.isHeader} isHeader={this.isHeader}
isThreadReply={this.isThreadReply} isThreadReply={this.isThreadReply}
@ -433,13 +435,13 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
isTemp={this.isTemp} isTemp={this.isTemp}
isEncrypted={this.isEncrypted} isEncrypted={this.isEncrypted}
hasError={this.hasError} hasError={this.hasError}
showAttachment={showAttachment} showAttachment={showAttachment!}
getCustomEmoji={getCustomEmoji} getCustomEmoji={getCustomEmoji}
navToRoomInfo={navToRoomInfo} navToRoomInfo={navToRoomInfo!}
callJitsi={callJitsi} callJitsi={callJitsi!}
blockAction={blockAction} blockAction={blockAction!}
theme={theme} theme={theme}
highlighted={highlighted} highlighted={highlighted!}
/> />
</MessageContext.Provider> </MessageContext.Provider>
); );

5
app/containers/message/interfaces.ts
View File

@ -51,12 +51,13 @@ export interface IMessageCallButton {
} }
export interface IUser { export interface IUser {
_id: string; id: string;
username: string; username: string;
token: string;
name: string; name: string;
} }
export type UserMention = Pick<IUser, '_id' | 'username' | 'name'>; export type UserMention = Pick<IUser, 'id' | 'username' | 'name'>;
export interface IMessageContent { export interface IMessageContent {
_id: string; _id: string;

16
app/containers/message/utils.ts
View File

@ -26,7 +26,9 @@ export const SYSTEM_MESSAGES = [
'au', 'au',
'ru', 'ru',
'ul', 'ul',
'ult',
'uj', 'uj',
'ujt',
'ut', 'ut',
'rm', 'rm',
'user-muted', 'user-muted',
@ -50,8 +52,10 @@ export const SYSTEM_MESSAGE_TYPES = {
MESSAGE_PINNED: 'message_pinned', MESSAGE_PINNED: 'message_pinned',
MESSAGE_SNIPPETED: 'message_snippeted', MESSAGE_SNIPPETED: 'message_snippeted',
USER_JOINED_CHANNEL: 'uj', USER_JOINED_CHANNEL: 'uj',
USER_JOINED_TEAM: 'ujt',
USER_JOINED_DISCUSSION: 'ut', USER_JOINED_DISCUSSION: 'ut',
USER_LEFT_CHANNEL: 'ul' USER_LEFT_CHANNEL: 'ul',
USER_LEFT_TEAM: 'ult'
}; };
export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [ export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [
@ -59,8 +63,10 @@ export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [
SYSTEM_MESSAGE_TYPES.MESSAGE_PINNED, SYSTEM_MESSAGE_TYPES.MESSAGE_PINNED,
SYSTEM_MESSAGE_TYPES.MESSAGE_SNIPPETED, SYSTEM_MESSAGE_TYPES.MESSAGE_SNIPPETED,
SYSTEM_MESSAGE_TYPES.USER_JOINED_CHANNEL, SYSTEM_MESSAGE_TYPES.USER_JOINED_CHANNEL,
SYSTEM_MESSAGE_TYPES.USER_JOINED_TEAM,
SYSTEM_MESSAGE_TYPES.USER_JOINED_DISCUSSION, SYSTEM_MESSAGE_TYPES.USER_JOINED_DISCUSSION,
SYSTEM_MESSAGE_TYPES.USER_LEFT_CHANNEL SYSTEM_MESSAGE_TYPES.USER_LEFT_CHANNEL,
SYSTEM_MESSAGE_TYPES.USER_LEFT_TEAM
]; ];
type TInfoMessage = { type TInfoMessage = {
@ -77,6 +83,9 @@ export const getInfoMessage = ({ type, role, msg, author }: TInfoMessage) => {
if (type === 'uj') { if (type === 'uj') {
return I18n.t('Has_joined_the_channel'); return I18n.t('Has_joined_the_channel');
} }
if (type === 'ujt') {
return I18n.t('Has_joined_the_team');
}
if (type === 'ut') { if (type === 'ut') {
return I18n.t('Has_joined_the_conversation'); return I18n.t('Has_joined_the_conversation');
} }
@ -92,6 +101,9 @@ export const getInfoMessage = ({ type, role, msg, author }: TInfoMessage) => {
if (type === 'ul') { if (type === 'ul') {
return I18n.t('Has_left_the_channel'); return I18n.t('Has_left_the_channel');
} }
if (type === 'ult') {
return I18n.t('Has_left_the_team');
}
if (type === 'ru') { if (type === 'ru') {
return I18n.t('User_removed_by', { userRemoved: msg, userBy: username }); return I18n.t('User_removed_by', { userRemoved: msg, userBy: username });
} }

1
app/definitions/INotification.ts
View File

@ -9,4 +9,5 @@ export interface INotification {
from: string; from: string;
image: string; image: string;
soundname: string; soundname: string;
getData: () => INotification;
} }

7
app/definitions/IRoom.ts
View File

@ -1,9 +1,16 @@
import Model from '@nozbe/watermelondb/Model'; import Model from '@nozbe/watermelondb/Model';
import { IServedBy } from './IServedBy'; import { IServedBy } from './IServedBy';
import { SubscriptionType } from './ISubscription';
export interface IRoom { export interface IRoom {
id: string; id: string;
rid: string;
prid: string;
t: SubscriptionType;
name: string;
teamMain: boolean;
alert?: boolean;
customFields: string[]; customFields: string[];
broadcast: boolean; broadcast: boolean;
encrypted: boolean; encrypted: boolean;

12
app/definitions/IThread.ts
View File

@ -43,10 +43,10 @@ export interface IThread {
id: string; id: string;
msg?: string; msg?: string;
t?: SubscriptionType; t?: SubscriptionType;
rid: string; rid?: string;
_updatedAt: Date; _updatedAt?: Date;
ts: Date; ts?: Date;
u: IUserMessage; u?: IUserMessage;
alias?: string; alias?: string;
parseUrls?: boolean; parseUrls?: boolean;
groupable?: boolean; groupable?: boolean;
@ -64,8 +64,8 @@ export interface IThread {
dcount?: number; dcount?: number;
dlm?: number; dlm?: number;
tmid?: string; tmid?: string;
tcount?: number; tcount: number | string;
tlm?: Date; tlm?: string;
replies?: string[]; replies?: string[];
mentions?: IUserMention[]; mentions?: IUserMention[];
channels?: IUserChannel[]; channels?: IUserChannel[];

21
app/navigationTypes.ts → app/definitions/navigationTypes.ts
View File

@ -1,10 +1,21 @@
import { NavigatorScreenParams } from '@react-navigation/core'; import { NavigatorScreenParams } from '@react-navigation/core';
import { StackNavigationOptions } from '@react-navigation/stack';
import { ISubscription } from './definitions/ISubscription'; import { ISubscription } from './ISubscription';
import { IServer } from './definitions/IServer'; import { IServer } from './IServer';
import { IAttachment } from './definitions/IAttachment'; import { IAttachment } from './IAttachment';
import { MasterDetailInsideStackParamList } from './stacks/MasterDetailStack/types'; import { MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types';
import { OutsideParamList, InsideStackParamList } from './stacks/types'; import { OutsideParamList, InsideStackParamList } from '../stacks/types';
interface INavigationProps {
route?: any;
navigation?: any;
isMasterDetail?: boolean;
}
export type TNavigationOptions = {
navigationOptions?(props: INavigationProps): StackNavigationOptions;
};
export type SetUsernameStackParamList = { export type SetUsernameStackParamList = {
SetUsernameView: { SetUsernameView: {

7
app/dimensions.tsx
View File

@ -2,6 +2,8 @@ import React from 'react';
import { Dimensions } from 'react-native'; import { Dimensions } from 'react-native';
import hoistNonReactStatics from 'hoist-non-react-statics'; import hoistNonReactStatics from 'hoist-non-react-statics';
import { TNavigationOptions } from './definitions/navigationTypes';
export interface IDimensionsContextProps { export interface IDimensionsContextProps {
width: number; width: number;
height?: number; height?: number;
@ -22,10 +24,11 @@ export interface IDimensionsContextProps {
export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window')); export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window'));
export function withDimensions(Component: any): any { export function withDimensions<T extends object>(Component: React.ComponentType<T> & TNavigationOptions): typeof Component {
const DimensionsComponent = (props: any) => ( const DimensionsComponent = (props: T) => (
<DimensionsContext.Consumer>{contexts => <Component {...props} {...contexts} />}</DimensionsContext.Consumer> <DimensionsContext.Consumer>{contexts => <Component {...props} {...contexts} />}</DimensionsContext.Consumer>
); );
hoistNonReactStatics(DimensionsComponent, Component); hoistNonReactStatics(DimensionsComponent, Component);
return DimensionsComponent; return DimensionsComponent;
} }

2
app/i18n/locales/en.json
View File

@ -249,8 +249,10 @@
"Full_table": "Click to see full table", "Full_table": "Click to see full table",
"Generate_New_Link": "Generate New Link", "Generate_New_Link": "Generate New Link",
"Has_joined_the_channel": "has joined the channel", "Has_joined_the_channel": "has joined the channel",
"Has_joined_the_team": "has joined the team",
"Has_joined_the_conversation": "has joined the conversation", "Has_joined_the_conversation": "has joined the conversation",
"Has_left_the_channel": "has left the channel", "Has_left_the_channel": "has left the channel",
"Has_left_the_team": "has left the team",
"Hide_System_Messages": "Hide System Messages", "Hide_System_Messages": "Hide System Messages",
"Hide_type_messages": "Hide \"{{type}}\" messages", "Hide_type_messages": "Hide \"{{type}}\" messages",
"How_It_Works": "How It Works", "How_It_Works": "How It Works",

5
app/notifications/push/index.ts
View File

@ -16,9 +16,10 @@ interface IEjson {
messageId: string; messageId: string;
} }
export const onNotification = (notification: INotification): void => { export const onNotification = (push: INotification): void => {
if (notification) { if (push) {
try { try {
const notification = push?.getData();
const { rid, name, sender, type, host, messageType, messageId }: IEjson = EJSON.parse(notification.ejson); const { rid, name, sender, type, host, messageType, messageId }: IEjson = EJSON.parse(notification.ejson);
const types: Record<string, string> = { const types: Record<string, string> = {

2
app/notifications/push/push.ios.ts
View File

@ -22,7 +22,7 @@ class PushNotification {
// TODO REDUX MIGRATION TO TS // TODO REDUX MIGRATION TO TS
const { background } = reduxStore.getState().app; const { background } = reduxStore.getState().app;
if (background) { if (background) {
this.onNotification(notification?.getData()); this.onNotification(notification);
} }
completion(); completion();
}); });

2
app/notifications/push/push.ts
View File

@ -16,7 +16,7 @@ class PushNotification {
}); });
NotificationsAndroid.setNotificationOpenedListener((notification: Notification) => { NotificationsAndroid.setNotificationOpenedListener((notification: Notification) => {
this.onNotification(notification?.getData()); this.onNotification(notification);
}); });
} }

16
app/presentation/ServerItem/index.tsx
View File

@ -18,9 +18,9 @@ interface IServerItem {
name: string; name: string;
}; };
onPress(): void; onPress(): void;
onLongPress(): void; onLongPress?(): void;
hasCheck: boolean; hasCheck?: boolean;
theme: string; theme?: string;
} }
const defaultLogo = require('../../static/images/logo.png'); const defaultLogo = require('../../static/images/logo.png');
@ -31,10 +31,10 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }:
onLongPress={() => onLongPress?.()} onLongPress={() => onLongPress?.()}
testID={`rooms-list-header-server-${item.id}`} testID={`rooms-list-header-server-${item.id}`}
android_ripple={{ android_ripple={{
color: themes[theme].bannerBackground color: themes[theme!].bannerBackground
}} }}
style={({ pressed }: any) => ({ style={({ pressed }: any) => ({
backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor backgroundColor: isIOS && pressed ? themes[theme!].bannerBackground : themes[theme!].backgroundColor
})}> })}>
<View style={styles.serverItemContainer}> <View style={styles.serverItemContainer}>
{item.iconURL ? ( {item.iconURL ? (
@ -52,14 +52,14 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }:
<FastImage source={defaultLogo} style={styles.serverIcon} /> <FastImage source={defaultLogo} style={styles.serverIcon} />
)} )}
<View style={styles.serverTextContainer}> <View style={styles.serverTextContainer}>
<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}> <Text numberOfLines={1} style={[styles.serverName, { color: themes[theme!].titleText }]}>
{item.name || item.id} {item.name || item.id}
</Text> </Text>
<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}> <Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme!].auxiliaryText }]}>
{item.id} {item.id}
</Text> </Text>
</View> </View>
{hasCheck ? <Check theme={theme} /> : null} {hasCheck ? <Check theme={theme!} /> : null}
</View> </View>
</Pressable> </Pressable>
)); ));

5
app/presentation/TextInput.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { I18nManager, StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle } from 'react-native'; import { I18nManager, StyleProp, StyleSheet, TextInput, TextStyle } from 'react-native';
import { IRCTextInputProps } from '../containers/TextInput';
import { themes } from '../constants/colors'; import { themes } from '../constants/colors';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -9,7 +10,7 @@ const styles = StyleSheet.create({
} }
}); });
interface IThemedTextInput extends TextInputProps { interface IThemedTextInput extends IRCTextInputProps {
style: StyleProp<TextStyle>; style: StyleProp<TextStyle>;
theme: string; theme: string;
} }

20
app/presentation/UnreadBadge/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
import { getUnreadStyle } from './getUnreadStyle'; import { getUnreadStyle } from './getUnreadStyle';
@ -30,15 +30,15 @@ const styles = StyleSheet.create({
}); });
interface IUnreadBadge { interface IUnreadBadge {
theme: string; theme?: string;
unread: number; unread?: number;
userMentions: number; userMentions?: number;
groupMentions: number; groupMentions?: number;
style: object; style?: ViewStyle;
tunread: []; tunread?: [];
tunreadUser: []; tunreadUser?: [];
tunreadGroup: []; tunreadGroup?: [];
small: boolean; small?: boolean;
} }
const UnreadBadge = React.memo( const UnreadBadge = React.memo(

2
app/share.tsx
View File

@ -26,7 +26,7 @@ import { setCurrentScreen } from './utils/log';
import AuthLoadingView from './views/AuthLoadingView'; import AuthLoadingView from './views/AuthLoadingView';
import { DimensionsContext } from './dimensions'; import { DimensionsContext } from './dimensions';
import debounce from './utils/debounce'; import debounce from './utils/debounce';
import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './navigationTypes'; import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './definitions/navigationTypes';
interface IDimensions { interface IDimensions {
width: number; width: number;

16
app/stacks/MasterDetailStack/index.tsx
View File

@ -116,10 +116,10 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
<ModalStack.Screen <ModalStack.Screen
name='RoomActionsView' name='RoomActionsView'
component={RoomActionsView} component={RoomActionsView}
options={props => RoomActionsView.navigationOptions({ ...props, isMasterDetail: true })} options={props => RoomActionsView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} /> <ModalStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
<ModalStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} /> <ModalStack.Screen name='SelectListView' component={SelectListView} />
<ModalStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} /> <ModalStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
<ModalStack.Screen name='RoomMembersView' component={RoomMembersView} options={RoomMembersView.navigationOptions} /> <ModalStack.Screen name='RoomMembersView' component={RoomMembersView} options={RoomMembersView.navigationOptions} />
<ModalStack.Screen <ModalStack.Screen
@ -145,12 +145,12 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
<ModalStack.Screen <ModalStack.Screen
name='DirectoryView' name='DirectoryView'
component={DirectoryView} component={DirectoryView}
options={props => DirectoryView.navigationOptions({ ...props, isMasterDetail: true })} options={props => DirectoryView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen <ModalStack.Screen
name='QueueListView' name='QueueListView'
component={QueueListView} component={QueueListView}
options={props => QueueListView.navigationOptions({ ...props, isMasterDetail: true })} options={props => QueueListView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen <ModalStack.Screen
name='NotificationPrefView' name='NotificationPrefView'
@ -172,12 +172,12 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
<ModalStack.Screen <ModalStack.Screen
name='ReadReceiptsView' name='ReadReceiptsView'
component={ReadReceiptsView} component={ReadReceiptsView}
options={props => ReadReceiptsView.navigationOptions({ ...props, isMasterDetail: true })} options={props => ReadReceiptsView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen <ModalStack.Screen
name='SettingsView' name='SettingsView'
component={SettingsView} component={SettingsView}
options={props => SettingsView.navigationOptions({ ...props, isMasterDetail: true })} options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} /> <ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
<ModalStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} /> <ModalStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} />
@ -195,13 +195,13 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
<ModalStack.Screen <ModalStack.Screen
name='ProfileView' name='ProfileView'
component={ProfileView} component={ProfileView}
options={props => ProfileView.navigationOptions({ ...props, isMasterDetail: true })} options={props => ProfileView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} /> <ModalStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
<ModalStack.Screen <ModalStack.Screen
name='AdminPanelView' name='AdminPanelView'
component={AdminPanelView} component={AdminPanelView}
options={props => AdminPanelView.navigationOptions({ ...props, isMasterDetail: true })} options={props => AdminPanelView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen name='NewMessageView' component={NewMessageView} options={NewMessageView.navigationOptions} /> <ModalStack.Screen name='NewMessageView' component={NewMessageView} options={NewMessageView.navigationOptions} />
<ModalStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} /> <ModalStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />

11
app/stacks/types.ts
View File

@ -2,6 +2,7 @@ import { NavigatorScreenParams } from '@react-navigation/core';
import { TextInputProps } from 'react-native'; import { TextInputProps } from 'react-native';
import Model from '@nozbe/watermelondb/Model'; import Model from '@nozbe/watermelondb/Model';
import { IRoom } from '../definitions/IRoom';
import { IOptionsField } from '../views/NotificationPreferencesView/options'; import { IOptionsField } from '../views/NotificationPreferencesView/options';
import { IServer } from '../definitions/IServer'; import { IServer } from '../definitions/IServer';
import { IAttachment } from '../definitions/IAttachment'; import { IAttachment } from '../definitions/IAttachment';
@ -31,13 +32,13 @@ export type ChatsStackParamList = {
joined: boolean; joined: boolean;
}; };
SelectListView: { SelectListView: {
data: any; data: IRoom[];
title: string; title: string;
infoText: string; infoText: string;
nextAction: Function; nextAction: (selected: string[]) => void;
showAlert: boolean; showAlert: () => void;
isSearch: boolean; isSearch: boolean;
onSearch: Function; onSearch: (text: string) => Partial<IRoom[]>;
isRadio?: boolean; isRadio?: boolean;
}; };
RoomInfoView: { RoomInfoView: {
@ -64,7 +65,7 @@ export type ChatsStackParamList = {
showButton?: boolean; showButton?: boolean;
title?: string; title?: string;
buttonText?: string; buttonText?: string;
nextAction?: Function; nextAction?(): void;
}; };
InviteUsersView: { InviteUsersView: {
rid: string; rid: string;

8
app/theme.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics'; import hoistNonReactStatics from 'hoist-non-react-statics';
import { TNavigationOptions } from './definitions/navigationTypes';
import { IThemePreference } from './definitions/ITheme'; import { IThemePreference } from './definitions/ITheme';
interface IThemeContextProps { interface IThemeContextProps {
@ -11,12 +12,13 @@ interface IThemeContextProps {
export const ThemeContext = React.createContext<IThemeContextProps>({ theme: 'light' }); export const ThemeContext = React.createContext<IThemeContextProps>({ theme: 'light' });
export function withTheme(Component: any): any { export function withTheme<T extends object>(Component: React.ComponentType<T> & TNavigationOptions): typeof Component {
const ThemedComponent = (props: any) => ( const ThemedComponent = (props: T) => (
<ThemeContext.Consumer>{contexts => <Component {...props} {...contexts} />}</ThemeContext.Consumer> <ThemeContext.Consumer>{contexts => <Component {...props} {...contexts} />}</ThemeContext.Consumer>
); );
hoistNonReactStatics(ThemedComponent, Component); hoistNonReactStatics(ThemedComponent, Component);
return ThemedComponent; return ThemedComponent;
} }
export const useTheme = () => React.useContext(ThemeContext); export const useTheme = (): IThemeContextProps => React.useContext(ThemeContext);

8
app/utils/messageTypes.ts
View File

@ -3,10 +3,18 @@ export const MessageTypeValues = [
value: 'uj', value: 'uj',
text: 'Message_HideType_uj' text: 'Message_HideType_uj'
}, },
{
value: 'ujt',
text: 'Message_HideType_ujt'
},
{ {
value: 'ul', value: 'ul',
text: 'Message_HideType_ul' text: 'Message_HideType_ul'
}, },
{
value: 'ult',
text: 'Message_HideType_ult'
},
{ {
value: 'ru', value: 'ru',
text: 'Message_HideType_ru' text: 'Message_HideType_ru'

2
app/utils/room.ts
View File

@ -60,6 +60,6 @@ export const getBadgeColor = ({
}; };
export const makeThreadName = (messageRecord: { id?: string; msg?: string; attachments?: IAttachment[] }): string | undefined => export const makeThreadName = (messageRecord: { id?: string; msg?: string; attachments?: IAttachment[] }): string | undefined =>
messageRecord.msg || messageRecord.attachments![0].title; messageRecord.msg || messageRecord?.attachments?.[0]?.title;
export const isTeamRoom = ({ teamId, joined }: { teamId: string; joined: boolean }): boolean => !!teamId && joined; export const isTeamRoom = ({ teamId, joined }: { teamId: string; joined: boolean }): boolean => !!teamId && joined;

14
app/views/AddExistingChannelView.tsx
View File

@ -22,11 +22,11 @@ import { goRoom } from '../utils/goRoom';
import { showErrorAlert } from '../utils/info'; import { showErrorAlert } from '../utils/info';
import debounce from '../utils/debounce'; import debounce from '../utils/debounce';
import { ChatsStackParamList } from '../stacks/types'; import { ChatsStackParamList } from '../stacks/types';
import { IRoom } from '../definitions/IRoom';
interface IAddExistingChannelViewState { interface IAddExistingChannelViewState {
// TODO: refactor with Room Model search: Array<IRoom>;
search: any[]; channels: Array<IRoom>;
channels: any[];
selected: string[]; selected: string[];
loading: boolean; loading: boolean;
} }
@ -43,6 +43,7 @@ const QUERY_SIZE = 50;
class AddExistingChannelView extends React.Component<IAddExistingChannelViewProps, IAddExistingChannelViewState> { class AddExistingChannelView extends React.Component<IAddExistingChannelViewProps, IAddExistingChannelViewState> {
private teamId?: string; private teamId?: string;
constructor(props: IAddExistingChannelViewProps) { constructor(props: IAddExistingChannelViewProps) {
super(props); super(props);
this.query(); this.query();
@ -93,10 +94,9 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
) )
.fetch(); .fetch();
// TODO: Refactor with Room Model const asyncFilter = async (channelsArray: Array<IRoom>) => {
const asyncFilter = async (channelsArray: any[]) => {
const results = await Promise.all( const results = await Promise.all(
channelsArray.map(async (channel: any) => { channelsArray.map(async (channel: IRoom) => {
if (channel.prid) { if (channel.prid) {
return false; return false;
} }
@ -197,7 +197,7 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
<FlatList <FlatList
data={search.length > 0 ? search : channels} data={search.length > 0 ? search : channels}
extraData={this.state} extraData={this.state}
keyExtractor={item => item._id} keyExtractor={item => item.id}
ListHeaderComponent={this.renderHeader} ListHeaderComponent={this.renderHeader}
renderItem={this.renderItem} renderItem={this.renderItem}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}

3
app/views/AdminPanelView/index.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { WebView } from 'react-native-webview'; import { WebView } from 'react-native-webview';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { DrawerScreenProps } from '@react-navigation/drawer'; import { DrawerScreenProps } from '@react-navigation/drawer';
import { StackNavigationOptions } from '@react-navigation/stack';
import I18n from '../../i18n'; import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar'; import StatusBar from '../../containers/StatusBar';
@ -22,7 +23,7 @@ interface INavigationOptions {
} }
class AdminPanelView extends React.Component<IAdminPanelViewProps, any> { class AdminPanelView extends React.Component<IAdminPanelViewProps, any> {
static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions) => ({ static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions): StackNavigationOptions => ({
headerLeft: isMasterDetail ? undefined : () => <HeaderButton.Drawer navigation={navigation} />, headerLeft: isMasterDetail ? undefined : () => <HeaderButton.Drawer navigation={navigation} />,
title: I18n.t('Admin_Panel') title: I18n.t('Admin_Panel')
}); });

4
app/views/AutoTranslateView/index.tsx
View File

@ -113,7 +113,7 @@ class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
renderIcon = () => { renderIcon = () => {
const { theme } = this.props; const { theme } = this.props;
return <List.Icon name='check' style={{ color: themes[theme].tintColor }} />; return <List.Icon name='check' color={themes[theme!].tintColor} />;
}; };
renderSwitch = () => { renderSwitch = () => {
@ -131,7 +131,7 @@ class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
title={name || language} title={name || language}
onPress={() => this.saveAutoTranslateLanguage(language)} onPress={() => this.saveAutoTranslateLanguage(language)}
testID={`auto-translate-view-${language}`} testID={`auto-translate-view-${language}`}
right={isSelected ? this.renderIcon : null} right={() => (isSelected ? this.renderIcon() : null)}
translateTitle={false} translateTitle={false}
/> />
); );

2
app/views/DefaultBrowserView.tsx
View File

@ -127,7 +127,7 @@ class DefaultBrowserView extends React.Component<IDefaultBrowserViewProps, IDefa
title={I18n.t(title, { defaultValue: title })} title={I18n.t(title, { defaultValue: title })}
onPress={() => this.changeDefaultBrowser(value)} onPress={() => this.changeDefaultBrowser(value)}
testID={`default-browser-view-${title}`} testID={`default-browser-view-${title}`}
right={this.isSelected(value) ? this.renderIcon : null} right={() => (this.isSelected(value) ? this.renderIcon() : null)}
translateTitle={false} translateTitle={false}
/> />
); );

6
app/views/DirectoryView/index.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { FlatList, Text, View } from 'react-native'; import { FlatList, Text, View } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { ChatsStackParamList } from '../../stacks/types'; import { ChatsStackParamList } from '../../stacks/types';
import * as List from '../../containers/List'; import * as List from '../../containers/List';
@ -39,8 +39,8 @@ interface IDirectoryViewProps {
} }
class DirectoryView extends React.Component<IDirectoryViewProps, any> { class DirectoryView extends React.Component<IDirectoryViewProps, any> {
static navigationOptions = ({ navigation, isMasterDetail }: any) => { static navigationOptions = ({ navigation, isMasterDetail }: IDirectoryViewProps) => {
const options: any = { const options: StackNavigationOptions = {
title: I18n.t('Directory') title: I18n.t('Directory')
}; };
if (isMasterDetail) { if (isMasterDetail) {

4
app/views/InviteUsersView/index.tsx
View File

@ -40,9 +40,9 @@ interface IInviteUsersViewProps {
class InviteUsersView extends React.Component<IInviteUsersViewProps, any> { class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
private rid: string; private rid: string;
static navigationOptions: StackNavigationOptions = { static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Invite_users') title: I18n.t('Invite_users')
}; });
constructor(props: IInviteUsersViewProps) { constructor(props: IInviteUsersViewProps) {
super(props); super(props);

2
app/views/LanguageView/index.tsx
View File

@ -134,7 +134,7 @@ class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewStat
title={label} title={label}
onPress={() => this.submit(value)} onPress={() => this.submit(value)}
testID={`language-view-${value}`} testID={`language-view-${value}`}
right={isSelected ? this.renderIcon : null} right={() => (isSelected ? this.renderIcon() : null)}
translateTitle={false} translateTitle={false}
/> />
); );

4
app/views/LegalView.tsx
View File

@ -15,9 +15,9 @@ interface ILegalView {
} }
class LegalView extends React.Component<ILegalView, any> { class LegalView extends React.Component<ILegalView, any> {
static navigationOptions: StackNavigationOptions = { static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Legal') title: I18n.t('Legal')
}; });
onPressItem = ({ route }: { route: string }) => { onPressItem = ({ route }: { route: string }) => {
const { server, theme } = this.props; const { server, theme } = this.props;

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

@ -25,6 +25,8 @@ import { ISubscription, SubscriptionType } from '../../definitions/ISubscription
interface IMessagesViewProps { interface IMessagesViewProps {
user: { user: {
id: string; id: string;
username: string;
token: string;
}; };
baseUrl: string; baseUrl: string;
navigation: CompositeNavigationProp< navigation: CompositeNavigationProp<

19
app/views/ModalBlockView.tsx
View File

@ -15,7 +15,6 @@ import ActivityIndicator from '../containers/ActivityIndicator';
import { CONTAINER_TYPES, MODAL_ACTIONS } from '../lib/methods/actions'; import { CONTAINER_TYPES, MODAL_ACTIONS } from '../lib/methods/actions';
import { textParser } from '../containers/UIKit/utils'; import { textParser } from '../containers/UIKit/utils';
import Navigation from '../lib/Navigation'; import Navigation from '../lib/Navigation';
import sharedStyles from './Styles';
import { MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types'; import { MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -25,10 +24,6 @@ const styles = StyleSheet.create({
}, },
content: { content: {
paddingVertical: 16 paddingVertical: 16
},
submit: {
...sharedStyles.textSemibold,
fontSize: 16
} }
}); });
@ -152,24 +147,14 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
headerLeft: close headerLeft: close
? () => ( ? () => (
<HeaderButton.Container> <HeaderButton.Container>
<HeaderButton.Item <HeaderButton.Item title={textParser([close.text])} onPress={this.cancel} testID='close-modal-uikit' />
title={textParser([close.text])}
style={styles.submit}
onPress={this.cancel}
testID='close-modal-uikit'
/>
</HeaderButton.Container> </HeaderButton.Container>
) )
: undefined, : undefined,
headerRight: submit headerRight: submit
? () => ( ? () => (
<HeaderButton.Container> <HeaderButton.Container>
<HeaderButton.Item <HeaderButton.Item title={textParser([submit.text])} onPress={this.submit} testID='submit-modal-uikit' />
title={textParser([submit.text])}
style={styles.submit}
onPress={this.submit}
testID='submit-modal-uikit'
/>
</HeaderButton.Container> </HeaderButton.Container>
) )
: undefined : undefined

2
app/views/PickerView.tsx
View File

@ -48,7 +48,7 @@ interface IPickerViewProps {
const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => ( const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => (
<List.Item <List.Item
title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })} title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
right={selected && (() => <List.Icon name='check' color={themes[theme].tintColor} />)} right={() => (selected ? <List.Icon name='check' color={themes[theme].tintColor} /> : null)}
onPress={onItemPress} onPress={onItemPress}
translateTitle={false} translateTitle={false}
/> />

2
app/views/ScreenLockConfigView.tsx
View File

@ -185,7 +185,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
<List.Item <List.Item
title={title} title={title}
onPress={() => this.changeAutoLockTime(value)} onPress={() => this.changeAutoLockTime(value)}
right={this.isSelected(value) ? this.renderIcon : null} right={() => (this.isSelected(value) ? this.renderIcon() : null)}
disabled={disabled} disabled={disabled}
translateTitle={false} translateTitle={false}
/> />

6
app/views/SearchMessagesView/index.tsx
View File

@ -58,7 +58,11 @@ interface INavigationOption {
} }
interface ISearchMessagesViewProps extends INavigationOption { interface ISearchMessagesViewProps extends INavigationOption {
user: { id: string }; user: {
id: string;
username: string;
token: string;
};
baseUrl: string; baseUrl: string;
serverVersion: string; serverVersion: string;
customEmojis: { customEmojis: {

46
app/views/SelectListView.tsx
View File

@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import { RadioButton } from 'react-native-ui-lib'; import { RadioButton } from 'react-native-ui-lib';
import { RouteProp } from '@react-navigation/native'; import { RouteProp } from '@react-navigation/native';
import { ChatsStackParamList } from '../stacks/types';
import log from '../utils/log'; import log from '../utils/log';
import * as List from '../containers/List'; import * as List from '../containers/List';
import I18n from '../i18n'; import I18n from '../i18n';
@ -17,6 +18,7 @@ import { animateNextTransition } from '../utils/layoutAnimation';
import { ICON_SIZE } from '../containers/List/constants'; import { ICON_SIZE } from '../containers/List/constants';
import SearchBox from '../containers/SearchBox'; import SearchBox from '../containers/SearchBox';
import sharedStyles from './Styles'; import sharedStyles from './Styles';
import { IRoom } from '../definitions/IRoom';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
buttonText: { buttonText: {
@ -26,38 +28,16 @@ const styles = StyleSheet.create({
} }
}); });
interface IData {
rid: string;
name: string;
t?: string;
teamMain?: boolean;
alert?: boolean;
}
interface ISelectListViewState { interface ISelectListViewState {
data: IData[]; data: IRoom[];
dataFiltered: IData[]; dataFiltered?: IRoom[];
isSearching: boolean; isSearching: boolean;
selected: string[]; selected: string[];
} }
interface ISelectListViewProps { interface ISelectListViewProps {
navigation: StackNavigationProp<any, 'SelectListView'>; navigation: StackNavigationProp<ChatsStackParamList, 'SelectListView'>;
route: RouteProp< route: RouteProp<ChatsStackParamList, 'SelectListView'>;
{
SelectView: {
data: IData[];
title: string;
infoText: string;
nextAction(selected: string[]): void;
showAlert(): void;
isSearch: boolean;
onSearch(text: string): IData[];
isRadio: boolean;
};
},
'SelectView'
>;
theme: string; theme: string;
isMasterDetail: boolean; isMasterDetail: boolean;
} }
@ -73,9 +53,9 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
private isSearch: boolean; private isSearch: boolean;
private onSearch: (text: string) => IData[]; private onSearch: (text: string) => Partial<IRoom[]>;
private isRadio: boolean; private isRadio?: boolean;
constructor(props: ISelectListViewProps) { constructor(props: ISelectListViewProps) {
super(props); super(props);
@ -142,7 +122,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
search = async (text: string) => { search = async (text: string) => {
try { try {
this.setState({ isSearching: true }); this.setState({ isSearching: true });
const result = await this.onSearch(text); const result = (await this.onSearch(text)) as IRoom[];
this.setState({ dataFiltered: result }); this.setState({ dataFiltered: result });
} catch (e) { } catch (e) {
log(e); log(e);
@ -170,19 +150,19 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
} }
}; };
renderItem = ({ item }: { item: IData }) => { renderItem = ({ item }: { item: Partial<IRoom> }) => {
const { theme } = this.props; const { theme } = this.props;
const { selected } = this.state; const { selected } = this.state;
const channelIcon = item.t === 'p' ? 'channel-private' : 'channel-public'; const channelIcon = item.t === 'p' ? 'channel-private' : 'channel-public';
const teamIcon = item.t === 'p' ? 'teams-private' : 'teams'; const teamIcon = item.t === 'p' ? 'teams-private' : 'teams';
const icon = item.teamMain ? teamIcon : channelIcon; const icon = item.teamMain ? teamIcon : channelIcon;
const checked = this.isChecked(item.rid) ? 'check' : null; const checked = this.isChecked(item.rid!) ? 'check' : '';
const showRadio = () => ( const showRadio = () => (
<RadioButton <RadioButton
testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`} testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
selected={selected.includes(item.rid)} selected={selected.includes(item.rid!)}
color={themes[theme].actionTintColor} color={themes[theme].actionTintColor}
size={ICON_SIZE} size={ICON_SIZE}
/> />
@ -202,7 +182,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
title={item.name} title={item.name}
translateTitle={false} translateTitle={false}
testID={`select-list-view-item-${item.name}`} testID={`select-list-view-item-${item.name}`}
onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))} onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid!))}
alert={item.alert} alert={item.alert}
left={() => <List.Icon name={icon} color={themes[theme].controlText} />} left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
right={() => (this.isRadio ? showRadio() : showCheck())} right={() => (this.isRadio ? showRadio() : showCheck())}

9
app/views/SelectServerView.tsx
View File

@ -11,14 +11,15 @@ import RocketChat from '../lib/rocketchat';
import database from '../lib/database'; import database from '../lib/database';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import * as List from '../containers/List'; import * as List from '../containers/List';
import { ShareInsideStackParamList } from '../definitions/navigationTypes';
const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index }); const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
const keyExtractor = (item: IServer) => item.id; const keyExtractor = (item: IServer) => item.id;
interface IServer extends Model { interface IServer extends Model {
id: string; id: string;
iconURL?: string; iconURL: string;
name?: string; name: string;
} }
interface ISelectServerViewState { interface ISelectServerViewState {
@ -26,7 +27,7 @@ interface ISelectServerViewState {
} }
interface ISelectServerViewProps { interface ISelectServerViewProps {
navigation: StackNavigationProp<any, 'SelectServerView'>; navigation: StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>;
server: string; server: string;
} }
@ -40,7 +41,7 @@ class SelectServerView extends React.Component<ISelectServerViewProps, ISelectSe
async componentDidMount() { async componentDidMount() {
const serversDB = database.servers; const serversDB = database.servers;
const serversCollection = serversDB.get('servers'); const serversCollection = serversDB.get('servers');
const servers: IServer[] = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch(); const servers = (await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch()) as IServer[];
this.setState({ servers }); this.setState({ servers });
} }

6
app/views/SettingsView/index.tsx
View File

@ -3,7 +3,7 @@ import { Clipboard, Linking, Share } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import FastImage from '@rocket.chat/react-native-fast-image'; import FastImage from '@rocket.chat/react-native-fast-image';
import CookieManager from '@react-native-cookies/cookies'; import CookieManager from '@react-native-cookies/cookies';
import { StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { SettingsStackParamList } from '../../stacks/types'; import { SettingsStackParamList } from '../../stacks/types';
import { logout as logoutAction } from '../../actions/login'; import { logout as logoutAction } from '../../actions/login';
@ -48,7 +48,7 @@ interface ISettingsViewProps {
} }
class SettingsView extends React.Component<ISettingsViewProps, any> { class SettingsView extends React.Component<ISettingsViewProps, any> {
static navigationOptions = ({ navigation, isMasterDetail }: ISettingsViewProps) => ({ static navigationOptions = ({ navigation, isMasterDetail }: ISettingsViewProps): StackNavigationOptions => ({
headerLeft: () => headerLeft: () =>
isMasterDetail ? ( isMasterDetail ? (
<HeaderButton.CloseModal navigation={navigation} testID='settings-view-close' /> <HeaderButton.CloseModal navigation={navigation} testID='settings-view-close' />
@ -181,7 +181,7 @@ class SettingsView extends React.Component<ISettingsViewProps, any> {
return ( return (
<SafeAreaView testID='settings-view'> <SafeAreaView testID='settings-view'>
<StatusBar /> <StatusBar />
<List.Container testID='settings-view-list'> <List.Container>
{isMasterDetail ? ( {isMasterDetail ? (
<> <>
<List.Section> <List.Section>

3
app/views/ShareListView/index.tsx
View File

@ -53,6 +53,9 @@ interface IChat {
} }
interface IServerInfo { interface IServerInfo {
id: string;
iconURL: string;
name: string;
useRealName: boolean; useRealName: boolean;
} }
interface IState { interface IState {

8
app/views/ShareView/Header.tsx
View File

@ -5,7 +5,7 @@ import I18n from '../../i18n';
import { CustomIcon } from '../../lib/Icons'; import { CustomIcon } from '../../lib/Icons';
import RocketChat from '../../lib/rocketchat'; import RocketChat from '../../lib/rocketchat';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { withTheme } from '../../theme'; import { useTheme } from '../../theme';
import { isAndroid, isTablet } from '../../utils/deviceInfo'; import { isAndroid, isTablet } from '../../utils/deviceInfo';
import sharedStyles from '../Styles'; import sharedStyles from '../Styles';
import { makeThreadName } from '../../utils/room'; import { makeThreadName } from '../../utils/room';
@ -37,10 +37,10 @@ const styles = StyleSheet.create({
interface IHeader { interface IHeader {
room: { prid?: string; t?: string }; room: { prid?: string; t?: string };
thread: { id?: string }; thread: { id?: string };
theme: string;
} }
const Header = React.memo(({ room, thread, theme }: IHeader) => { const Header = React.memo(({ room, thread }: IHeader) => {
const { theme } = useTheme();
let type; let type;
if (thread?.id) { if (thread?.id) {
type = 'thread'; type = 'thread';
@ -94,4 +94,4 @@ const Header = React.memo(({ room, thread, theme }: IHeader) => {
); );
}); });
export default withTheme(Header); export default Header;

8
app/views/ShareView/index.tsx
View File

@ -116,11 +116,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
if (!attachments.length && !readOnly) { if (!attachments.length && !readOnly) {
options.headerRight = () => ( options.headerRight = () => (
<HeaderButton.Container> <HeaderButton.Container>
<HeaderButton.Item <HeaderButton.Item title={I18n.t('Send')} onPress={this.send} />
title={I18n.t('Send')}
onPress={this.send}
buttonStyle={[styles.send, { color: themes[theme].previewTintColor }]}
/>
</HeaderButton.Container> </HeaderButton.Container>
); );
} }
@ -364,7 +360,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} /> <StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
{this.renderContent()} {this.renderContent()}
<Loading visible={loading} /> <Loading visible={loading} theme={theme} />
</SafeAreaView> </SafeAreaView>
); );
} }

4
app/views/SidebarView/SidebarItem.tsx
View File

@ -8,9 +8,9 @@ import styles from './styles';
interface SidebarItemProps { interface SidebarItemProps {
left: JSX.Element; left: JSX.Element;
right: JSX.Element; right?: JSX.Element;
text: string; text: string;
current: boolean; current?: boolean;
onPress(): void; onPress(): void;
testID: string; testID: string;
theme: string; theme: string;

36
app/views/SidebarView/index.tsx
View File

@ -45,7 +45,7 @@ interface ISidebarProps {
name: string; name: string;
roles: string[]; roles: string[];
}; };
theme: string; theme?: string;
loadingServer: boolean; loadingServer: boolean;
useRealName: boolean; useRealName: boolean;
allowStatusMessage: boolean; allowStatusMessage: boolean;
@ -177,12 +177,13 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator'; const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator';
return ( return (
<> <>
<Separator theme={theme} /> <Separator theme={theme!} />
<SidebarItem <SidebarItem
text={I18n.t('Admin_Panel')} text={I18n.t('Admin_Panel')}
left={<CustomIcon name='settings' size={20} color={themes[theme].titleText} />} left={<CustomIcon name='settings' size={20} color={themes[theme!].titleText} />}
onPress={() => this.sidebarNavigate(routeName)} onPress={() => this.sidebarNavigate(routeName)}
testID='sidebar-admin' testID='sidebar-admin'
theme={theme!}
current={this.currentItemKey === routeName} current={this.currentItemKey === routeName}
/> />
</> </>
@ -195,30 +196,34 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
<> <>
<SidebarItem <SidebarItem
text={I18n.t('Chats')} text={I18n.t('Chats')}
left={<CustomIcon name='message' size={20} color={themes[theme].titleText} />} left={<CustomIcon name='message' size={20} color={themes[theme!].titleText} />}
onPress={() => this.sidebarNavigate('ChatsStackNavigator')} onPress={() => this.sidebarNavigate('ChatsStackNavigator')}
testID='sidebar-chats' testID='sidebar-chats'
theme={theme!}
current={this.currentItemKey === 'ChatsStackNavigator'} current={this.currentItemKey === 'ChatsStackNavigator'}
/> />
<SidebarItem <SidebarItem
text={I18n.t('Profile')} text={I18n.t('Profile')}
left={<CustomIcon name='user' size={20} color={themes[theme].titleText} />} left={<CustomIcon name='user' size={20} color={themes[theme!].titleText} />}
onPress={() => this.sidebarNavigate('ProfileStackNavigator')} onPress={() => this.sidebarNavigate('ProfileStackNavigator')}
testID='sidebar-profile' testID='sidebar-profile'
theme={theme!}
current={this.currentItemKey === 'ProfileStackNavigator'} current={this.currentItemKey === 'ProfileStackNavigator'}
/> />
<SidebarItem <SidebarItem
text={I18n.t('Display')} text={I18n.t('Display')}
left={<CustomIcon name='sort' size={20} color={themes[theme].titleText} />} left={<CustomIcon name='sort' size={20} color={themes[theme!].titleText} />}
onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')} onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
testID='sidebar-display' testID='sidebar-display'
theme={theme!}
current={this.currentItemKey === 'DisplayPrefStackNavigator'} current={this.currentItemKey === 'DisplayPrefStackNavigator'}
/> />
<SidebarItem <SidebarItem
text={I18n.t('Settings')} text={I18n.t('Settings')}
left={<CustomIcon name='administration' size={20} color={themes[theme].titleText} />} left={<CustomIcon name='administration' size={20} color={themes[theme!].titleText} />}
onPress={() => this.sidebarNavigate('SettingsStackNavigator')} onPress={() => this.sidebarNavigate('SettingsStackNavigator')}
testID='sidebar-settings' testID='sidebar-settings'
theme={theme!}
current={this.currentItemKey === 'SettingsStackNavigator'} current={this.currentItemKey === 'SettingsStackNavigator'}
/> />
{this.renderAdmin()} {this.renderAdmin()}
@ -232,7 +237,8 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
<SidebarItem <SidebarItem
text={user.statusText || I18n.t('Edit_Status')} text={user.statusText || I18n.t('Edit_Status')}
left={<Status size={24} status={user?.status} />} left={<Status size={24} status={user?.status} />}
right={<CustomIcon name='edit' size={20} color={themes[theme].titleText} />} theme={theme!}
right={<CustomIcon name='edit' size={20} color={themes[theme!].titleText} />}
onPress={() => this.sidebarNavigate('StatusView')} onPress={() => this.sidebarNavigate('StatusView')}
testID='sidebar-custom-status' testID='sidebar-custom-status'
/> />
@ -246,12 +252,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
return null; return null;
} }
return ( return (
<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} vertical={isMasterDetail}> <SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}>
<ScrollView <ScrollView
style={[ style={[
styles.container, styles.container,
{ {
backgroundColor: isMasterDetail ? themes[theme].backgroundColor : themes[theme].focusedBackground backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground
} }
]} ]}
{...scrollPersistTaps}> {...scrollPersistTaps}>
@ -260,12 +266,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
<Avatar text={user.username} style={styles.avatar} size={30} /> <Avatar text={user.username} style={styles.avatar} size={30} />
<View style={styles.headerTextContainer}> <View style={styles.headerTextContainer}>
<View style={styles.headerUsername}> <View style={styles.headerUsername}>
<Text numberOfLines={1} style={[styles.username, { color: themes[theme].titleText }]}> <Text numberOfLines={1} style={[styles.username, { color: themes[theme!].titleText }]}>
{useRealName ? user.name : user.username} {useRealName ? user.name : user.username}
</Text> </Text>
</View> </View>
<Text <Text
style={[styles.currentServerText, { color: themes[theme].titleText }]} style={[styles.currentServerText, { color: themes[theme!].titleText }]}
numberOfLines={1} numberOfLines={1}
accessibilityLabel={`Connected to ${baseUrl}`}> accessibilityLabel={`Connected to ${baseUrl}`}>
{Site_Name} {Site_Name}
@ -274,14 +280,14 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<Separator theme={theme} /> <Separator theme={theme!} />
{allowStatusMessage ? this.renderCustomStatus() : null} {allowStatusMessage ? this.renderCustomStatus() : null}
{!isMasterDetail ? ( {!isMasterDetail ? (
<> <>
<Separator theme={theme} /> <Separator theme={theme!} />
{this.renderNavigation()} {this.renderNavigation()}
<Separator theme={theme} /> <Separator theme={theme!} />
</> </>
) : ( ) : (
<>{this.renderAdmin()}</> <>{this.renderAdmin()}</>

10
app/views/StatusView.tsx
View File

@ -55,9 +55,9 @@ const styles = StyleSheet.create({
}); });
interface IUser { interface IUser {
id: string; id?: string;
status: string; status?: string;
statusText: string; statusText?: string;
} }
interface IStatusViewState { interface IStatusViewState {
@ -70,7 +70,7 @@ interface IStatusViewProps {
user: IUser; user: IUser;
theme: string; theme: string;
isMasterDetail: boolean; isMasterDetail: boolean;
setUser: (user: Partial<IUser>) => void; setUser: (user: IUser) => void;
Accounts_AllowInvisibleStatusOption: boolean; Accounts_AllowInvisibleStatusOption: boolean;
} }
@ -144,7 +144,7 @@ class StatusView extends React.Component<IStatusViewProps, IStatusViewState> {
value={statusText} value={statusText}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
onChangeText={text => this.setState({ statusText: text })} onChangeText={text => this.setState({ statusText: text })}
left={<Status testID={`status-view-current-${user.status}`} style={styles.inputLeft} status={user.status} size={24} />} left={<Status testID={`status-view-current-${user.status}`} style={styles.inputLeft} status={user.status!} size={24} />}
inputStyle={styles.inputStyle} inputStyle={styles.inputStyle}
placeholder={I18n.t('What_are_you_doing_right_now')} placeholder={I18n.t('What_are_you_doing_right_now')}
testID='status-view-input' testID='status-view-input'

2
app/views/ThemeView.tsx
View File

@ -117,7 +117,7 @@ class ThemeView extends React.Component<IThemeViewProps> {
title={label} title={label}
onPress={() => this.onClick(item)} onPress={() => this.onClick(item)}
testID={`theme-view-${value}`} testID={`theme-view-${value}`}
right={this.isSelected(item) ? this.renderIcon : null} right={() => (this.isSelected(item) ? this.renderIcon() : null)}
/> />
<List.Separator /> <List.Separator />
</> </>

10
app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
View File

@ -24,16 +24,16 @@ const styles = StyleSheet.create({
interface IDropdownItem { interface IDropdownItem {
text: string; text: string;
iconName: string; iconName: string | null;
theme: string; theme?: string;
onPress: () => void; onPress: () => void;
} }
const DropdownItem = React.memo(({ theme, onPress, iconName, text }: IDropdownItem) => ( const DropdownItem = React.memo(({ theme, onPress, iconName, text }: IDropdownItem) => (
<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}> <Touch theme={theme!} onPress={onPress} style={{ backgroundColor: themes[theme!].backgroundColor }}>
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text> <Text style={[styles.text, { color: themes[theme!].auxiliaryText }]}>{text}</Text>
{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null} {iconName ? <CustomIcon name={iconName} size={22} color={themes[theme!].auxiliaryText} /> : null}
</View> </View>
</Touch> </Touch>
)); ));

5
app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.tsx
View File

@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
import { Filter } from '../filters';
import DropdownItem from './DropdownItem'; import DropdownItem from './DropdownItem';
interface IDropdownItemFilter { interface IDropdownItemFilter {
currentFilter: string; currentFilter: string;
value: string; value: Filter;
onPress: (value: string) => void; onPress: (value: Filter) => void;
} }
const DropdownItemFilter = ({ currentFilter, value, onPress }: IDropdownItemFilter): JSX.Element => ( const DropdownItemFilter = ({ currentFilter, value, onPress }: IDropdownItemFilter): JSX.Element => (

16
app/views/ThreadMessagesView/Dropdown/index.tsx
View File

@ -14,12 +14,12 @@ import DropdownItemHeader from './DropdownItemHeader';
const ANIMATION_DURATION = 200; const ANIMATION_DURATION = 200;
interface IDropdownProps { interface IDropdownProps {
isMasterDetail: boolean; isMasterDetail?: boolean;
theme: string; theme?: string;
insets: EdgeInsets; insets?: EdgeInsets;
currentFilter: Filter; currentFilter: Filter;
onClose: () => void; onClose: () => void;
onFilterSelected: (value: string) => void; onFilterSelected: (value: Filter) => void;
} }
class Dropdown extends React.Component<IDropdownProps> { class Dropdown extends React.Component<IDropdownProps> {
@ -59,7 +59,7 @@ class Dropdown extends React.Component<IDropdownProps> {
}); });
const backdropOpacity = this.animatedValue.interpolate({ const backdropOpacity = this.animatedValue.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity] outputRange: [0, themes[theme!].backdropOpacity]
}); });
return ( return (
<> <>
@ -68,7 +68,7 @@ class Dropdown extends React.Component<IDropdownProps> {
style={[ style={[
styles.backdrop, styles.backdrop,
{ {
backgroundColor: themes[theme].backdropColor, backgroundColor: themes[theme!].backdropColor,
opacity: backdropOpacity, opacity: backdropOpacity,
top: heightDestination top: heightDestination
} }
@ -80,8 +80,8 @@ class Dropdown extends React.Component<IDropdownProps> {
styles.dropdownContainer, styles.dropdownContainer,
{ {
transform: [{ translateY }], transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor, backgroundColor: themes[theme!].backgroundColor,
borderColor: themes[theme].separatorColor borderColor: themes[theme!].separatorColor
} }
]}> ]}>
<DropdownItemHeader currentFilter={currentFilter} onPress={this.close} /> <DropdownItemHeader currentFilter={currentFilter} onPress={this.close} />

12
app/views/ThreadMessagesView/Item.tsx
View File

@ -59,10 +59,10 @@ const styles = StyleSheet.create({
interface IItem { interface IItem {
item: TThreadModel; item: TThreadModel;
baseUrl: string; baseUrl: string;
theme: string; theme?: string;
useRealName: boolean; useRealName: boolean;
user: any; user: any;
badgeColor: string; badgeColor?: string;
onPress: (item: TThreadModel) => void; onPress: (item: TThreadModel) => void;
toggleFollowThread: (isFollowing: boolean, id: string) => void; toggleFollowThread: (isFollowing: boolean, id: string) => void;
} }
@ -78,15 +78,15 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
<Touchable <Touchable
onPress={() => onPress(item)} onPress={() => onPress(item)}
testID={`thread-messages-view-${item.msg}`} testID={`thread-messages-view-${item.msg}`}
style={{ backgroundColor: themes[theme].backgroundColor }}> style={{ backgroundColor: themes[theme!].backgroundColor }}>
<View style={styles.container}> <View style={styles.container}>
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} /> <Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} />
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.title, { color: themes[theme!].titleText }]} numberOfLines={1}>
{username} {username}
</Text> </Text>
<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text> <Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{time}</Text>
</View> </View>
<View style={styles.messageContainer}> <View style={styles.messageContainer}>
<Markdown <Markdown
@ -94,7 +94,7 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
msg={makeThreadName(item)} msg={makeThreadName(item)}
baseUrl={baseUrl} baseUrl={baseUrl}
username={username!} username={username!}
theme={theme} theme={theme!}
numberOfLines={2} numberOfLines={2}
style={[styles.markdown]} style={[styles.markdown]}
preview preview

2
app/views/ThreadMessagesView/index.tsx
View File

@ -284,7 +284,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
if (update && update.length) { if (update && update.length) {
update = update.map(m => buildMessage(m)); update = update.map(m => buildMessage(m));
// filter threads // filter threads
threadsToCreate = update.filter(i1 => allThreadsRecords.find((i2: { id: string }) => i1._id === i2.id)); threadsToCreate = update.filter(i1 => !allThreadsRecords.find((i2: { id: string }) => i1._id === i2.id));
threadsToUpdate = allThreadsRecords.filter((i1: { id: string }) => update.find(i2 => i1.id === i2._id)); threadsToUpdate = allThreadsRecords.filter((i1: { id: string }) => update.find(i2 => i1.id === i2._id));
threadsToCreate = threadsToCreate.map(thread => threadsToCreate = threadsToCreate.map(thread =>
threadsCollection.prepareCreate( threadsCollection.prepareCreate(

4
app/views/WorkspaceView/index.tsx
View File

@ -35,9 +35,9 @@ interface IWorkSpaceProp {
} }
class WorkspaceView extends React.Component<IWorkSpaceProp, any> { class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
static navigationOptions: StackNavigationOptions = { static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Your_workspace') title: I18n.t('Your_workspace')
}; });
get showRegistrationButton() { get showRegistrationButton() {
const { registrationForm, inviteLinkToken, Accounts_iframe_enabled } = this.props; const { registrationForm, inviteLinkToken, Accounts_iframe_enabled } = this.props;