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

call data for communities screen

Browse Source
This commit is contained in:
Furkan Kılıç 2021-01-17 00:03:26 +03:00
parent 99de533b22
commit e5f9385696
16 changed files with 310 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/communitiesList/index.js Normal file
View File

@ -0,0 +1,4 @@
import { CommunityListItem } from '../basicUIElements';
import CommunitiesList from './view/communitiesList';
export default CommunitiesList;

15
src/screens/communities/communitiesList.js → src/components/communitiesList/view/communitiesList.js
View File

@ -2,24 +2,22 @@ import React from 'react';
import { SafeAreaView, FlatList } from 'react-native';
// Components
import { CommunityListItem, CommunitiesPlaceHolder } from '../../components/basicUIElements';
import { CommunitiesPlaceHolder } from '../../basicUIElements';
import CommunitiesListItem from './communitiesListItem';
// Styles
import styles from './communitiesListStyles';
const CommunitiesList = ({
votes,
data,
handleOnPress,
handleSubscribeButtonPress,
allSubscriptions,
isLoggedIn,
noResult,
}) => {
const _renderItem = ({ item, index }) => {
const isSubscribed = allSubscriptions.some((sub) => sub[0] === item.name);
return (
<CommunityListItem
<CommunitiesListItem
index={index}
title={item.title}
about={item.about}
@ -32,8 +30,9 @@ const CommunitiesList = ({
name={item.name}
handleOnPress={handleOnPress}
handleSubscribeButtonPress={handleSubscribeButtonPress}
isSubscribed={isSubscribed}
isSubscribed={item.isSubscribed}
isLoggedIn={isLoggedIn}
loading={item.loading}
/>
);
};
@ -56,7 +55,7 @@ const CommunitiesList = ({
<SafeAreaView style={styles.container}>
{!noResult && (
<FlatList
data={votes}
data={data}
keyExtractor={(item) => item.id && item.id.toString()}
renderItem={_renderItem}
ListEmptyComponent={_renderEmptyContent}

4
src/components/communitiesList/view/communitiesListItem/index.js Normal file
View File

@ -0,0 +1,4 @@
import CommunitiesList from '../../../../screens/searchResult/screen/tabs/communities/communitiesList';
import CommunitiesListItem from './view/CommunitiesListItem';
export default CommunitiesListItem;

53
src/screens/communities/CommunitiesListItem.js → src/components/communitiesList/view/communitiesListItem/view/CommunitiesListItem.js
View File

@ -1,12 +1,12 @@
import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
import { useIntl } from 'react-intl';
import styles from './communitiesListItemStyles';
import { Tag } from '../../components/basicUIElements';
import { Tag } from '../../../../basicUIElements';
const UserListItem = ({
const CommunitiesListItem = ({
index,
handleOnPress,
handleOnLongPress,
@ -22,14 +22,12 @@ const UserListItem = ({
handleSubscribeButtonPress,
isSubscribed,
isLoggedIn,
loading,
}) => {
const [subscribed, setSubscribed] = useState(isSubscribed);
const intl = useIntl();
const _handleSubscribeButtonPress = () => {
handleSubscribeButtonPress({ subscribed: !subscribed, communityId: name }).then(() => {
setSubscribed(!subscribed);
});
handleSubscribeButtonPress({ isSubscribed: !isSubscribed, communityId: name });
};
return (
@ -41,24 +39,27 @@ const UserListItem = ({
<View style={styles.content}>
<View style={styles.header}>
<Text style={styles.title}>{title}</Text>
{isLoggedIn && (
<Tag
style={styles.subscribeButton}
textStyle={subscribed && styles.subscribeButtonText}
value={
!subscribed
? intl.formatMessage({
id: 'search_result.communities.subscribe',
})
: intl.formatMessage({
id: 'search_result.communities.unsubscribe',
})
}
isPin={!subscribed}
isFilter
onPress={_handleSubscribeButtonPress}
/>
)}
{isLoggedIn &&
(loading ? (
<ActivityIndicator style={{ flex: 1 }} />
) : (
<Tag
style={styles.subscribeButton}
textStyle={isSubscribed && styles.subscribeButtonText}
value={
!isSubscribed
? intl.formatMessage({
id: 'search_result.communities.subscribe',
})
: intl.formatMessage({
id: 'search_result.communities.unsubscribe',
})
}
isPin={!isSubscribed}
isFilter
onPress={_handleSubscribeButtonPress}
/>
))}
</View>
{!!about && <Text style={styles.about}>{about}</Text>}
<View style={styles.separator} />
@ -77,4 +78,4 @@ const UserListItem = ({
);
};
export default UserListItem;
export default CommunitiesListItem;

0
src/screens/communities/communitiesListItemStyles.js → src/components/communitiesList/view/communitiesListItem/view/communitiesListItemStyles.js
View File

0
src/screens/communities/communitiesListStyles.js → src/components/communitiesList/view/communitiesListStyles.js
View File

4
src/components/posts/container/postsContainer.js
View File

@ -462,7 +462,9 @@ const PostsContainer = ({
});
}
dispatch(subscribeAction(currentAccount, pinCode, data, successToastText, failToastText));
dispatch(
subscribeAction(currentAccount, pinCode, data, successToastText, failToastText, 'feedScreen'),
);
};
return (

2
src/constants/sideMenuItems.js
View File

@ -28,7 +28,7 @@ const authMenuItems = [
{
name: 'Communities',
route: ROUTES.SCREENS.COMMUNITIES,
icon: 'settings',
icon: 'people',
id: 'communities',
},
{

107
src/containers/communitiesContainer.js
View File

@ -1,107 +0,0 @@
import { useState, useEffect } from 'react';
import { withNavigation } from 'react-navigation';
import { connect } from 'react-redux';
import isEmpty from 'lodash/isEmpty';
import ROUTES from '../constants/routeNames';
import { getCommunities, getSubscriptions, subscribeCommunity } from '../providers/hive/dhive';
const CommunitiesContainer = ({
children,
navigation,
searchValue,
currentAccount,
pinCode,
isLoggedIn,
}) => {
const [data, setData] = useState();
const [filterIndex, setFilterIndex] = useState(1);
const [query, setQuery] = useState('');
const [sort, setSort] = useState('rank');
const [allSubscriptions, setAllSubscriptions] = useState([]);
const [noResult, setNoResult] = useState(false);
useEffect(() => {
let isCancelled = false;
setData([]);
if (sort === 'my') {
setNoResult(true);
} else {
getCommunities('', 100, query, sort).then((res) => {
if (!isCancelled) {
if (!isEmpty(res)) {
setData(res);
setNoResult(false);
} else {
setNoResult(true);
}
}
});
}
return () => {
isCancelled = true;
};
}, [query, sort]);
useEffect(() => {
setData([]);
setQuery(searchValue);
setNoResult(false);
}, [searchValue]);
useEffect(() => {
let isCancelled = false;
if (data && !isCancelled) {
getSubscriptions(currentAccount.username).then((result) => {
if (result) {
setAllSubscriptions(result);
}
});
}
return () => {
isCancelled = true;
};
}, [data]);
// Component Functions
const _handleOnVotersDropdownSelect = (index, value) => {
setFilterIndex(index);
setSort(value);
};
const _handleOnPress = (name) => {
navigation.navigate({
routeName: ROUTES.SCREENS.COMMUNITY,
params: {
tag: name,
},
});
};
const _handleSubscribeButtonPress = (_data) => {
return subscribeCommunity(currentAccount, pinCode, _data);
};
return (
children &&
children({
data,
filterIndex,
allSubscriptions,
handleOnVotersDropdownSelect: _handleOnVotersDropdownSelect,
handleOnPress: _handleOnPress,
handleSubscribeButtonPress: _handleSubscribeButtonPress,
isLoggedIn,
noResult,
})
);
};
const mapStateToProps = (state) => ({
currentAccount: state.account.currentAccount,
pinCode: state.application.pin,
isLoggedIn: state.application.isLoggedIn,
});
export default connect(mapStateToProps)(withNavigation(CommunitiesContainer));

2
src/containers/index.js
View File

@ -1,5 +1,4 @@
import AccountContainer from './accountContainer';
import CommunitiesContainer from './communitiesContainer';
import InAppPurchaseContainer from './inAppPurchaseContainer';
import LoggedInContainer from './loggedInContainer';
import PointsContainer from './pointsContainer';
@ -13,7 +12,6 @@ import TransferContainer from './transferContainer';
export {
AccountContainer,
CommunitiesContainer,
InAppPurchaseContainer,
LoggedInContainer,
PointsContainer,

216
src/screens/communities/communities.js
View File

@ -1,216 +0,0 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { FlatList, View, Text, TouchableOpacity } from 'react-native';
import get from 'lodash/get';
import { SafeAreaView } from 'react-navigation';
import ScrollableTabView from 'react-native-scrollable-tab-view';
// Components
import { FilterBar, UserAvatar, TabBar, BasicHeader } from '../../components';
import CommunitiesList from './communitiesList';
import { CommunitiesPlaceHolder } from '../../components/basicUIElements';
import { CommunitiesContainer } from '../../containers';
import DEFAULT_IMAGE from '../../assets/no_image.png';
import Tag from '../../components/basicUIElements/view/tag/tagView';
import styles from './communitiesStyles';
import globalStyles from '../../globalStyles';
const filterOptions = ['my', 'rank', 'subs', 'new'];
const CommunitiesScreen = ({ navigation, searchValue }) => {
const intl = useIntl();
const activeVotes = get(navigation, 'state.params.activeVotes');
const _renderEmptyContent = () => {
return (
<>
<CommunitiesPlaceHolder />
<CommunitiesPlaceHolder />
<CommunitiesPlaceHolder />
</>
);
};
const _renderTabbar = () => (
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={80}
tabUnderlineScaleX={2}
tabBarPosition="overlayTop"
textStyle={styles.tabBarText}
/>
);
return (
<CommunitiesContainer data={activeVotes} searchValue={searchValue}>
{({
data,
filterIndex,
allSubscriptions,
handleOnVotersDropdownSelect,
handleOnPress,
handleSubscribeButtonPress,
isLoggedIn,
noResult,
}) => (
<View style={styles.container}>
<SafeAreaView forceInset={{ bottom: 'never' }} style={{ flex: 1 }}>
<BasicHeader
title={intl.formatMessage({
id: 'side_menu.communities',
})}
/>
<ScrollableTabView
style={globalStyles.tabView}
renderTabBar={_renderTabbar}
prerenderingSiblingsNumber={Infinity}
>
<View
tabLabel={intl.formatMessage({ id: 'communities.joined' })}
style={styles.tabbarItem}
>
<FlatList
data={allSubscriptions}
//keyExtractor={(item, ind) => `${item}-${ind}`}
renderItem={({ item, index }) => (
<View
style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}
>
<View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<UserAvatar username={item[0]} defaultSource={DEFAULT_IMAGE} noAction />
</TouchableOpacity>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<Text style={styles.community}>{item[1]}</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
<Tag
style={styles.subscribeButton}
textStyle={styles.subscribeButtonText}
value={intl.formatMessage({
id: 'search_result.communities.unsubscribe',
})}
isPin={false}
isFilter
onPress={() =>
handleSubscribeButtonPress({ isSubscribed: true, communityId: item[0] })
}
/>
</View>
</View>
)}
ListEmptyComponent={_renderEmptyContent}
/>
</View>
<View
tabLabel={intl.formatMessage({ id: 'communities.discover' })}
style={styles.tabbarItem}
>
<FlatList
data={allSubscriptions}
//keyExtractor={(item, ind) => `${item}-${ind}`}
renderItem={({ item, index }) => (
<View
style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}
>
<View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<UserAvatar username={item[0]} defaultSource={DEFAULT_IMAGE} noAction />
</TouchableOpacity>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<Text style={styles.community}>{item[1]}</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
<Tag
style={styles.subscribeButton}
textStyle={styles.subscribeButtonText}
value={intl.formatMessage({
id: 'search_result.communities.unsubscribe',
})}
isPin={false}
isFilter
onPress={() =>
handleSubscribeButtonPress({ isSubscribed: true, communityId: item[0] })
}
/>
</View>
</View>
)}
ListEmptyComponent={_renderEmptyContent}
/>
</View>
</ScrollableTabView>
</SafeAreaView>
</View>
)}
</CommunitiesContainer>
);
};
export default CommunitiesScreen;
{
/* <>
<FilterBar
dropdownIconName="arrow-drop-down"
options={filterOptions.map((item) =>
intl.formatMessage({
id: `search_result.communities_filter.${item}`,
}),
)}
defaultText={intl.formatMessage({
id: `search_result.communities_filter.${filterOptions[filterIndex]}`,
})}
selectedOptionIndex={filterIndex}
onDropdownSelect={(index) => handleOnVotersDropdownSelect(index, filterOptions[index])}
/>
{filterIndex !== 0 && (
<CommunitiesList
votes={data}
allSubscriptions={allSubscriptions}
handleOnPress={handleOnPress}
handleSubscribeButtonPress={handleSubscribeButtonPress}
isLoggedIn={isLoggedIn}
noResult={noResult}
/>
)}
{filterIndex === 0 && allSubscriptions && allSubscriptions.length > 0 && (
<FlatList
data={allSubscriptions}
//keyExtractor={(item, ind) => `${item}-${ind}`}
renderItem={({ item, index }) => (
<View style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}>
<View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<UserAvatar username={item[0]} defaultSource={DEFAULT_IMAGE} noAction />
</TouchableOpacity>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<Text style={styles.community}>{item[1]}</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
<Tag
style={styles.subscribeButton}
textStyle={styles.subscribeButtonText}
value={intl.formatMessage({
id: 'search_result.communities.unsubscribe',
})}
isPin={false}
isFilter
onPress={() =>
handleSubscribeButtonPress({ isSubscribed: true, communityId: item[0] })
}
/>
</View>
</View>
)}
ListEmptyComponent={_renderEmptyContent}
/>
)}
</> */
}

122
src/screens/communities/container/communitiesContainer.js Normal file
View File

@ -0,0 +1,122 @@
import { useState, useEffect } from 'react';
import { withNavigation } from 'react-navigation';
import { useSelector, useDispatch } from 'react-redux';
import { shuffle } from 'lodash';
import { useIntl } from 'react-intl';
import ROUTES from '../../../constants/routeNames';
import {
getCommunities,
getSubscriptions,
subscribeCommunity,
} from '../../../providers/hive/dhive';
import { toastNotification } from '../../../redux/actions/uiAction';
const CommunitiesContainer = ({ children, navigation }) => {
const dispatch = useDispatch();
const intl = useIntl();
const [discovers, setDiscovers] = useState([]);
const [subscriptions, setSubscriptions] = useState([]);
const currentAccount = useSelector((state) => state.account.currentAccount);
const pinCode = useSelector((state) => state.application.pin);
useEffect(() => {
getSubscriptions(currentAccount.username).then((subs) => {
getCommunities('', 50, '', 'rank').then((communities) => {
communities.forEach((community) =>
Object.assign(community, {
isSubscribed: subs.some(
(subscribedCommunity) => subscribedCommunity[0] === community.name,
),
loading: false,
}),
);
setSubscriptions(subs);
setDiscovers(shuffle(communities));
});
});
}, []);
// Component Functions
const _handleOnPress = (name) => {
navigation.navigate({
routeName: ROUTES.SCREENS.COMMUNITY,
params: {
tag: name,
},
});
};
const _handleSubscribeButtonPress = (_data) => {
const subscribedCommunityIndex = discovers.findIndex(
(community) => community.name === _data.communityId,
);
const newDiscovers = [
...discovers.slice(0, subscribedCommunityIndex),
Object.assign({}, discovers[subscribedCommunityIndex], { loading: true }),
...discovers.slice(subscribedCommunityIndex + 1),
];
setDiscovers(newDiscovers);
subscribeCommunity(currentAccount, pinCode, _data)
.then(() => {
const updatedDiscovers = [
...discovers.slice(0, subscribedCommunityIndex),
Object.assign({}, discovers[subscribedCommunityIndex], {
loading: false,
isSubscribed: _data.isSubscribed,
}),
...discovers.slice(subscribedCommunityIndex + 1),
];
setDiscovers(updatedDiscovers);
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.success_subscribe',
}),
),
);
})
.catch((error) => {
const updatedDiscovers = [
...discovers.slice(0, subscribedCommunityIndex),
Object.assign({}, discovers[subscribedCommunityIndex], {
loading: false,
isSubscribed: !_data.isSubscribed,
}),
...discovers.slice(subscribedCommunityIndex + 1),
];
setDiscovers(updatedDiscovers);
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.fail_subscribe',
}),
),
);
});
};
return (
children &&
children({
subscriptions,
discovers,
handleOnPress: _handleOnPress,
handleSubscribeButtonPress: _handleSubscribeButtonPress,
})
);
};
export default withNavigation(CommunitiesContainer);

2
src/screens/communities/index.js
View File

@ -1,3 +1,3 @@
import Communities from './communities';
import Communities from './view/communitiesScreen';
export default Communities;

122
src/screens/communities/view/communitiesScreen.js Normal file
View File

@ -0,0 +1,122 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { FlatList, View, Text, TouchableOpacity } from 'react-native';
import get from 'lodash/get';
import { SafeAreaView } from 'react-navigation';
import ScrollableTabView from 'react-native-scrollable-tab-view';
// Components
import { FilterBar, UserAvatar, TabBar, BasicHeader } from '../../../components';
import CommunitiesList from '../../../components/communitiesList';
import { CommunitiesPlaceHolder } from '../../../components/basicUIElements';
import CommunitiesContainer from '../container/communitiesContainer';
import DEFAULT_IMAGE from '../../../assets/no_image.png';
import Tag from '../../../components/basicUIElements/view/tag/tagView';
import styles from './communitiesScreenStyles';
import globalStyles from '../../../globalStyles';
const CommunitiesScreen = ({ navigation, searchValue }) => {
const intl = useIntl();
const _renderEmptyContent = () => {
return (
<>
<CommunitiesPlaceHolder />
<CommunitiesPlaceHolder />
<CommunitiesPlaceHolder />
</>
);
};
const _renderTabbar = () => (
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={80}
tabUnderlineScaleX={2}
tabBarPosition="overlayTop"
textStyle={styles.tabBarText}
/>
);
return (
<CommunitiesContainer>
{({ subscriptions, discovers, handleOnPress, handleSubscribeButtonPress }) => {
console.log(subscriptions, discovers);
return (
<View style={styles.container}>
<SafeAreaView forceInset={{ bottom: 'never' }} style={{ flex: 1 }}>
<BasicHeader
title={intl.formatMessage({
id: 'side_menu.communities',
})}
/>
<ScrollableTabView
style={globalStyles.tabView}
renderTabBar={_renderTabbar}
prerenderingSiblingsNumber={Infinity}
>
<View
tabLabel={intl.formatMessage({ id: 'communities.joined' })}
style={styles.tabbarItem}
>
<FlatList
data={subscriptions}
//keyExtractor={(item, ind) => `${item}-${ind}`}
renderItem={({ item, index }) => (
<View
style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}
>
<View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<UserAvatar username={item[0]} defaultSource={DEFAULT_IMAGE} noAction />
</TouchableOpacity>
<TouchableOpacity onPress={() => handleOnPress(item[0])}>
<Text style={styles.community}>{item[1]}</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
<Tag
style={styles.subscribeButton}
textStyle={styles.subscribeButtonText}
value={intl.formatMessage({
id: 'search_result.communities.unsubscribe',
})}
isPin={false}
isFilter
onPress={() =>
handleSubscribeButtonPress({
isSubscribed: true,
communityId: item[0],
})
}
/>
</View>
</View>
)}
ListEmptyComponent={_renderEmptyContent}
/>
</View>
<View
tabLabel={intl.formatMessage({ id: 'communities.discover' })}
style={styles.tabbarItem}
>
<CommunitiesList
data={discovers}
handleOnPress={handleOnPress}
handleSubscribeButtonPress={handleSubscribeButtonPress}
isLoggedIn={true}
noResult={discovers.length === 0}
/>
</View>
</ScrollableTabView>
</SafeAreaView>
</View>
);
}}
</CommunitiesContainer>
);
};
export default CommunitiesScreen;

3
src/screens/communities/communitiesStyles.js → src/screens/communities/view/communitiesScreenStyles.js
View File

@ -45,4 +45,7 @@ export default EStyleSheet.create({
marginLeft: 15,
color: '$primaryBlack',
},
tabbarItem: {
flex: 1,
},
});

31
src/screens/searchResult/screen/tabs/communities/communities.js
View File

@ -8,7 +8,7 @@ import { FilterBar, UserAvatar } from '../../../../../components';
import CommunitiesList from './communitiesList';
import { CommunitiesPlaceHolder } from '../../../../../components/basicUIElements';
import CommunitiesContainer from '../../../container/communitiesContainer';
//import CommunitiesContainer from '../../../container/communitiesContainer';
import styles from '../topics/topicsResultsStyles';
import DEFAULT_IMAGE from '../../../../../assets/no_image.png';
import Tag from '../../../../../components/basicUIElements/view/tag/tagView';
@ -31,20 +31,21 @@ const CommunitiesScreen = ({ navigation, searchValue }) => {
};
return (
<CommunitiesContainer data={activeVotes} searchValue={searchValue}>
{({ data, allSubscriptions, handleOnPress, handleSubscribeButtonPress, isLoggedIn }) => (
<>
{/* <CommunitiesList
votes={data}
allSubscriptions={allSubscriptions}
handleOnPress={handleOnPress}
handleSubscribeButtonPress={handleSubscribeButtonPress}
isLoggedIn={isLoggedIn}
noResult={data.length === 0}
/> */}
</>
)}
</CommunitiesContainer>
// <CommunitiesContainer data={activeVotes} searchValue={searchValue}>
// {({ data, allSubscriptions, handleOnPress, handleSubscribeButtonPress, isLoggedIn }) => (
// <>
// {/* <CommunitiesList
// votes={data}
// allSubscriptions={allSubscriptions}
// handleOnPress={handleOnPress}
// handleSubscribeButtonPress={handleSubscribeButtonPress}
// isLoggedIn={isLoggedIn}
// noResult={data.length === 0}
// /> */}
// </>
// )}
// </CommunitiesContainer>
<></>
);
};