verdnatura-chat/app/views/VisitorNavigationView.js

94 lines
2.3 KiB
JavaScript

import React, { useEffect, useState } from 'react';
import { FlatList, StyleSheet, Text } from 'react-native';
import PropTypes from 'prop-types';
import { withTheme } from '../theme';
import RocketChat from '../lib/rocketchat';
import { themes } from '../constants/colors';
import openLink from '../utils/openLink';
import I18n from '../i18n';
import debounce from '../utils/debounce';
import * as List from '../containers/List';
import SafeAreaView from '../containers/SafeAreaView';
import sharedStyles from './Styles';
const styles = StyleSheet.create({
noResult: {
fontSize: 16,
paddingVertical: 56,
...sharedStyles.textSemibold,
...sharedStyles.textAlignCenter
}
});
const Item = ({ item }) => (
<List.Item
title={item.navigation?.page?.title || I18n.t('Empty_title')}
onPress={() => openLink(item.navigation?.page?.location?.href)}
translateTitle={false}
/>
);
Item.propTypes = {
item: PropTypes.object
};
const VisitorNavigationView = ({ route, theme }) => {
let offset;
let total = 0;
const [pages, setPages] = useState([]);
const getPages = async () => {
const rid = route.params?.rid;
if (rid) {
try {
const result = await RocketChat.getPagesLivechat(rid, offset);
if (result.success) {
setPages(result.pages);
offset = result.pages.length;
({ total } = result);
}
} catch {
// do nothig
}
}
};
useEffect(() => {
getPages();
}, []);
const onEndReached = debounce(() => {
if (pages.length <= total) {
getPages();
}
}, 300);
return (
<SafeAreaView>
<FlatList
data={pages}
renderItem={({ item }) => <Item item={item} theme={theme} />}
ItemSeparatorComponent={List.Separator}
ListFooterComponent={List.Separator}
ListHeaderComponent={List.Separator}
contentContainerStyle={List.styles.contentContainerStyleFlatList}
ListEmptyComponent={() => (
<Text style={[styles.noResult, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>
)}
keyExtractor={item => item}
onEndReached={onEndReached}
onEndReachedThreshold={5}
/>
</SafeAreaView>
);
};
VisitorNavigationView.propTypes = {
theme: PropTypes.string,
route: PropTypes.object
};
VisitorNavigationView.navigationOptions = {
title: I18n.t('Navigation_history')
};
export default withTheme(VisitorNavigationView);