created follow unfollow functionability

This commit is contained in:
ue 2018-11-04 15:25:21 +03:00
parent 121d45c0f9
commit 5154276445
5 changed files with 124 additions and 110 deletions

View File

@ -1,6 +1,6 @@
import React, { Component, Fragment } from 'react';
import {
View, Image, Text, TouchableOpacity, Dimensions,
View, Image, Text, TouchableOpacity, Dimensions, ActivityIndicator,
} from 'react-native';
import { DropdownButton } from '../../dropdownButton';
@ -11,8 +11,8 @@ import DEFAULT_IMAGE from '../../../assets/default_cover_image.png';
import { TextWithIcon } from '../../basicUIElements';
import { PercentBar } from '../../percentBar';
import { IconButton } from '../../iconButton';
// Styles
// eslint-disable-next-line
import styles from './profileSummaryStyles';
const DEVICE_WIDTH = Dimensions.get('window').width;
@ -47,6 +47,10 @@ class ProfileSummaryView extends Component {
followingCount,
followerCount,
coverImage,
isFollowing,
isFavorite,
isFollowLoading,
handleFollowUnfollowUser,
} = this.props;
const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`;
const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`;
@ -63,6 +67,7 @@ class ProfileSummaryView extends Component {
: null;
const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 15;
const followButtonIcon = !isFollowing ? 'user-follow' : 'user-unfollow';
return (
<Fragment>
@ -111,18 +116,24 @@ class ProfileSummaryView extends Component {
<View style={styles.rightIcons}>
<IconButton
backgroundColor="transparent"
name="ios-heart"
name="heart"
iconType="SimpleLineIcons"
size={16}
style={styles.insetIconStyle}
color="#c1c5c7"
/>
<IconButton
backgroundColor="transparent"
name="md-person-add"
size={16}
style={styles.insetIconStyle}
color="#c1c5c7"
style={[styles.insetIconStyle]}
/>
{isFollowLoading ? (
<ActivityIndicator style={styles.insetIconStyle} />
) : (
<IconButton
backgroundColor="transparent"
name={followButtonIcon}
iconType="SimpleLineIcons"
onPress={() => handleFollowUnfollowUser(isFollowing ? false : true)}
size={16}
style={styles.insetIconStyle}
color="#c1c5c7"
/>
)}
<DropdownButton
style={styles.insetIconStyle}
options={['option1', 'option2', 'option3', 'option4']}

View File

@ -46,7 +46,6 @@ export const getUser = async (user) => {
const global_properties = await client.database.getDynamicGlobalProperties();
const rc_power = await client.call('rc_api', 'find_rc_accounts', { accounts: [user] });
account[0].rc_manabar = rc_power.rc_accounts[0].rc_manabar;
account[0].steem_power = vestToSteem(
account[0].vesting_shares,
@ -109,22 +108,13 @@ export const getFollowers = user => new Promise((resolve, reject) => {
* @param user username
* TODO: Pagination
*/
export const getFollowing = user => new Promise((resolve, reject) => {
client
.call('follow_api', 'get_following', [user, '', 'blog', 50])
.then((result) => {
resolve(result);
})
.catch((err) => {
reject(err);
});
});
export const getFollowing = (follower, startFollowing, followType = 'blog', limit = 100) => client.database.call('get_following', [follower, startFollowing, followType, limit]);
export const isFolllowing = (author, user) => new Promise((resolve, reject) => {
client
.call('follow_api', 'get_followers', [author, user, 'blog', 10])
export const isFolllowing = (user, author) => new Promise((resolve, reject) => {
client.database
.call('get_following', [author, user, 'blog', 1])
.then((result) => {
if (result[0].follower === user) {
if (result[0] && result[0].follower === author && result[0].following === user) {
resolve(true);
} else {
resolve(false);

View File

@ -9,27 +9,28 @@ import {
followUser,
unfollowUser,
getFollows,
getPosts,
getUserComments,
getUser,
isFolllowing,
getFollowing,
} from '../../../providers/steem/dsteem';
import { getUserData, getAuthStatus } from '../../../realm/realm';
import { getUserData } from '../../../realm/realm';
import { decryptKey } from '../../../utils/crypto';
class ProfileContainer extends Component {
constructor(props) {
super(props);
this.state = {
user: null,
currentUser: null,
comments: [],
replies: [],
about: {},
follows: {},
isLoggedIn: false,
isLoading: false,
isReverseHeader: false,
isReady: false,
isFollowing: false,
isFollowLoading: false,
};
}
@ -37,7 +38,7 @@ class ProfileContainer extends Component {
const { navigation } = this.props;
const selectedUser = navigation.state && navigation.state.params;
this._loadProfile(selectedUser);
this._loadProfile(selectedUser && selectedUser.username);
}
componentWillReceiveProps(nextProps) {
@ -49,7 +50,7 @@ class ProfileContainer extends Component {
if (isParamsChange) {
const selectedUser = nextProps.navigation.state && nextProps.navigation.state.params;
this._loadProfile(selectedUser);
this._loadProfile(selectedUser && selectedUser.username);
}
}
@ -68,135 +69,138 @@ class ProfileContainer extends Component {
});
};
// _unfollow = async () => {
// let userData;
// let privateKey;
_handleFollowUnfollowUser = (isFollowAction) => {
const { username, isFollowing } = this.state;
const { currentAccount } = this.props;
// await this.setState({
// follow_loader: true,
// });
const privateKey = decryptKey(currentAccount.realm_object.postingKey, '1234');
// await getUserData().then((result) => {
// userData = Array.from(result);
// });
this.setState({
isFollowLoading: true,
});
// console.log(userData);
// privateKey = decryptKey(userData[0].postingKey, '1234');
if (isFollowAction && !isFollowing) {
this._followUser(currentAccount.name, username, privateKey);
} else {
this._unfollowUser(currentAccount.name, username, privateKey);
}
};
// unfollowUser(
// {
// follower: userData[0].username,
// following: this.state.author.name,
// },
// privateKey,
// )
// .then((result) => {
// this.setState({
// follow_loader: false,
// isFolllowing: false,
// });
// })
// .catch((err) => {
// this.setState({
// follow_loader: false,
// });
// });
// };
_unfollowUser = (follower, following, privateKey) => {
unfollowUser(
{
follower,
following,
},
privateKey,
)
.then((result) => {
this._followActionDone();
})
.catch((err) => {
this._followActionDone(err);
});
};
// _follow = async () => {
// let userData;
// let privateKey;
_followUser = (follower, following, privateKey) => {
followUser(
{
follower,
following,
},
privateKey,
)
.then((result) => {
this._followActionDone();
})
.catch((err) => {
this._followActionDone(err);
});
};
// await this.setState({
// follow_loader: true,
// });
_followActionDone = (error = null) => {
this.setState({
isFollowLoading: false,
});
// await getUserData().then((result) => {
// userData = Array.from(result);
// });
if (error) {
this.setState({
error,
});
} else {
this._loadProfile();
}
};
// console.log(userData);
// privateKey = decryptKey(userData[0].postingKey, '1234');
// followUser(
// {
// follower: userData[0].username,
// following: this.state.author.name,
// },
// privateKey,
// )
// .then((result) => {
// console.log(result);
// this.setState({
// follow_loader: false,
// isFolllowing: true,
// });
// })
// .catch((err) => {
// console.log(err);
// this.setState({
// follow_loader: false,
// isFolllowing: false,
// });
// });
// };
async _loadProfile(selectedUser = null) {
const { currentAccount, isLoggedIn } = this.props;
_loadProfile = async (selectedUser = null) => {
let username;
const { currentAccount, isLoggedIn } = this.props;
const { username: _username } = this.state;
const _selectedUser = selectedUser || _username;
const _isFollowing = await isFolllowing(
_selectedUser.username || _username,
currentAccount.name,
);
if (selectedUser) {
username = selectedUser.username;
if (_selectedUser) {
username = selectedUser ? selectedUser : _selectedUser;
this.setState({ isReverseHeader: true });
} else if (isLoggedIn) {
username = currentAccount.name;
}
let user;
let follows;
await getFollows(username).then((res) => {
follows = res;
});
user = selectedUser ? await getUser(username) : currentAccount;
const user = _selectedUser ? await getUser(username) : currentAccount;
this.setState(
{
user,
follows,
username,
isFollowing: _isFollowing,
},
() => {
this._getComments(username);
},
);
}
};
render() {
const {
comments,
error,
follows,
isReverseHeader,
isFollowLoading,
isFollowing,
isLoading,
isLoggedIn,
user,
isReady,
isReverseHeader,
user,
username,
} = this.state;
return (
<Fragment>
<ProfileScreen
isReady={isReady}
about={user && user.about && user.about.profile}
isReverseHeader={isReverseHeader}
comments={comments}
error={error}
follows={follows}
handleFollowUnfollowUser={this._handleFollowUnfollowUser}
isFollowLoading={isFollowLoading}
isFollowing={isFollowing}
isLoading={isLoading}
isLoggedIn={isLoggedIn}
username={username}
isReady={isReady}
isReverseHeader={isReverseHeader}
user={user}
username={username}
{...this.props}
/>
</Fragment>

View File

@ -32,12 +32,15 @@ class ProfileScreen extends Component {
about,
comments,
follows,
handleFollowUnfollowUser,
isLoading,
isLoggedIn,
isReverseHeader,
user,
isReady,
username,
isFollowing,
isFollowLoading,
} = this.props;
let _about;
let avatar;
@ -86,7 +89,10 @@ class ProfileScreen extends Component {
locked={!isLoggedIn}
>
<ProfileSummary
isFollowing={isFollowing}
percentVP={votingPower}
isFollowLoading={isFollowLoading}
handleFollowUnfollowUser={handleFollowUnfollowUser}
percentRC={resourceCredits}
hoursVP={fullInHourVP || null}
hoursRC={fullInHourRC || null}

View File

@ -33,6 +33,9 @@ class SplashContainer extends Component {
dispatch(addOtherAccount({ username: accountData.username }));
});
getUser(response[response.length - 1].username).then((accountData) => {
const realmObject = response[response.length - 1];
accountData.realm_object = realmObject;
dispatch(updateCurrentAccount(accountData));
dispatch(activeApplication());
dispatch(login());