diff --git a/app/containers/SearchHeader.js b/app/containers/SearchHeader.js
new file mode 100644
index 000000000..cb0fb2bee
--- /dev/null
+++ b/app/containers/SearchHeader.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { withDimensions } from '../dimensions';
+import { isIOS, isTablet } from '../utils/deviceInfo';
+import { themes } from '../constants/colors';
+import sharedStyles from '../views/Styles';
+import TextInput from '../presentation/TextInput';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ marginLeft: 0
+ },
+ title: {
+ ...sharedStyles.textSemibold
+ }
+});
+
+const SearchHeader = ({
+ onSearchChangeText, placeholder, theme, testID, width, height
+}) => {
+ const isLight = theme === 'light';
+ const isLandscape = width > height;
+ const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
+ const titleFontSize = 16 * scale;
+
+ return (
+
+
+
+ );
+};
+
+SearchHeader.propTypes = {
+ onSearchChangeText: PropTypes.func.isRequired,
+ placeholder: PropTypes.string.isRequired,
+ theme: PropTypes.string,
+ testID: PropTypes.string,
+ width: PropTypes.number,
+ height: PropTypes.number
+};
+export default withDimensions(SearchHeader);
diff --git a/app/lib/rocketchat.js b/app/lib/rocketchat.js
index 92d430d69..9858ff134 100644
--- a/app/lib/rocketchat.js
+++ b/app/lib/rocketchat.js
@@ -799,7 +799,7 @@ const RocketChat = {
});
},
getDiscussions({
- roomId, offset, count, text = ''
+ roomId, offset, count, text
}) {
const params = {
roomId,
diff --git a/app/views/DiscussionMessagesView.js b/app/views/DiscussionMessagesView.js
index 92b4c536b..9475e50ba 100644
--- a/app/views/DiscussionMessagesView.js
+++ b/app/views/DiscussionMessagesView.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { FlatList } from 'react-native';
@@ -18,10 +17,11 @@ import * as List from '../containers/List';
import BackgroundContainer from '../containers/BackgroundContainer';
import { isIOS } from '../utils/deviceInfo';
import { getHeaderTitlePosition } from '../containers/Header';
-import SearchHeader from './ThreadMessagesView/SearchHeader';
+
import { useTheme } from '../theme';
import Message from '../containers/message';
import RocketChat from '../lib/rocketchat';
+import SearchHeader from '../containers/SearchHeader';
const API_FETCH_COUNT = 25;
@@ -31,19 +31,22 @@ const DiscussionMessagesView = ({ navigation, route }) => {
const autoTranslate = route.params?.autoTranslate;
const autoTranslateLanguage = route.params?.autoTranslateLanguage;
const navToRoomInfo = route.params?.navToRoomInfo;
+
const user = useSelector(state => state.login?.user);
const baseUrl = useSelector(state => state.server.server);
const useRealName = useSelector(state => state.settings.UI_Use_Real_Name);
const Message_TimeFormat = useSelector(state => state.settings.Message_TimeFormat);
const isMasterDetail = useSelector(state => state.app.isMasterDetail);
+
const [loading, setLoading] = useState(false);
const [discussions, setDiscussions] = useState([]);
const [search, setSearch] = useState([]);
const [isSearching, setIsSearching] = useState(false);
+
const { theme } = useTheme();
const insets = useSafeAreaInsets();
- const load = async() => {
+ const load = async(text = '') => {
if (loading) {
return;
}
@@ -52,8 +55,9 @@ const DiscussionMessagesView = ({ navigation, route }) => {
try {
const result = await RocketChat.getDiscussions({
roomId: rid,
- offset: discussions.length,
- count: API_FETCH_COUNT
+ offset: isSearching ? search.length : discussions.length,
+ count: API_FETCH_COUNT,
+ text
});
if (result.success) {
@@ -71,22 +75,8 @@ const DiscussionMessagesView = ({ navigation, route }) => {
};
const onSearchChangeText = debounce(async(text) => {
- setLoading(true);
- try {
- const result = await RocketChat.getDiscussions({
- roomId: rid,
- offset: search.length,
- count: API_FETCH_COUNT,
- text
- });
- if (result.success) {
- setSearch(result.messages);
- }
- setLoading(false);
- } catch (e) {
- log(e);
- setLoading(false);
- }
+ setIsSearching(true);
+ await load(text);
}, 300);
const onCancelSearchPress = () => {
@@ -111,7 +101,14 @@ const DiscussionMessagesView = ({ navigation, route }) => {
/>
),
- headerTitle: () => ,
+ headerTitle: () => (
+
+ ),
headerTitleContainerStyle: {
left: headerTitlePosition.left,
right: headerTitlePosition.right
@@ -199,7 +196,7 @@ const DiscussionMessagesView = ({ navigation, route }) => {
windowSize={10}
initialNumToRender={7}
removeClippedSubviews={isIOS}
- onEndReached={() => discussions.length > 25 ?? load()}
+ onEndReached={() => discussions.length > API_FETCH_COUNT ?? load()}
ItemSeparatorComponent={List.Separator}
ListFooterComponent={loading ? : null}
scrollIndicatorInsets={{ right: 1 }}
@@ -210,7 +207,10 @@ const DiscussionMessagesView = ({ navigation, route }) => {
DiscussionMessagesView.propTypes = {
navigation: PropTypes.object,
- route: PropTypes.object
+ route: PropTypes.object,
+ item: PropTypes.shape({
+ msg: PropTypes.string
+ })
};
export default DiscussionMessagesView;
diff --git a/app/views/TeamChannelsView.js b/app/views/TeamChannelsView.js
index 64822aeae..d22b14ded 100644
--- a/app/views/TeamChannelsView.js
+++ b/app/views/TeamChannelsView.js
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import StatusBar from '../containers/StatusBar';
import RoomHeader from '../containers/RoomHeader';
import { withTheme } from '../theme';
-import SearchHeader from './ThreadMessagesView/SearchHeader';
+
import log, { events, logEvent } from '../utils/log';
import database from '../lib/database';
import { getUserSelector } from '../selectors/login';
@@ -29,6 +29,7 @@ import { withActionSheet } from '../containers/ActionSheet';
import { deleteRoom as deleteRoomAction } from '../actions/room';
import { CustomIcon } from '../lib/Icons';
import { themes } from '../constants/colors';
+import SearchHeader from '../containers/SearchHeader';
const API_FETCH_COUNT = 25;
const PERMISSION_DELETE_C = 'delete-c';
@@ -162,7 +163,9 @@ class TeamChannelsView extends React.Component {
setHeader = () => {
const { isSearching, showCreate, data } = this.state;
- const { navigation, isMasterDetail, insets } = this.props;
+ const {
+ navigation, isMasterDetail, insets, theme
+ } = this.props;
const { team } = this;
if (!team) {
@@ -182,7 +185,14 @@ class TeamChannelsView extends React.Component {
/>
),
- headerTitle: () => ,
+ headerTitle: () => (
+
+ ),
headerTitleContainerStyle: {
left: headerTitlePosition.left,
right: headerTitlePosition.right
diff --git a/app/views/ThreadMessagesView/SearchHeader.js b/app/views/ThreadMessagesView/SearchHeader.js
deleted file mode 100644
index 8bb82f26e..000000000
--- a/app/views/ThreadMessagesView/SearchHeader.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
-
-import { useTheme, withTheme } from '../../theme';
-import sharedStyles from '../Styles';
-import { themes } from '../../constants/colors';
-import TextInput from '../../presentation/TextInput';
-import { isTablet, isIOS } from '../../utils/deviceInfo';
-import { useOrientation } from '../../dimensions';
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- marginLeft: 0
- },
- title: {
- ...sharedStyles.textSemibold
- }
-});
-
-// TODO: it might be useful to refactor this component for reusage
-const SearchHeader = ({ onSearchChangeText, placeholder }) => {
- const { theme } = useTheme();
- const titleColorStyle = { color: themes[theme].headerTitleColor };
- const isLight = theme === 'light';
- const { isLandscape } = useOrientation();
- const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
- const titleFontSize = 16 * scale;
-
- return (
-
-
-
- );
-};
-
-SearchHeader.propTypes = {
- onSearchChangeText: PropTypes.func,
- placeholder: PropTypes.string
-};
-export default withTheme(SearchHeader);
diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.js
index 48cab9c99..c0570919f 100644
--- a/app/views/ThreadMessagesView/index.js
+++ b/app/views/ThreadMessagesView/index.js
@@ -32,9 +32,9 @@ import BackgroundContainer from '../../containers/BackgroundContainer';
import { isIOS } from '../../utils/deviceInfo';
import { getBadgeColor, makeThreadName } from '../../utils/room';
import { getHeaderTitlePosition } from '../../containers/Header';
-import SearchHeader from './SearchHeader';
import EventEmitter from '../../utils/events';
import { LISTENER } from '../../containers/Toast';
+import SearchHeader from '../../containers/SearchHeader';
const API_FETCH_COUNT = 50;
@@ -113,7 +113,7 @@ class ThreadMessagesView extends React.Component {
/>
),
- headerTitle: () => ,
+ headerTitle: () => ,
headerTitleContainerStyle: {
left: headerTitlePosition.left,
right: headerTitlePosition.right