ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-22 12:51:42 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

bookmark page converted to hooks

Browse Source
This commit is contained in:
feruz 2019-12-19 18:03:32 +02:00
parent 38c134d43e
commit e405520582
1 changed files with 83 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/screens/bookmarks/screen/bookmarksScreen.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl';
import { View, FlatList, Text } from 'react-native'; import { View, FlatList, Text } from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view'; import ScrollableTabView from 'react-native-scrollable-tab-view';
@ -11,32 +11,39 @@ import { UserListItem, WalletDetailsPlaceHolder, BasicHeader, TabBar } from '../
import globalStyles from '../../../globalStyles'; import globalStyles from '../../../globalStyles';
import styles from './bookmarksStyles'; import styles from './bookmarksStyles';
class BookmarksScreen extends Component { const BookmarksScreen = ({
/* Props isLoading,
* ------------------------------------------------ intl,
* @prop { type } name - Description.... handleOnFavoritePress,
*/ handleOnBookarkPress,
favorites,
bookmarks,
removeFavorite,
removeBookmark,
}) => {
const [selectedItemId, setSelectedItemId] = useState(null);
const [activeTab, setActiveTab] = useState(0);
const ActionSheetRef = useRef(null);
const firstMount = useRef(true);
constructor(props) { useEffect(() => {
super(props); if (firstMount.current) {
this.state = { firstMount.current = false;
selectedItemId: null, return;
activeTab: 0,
};
} }
if (ActionSheetRef.current) {
ActionSheetRef.current.show();
}
}, [selectedItemId]);
// Component Life Cycles const _renderItem = (item, index, itemType) => {
// Component Functions
_renderItem = (item, index, itemType) => {
const { handleOnFavoritePress, handleOnBookarkPress } = this.props;
const isFavorites = itemType === 'favorites'; const isFavorites = itemType === 'favorites';
const text = isFavorites ? item.account : `${item.author}/${item.permlink}`; const text = isFavorites ? item.account : `${item.author}/${item.permlink}`;
if (item.author || item.account) { if (item.author || item.account) {
return ( return (
<UserListItem <UserListItem
handleOnLongPress={() => this._handleLongPress(isFavorites ? item.account : item._id)} handleOnLongPress={() => _handleLongPress(isFavorites ? item.account : item._id)}
handleOnPress={() => handleOnPress={() =>
isFavorites isFavorites
? handleOnFavoritePress(item.account) ? handleOnFavoritePress(item.account)
@ -51,9 +58,7 @@ class BookmarksScreen extends Component {
} }
}; };
_renderEmptyContent = () => { const _renderEmptyContent = () => {
const { isLoading, intl } = this.props;
if (isLoading) { if (isLoading) {
return <WalletDetailsPlaceHolder />; return <WalletDetailsPlaceHolder />;
} }
@ -67,7 +72,7 @@ class BookmarksScreen extends Component {
); );
}; };
_getTabItem = (data, type) => { const _getTabItem = (data, type) => {
const isFavorites = type === 'favorites'; const isFavorites = type === 'favorites';
return ( return (
@ -80,23 +85,16 @@ class BookmarksScreen extends Component {
)} )}
keyExtractor={item => item._id} keyExtractor={item => item._id}
removeClippedSubviews={false} removeClippedSubviews={false}
renderItem={({ item, index }) => this._renderItem(item, index, type)} renderItem={({ item, index }) => _renderItem(item, index, type)}
ListEmptyComponent={this._renderEmptyContent()} ListEmptyComponent={_renderEmptyContent()}
/> />
</View> </View>
); );
}; };
const _handleLongPress = _selectedItemId => {
_handleLongPress = selectedItemId => { setSelectedItemId(_selectedItemId);
this.setState({ selectedItemId }, () => {
this.ActionSheet.show();
});
}; };
render() {
const { favorites, bookmarks, intl, removeFavorite, removeBookmark } = this.props;
const { selectedItemId, activeTab } = this.state;
return ( return (
<View style={globalStyles.container}> <View style={globalStyles.container}>
<BasicHeader <BasicHeader
@ -106,7 +104,7 @@ class BookmarksScreen extends Component {
/> />
<ScrollableTabView <ScrollableTabView
onChangeTab={event => this.setState({ activeTab: event.i })} onChangeTab={event => setActiveTab(event.i)}
style={globalStyles.tabView} style={globalStyles.tabView}
renderTabBar={() => ( renderTabBar={() => (
<TabBar <TabBar
@ -123,7 +121,7 @@ class BookmarksScreen extends Component {
})} })}
style={styles.tabbarItem} style={styles.tabbarItem}
> >
{this._getTabItem(bookmarks, 'bookmarks')} {_getTabItem(bookmarks, 'bookmarks')}
</View> </View>
<View <View
tabLabel={intl.formatMessage({ tabLabel={intl.formatMessage({
@ -131,11 +129,11 @@ class BookmarksScreen extends Component {
})} })}
style={styles.tabbarItem} style={styles.tabbarItem}
> >
{this._getTabItem(favorites, 'favorites')} {_getTabItem(favorites, 'favorites')}
</View> </View>
</ScrollableTabView> </ScrollableTabView>
<ActionSheet <ActionSheet
ref={o => (this.ActionSheet = o)} ref={ActionSheetRef}
options={[ options={[
intl.formatMessage({ id: 'alert.delete' }), intl.formatMessage({ id: 'alert.delete' }),
intl.formatMessage({ id: 'alert.cancel' }), intl.formatMessage({ id: 'alert.cancel' }),
@ -151,7 +149,6 @@ class BookmarksScreen extends Component {
/> />
</View> </View>
); );
} };
}
export default injectIntl(BookmarksScreen); export default injectIntl(BookmarksScreen);