diff --git a/app/containers/LoginServices.js b/app/containers/LoginServices.tsx similarity index 88% rename from app/containers/LoginServices.js rename to app/containers/LoginServices.tsx index 11d5dd575..8c6695c46 100644 --- a/app/containers/LoginServices.js +++ b/app/containers/LoginServices.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { - View, StyleSheet, Text, Animated, Easing, Linking -} from 'react-native'; -import PropTypes from 'prop-types'; +import { View, StyleSheet, Text, Animated, Easing, Linking } from 'react-native'; import { connect } from 'react-redux'; import { Base64 } from 'js-base64'; import * as AppleAuthentication from 'expo-apple-authentication'; @@ -60,21 +57,41 @@ const styles = StyleSheet.create({ } }); -class LoginServices extends React.PureComponent { - static propTypes = { - navigation: PropTypes.object, - server: PropTypes.string, - services: PropTypes.object, - Gitlab_URL: PropTypes.string, - CAS_enabled: PropTypes.bool, - CAS_login_url: PropTypes.string, - separator: PropTypes.bool, - theme: PropTypes.string - } +type TOpenOAuth = { + url?: string; + ssoToken?: string; + authType?: string; +} - static defaultProps = { - separator: true - } +type TService = { + name: string; + service: string; + authType: string; + buttonColor: string; + buttonLabelColor: string; +}; + +interface ILoginServicesProps { + navigation: any; + server: string; + services: { + facebook: {clientId: string;}; + github: {clientId: string;}; + gitlab: {clientId: string;}; + google: {clientId: string;}; + linkedin: {clientId: string;}; + 'meteor-developer': {clientId: string;}; + wordpress: {clientId: string; serverURL: string;}; + }; + Gitlab_URL: string; + CAS_enabled: boolean; + CAS_login_url: string; + separator: boolean; + theme: string; +} + +class LoginServices extends React.PureComponent { + private _animation: any; state = { collapsed: true, @@ -173,7 +190,7 @@ class LoginServices extends React.PureComponent { this.openOAuth({ url: `${ endpoint }${ params }` }); } - onPressCustomOAuth = (loginService) => { + onPressCustomOAuth = (loginService: any) => { logEvent(events.ENTER_WITH_CUSTOM_OAUTH); const { server } = this.props; const { @@ -188,7 +205,7 @@ class LoginServices extends React.PureComponent { this.openOAuth({ url }); } - onPressSaml = (loginService) => { + onPressSaml = (loginService: any) => { logEvent(events.ENTER_WITH_SAML); const { server } = this.props; const { clientConfig } = loginService; @@ -224,7 +241,7 @@ class LoginServices extends React.PureComponent { getOAuthState = (loginStyle = LOGIN_STYPE_POPUP) => { const credentialToken = random(43); - let obj = { loginStyle, credentialToken, isCordova: true }; + let obj: any = { loginStyle, credentialToken, isCordova: true }; if (loginStyle === LOGIN_STYPE_REDIRECT) { obj = { ...obj, @@ -234,19 +251,21 @@ class LoginServices extends React.PureComponent { return Base64.encodeURI(JSON.stringify(obj)); } - openOAuth = ({ url, ssoToken, authType = 'oauth' }) => { + openOAuth = ({ url, ssoToken, authType = 'oauth' }: TOpenOAuth) => { const { navigation } = this.props; navigation.navigate('AuthenticationWebView', { url, authType, ssoToken }); } - transitionServicesTo = (height) => { + transitionServicesTo = (height: number) => { const { servicesHeight } = this.state; if (this._animation) { this._animation.stop(); } + // @ts-ignore this._animation = Animated.timing(servicesHeight, { toValue: height, duration: 300, + // @ts-ignore easing: Easing.easeOutCubic }).start(); } @@ -260,11 +279,11 @@ class LoginServices extends React.PureComponent { } else { this.transitionServicesTo(SERVICES_COLLAPSED_HEIGHT); } - this.setState(prevState => ({ collapsed: !prevState.collapsed })); + this.setState((prevState: any) => ({ collapsed: !prevState.collapsed })); } - getSocialOauthProvider = (name) => { - const oauthProviders = { + getSocialOauthProvider = (name: string) => { + const oauthProviders: any = { facebook: this.onPressFacebook, github: this.onPressGithub, gitlab: this.onPressGitlab, @@ -303,7 +322,7 @@ class LoginServices extends React.PureComponent { return null; } - renderItem = (service) => { + renderItem = (service: TService) => { const { CAS_enabled, theme } = this.props; let { name } = service; name = name === 'meteor-developer' ? 'meteor' : name; @@ -380,7 +399,7 @@ class LoginServices extends React.PureComponent { return ( <> - {Object.values(services).map(service => this.renderItem(service))} + {Object.values(services).map((service: any) => this.renderItem(service))} {this.renderServicesSeparator()} @@ -388,14 +407,14 @@ class LoginServices extends React.PureComponent { } return ( <> - {Object.values(services).map(service => this.renderItem(service))} + {Object.values(services).map((service: any) => this.renderItem(service))} {this.renderServicesSeparator()} ); } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ server: state.server.server, Gitlab_URL: state.settings.API_Gitlab_URL, CAS_enabled: state.settings.CAS_enabled, diff --git a/app/containers/MessageErrorActions.js b/app/containers/MessageErrorActions.tsx similarity index 82% rename from app/containers/MessageErrorActions.js rename to app/containers/MessageErrorActions.tsx index d11a693d5..218d36682 100644 --- a/app/containers/MessageErrorActions.js +++ b/app/containers/MessageErrorActions.tsx @@ -1,5 +1,4 @@ import { useImperativeHandle, forwardRef } from 'react'; -import PropTypes from 'prop-types'; import RocketChat from '../lib/rocketchat'; import database from '../lib/database'; @@ -8,17 +7,17 @@ import { useActionSheet } from './ActionSheet'; import I18n from '../i18n'; import log from '../utils/log'; -const MessageErrorActions = forwardRef(({ tmid }, ref) => { - const { showActionSheet } = useActionSheet(); +const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => { + const { showActionSheet }: any = useActionSheet(); - const handleResend = protectedFunction(async(message) => { + const handleResend = protectedFunction(async(message: any) => { await RocketChat.resendMessage(message, tmid); }); - const handleDelete = async(message) => { + const handleDelete = async(message: any) => { try { const db = database.active; - const deleteBatch = []; + const deleteBatch: any = []; const msgCollection = db.get('messages'); const threadCollection = db.get('threads'); @@ -39,7 +38,7 @@ const MessageErrorActions = forwardRef(({ tmid }, ref) => { const msg = await msgCollection.find(tmid); if (msg.tcount <= 1) { deleteBatch.push( - msg.prepareUpdate((m) => { + msg.prepareUpdate((m: any) => { m.tcount = null; m.tlm = null; }) @@ -54,7 +53,7 @@ const MessageErrorActions = forwardRef(({ tmid }, ref) => { } } else { deleteBatch.push( - msg.prepareUpdate((m) => { + msg.prepareUpdate((m: any) => { m.tcount -= 1; }) ); @@ -71,7 +70,7 @@ const MessageErrorActions = forwardRef(({ tmid }, ref) => { } }; - const showMessageErrorActions = (message) => { + const showMessageErrorActions = (message: any) => { showActionSheet({ options: [ { @@ -94,8 +93,5 @@ const MessageErrorActions = forwardRef(({ tmid }, ref) => { showMessageErrorActions })); }); -MessageErrorActions.propTypes = { - tmid: PropTypes.string -}; export default MessageErrorActions; diff --git a/app/containers/ReactionsModal.js b/app/containers/ReactionsModal.tsx similarity index 77% rename from app/containers/ReactionsModal.js rename to app/containers/ReactionsModal.tsx index f4f1889d9..d8c4e90da 100644 --- a/app/containers/ReactionsModal.js +++ b/app/containers/ReactionsModal.tsx @@ -62,12 +62,35 @@ const styles = StyleSheet.create({ const standardEmojiStyle = { fontSize: 20 }; const customEmojiStyle = { width: 20, height: 20 }; -const Item = React.memo(({ - item, user, baseUrl, getCustomEmoji, theme -}) => { +type TItem = { + item: { + usernames: any; + emoji: string; + }; + user?: {username: any;}; + baseUrl?: string; + getCustomEmoji?: Function; + theme?: string; +}; + +type TModalContent = { + message: { + reactions: any + }; + onClose: Function; + theme: string; +}; + +interface IReactionsModal { + isVisible: boolean; + onClose(): void; + theme: string; +} + +const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: TItem) => { const count = item.usernames.length; let usernames = item.usernames.slice(0, 3) - .map(username => (username === user.username ? I18n.t('you') : username)).join(', '); + .map((username: any) => (username === user?.username ? I18n.t('you') : username)).join(', '); if (count > 3) { usernames = `${ usernames } ${ I18n.t('and_more') } ${ count - 3 }`; } else { @@ -80,23 +103,21 @@ const Item = React.memo(({ content={item.emoji} standardEmojiStyle={standardEmojiStyle} customEmojiStyle={customEmojiStyle} - baseUrl={baseUrl} - getCustomEmoji={getCustomEmoji} + baseUrl={baseUrl!} + getCustomEmoji={getCustomEmoji!} /> - + {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} - { usernames } + { usernames } ); }); -const ModalContent = React.memo(({ - message, onClose, ...props -}) => { +const ModalContent = React.memo(({ message, onClose, ...props }: TModalContent) => { if (message && message.reactions) { return ( @@ -122,9 +143,7 @@ const ModalContent = React.memo(({ return null; }); -const ReactionsModal = React.memo(({ - isVisible, onClose, theme, ...props -}) => ( +const ReactionsModal = React.memo(({ isVisible, onClose, theme, ...props }: IReactionsModal) => ( + {/*@ts-ignore*/} ), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible && prevProps.theme === nextProps.theme); -ReactionsModal.propTypes = { - isVisible: PropTypes.bool, - onClose: PropTypes.func, - theme: PropTypes.string -}; ReactionsModal.displayName = 'ReactionsModal'; - -ModalContent.propTypes = { - message: PropTypes.object, - onClose: PropTypes.func, - theme: PropTypes.string -}; ModalContent.displayName = 'ReactionsModalContent'; - -Item.propTypes = { - item: PropTypes.object, - user: PropTypes.object, - baseUrl: PropTypes.string, - getCustomEmoji: PropTypes.func, - theme: PropTypes.string -}; Item.displayName = 'ReactionsModalItem'; export default withTheme(ReactionsModal); diff --git a/app/containers/SearchBox.js b/app/containers/SearchBox.tsx similarity index 86% rename from app/containers/SearchBox.js rename to app/containers/SearchBox.tsx index 75ed7f080..191a01866 100644 --- a/app/containers/SearchBox.js +++ b/app/containers/SearchBox.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; -import PropTypes from 'prop-types'; import Touchable from 'react-native-platform-touchable'; import TextInput from '../presentation/TextInput'; @@ -45,7 +44,17 @@ const styles = StyleSheet.create({ } }); -const CancelButton = (onCancelPress, theme) => ( +interface ISearchBox { + onChangeText: Function; + onSubmitEditing: Function; + hasCancel: boolean; + onCancelPress: Function; + theme: string; + inputRef: any; + testID?: string; +} + +const CancelButton = (onCancelPress: Function, theme: string) => ( {I18n.t('Cancel')} @@ -53,7 +62,7 @@ const CancelButton = (onCancelPress, theme) => ( const SearchBox = ({ onChangeText, onSubmitEditing, testID, hasCancel, onCancelPress, inputRef, theme, ...props -}) => ( +}: ISearchBox) => ( ); -SearchBox.propTypes = { - onChangeText: PropTypes.func.isRequired, - onSubmitEditing: PropTypes.func, - hasCancel: PropTypes.bool, - onCancelPress: PropTypes.func, - theme: PropTypes.string, - inputRef: PropTypes.func, - testID: PropTypes.string -}; - export default withTheme(SearchBox);