From f648a39a55b33a68416df9a970a9f3c47bfeb3a1 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Wed, 6 Oct 2021 15:28:43 -0300 Subject: [PATCH 1/9] Chore: Migrate NewServerView to Typescript --- app/actions/server.js | 2 +- app/containers/FormContainer.tsx | 6 +- .../NewServerView/{index.js => index.tsx} | 83 ++++++++++--------- package.json | 1 + yarn.lock | 5 ++ 5 files changed, 55 insertions(+), 42 deletions(-) rename app/views/NewServerView/{index.js => index.tsx} (82%) diff --git a/app/actions/server.js b/app/actions/server.js index fea2394500b..fb2b3a607aa 100644 --- a/app/actions/server.js +++ b/app/actions/server.js @@ -24,7 +24,7 @@ export function selectServerFailure() { }; } -export function serverRequest(server, username = null, fromServerHistory = false) { +export function serverRequest(server, username, fromServerHistory = false) { return { type: SERVER.REQUEST, server, diff --git a/app/containers/FormContainer.tsx b/app/containers/FormContainer.tsx index 46522508be8..3a784b38c4c 100644 --- a/app/containers/FormContainer.tsx +++ b/app/containers/FormContainer.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ScrollView, StyleSheet, View } from 'react-native'; +import { ScrollView, ScrollViewProps, StyleSheet, View } from 'react-native'; import { themes } from '../constants/colors'; import sharedStyles from '../views/Styles'; @@ -10,10 +10,10 @@ import AppVersion from './AppVersion'; import { isTablet } from '../utils/deviceInfo'; import SafeAreaView from './SafeAreaView'; -interface IFormContainer { +interface IFormContainer extends ScrollViewProps { theme: string; testID: string; - children: JSX.Element; + children: React.ReactNode; } const styles = StyleSheet.create({ diff --git a/app/views/NewServerView/index.js b/app/views/NewServerView/index.tsx similarity index 82% rename from app/views/NewServerView/index.js rename to app/views/NewServerView/index.tsx index 8eaba349ee9..d905a1e9844 100644 --- a/app/views/NewServerView/index.js +++ b/app/views/NewServerView/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Text, Keyboard, StyleSheet, View, BackHandler, Image } from 'react-native'; import { connect } from 'react-redux'; import { Base64 } from 'js-base64'; @@ -7,6 +6,8 @@ import parse from 'url-parse'; import { Q } from '@nozbe/watermelondb'; import { TouchableOpacity } from 'react-native-gesture-handler'; import Orientation from 'react-native-orientation-locker'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { Dispatch } from 'redux'; import UserPreferences from '../../lib/userPreferences'; import EventEmitter from '../../utils/events'; @@ -66,19 +67,21 @@ const styles = StyleSheet.create({ } }); -class NewServerView extends React.Component { - static propTypes = { - navigation: PropTypes.object, - theme: PropTypes.string, - connecting: PropTypes.bool.isRequired, - connectServer: PropTypes.func.isRequired, - selectServer: PropTypes.func.isRequired, - previousServer: PropTypes.string, - inviteLinksClear: PropTypes.func, - serverFinishAdd: PropTypes.func - }; +interface INewServerView { + navigation: StackNavigationProp; + theme: string; + connecting: boolean; + connectServer(server: string, username?: string, fromServerHistory?: boolean): void; + selectServer(server: string): void; + previousServer: string; + inviteLinksClear(): void; + serverFinishAdd(): void; + width: number; + height: number; +} - constructor(props) { +class NewServerView extends React.Component { + constructor(props: INewServerView) { super(props); if (!isTablet) { Orientation.lockToPortrait(); @@ -131,12 +134,12 @@ class NewServerView extends React.Component { return false; }; - onChangeText = text => { + onChangeText = (text: string) => { this.setState({ text }); this.queryServerHistory(text); }; - queryServerHistory = async text => { + queryServerHistory = async (text?: string) => { const db = database.servers; try { const serversHistoryCollection = db.get('servers_history'); @@ -158,7 +161,7 @@ class NewServerView extends React.Component { selectServer(previousServer); }; - handleNewServerEvent = event => { + handleNewServerEvent = (event: { server: string }) => { let { server } = event; if (!server) { return; @@ -169,13 +172,11 @@ class NewServerView extends React.Component { connectServer(server); }; - onPressServerHistory = serverHistory => { - this.setState({ text: serverHistory?.url }, () => - this.submit({ fromServerHistory: true, username: serverHistory?.username }) - ); + onPressServerHistory = (serverHistory: { url?: string; username?: string }) => { + this.setState({ text: serverHistory?.url }, () => this.submit(true, serverHistory?.username)); }; - submit = async ({ fromServerHistory = false, username }) => { + submit = async (fromServerHistory?: boolean, username?: string) => { logEvent(events.NS_CONNECT_TO_WORKSPACE); const { text, certificate } = this.state; const { connectServer } = this.props; @@ -207,7 +208,7 @@ class NewServerView extends React.Component { connectServer('https://open.rocket.chat'); }; - basicAuth = async (server, text) => { + basicAuth = async (server: string, text: string) => { try { const parsedUrl = parse(text, true); if (parsedUrl.auth.length) { @@ -222,14 +223,14 @@ class NewServerView extends React.Component { chooseCertificate = async () => { try { - const certificate = await SSLPinning.pickCertificate(); + const certificate = await SSLPinning?.pickCertificate(); this.setState({ certificate }); } catch { // Do nothing } }; - completeUrl = url => { + completeUrl = (url: string) => { const parsedUrl = parse(url, true); if (parsedUrl.auth.length) { url = parsedUrl.origin; @@ -252,14 +253,17 @@ class NewServerView extends React.Component { return url.replace(/\/+$/, '').replace(/\\/g, '/'); }; - uriToPath = uri => uri.replace('file://', ''); + uriToPath = (uri: string) => uri.replace('file://', ''); - saveCertificate = certificate => { + // TODO: Check if we need this function + saveCertificate = (certificate: any) => { animateNextTransition(); this.setState({ certificate }); }; handleRemove = () => { + // TODO: Remove ts-ignore when migrate the showConfirmationAlert + // @ts-ignore showConfirmationAlert({ message: I18n.t('You_will_unset_a_certificate_for_this_server'), confirmationText: I18n.t('Remove'), @@ -267,14 +271,15 @@ class NewServerView extends React.Component { }); }; - deleteServerHistory = async item => { + // TODO: Refactor when migrate the WatermelonDB + deleteServerHistory = async (item: any) => { const { serversHistory } = this.state; - const db = database.servers; + const db: any = database.servers; try { await db.action(async () => { await item.destroyPermanently(); }); - this.setState({ serversHistory: serversHistory.filter(server => server.id !== item.id) }); + this.setState({ serversHistory: serversHistory.filter((server: any) => server.id !== item.id) }); } catch { // Nothing } @@ -294,14 +299,15 @@ class NewServerView extends React.Component { {certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')} - + {certificate ?? I18n.t('Apply_Your_Certificate')} @@ -335,7 +341,7 @@ class NewServerView extends React.Component { styles.title, { color: themes[theme].titleText, - fontSize: moderateScale(22, null, width), + fontSize: moderateScale(22, undefined, width), marginBottom: verticalScale(8, height) } ]}> @@ -346,7 +352,7 @@ class NewServerView extends React.Component { styles.subtitle, { color: themes[theme].controlText, - fontSize: moderateScale(16, null, width), + fontSize: moderateScale(16, undefined, width), marginBottom: verticalScale(30, height) } ]}> @@ -377,7 +383,7 @@ class NewServerView extends React.Component { styles.description, { color: themes[theme].auxiliaryText, - fontSize: moderateScale(14, null, width), + fontSize: moderateScale(14, undefined, width), marginBottom: verticalScale(16, height) } ]}> @@ -400,14 +406,15 @@ class NewServerView extends React.Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ connecting: state.server.connecting, previousServer: state.server.previousServer }); -const mapDispatchToProps = dispatch => ({ - connectServer: (...params) => dispatch(serverRequest(...params)), - selectServer: server => dispatch(selectServerRequest(server)), +const mapDispatchToProps = (dispatch: Dispatch) => ({ + connectServer: (server: string, username?: string, fromServerHistory?: boolean) => + dispatch(serverRequest(server, username, fromServerHistory)), + selectServer: (server: string) => dispatch(selectServerRequest(server)), inviteLinksClear: () => dispatch(inviteLinksClearAction()), serverFinishAdd: () => dispatch(serverFinishAddAction()) }); diff --git a/package.json b/package.json index 15eea8cfe6f..e60768463d5 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@rocket.chat/react-native-fast-image": "^8.2.0", "@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile", "@rocket.chat/ui-kit": "0.13.0", + "@types/url-parse": "^1.4.4", "bytebuffer": "^5.0.1", "color2k": "1.2.4", "commonmark": "git+https://github.com/RocketChat/commonmark.js.git", diff --git a/yarn.lock b/yarn.lock index 011a1421062..2f0f5a68d6a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3984,6 +3984,11 @@ dependencies: source-map "^0.6.1" +"@types/url-parse@^1.4.4": + version "1.4.4" + resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.4.tgz#ebeb0ec8b581318739cf73e9f9b186f610764255" + integrity sha512-KtQLad12+4T/NfSxpoDhmr22+fig3T7/08QCgmutYA6QSznSRmEtuL95GrhVV40/0otTEdFc+etRcCTqhh1q5Q== + "@types/webpack-env@^1.15.0": version "1.15.2" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.2.tgz#927997342bb9f4a5185a86e6579a0a18afc33b0a" From fa5ff1ec795f9c5fcd4a77b211e773a6c66f7539 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 8 Oct 2021 19:23:34 -0300 Subject: [PATCH 2/9] fix one alert lgtm --- app/views/NewServerView/index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index d905a1e9844..08916b3d0e6 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -80,7 +80,14 @@ interface INewServerView { height: number; } -class NewServerView extends React.Component { +interface IState { + text: string | undefined; + connectingOpen: boolean; + certificate: any; + serversHistory: any[]; +} + +class NewServerView extends React.Component { constructor(props: INewServerView) { super(props); if (!isTablet) { @@ -273,13 +280,14 @@ class NewServerView extends React.Component { // TODO: Refactor when migrate the WatermelonDB deleteServerHistory = async (item: any) => { - const { serversHistory } = this.state; const db: any = database.servers; try { await db.action(async () => { await item.destroyPermanently(); }); - this.setState({ serversHistory: serversHistory.filter((server: any) => server.id !== item.id) }); + this.setState((prevstate: IState) => ({ + serversHistory: prevstate.serversHistory.filter((server: any) => server.id !== item.id) + })); } catch { // Nothing } From a13ff0a87b2dd000fb1c02d03cccf7644fe8611e Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 8 Oct 2021 19:44:08 -0300 Subject: [PATCH 3/9] Item.tsx --- .../ServerInput/{Item.js => Item.tsx} | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) rename app/views/NewServerView/ServerInput/{Item.js => Item.tsx} (79%) diff --git a/app/views/NewServerView/ServerInput/Item.js b/app/views/NewServerView/ServerInput/Item.tsx similarity index 79% rename from app/views/NewServerView/ServerInput/Item.js rename to app/views/NewServerView/ServerInput/Item.tsx index 59ae77f07ca..65422305830 100644 --- a/app/views/NewServerView/ServerInput/Item.js +++ b/app/views/NewServerView/ServerInput/Item.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; -import PropTypes from 'prop-types'; import { BorderlessButton } from 'react-native-gesture-handler'; import { themes } from '../../../constants/colors'; @@ -27,13 +26,24 @@ const styles = StyleSheet.create({ } }); -const Item = ({ item, theme, onPress, onDelete }) => ( +type item = { + url: string; + username: string; +}; +interface IItem { + item: item; + theme: string; + onPress(url: string): void; + onDelete(item: item): void; +} + +const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => ( onPress(item.url)} theme={theme} testID={`server-history-${item.url}`}> {item.url} - + {item.username} @@ -43,11 +53,4 @@ const Item = ({ item, theme, onPress, onDelete }) => ( ); -Item.propTypes = { - item: PropTypes.object, - theme: PropTypes.string, - onPress: PropTypes.func, - onDelete: PropTypes.func -}; - export default Item; From 0511aab5d99818872c33ac2ede7311232520df71 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 8 Oct 2021 20:33:55 -0300 Subject: [PATCH 4/9] export interface and try to rewrite write instead action --- app/containers/TextInput.tsx | 30 ++++++++--------- app/views/NewServerView/ServerInput/Item.tsx | 9 ++---- .../ServerInput/{index.js => index.tsx} | 32 ++++++++++++------- app/views/NewServerView/index.tsx | 25 +++++++++------ 4 files changed, 52 insertions(+), 44 deletions(-) rename app/views/NewServerView/ServerInput/{index.js => index.tsx} (81%) diff --git a/app/containers/TextInput.tsx b/app/containers/TextInput.tsx index f9c2236a8e9..897e4b9539b 100644 --- a/app/containers/TextInput.tsx +++ b/app/containers/TextInput.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, TextInputProps, View } from 'react-native'; import Touchable from 'react-native-platform-touchable'; import sharedStyles from '../views/Styles'; @@ -50,23 +50,21 @@ const styles = StyleSheet.create({ } }); -interface IRCTextInputProps { +interface IRCTextInputProps extends TextInputProps { label: string; - error: { + error?: { error: any; reason: any; }; - loading: boolean; - secureTextEntry: boolean; - containerStyle: any; - inputStyle: object; - inputRef: any; - testID: string; - iconLeft: string; - iconRight: string; - placeholder: string; - left: JSX.Element; - onIconRightPress(): void; + loading?: boolean; + containerStyle?: any; + inputStyle?: object; + inputRef?: any; + testID?: string; + iconLeft?: string; + iconRight?: string; + left?: JSX.Element; + onIconRightPress?(): void; theme: string; } @@ -152,7 +150,7 @@ export default class RCTextInput extends React.PureComponent + style={[styles.label, { color: themes[theme].titleText }, error?.error && { color: dangerColor }]}> {label} ) : null} @@ -168,7 +166,7 @@ export default class RCTextInput extends React.PureComponent ( diff --git a/app/views/NewServerView/ServerInput/index.js b/app/views/NewServerView/ServerInput/index.tsx similarity index 81% rename from app/views/NewServerView/ServerInput/index.js rename to app/views/NewServerView/ServerInput/index.tsx index ef80c468503..c3399b73037 100644 --- a/app/views/NewServerView/ServerInput/index.js +++ b/app/views/NewServerView/ServerInput/index.tsx @@ -1,12 +1,12 @@ import React, { useState } from 'react'; import { FlatList, StyleSheet, View } from 'react-native'; -import PropTypes from 'prop-types'; import TextInput from '../../../containers/TextInput'; import * as List from '../../../containers/List'; import { themes } from '../../../constants/colors'; import I18n from '../../../i18n'; import Item from './Item'; +import { IServer } from '../index'; const styles = StyleSheet.create({ container: { @@ -28,7 +28,25 @@ const styles = StyleSheet.create({ } }); -const ServerInput = ({ text, theme, serversHistory, onChangeText, onSubmit, onDelete, onPressServerHistory }) => { +interface IServerInput { + text: string; + theme: string; + serversHistory: any[]; + onChangeText(text: string): void; + onSubmit(): void; + onDelete(item: IServer): void; + onPressServerHistory(serverHistory: IServer): void; +} + +const ServerInput = ({ + text, + theme, + serversHistory, + onChangeText, + onSubmit, + onDelete, + onPressServerHistory +}: IServerInput): JSX.Element => { const [focused, setFocused] = useState(false); return ( @@ -68,14 +86,4 @@ const ServerInput = ({ text, theme, serversHistory, onChangeText, onSubmit, onDe ); }; -ServerInput.propTypes = { - text: PropTypes.string, - theme: PropTypes.string, - serversHistory: PropTypes.array, - onChangeText: PropTypes.func, - onSubmit: PropTypes.func, - onDelete: PropTypes.func, - onPressServerHistory: PropTypes.func -}; - export default ServerInput; diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index 08916b3d0e6..a53f537caa2 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -8,6 +8,7 @@ import { TouchableOpacity } from 'react-native-gesture-handler'; import Orientation from 'react-native-orientation-locker'; import { StackNavigationProp } from '@react-navigation/stack'; import { Dispatch } from 'redux'; +import Model from '@nozbe/watermelondb/Model'; import UserPreferences from '../../lib/userPreferences'; import EventEmitter from '../../utils/events'; @@ -67,6 +68,10 @@ const styles = StyleSheet.create({ } }); +export interface IServer extends Model { + url: string; + username: string; +} interface INewServerView { navigation: StackNavigationProp; theme: string; @@ -81,10 +86,10 @@ interface INewServerView { } interface IState { - text: string | undefined; + text: string; connectingOpen: boolean; certificate: any; - serversHistory: any[]; + serversHistory: IServer[]; } class NewServerView extends React.Component { @@ -155,7 +160,7 @@ class NewServerView extends React.Component { if (text) { whereClause = [...whereClause, Q.where('url', Q.like(`%${likeString}%`))]; } - const serversHistory = await serversHistoryCollection.query(...whereClause).fetch(); + const serversHistory = (await serversHistoryCollection.query(...whereClause).fetch()) as IServer[]; this.setState({ serversHistory }); } catch { // Do nothing @@ -179,8 +184,8 @@ class NewServerView extends React.Component { connectServer(server); }; - onPressServerHistory = (serverHistory: { url?: string; username?: string }) => { - this.setState({ text: serverHistory?.url }, () => this.submit(true, serverHistory?.username)); + onPressServerHistory = (serverHistory: IServer) => { + this.setState({ text: serverHistory.url }, () => this.submit(true, serverHistory?.username)); }; submit = async (fromServerHistory?: boolean, username?: string) => { @@ -278,15 +283,15 @@ class NewServerView extends React.Component { }); }; - // TODO: Refactor when migrate the WatermelonDB - deleteServerHistory = async (item: any) => { - const db: any = database.servers; + deleteServerHistory = async (item: IServer) => { + const db = database.servers; try { - await db.action(async () => { + await db.write(async () => { + // TODO: Check if is write or action? https://nozbe.github.io/WatermelonDB/Writers.html?highlight=action#delete-action await item.destroyPermanently(); }); this.setState((prevstate: IState) => ({ - serversHistory: prevstate.serversHistory.filter((server: any) => server.id !== item.id) + serversHistory: prevstate.serversHistory.filter((server: IServer) => server.id !== item.id) })); } catch { // Nothing From e5a60d308d2936776b75d36460d0f2eb29c0130f Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 8 Oct 2021 20:57:19 -0300 Subject: [PATCH 5/9] minor tweak --- app/containers/TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/TextInput.tsx b/app/containers/TextInput.tsx index 897e4b9539b..42f31b5ab02 100644 --- a/app/containers/TextInput.tsx +++ b/app/containers/TextInput.tsx @@ -51,7 +51,7 @@ const styles = StyleSheet.create({ }); interface IRCTextInputProps extends TextInputProps { - label: string; + label?: string; error?: { error: any; reason: any; From e5ed7c62c18ef434729d241b7ace070c6c8276c4 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 11 Oct 2021 11:37:15 -0300 Subject: [PATCH 6/9] minor tweak --- app/views/NewServerView/index.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index a53f537caa2..4cc2d2e93b4 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -21,7 +21,6 @@ import FormContainer, { FormContainerInner } from '../../containers/FormContaine import I18n from '../../i18n'; import { themes } from '../../constants/colors'; import { events, logEvent } from '../../utils/log'; -import { animateNextTransition } from '../../utils/layoutAnimation'; import { withTheme } from '../../theme'; import { BASIC_AUTH_KEY, setBasicAuth } from '../../utils/fetch'; import * as HeaderButton from '../../containers/HeaderButton'; @@ -267,12 +266,6 @@ class NewServerView extends React.Component { uriToPath = (uri: string) => uri.replace('file://', ''); - // TODO: Check if we need this function - saveCertificate = (certificate: any) => { - animateNextTransition(); - this.setState({ certificate }); - }; - handleRemove = () => { // TODO: Remove ts-ignore when migrate the showConfirmationAlert // @ts-ignore @@ -287,7 +280,6 @@ class NewServerView extends React.Component { const db = database.servers; try { await db.write(async () => { - // TODO: Check if is write or action? https://nozbe.github.io/WatermelonDB/Writers.html?highlight=action#delete-action await item.destroyPermanently(); }); this.setState((prevstate: IState) => ({ From 185e69d4714c7dd28ad906f7a931710a0d6f9167 Mon Sep 17 00:00:00 2001 From: AlexAlexandre Date: Mon, 11 Oct 2021 16:34:08 -0300 Subject: [PATCH 7/9] refactor: change the type of username to connectServer --- app/actions/server.js | 2 +- app/views/NewServerView/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/actions/server.js b/app/actions/server.js index fb2b3a607aa..fea2394500b 100644 --- a/app/actions/server.js +++ b/app/actions/server.js @@ -24,7 +24,7 @@ export function selectServerFailure() { }; } -export function serverRequest(server, username, fromServerHistory = false) { +export function serverRequest(server, username = null, fromServerHistory = false) { return { type: SERVER.REQUEST, server, diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index 4cc2d2e93b4..df348515a71 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -417,7 +417,7 @@ const mapStateToProps = (state: any) => ({ }); const mapDispatchToProps = (dispatch: Dispatch) => ({ - connectServer: (server: string, username?: string, fromServerHistory?: boolean) => + connectServer: (server: string, username: string & null, fromServerHistory?: boolean) => dispatch(serverRequest(server, username, fromServerHistory)), selectServer: (server: string) => dispatch(selectServerRequest(server)), inviteLinksClear: () => dispatch(inviteLinksClearAction()), From 125c343fb821b507a139089bb12aa72086ab5132 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Thu, 14 Oct 2021 16:20:10 -0300 Subject: [PATCH 8/9] refactor scaling --- app/utils/scaling.js | 11 ----------- app/utils/scaling.ts | 16 ++++++++++++++++ app/views/NewServerView/index.tsx | 28 ++++++++++++++-------------- 3 files changed, 30 insertions(+), 25 deletions(-) delete mode 100644 app/utils/scaling.js create mode 100644 app/utils/scaling.ts diff --git a/app/utils/scaling.js b/app/utils/scaling.js deleted file mode 100644 index 7cf33f1fc4a..00000000000 --- a/app/utils/scaling.js +++ /dev/null @@ -1,11 +0,0 @@ -import { isTablet } from './deviceInfo'; - -const guidelineBaseWidth = isTablet ? 600 : 375; -const guidelineBaseHeight = isTablet ? 800 : 667; - -// TODO: we need to refactor this -const scale = (size, width) => (width / guidelineBaseWidth) * size; -const verticalScale = (size, height) => (height / guidelineBaseHeight) * size; -const moderateScale = (size, factor = 0.5, width) => size + (scale(size, width) - size) * factor; - -export { scale, verticalScale, moderateScale }; diff --git a/app/utils/scaling.ts b/app/utils/scaling.ts new file mode 100644 index 00000000000..45d248d3720 --- /dev/null +++ b/app/utils/scaling.ts @@ -0,0 +1,16 @@ +import { isTablet } from './deviceInfo'; + +const guidelineBaseWidth = isTablet ? 600 : 375; +const guidelineBaseHeight = isTablet ? 800 : 667; + +function scale({ size, width }: { size: number; width: number }): number { + return (width / guidelineBaseWidth) * size; +} +function verticalScale({ size, height }: { size: number; height: number }): number { + return (height / guidelineBaseHeight) * size; +} +function moderateScale({ size, factor = 0.5, width }: { size: number; factor?: number; width: number }): number { + return size + (scale({ size, width }) - size) * factor; +} + +export { scale, verticalScale, moderateScale }; diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index df348515a71..6f19633f73b 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -298,13 +298,13 @@ class NewServerView extends React.Component { style={[ styles.certificatePicker, { - marginBottom: verticalScale(previousServer && !isTablet ? 10 : 30, height) + marginBottom: verticalScale({ size: previousServer && !isTablet ? 10 : 30, height }) } ]}> {certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')} @@ -312,7 +312,7 @@ class NewServerView extends React.Component { onPress={certificate ? this.handleRemove : this.chooseCertificate} testID='new-server-choose-certificate'> + style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale({ size: 13, width }) }]}> {certificate ?? I18n.t('Apply_Your_Certificate')} @@ -332,10 +332,10 @@ class NewServerView extends React.Component { style={[ styles.onboardingImage, { - marginBottom: verticalScale(10, height), - marginTop: isTablet ? 0 : verticalScale(marginTop, height), - width: verticalScale(100, height), - height: verticalScale(100, height) + marginBottom: verticalScale({ size: 10, height }), + marginTop: isTablet ? 0 : verticalScale({ size: marginTop, height }), + width: verticalScale({ size: 100, height }), + height: verticalScale({ size: 100, height }) } ]} source={require('../../static/images/logo.png')} @@ -346,8 +346,8 @@ class NewServerView extends React.Component { styles.title, { color: themes[theme].titleText, - fontSize: moderateScale(22, undefined, width), - marginBottom: verticalScale(8, height) + fontSize: moderateScale({ size: 22, width }), + marginBottom: verticalScale({ size: 8, height }) } ]}> Rocket.Chat @@ -357,8 +357,8 @@ class NewServerView extends React.Component { styles.subtitle, { color: themes[theme].controlText, - fontSize: moderateScale(16, undefined, width), - marginBottom: verticalScale(30, height) + fontSize: moderateScale({ size: 16, width }), + marginBottom: verticalScale({ size: 30, height }) } ]}> {I18n.t('Onboarding_subtitle')} @@ -378,7 +378,7 @@ class NewServerView extends React.Component { onPress={this.submit} disabled={!text || connecting} loading={!connectingOpen && connecting} - style={[styles.connectButton, { marginTop: verticalScale(16, height) }]} + style={[styles.connectButton, { marginTop: verticalScale({ size: 16, height }) }]} theme={theme} testID='new-server-view-button' /> @@ -388,8 +388,8 @@ class NewServerView extends React.Component { styles.description, { color: themes[theme].auxiliaryText, - fontSize: moderateScale(14, undefined, width), - marginBottom: verticalScale(16, height) + fontSize: moderateScale({ size: 14, width }), + marginBottom: verticalScale({ size: 16, height }) } ]}> {I18n.t('Onboarding_join_open_description')} From 8b6ba19b9da64cae37896f02e4a6f60b9768090f Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 15 Oct 2021 10:27:05 -0300 Subject: [PATCH 9/9] minor tweak --- app/views/NewServerView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index 6f19633f73b..815ec1347d6 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -155,8 +155,8 @@ class NewServerView extends React.Component { try { const serversHistoryCollection = db.get('servers_history'); let whereClause = [Q.where('username', Q.notEq(null)), Q.experimentalSortBy('updated_at', Q.desc), Q.experimentalTake(3)]; - const likeString = sanitizeLikeString(text); if (text) { + const likeString = sanitizeLikeString(text); whereClause = [...whereClause, Q.where('url', Q.like(`%${likeString}%`))]; } const serversHistory = (await serversHistoryCollection.query(...whereClause).fetch()) as IServer[];