From 719f3a71e67dbcb2952ee7208554a3315bfe728b Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 13 Dec 2021 12:22:57 -0300 Subject: [PATCH 1/6] Chore: Migrate CannedResponsesListView to TS --- ...ResponseItem.js => CannedResponseItem.tsx} | 38 ++++++++++--------- .../{DropdownItem.js => DropdownItem.tsx} | 17 ++++----- ...wnItemFilter.js => DropdownItemFilter.tsx} | 16 ++++---- .../Dropdown/DropdownItemHeader.js | 15 -------- .../Dropdown/DropdownItemHeader.tsx | 15 ++++++++ .../Dropdown/{index.js => index.tsx} | 28 +++++++------- .../CannedResponsesListView/interfaces.ts | 19 ++++++++++ .../{styles.js => styles.ts} | 2 +- 8 files changed, 86 insertions(+), 64 deletions(-) rename app/views/CannedResponsesListView/{CannedResponseItem.js => CannedResponseItem.tsx} (77%) rename app/views/CannedResponsesListView/Dropdown/{DropdownItem.js => DropdownItem.tsx} (85%) rename app/views/CannedResponsesListView/Dropdown/{DropdownItemFilter.js => DropdownItemFilter.tsx} (59%) delete mode 100644 app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.js create mode 100644 app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx rename app/views/CannedResponsesListView/Dropdown/{index.js => index.tsx} (84%) create mode 100644 app/views/CannedResponsesListView/interfaces.ts rename app/views/CannedResponsesListView/{styles.js => styles.ts} (97%) diff --git a/app/views/CannedResponsesListView/CannedResponseItem.js b/app/views/CannedResponsesListView/CannedResponseItem.tsx similarity index 77% rename from app/views/CannedResponsesListView/CannedResponseItem.js rename to app/views/CannedResponsesListView/CannedResponseItem.tsx index cc5f3c39a3b..d81e0e3660e 100644 --- a/app/views/CannedResponsesListView/CannedResponseItem.js +++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx @@ -1,14 +1,31 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { View, Text } from 'react-native'; - import Touchable from 'react-native-platform-touchable'; + import { themes } from '../../constants/colors'; import Button from '../../containers/Button'; import I18n from '../../i18n'; import styles from './styles'; -const CannedResponseItem = ({ theme, onPressDetail, shortcut, scope, onPressUse, text, tags }) => ( +interface ICannedResponseItem { + theme: string; + onPressDetail: () => void; + shortcut: string; + scope: string; + onPressUse: () => void; + text: string; + tags: string[]; +} + +const CannedResponseItem = ({ + theme, + onPressDetail = () => {}, + shortcut, + scope, + onPressUse = () => {}, + text, + tags +}: ICannedResponseItem): JSX.Element => ( <> @@ -43,19 +60,4 @@ const CannedResponseItem = ({ theme, onPressDetail, shortcut, scope, onPressUse, ); -CannedResponseItem.propTypes = { - theme: PropTypes.string, - onPressDetail: PropTypes.func, - shortcut: PropTypes.string, - scope: PropTypes.string, - onPressUse: PropTypes.func, - text: PropTypes.string, - tags: PropTypes.array -}; - -CannedResponseItem.defaultProps = { - onPressDetail: () => {}, - onPressUse: () => {} -}; - export default CannedResponseItem; diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItem.js b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx similarity index 85% rename from app/views/CannedResponsesListView/Dropdown/DropdownItem.js rename to app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx index 85b9aa703db..778c9374bf6 100644 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItem.js +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { StyleSheet, Text, View } from 'react-native'; import { themes } from '../../../constants/colors'; @@ -25,7 +24,14 @@ const styles = StyleSheet.create({ } }); -const DropdownItem = React.memo(({ theme, onPress, iconName, text }) => ( +interface IDropdownItem { + text: string; + iconName: string; + theme: string; + onPress: () => void; +} + +const DropdownItem = React.memo(({ theme, onPress, iconName, text }: IDropdownItem) => ( {text} @@ -34,11 +40,4 @@ const DropdownItem = React.memo(({ theme, onPress, iconName, text }) => ( )); -DropdownItem.propTypes = { - text: PropTypes.string, - iconName: PropTypes.string, - theme: PropTypes.string, - onPress: PropTypes.func -}; - export default withTheme(DropdownItem); diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.js b/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx similarity index 59% rename from app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.js rename to app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx index d4e45780501..345ffb4babc 100644 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.js +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx @@ -1,9 +1,15 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { IDepartment } from '../interfaces'; import DropdownItem from './DropdownItem'; -const DropdownItemFilter = ({ currentDepartment, value, onPress }) => ( +interface IDropdownItemFilter { + currentDepartment: IDepartment; + value: IDepartment; + onPress: (value: IDepartment) => void; +} + +const DropdownItemFilter = ({ currentDepartment, value, onPress }: IDropdownItemFilter): JSX.Element => ( ( /> ); -DropdownItemFilter.propTypes = { - currentDepartment: PropTypes.object, - value: PropTypes.string, - onPress: PropTypes.func -}; - export default DropdownItemFilter; diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.js b/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.js deleted file mode 100644 index 4f1f2b68f71..00000000000 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import DropdownItem from './DropdownItem'; - -const DropdownItemHeader = ({ department, onPress }) => ( - -); - -DropdownItemHeader.propTypes = { - department: PropTypes.object, - onPress: PropTypes.func -}; - -export default DropdownItemHeader; diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx new file mode 100644 index 00000000000..7d6e686e125 --- /dev/null +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { IDepartment } from '../interfaces'; +import DropdownItem from './DropdownItem'; + +interface IDropdownItemHeader { + department: IDepartment; + onPress: () => void; +} + +const DropdownItemHeader = ({ department, onPress }: IDropdownItemHeader): JSX.Element => ( + +); + +export default DropdownItemHeader; diff --git a/app/views/CannedResponsesListView/Dropdown/index.js b/app/views/CannedResponsesListView/Dropdown/index.tsx similarity index 84% rename from app/views/CannedResponsesListView/Dropdown/index.js rename to app/views/CannedResponsesListView/Dropdown/index.tsx index e2735e5c572..07503a4780d 100644 --- a/app/views/CannedResponsesListView/Dropdown/index.js +++ b/app/views/CannedResponsesListView/Dropdown/index.tsx @@ -1,31 +1,33 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Animated, Easing, FlatList, TouchableWithoutFeedback } from 'react-native'; -import { withSafeAreaInsets } from 'react-native-safe-area-context'; +import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context'; import styles from '../styles'; import { themes } from '../../../constants/colors'; import { withTheme } from '../../../theme'; import { headerHeight } from '../../../containers/Header'; import * as List from '../../../containers/List'; +import { IDepartment } from '../interfaces'; import DropdownItemFilter from './DropdownItemFilter'; import DropdownItemHeader from './DropdownItemHeader'; import { ROW_HEIGHT } from './DropdownItem'; const ANIMATION_DURATION = 200; -class Dropdown extends React.Component { - static propTypes = { - isMasterDetail: PropTypes.bool, - theme: PropTypes.string, - insets: PropTypes.object, - currentDepartment: PropTypes.object, - onClose: PropTypes.func, - onDepartmentSelected: PropTypes.func, - departments: PropTypes.array - }; +interface IDropdownProps { + isMasterDetail: boolean; + theme: string; + insets: EdgeInsets; + currentDepartment: IDepartment; + onClose: () => void; + onDepartmentSelected: (value: IDepartment) => void; + departments: IDepartment[]; +} + +class Dropdown extends React.Component { + private animatedValue: Animated.Value; - constructor(props) { + constructor(props: IDropdownProps) { super(props); this.animatedValue = new Animated.Value(0); } diff --git a/app/views/CannedResponsesListView/interfaces.ts b/app/views/CannedResponsesListView/interfaces.ts new file mode 100644 index 00000000000..b84a59c29c1 --- /dev/null +++ b/app/views/CannedResponsesListView/interfaces.ts @@ -0,0 +1,19 @@ +export interface IDepartment { + _id: string; + enabled: boolean; + name: string; + description: string; + showOnRegistration: boolean; + showOnOfflineForm: boolean; + requestTagBeforeClosingChat: boolean; + email: string; + chatClosingTags: string[]; + offlineMessageChannelName: string; + maxNumberSimultaneousChat: number; + abandonedRoomsCloseCustomMessage: string; + waitingQueueMessage: string; + departmentsAllowedToForward: string; + _updatedAt: Date; + numAgents: number; + ancestors: string[]; +} diff --git a/app/views/CannedResponsesListView/styles.js b/app/views/CannedResponsesListView/styles.ts similarity index 97% rename from app/views/CannedResponsesListView/styles.js rename to app/views/CannedResponsesListView/styles.ts index d9b8f580c6d..f0e9718671a 100644 --- a/app/views/CannedResponsesListView/styles.js +++ b/app/views/CannedResponsesListView/styles.ts @@ -13,7 +13,7 @@ export default StyleSheet.create({ borderBottomWidth: StyleSheet.hairlineWidth }, backdrop: { - ...StyleSheet.absoluteFill + ...StyleSheet.absoluteFillObject }, wrapCannedItem: { minHeight: 117, From 998a8ea6ef43ef1b4f8e9c60ca550e42fad55ff6 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 13 Dec 2021 16:22:14 -0300 Subject: [PATCH 2/6] Moved IcannedResponse to definitions and fixed the index --- .../ICannedResponse.ts} | 12 ++++ app/stacks/types.ts | 10 +-- .../Dropdown/DropdownItemFilter.tsx | 2 +- .../Dropdown/DropdownItemHeader.tsx | 2 +- .../Dropdown/index.tsx | 2 +- .../{index.js => index.tsx} | 67 +++++++++++-------- 6 files changed, 58 insertions(+), 37 deletions(-) rename app/{views/CannedResponsesListView/interfaces.ts => definitions/ICannedResponse.ts} (68%) rename app/views/CannedResponsesListView/{index.js => index.tsx} (84%) diff --git a/app/views/CannedResponsesListView/interfaces.ts b/app/definitions/ICannedResponse.ts similarity index 68% rename from app/views/CannedResponsesListView/interfaces.ts rename to app/definitions/ICannedResponse.ts index b84a59c29c1..a8f990ab662 100644 --- a/app/views/CannedResponsesListView/interfaces.ts +++ b/app/definitions/ICannedResponse.ts @@ -17,3 +17,15 @@ export interface IDepartment { numAgents: number; ancestors: string[]; } + +export interface ICannedResponse { + _id: string; + shortcut: string; + text: string; + scope: string; + tags: string[]; + createdBy: { _id: string; username: string }; + userId: string; + scopeName?: string; + departmentId?: string; +} diff --git a/app/stacks/types.ts b/app/stacks/types.ts index c9386d939c8..f3f58266e46 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -7,6 +7,7 @@ import { IServer } from '../definitions/IServer'; import { IAttachment } from '../definitions/IAttachment'; import { IMessage } from '../definitions/IMessage'; import { IRoom, RoomType } from '../definitions/IRoom'; +import { ICannedResponse } from '../definitions/ICannedResponse'; export type ChatsStackParamList = { RoomsListView: undefined; @@ -18,7 +19,7 @@ export type ChatsStackParamList = { name?: string; fname?: string; prid?: string; - room: IRoom; + room?: IRoom; jumpToMessageId?: string; jumpToThreadId?: string; roomUserId?: string; @@ -135,12 +136,7 @@ export type ChatsStackParamList = { rid: string; }; CannedResponseDetail: { - cannedResponse: { - shortcut: string; - text: string; - scopeName: string; - tags: string[]; - }; + cannedResponse: ICannedResponse; room: IRoom; }; }; diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx index 345ffb4babc..a2d68c5286b 100644 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { IDepartment } from '../interfaces'; +import { IDepartment } from '../../../definitions/ICannedResponse'; import DropdownItem from './DropdownItem'; interface IDropdownItemFilter { diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx index 7d6e686e125..ecfa95e8a30 100644 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { IDepartment } from '../interfaces'; +import { IDepartment } from '../../../definitions/ICannedResponse'; import DropdownItem from './DropdownItem'; interface IDropdownItemHeader { diff --git a/app/views/CannedResponsesListView/Dropdown/index.tsx b/app/views/CannedResponsesListView/Dropdown/index.tsx index 07503a4780d..19b62d81aa0 100644 --- a/app/views/CannedResponsesListView/Dropdown/index.tsx +++ b/app/views/CannedResponsesListView/Dropdown/index.tsx @@ -7,7 +7,7 @@ import { themes } from '../../../constants/colors'; import { withTheme } from '../../../theme'; import { headerHeight } from '../../../containers/Header'; import * as List from '../../../containers/List'; -import { IDepartment } from '../interfaces'; +import { IDepartment } from '../../../definitions/ICannedResponse'; import DropdownItemFilter from './DropdownItemFilter'; import DropdownItemHeader from './DropdownItemHeader'; import { ROW_HEIGHT } from './DropdownItem'; diff --git a/app/views/CannedResponsesListView/index.js b/app/views/CannedResponsesListView/index.tsx similarity index 84% rename from app/views/CannedResponsesListView/index.js rename to app/views/CannedResponsesListView/index.tsx index f9f515debfd..e884b2b70de 100644 --- a/app/views/CannedResponsesListView/index.js +++ b/app/views/CannedResponsesListView/index.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState, useCallback } from 'react'; -import PropTypes from 'prop-types'; import { FlatList } from 'react-native'; import { useSelector } from 'react-redux'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { HeaderBackButton } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/native'; +import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import database from '../../lib/database'; import I18n from '../../i18n'; @@ -26,6 +26,9 @@ import CannedResponseItem from './CannedResponseItem'; import Dropdown from './Dropdown'; import DropdownItemHeader from './Dropdown/DropdownItemHeader'; import styles from './styles'; +import { ICannedResponse, IDepartment } from '../../definitions/ICannedResponse'; +import { ChatsStackParamList } from '../../stacks/types'; +import { IRoom } from '../../definitions/IRoom'; const COUNT = 25; @@ -42,14 +45,19 @@ const fixedScopes = [ _id: 'user', name: I18n.t('Private') } -]; +] as IDepartment[]; -const CannedResponsesListView = ({ navigation, route }) => { - const [room, setRoom] = useState(null); +interface ICannedResponsesListViewProps { + navigation: StackNavigationProp; + route: RouteProp; +} - const [cannedResponses, setCannedResponses] = useState([]); - const [cannedResponsesScopeName, setCannedResponsesScopeName] = useState([]); - const [departments, setDepartments] = useState([]); +const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListViewProps): JSX.Element => { + const [room, setRoom] = useState(null!); + + const [cannedResponses, setCannedResponses] = useState([]); + const [cannedResponsesScopeName, setCannedResponsesScopeName] = useState([]); + const [departments, setDepartments] = useState([]); // states used by the filter in Header and Dropdown const [isSearching, setIsSearching] = useState(false); @@ -65,8 +73,8 @@ const CannedResponsesListView = ({ navigation, route }) => { const insets = useSafeAreaInsets(); const { theme } = useTheme(); - const { isMasterDetail } = useSelector(state => state.app); - const { rooms } = useSelector(state => state.room); + const { isMasterDetail } = useSelector((state: any) => state.app); + const { rooms } = useSelector((state: any) => state.room); const getRoomFromDb = async () => { const { rid } = route.params; @@ -93,21 +101,21 @@ const CannedResponsesListView = ({ navigation, route }) => { } }, 300); - const goToDetail = item => { + const goToDetail = (item: ICannedResponse) => { navigation.navigate('CannedResponseDetail', { cannedResponse: item, room }); }; - const navigateToRoom = item => { + const navigateToRoom = (item: ICannedResponse) => { if (!room) { return; } - const { name, username } = room; + const { name } = room; + console.log('🚀 ~ file: index.tsx ~ line 113 ~ navigateToRoom ~ room', room); const params = { rid: room.rid, name: RocketChat.getRoomTitle({ t: room.t, - fname: name, - name: username + fname: name }), t: room.t, roomUserId: RocketChat.getUidDirectMessage(room), @@ -130,7 +138,17 @@ const CannedResponsesListView = ({ navigation, route }) => { } }; - const getListCannedResponse = async ({ text, department, depId, debounced }) => { + const getListCannedResponse = async ({ + text, + department, + depId, + debounced + }: { + text: string; + department: string; + depId: string; + debounced: boolean; + }) => { try { const res = await RocketChat.getListCannedResponse({ text, @@ -188,13 +206,13 @@ const CannedResponsesListView = ({ navigation, route }) => { setOffset(0); }; - const onChangeText = text => { + const onChangeText = (text: string) => { newSearch(); setSearchText(text); searchCallback(text, scope, departmentId); }; - const onDepartmentSelect = value => { + const onDepartmentSelect = (value: IDepartment) => { let department = ''; let depId = ''; @@ -225,7 +243,7 @@ const CannedResponsesListView = ({ navigation, route }) => { await getListCannedResponse({ text: searchText, department: scope, depId: departmentId, debounced: false }); }; - const getHeader = () => { + const getHeader = (): StackNavigationOptions => { if (isSearching) { const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 }); return { @@ -235,7 +253,7 @@ const CannedResponsesListView = ({ navigation, route }) => { { - onChangeText(); + onChangeText(''); setIsSearching(false); }} /> @@ -250,7 +268,7 @@ const CannedResponsesListView = ({ navigation, route }) => { }; } - const options = { + const options: StackNavigationOptions = { headerLeft: () => ( navigation.pop()} tintColor={themes[theme].headerTintColor} /> ), @@ -320,7 +338,7 @@ const CannedResponsesListView = ({ navigation, route }) => { renderItem={({ item }) => ( { ); }; -CannedResponsesListView.propTypes = { - navigation: PropTypes.object, - route: PropTypes.object -}; - export default CannedResponsesListView; From 18942225ae4f7fa57d4fef8164b46bb4de1ebb86 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 13 Dec 2021 17:06:10 -0300 Subject: [PATCH 3/6] Chore: Migrate CannedResponseDetail to TS --- ...onseDetail.js => CannedResponseDetail.tsx} | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) rename app/views/{CannedResponseDetail.js => CannedResponseDetail.tsx} (81%) diff --git a/app/views/CannedResponseDetail.js b/app/views/CannedResponseDetail.tsx similarity index 81% rename from app/views/CannedResponseDetail.js rename to app/views/CannedResponseDetail.tsx index 67002bbdb3a..db5eeb2d257 100644 --- a/app/views/CannedResponseDetail.js +++ b/app/views/CannedResponseDetail.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/native'; import { StyleSheet, Text, View, ScrollView } from 'react-native'; import { useSelector } from 'react-redux'; @@ -13,6 +14,8 @@ import Navigation from '../lib/Navigation'; import { goRoom } from '../utils/goRoom'; import { themes } from '../constants/colors'; import Markdown from '../containers/markdown'; +import { ICannedResponse } from '../definitions/ICannedResponse'; +import { ChatsStackParamList } from '../stacks/types'; import sharedStyles from './Styles'; const styles = StyleSheet.create({ @@ -68,27 +71,27 @@ const styles = StyleSheet.create({ } }); -const Item = ({ label, content, theme, testID }) => +const Item = ({ label, content, theme, testID }: { label: string; content?: string; theme: string; testID?: string }) => content ? ( {label} + {/* @ts-ignore */} ) : null; -Item.propTypes = { - label: PropTypes.string, - content: PropTypes.string, - theme: PropTypes.string, - testID: PropTypes.string -}; -const CannedResponseDetail = ({ navigation, route }) => { +interface ICannedResponseDetailProps { + navigation: StackNavigationProp; + route: RouteProp; +} + +const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps): JSX.Element => { const { cannedResponse } = route?.params; const { theme } = useTheme(); - const { isMasterDetail } = useSelector(state => state.app); - const { rooms } = useSelector(state => state.room); + const { isMasterDetail } = useSelector((state: any) => state.app); + const { rooms } = useSelector((state: any) => state.room); useEffect(() => { navigation.setOptions({ @@ -96,15 +99,14 @@ const CannedResponseDetail = ({ navigation, route }) => { }); }, []); - const navigateToRoom = item => { + const navigateToRoom = (item: ICannedResponse) => { const { room } = route.params; - const { name, username } = room; + const { name } = room; const params = { rid: room.rid, name: RocketChat.getRoomTitle({ t: room.t, - fname: name, - name: username + fname: name }), t: room.t, roomUserId: RocketChat.getUidDirectMessage(room), @@ -163,9 +165,4 @@ const CannedResponseDetail = ({ navigation, route }) => { ); }; -CannedResponseDetail.propTypes = { - navigation: PropTypes.object, - route: PropTypes.object -}; - export default CannedResponseDetail; From aa93186f83bb09af3a6a4713e2931c62b3af1436 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 13 Dec 2021 19:46:41 -0300 Subject: [PATCH 4/6] minor tweaks --- app/definitions/IRoom.ts | 1 + app/views/CannedResponseDetail.tsx | 14 +++++++++++--- app/views/CannedResponsesListView/index.tsx | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/definitions/IRoom.ts b/app/definitions/IRoom.ts index 786c1d7c85b..e165439bd39 100644 --- a/app/definitions/IRoom.ts +++ b/app/definitions/IRoom.ts @@ -24,4 +24,5 @@ export interface IRoom extends IRocketChatRecord { autoTranslate?: boolean; observe?: Function; usedCannedResponse: string; + username?: string; } diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx index db5eeb2d257..a37121898f7 100644 --- a/app/views/CannedResponseDetail.tsx +++ b/app/views/CannedResponseDetail.tsx @@ -71,7 +71,14 @@ const styles = StyleSheet.create({ } }); -const Item = ({ label, content, theme, testID }: { label: string; content?: string; theme: string; testID?: string }) => +interface IItem { + label: string; + content?: string; + theme: string; + testID?: string; +} + +const Item = ({ label, content, theme, testID }: IItem) => content ? ( @@ -101,12 +108,13 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps) const navigateToRoom = (item: ICannedResponse) => { const { room } = route.params; - const { name } = room; + const { name, username } = room; const params = { rid: room.rid, name: RocketChat.getRoomTitle({ t: room.t, - fname: name + fname: name, + name: username }), t: room.t, roomUserId: RocketChat.getUidDirectMessage(room), diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx index e884b2b70de..737d824f637 100644 --- a/app/views/CannedResponsesListView/index.tsx +++ b/app/views/CannedResponsesListView/index.tsx @@ -109,13 +109,13 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView if (!room) { return; } - const { name } = room; - console.log('🚀 ~ file: index.tsx ~ line 113 ~ navigateToRoom ~ room', room); + const { name, username } = room; const params = { rid: room.rid, name: RocketChat.getRoomTitle({ t: room.t, - fname: name + fname: name, + name: username }), t: room.t, roomUserId: RocketChat.getUidDirectMessage(room), From f3236151ddd72da6b806556581b89be954541310 Mon Sep 17 00:00:00 2001 From: AlexAlexandre Date: Tue, 11 Jan 2022 15:30:26 -0300 Subject: [PATCH 5/6] refactor: update new types and interfaces for use ISubscription --- app/definitions/ICannedResponse.ts | 2 +- app/definitions/ISubscription.ts | 1 + app/stacks/types.ts | 10 +++------- app/views/CannedResponsesListView/index.tsx | 4 ++-- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/app/definitions/ICannedResponse.ts b/app/definitions/ICannedResponse.ts index a8f990ab662..fcf531c0c4c 100644 --- a/app/definitions/ICannedResponse.ts +++ b/app/definitions/ICannedResponse.ts @@ -26,6 +26,6 @@ export interface ICannedResponse { tags: string[]; createdBy: { _id: string; username: string }; userId: string; - scopeName?: string; + scopeName: string; departmentId?: string; } diff --git a/app/definitions/ISubscription.ts b/app/definitions/ISubscription.ts index 5f561edfb59..62caaa19d90 100644 --- a/app/definitions/ISubscription.ts +++ b/app/definitions/ISubscription.ts @@ -79,6 +79,7 @@ export interface ISubscription { avatarETag?: string; teamId?: string; teamMain?: boolean; + username?: string; // https://nozbe.github.io/WatermelonDB/Relation.html#relation-api messages: Relation; threads: Relation; diff --git a/app/stacks/types.ts b/app/stacks/types.ts index daf366d9240..9b2eca10a95 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -7,6 +7,7 @@ import { IServer } from '../definitions/IServer'; import { IAttachment } from '../definitions/IAttachment'; import { IMessage } from '../definitions/IMessage'; import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription'; +import { ICannedResponse } from '../definitions/ICannedResponse'; export type ChatsStackParamList = { RoomsListView: undefined; @@ -18,7 +19,7 @@ export type ChatsStackParamList = { name?: string; fname?: string; prid?: string; - room: ISubscription; + room?: ISubscription; jumpToMessageId?: string; jumpToThreadId?: string; roomUserId?: string; @@ -132,12 +133,7 @@ export type ChatsStackParamList = { rid: string; }; CannedResponseDetail: { - cannedResponse: { - shortcut: string; - text: string; - scopeName: string; - tags: string[]; - }; + cannedResponse: ICannedResponse; room: ISubscription; }; }; diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx index 737d824f637..0d94813536a 100644 --- a/app/views/CannedResponsesListView/index.tsx +++ b/app/views/CannedResponsesListView/index.tsx @@ -28,7 +28,7 @@ import DropdownItemHeader from './Dropdown/DropdownItemHeader'; import styles from './styles'; import { ICannedResponse, IDepartment } from '../../definitions/ICannedResponse'; import { ChatsStackParamList } from '../../stacks/types'; -import { IRoom } from '../../definitions/IRoom'; +import { ISubscription } from '../../definitions/ISubscription'; const COUNT = 25; @@ -53,7 +53,7 @@ interface ICannedResponsesListViewProps { } const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListViewProps): JSX.Element => { - const [room, setRoom] = useState(null!); + const [room, setRoom] = useState(null!); const [cannedResponses, setCannedResponses] = useState([]); const [cannedResponsesScopeName, setCannedResponsesScopeName] = useState([]); From 6a9cc0deacc05d9aba6c21a4b0a31e44ab645712 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 24 Jan 2022 18:16:43 -0300 Subject: [PATCH 6/6] fix lint error and canned responses's dropdown --- app/utils/goRoom.ts | 3 ++- app/views/CannedResponseDetail.tsx | 2 +- .../Dropdown/DropdownItem.tsx | 27 ++++++++++--------- .../Dropdown/index.tsx | 20 ++++++-------- app/views/CannedResponsesListView/index.tsx | 10 ++++--- 5 files changed, 32 insertions(+), 30 deletions(-) diff --git a/app/utils/goRoom.ts b/app/utils/goRoom.ts index dc8a3188212..8ee9ea38db0 100644 --- a/app/utils/goRoom.ts +++ b/app/utils/goRoom.ts @@ -45,6 +45,7 @@ export const goRoom = async ({ isMasterDetail: boolean; navigationMethod?: any; jumpToMessageId?: string; + usedCannedResponse?: string; }): Promise => { if (item.t === 'd' && item.search) { // if user is using the search we need first to join/create room @@ -55,7 +56,7 @@ export const goRoom = async ({ return navigate({ item: { rid: result.room._id, - name: username!, + name: username || '', t: SubscriptionType.DIRECT }, isMasterDetail, diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx index a37121898f7..6adfd24cd1f 100644 --- a/app/views/CannedResponseDetail.tsx +++ b/app/views/CannedResponseDetail.tsx @@ -125,7 +125,7 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps) // if it's on master detail layout, we close the modal and replace RoomView if (isMasterDetail) { Navigation.navigate('DrawerNavigator'); - goRoom({ item: params, isMasterDetail, usedCannedResponse: item.text }); + goRoom({ item: params, isMasterDetail }); } else { let navigate = navigation.push; // if this is a room focused diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx index 778c9374bf6..ebae9037825 100644 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { themes } from '../../../constants/colors'; -import { withTheme } from '../../../theme'; +import { useTheme } from '../../../theme'; import Touch from '../../../utils/touch'; import { CustomIcon } from '../../../lib/Icons'; import sharedStyles from '../../Styles'; @@ -26,18 +26,21 @@ const styles = StyleSheet.create({ interface IDropdownItem { text: string; - iconName: string; - theme: string; + iconName: string | null; onPress: () => void; } -const DropdownItem = React.memo(({ theme, onPress, iconName, text }: IDropdownItem) => ( - - - {text} - {iconName ? : null} - - -)); +const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => { + const { theme } = useTheme(); -export default withTheme(DropdownItem); + return ( + + + {text} + {iconName ? : null} + + + ); +}); + +export default DropdownItem; diff --git a/app/views/CannedResponsesListView/Dropdown/index.tsx b/app/views/CannedResponsesListView/Dropdown/index.tsx index 19b62d81aa0..d723bc4c85f 100644 --- a/app/views/CannedResponsesListView/Dropdown/index.tsx +++ b/app/views/CannedResponsesListView/Dropdown/index.tsx @@ -1,11 +1,10 @@ import React from 'react'; import { Animated, Easing, FlatList, TouchableWithoutFeedback } from 'react-native'; -import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context'; +import { withSafeAreaInsets } from 'react-native-safe-area-context'; import styles from '../styles'; import { themes } from '../../../constants/colors'; import { withTheme } from '../../../theme'; -import { headerHeight } from '../../../containers/Header'; import * as List from '../../../containers/List'; import { IDepartment } from '../../../definitions/ICannedResponse'; import DropdownItemFilter from './DropdownItemFilter'; @@ -15,9 +14,7 @@ import { ROW_HEIGHT } from './DropdownItem'; const ANIMATION_DURATION = 200; interface IDropdownProps { - isMasterDetail: boolean; - theme: string; - insets: EdgeInsets; + theme?: string; currentDepartment: IDepartment; onClose: () => void; onDepartmentSelected: (value: IDepartment) => void; @@ -52,16 +49,15 @@ class Dropdown extends React.Component { }; render() { - const { isMasterDetail, insets, theme, currentDepartment, onDepartmentSelected, departments } = this.props; - const statusBarHeight = insets?.top ?? 0; - const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0; + const { theme, currentDepartment, onDepartmentSelected, departments } = this.props; + const heightDestination = 0; const translateY = this.animatedValue.interpolate({ inputRange: [0, 1], outputRange: [-300, heightDestination] // approximated height of the component when closed/open }); const backdropOpacity = this.animatedValue.interpolate({ inputRange: [0, 1], - outputRange: [0, themes[theme].backdropOpacity] + outputRange: [0, themes[theme!].backdropOpacity] }); const maxRows = 5; @@ -72,7 +68,7 @@ class Dropdown extends React.Component { style={[ styles.backdrop, { - backgroundColor: themes[theme].backdropColor, + backgroundColor: themes[theme!].backdropColor, opacity: backdropOpacity, top: heightDestination } @@ -84,8 +80,8 @@ class Dropdown extends React.Component { styles.dropdownContainer, { transform: [{ translateY }], - backgroundColor: themes[theme].backgroundColor, - borderColor: themes[theme].separatorColor + backgroundColor: themes[theme!].backgroundColor, + borderColor: themes[theme!].separatorColor } ]}> diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx index 0d94813536a..2b7773e2d52 100644 --- a/app/views/CannedResponsesListView/index.tsx +++ b/app/views/CannedResponsesListView/index.tsx @@ -53,7 +53,7 @@ interface ICannedResponsesListViewProps { } const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListViewProps): JSX.Element => { - const [room, setRoom] = useState(null!); + const [room, setRoom] = useState(null); const [cannedResponses, setCannedResponses] = useState([]); const [cannedResponsesScopeName, setCannedResponsesScopeName] = useState([]); @@ -102,7 +102,9 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView }, 300); const goToDetail = (item: ICannedResponse) => { - navigation.navigate('CannedResponseDetail', { cannedResponse: item, room }); + if (room) { + navigation.navigate('CannedResponseDetail', { cannedResponse: item, room }); + } }; const navigateToRoom = (item: ICannedResponse) => { @@ -126,7 +128,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView // if it's on master detail layout, we close the modal and replace RoomView if (isMasterDetail) { Navigation.navigate('DrawerNavigator'); - goRoom({ item: params, isMasterDetail, usedCannedResponse: item.text }); + goRoom({ item: params, isMasterDetail }); } else { let navigate = navigation.push; // if this is a room focused @@ -338,7 +340,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView renderItem={({ item }) => (