mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-23 13:22:02 +03:00
seperated styles && refactored a bit && created container comp
This commit is contained in:
ue
parent
0983149796
commit
243fa96bf9
@ -1,6 +1,6 @@
|
||||
import Logo from "./logo/logo";
|
||||
import Comment from "./comment/comment";
|
||||
import PostCard from "./post-card/postCard";
|
||||
import PostCard from "./postCard";
|
||||
import Reply from "./reply/reply";
|
||||
import Search from "./search/search";
|
||||
import { FormInput } from "./formInput";
|
||||
|
||||
@ -1,653 +0,0 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import {
|
||||
Card,
|
||||
CardItem,
|
||||
Left,
|
||||
Right,
|
||||
Thumbnail,
|
||||
View,
|
||||
Icon,
|
||||
Body,
|
||||
Text,
|
||||
} from "native-base";
|
||||
import { Navigation } from "react-native-navigation";
|
||||
|
||||
import Modal from "react-native-modal";
|
||||
import { Popover, PopoverController } from "react-native-modal-popover";
|
||||
import Slider from "react-native-slider";
|
||||
|
||||
// STEEM
|
||||
import { upvote, upvoteAmount } from "../../providers/steem/dsteem";
|
||||
import { decryptKey } from "../../utils/crypto";
|
||||
import { getUserData } from "../../realm/realm";
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
class PostCard extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.upvoteContent = this.upvoteContent.bind(this);
|
||||
this.calculateEstimatedAmount = this.calculateEstimatedAmount.bind(
|
||||
this
|
||||
);
|
||||
|
||||
this.state = {
|
||||
value: 0.0,
|
||||
isVoting: false,
|
||||
isVoted: this.props.content.isVoted,
|
||||
amount: "0.00",
|
||||
isModalVisible: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.isLoggedIn == true) {
|
||||
this.calculateEstimatedAmount();
|
||||
}
|
||||
}
|
||||
|
||||
calculateEstimatedAmount = async () => {
|
||||
// Calculate total vesting shares
|
||||
let total_vests =
|
||||
parseFloat(this.props.user.vesting_shares) +
|
||||
parseFloat(this.props.user.received_vesting_shares) -
|
||||
parseFloat(this.props.user.delegated_vesting_shares);
|
||||
|
||||
let final_vest = total_vests * 1e6;
|
||||
|
||||
let power =
|
||||
(this.props.user.voting_power * (this.state.value * 10000)) /
|
||||
10000 /
|
||||
50;
|
||||
|
||||
let rshares = (power * final_vest) / 10000;
|
||||
|
||||
let estimated = await upvoteAmount(rshares);
|
||||
|
||||
this.setState({
|
||||
amount: estimated.toFixed(3),
|
||||
});
|
||||
};
|
||||
|
||||
upvoteContent = async () => {
|
||||
let postingKey;
|
||||
let userData;
|
||||
|
||||
if (this.props.isLoggedIn) {
|
||||
await this.setState({
|
||||
isVoting: true,
|
||||
});
|
||||
|
||||
await getUserData().then(result => {
|
||||
userData = Array.from(result);
|
||||
postingKey = decryptKey(userData[0].postingKey, "pinCode");
|
||||
});
|
||||
upvote(
|
||||
{
|
||||
voter: this.props.user.name,
|
||||
author: this.props.content.author,
|
||||
permlink: this.props.content.permlink,
|
||||
weight: (this.state.value * 100).toFixed(0) * 100,
|
||||
},
|
||||
postingKey
|
||||
)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.setState({
|
||||
isVoted: true,
|
||||
isVoting: false,
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.setState({
|
||||
isVoted: false,
|
||||
isVoting: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
toggleModal = () => {
|
||||
this.setState({
|
||||
isModalVisible: !this.state.isModalVisible,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card style={styles.post}>
|
||||
<CardItem style={styles.header}>
|
||||
<Left>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
Navigation.push("tab1Stack", {
|
||||
component: {
|
||||
name: "navigation.eSteem.Author",
|
||||
passProps: {
|
||||
author: this.props.content.author,
|
||||
isLoggedIn: this.props.isLoggedIn,
|
||||
user: this.props.user,
|
||||
},
|
||||
options: {
|
||||
topBar: {},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Thumbnail
|
||||
style={styles.avatar}
|
||||
source={{ uri: this.props.content.avatar }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<Body style={styles.body}>
|
||||
<View style={styles.author}>
|
||||
<Text style={styles.authorName}>
|
||||
{this.props.content.author}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.badge}>
|
||||
<Text style={styles.text}>
|
||||
{this.props.content.author_reputation}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.category}>
|
||||
<Text style={styles.categoryText}>
|
||||
{this.props.content.category}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.timeAgo} note>
|
||||
{" "}
|
||||
{this.props.content.created}{" "}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="md-more" />
|
||||
</Right>
|
||||
</CardItem>
|
||||
<Image
|
||||
source={{ uri: this.props.content.image }}
|
||||
defaultSource={require("../../assets/no_image.png")}
|
||||
style={styles.image}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
Navigation.push("tab1Stack", {
|
||||
component: {
|
||||
name: "navigation.eSteem.Post",
|
||||
passProps: {
|
||||
content: this.props.content,
|
||||
isLoggedIn: this.props.isLoggedIn,
|
||||
user: this.props.user,
|
||||
},
|
||||
options: {
|
||||
topBar: {},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<Text style={styles.title}>
|
||||
{this.props.content.title}
|
||||
</Text>
|
||||
<Text style={styles.summary}>
|
||||
{this.props.content.summary}
|
||||
</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</TouchableOpacity>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<PopoverController>
|
||||
{({
|
||||
openPopover,
|
||||
closePopover,
|
||||
popoverVisible,
|
||||
setPopoverAnchor,
|
||||
popoverAnchorRect,
|
||||
}) => (
|
||||
<React.Fragment>
|
||||
<TouchableOpacity
|
||||
start
|
||||
ref={setPopoverAnchor}
|
||||
onPress={openPopover}
|
||||
style={styles.upvoteButton}
|
||||
>
|
||||
{this.state.isVoting ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<View>
|
||||
{this.state.isVoted ? (
|
||||
<Icon
|
||||
style={{
|
||||
color: "#007ee5",
|
||||
}}
|
||||
style={
|
||||
styles.upvoteIcon
|
||||
}
|
||||
active
|
||||
name="ios-arrow-dropup-circle"
|
||||
/>
|
||||
) : (
|
||||
<Icon
|
||||
style={{
|
||||
color: "#007ee5",
|
||||
}}
|
||||
style={
|
||||
styles.upvoteIcon
|
||||
}
|
||||
active
|
||||
name="ios-arrow-dropup-outline"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<Popover
|
||||
contentStyle={styles.popover}
|
||||
arrowStyle={styles.arrow}
|
||||
backgroundStyle={styles.background}
|
||||
visible={popoverVisible}
|
||||
onClose={closePopover}
|
||||
fromRect={popoverAnchorRect}
|
||||
placement={"top"}
|
||||
supportedOrientations={[
|
||||
"portrait",
|
||||
"landscape",
|
||||
]}
|
||||
>
|
||||
<Text>${this.state.amount}</Text>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
closePopover();
|
||||
this.upvoteContent();
|
||||
}}
|
||||
style={{
|
||||
flex: 0.1,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
style={{ color: "#007ee5" }}
|
||||
active
|
||||
name="ios-arrow-dropup-outline"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<Slider
|
||||
style={{ flex: 0.75 }}
|
||||
minimumTrackTintColor="#13a9d6"
|
||||
trackStyle={styles.track}
|
||||
thumbStyle={styles.thumb}
|
||||
thumbTintColor="#007ee5"
|
||||
value={this.state.value}
|
||||
onValueChange={value => {
|
||||
this.setState(
|
||||
{ value },
|
||||
() => {
|
||||
this.calculateEstimatedAmount();
|
||||
}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
flex: 0.15,
|
||||
alignSelf: "center",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
>
|
||||
{(
|
||||
this.state.value * 100
|
||||
).toFixed(0)}
|
||||
%
|
||||
</Text>
|
||||
</View>
|
||||
</Popover>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</PopoverController>
|
||||
<TouchableOpacity
|
||||
onPress={this.toggleModal}
|
||||
style={styles.payoutButton}
|
||||
>
|
||||
<Text style={styles.payout}>
|
||||
${this.props.content.pending_payout_value}
|
||||
</Text>
|
||||
<Icon
|
||||
name="md-arrow-dropdown"
|
||||
style={styles.payoutIcon}
|
||||
/>
|
||||
<Modal isVisible={this.state.isModalVisible}>
|
||||
<View
|
||||
style={{
|
||||
flex: 0.8,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={this.toggleModal}
|
||||
>
|
||||
<Text>Tap to close!</Text>
|
||||
</TouchableOpacity>
|
||||
<FlatList
|
||||
data={this.props.content.active_votes}
|
||||
keyExtractor={item =>
|
||||
item.voter.toString()
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
borderColor: "lightgray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Thumbnail
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 17,
|
||||
flex: 0.1,
|
||||
}}
|
||||
source={{
|
||||
uri: item.avatar,
|
||||
}}
|
||||
/>
|
||||
<Text style={{ flex: 0.5 }}>
|
||||
{" "}
|
||||
{item.voter} (
|
||||
{item.reputation})
|
||||
</Text>
|
||||
<Text style={{ flex: 0.2 }}>
|
||||
{item.value}$
|
||||
</Text>
|
||||
<Text style={{ flex: 0.2 }}>
|
||||
{item.percent}%
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</Modal>
|
||||
</TouchableOpacity>
|
||||
</Left>
|
||||
<Right>
|
||||
<TouchableOpacity start style={styles.commentButton}>
|
||||
<Icon
|
||||
style={styles.commentIcon}
|
||||
active
|
||||
name="ios-chatbubbles-outline"
|
||||
/>
|
||||
<Text style={styles.comment}>
|
||||
{this.props.content.children}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</Right>
|
||||
</CardItem>
|
||||
{this.props.content.top_likers ? (
|
||||
<CardItem style={styles.topLikers}>
|
||||
<Thumbnail
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${
|
||||
this.props.content.top_likers[0]
|
||||
}/avatar/small`,
|
||||
}}
|
||||
style={styles.likers_1}
|
||||
/>
|
||||
<Thumbnail
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${
|
||||
this.props.content.top_likers[1]
|
||||
}/avatar/small`,
|
||||
}}
|
||||
style={styles.likers_2}
|
||||
/>
|
||||
<Thumbnail
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${
|
||||
this.props.content.top_likers[2]
|
||||
}/avatar/small`,
|
||||
}}
|
||||
style={styles.likers_3}
|
||||
/>
|
||||
<Text style={styles.footer}>
|
||||
@{this.props.content.top_likers[0]}, @
|
||||
{this.props.content.top_likers[1]}, @
|
||||
{this.props.content.top_likers[2]}
|
||||
<Text style={styles.footer}> & </Text>
|
||||
{this.props.content.vote_count -
|
||||
this.props.content.top_likers.length}{" "}
|
||||
others like this
|
||||
</Text>
|
||||
</CardItem>
|
||||
) : (
|
||||
<CardItem>
|
||||
<Text style={styles.footer}>
|
||||
{this.props.content.vote_count} likes
|
||||
</Text>
|
||||
</CardItem>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
post: {
|
||||
shadowColor: "white",
|
||||
padding: 0,
|
||||
marginRight: 0,
|
||||
marginLeft: 0,
|
||||
marginTop: 10,
|
||||
marginBottom: 0,
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e5e5",
|
||||
borderRadius: 5,
|
||||
},
|
||||
avatar: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
borderColor: "lightgray",
|
||||
borderWidth: 1,
|
||||
},
|
||||
author: {
|
||||
backgroundColor: "white",
|
||||
alignSelf: "flex-start",
|
||||
paddingVertical: 5,
|
||||
},
|
||||
timeAgo: {
|
||||
alignSelf: "center",
|
||||
fontSize: 9,
|
||||
fontWeight: "100",
|
||||
marginHorizontal: 3,
|
||||
},
|
||||
authorName: {
|
||||
color: "#222",
|
||||
fontWeight: "600",
|
||||
fontSize: 10,
|
||||
},
|
||||
upvoteButton: {
|
||||
margin: 0,
|
||||
flexDirection: "row",
|
||||
paddingVertical: 0,
|
||||
},
|
||||
upvoteIcon: {
|
||||
alignSelf: "flex-start",
|
||||
fontSize: 20,
|
||||
color: "#007ee5",
|
||||
margin: 0,
|
||||
width: 18,
|
||||
},
|
||||
payout: {
|
||||
alignSelf: "center",
|
||||
fontSize: 10,
|
||||
color: "#626262",
|
||||
marginLeft: 3,
|
||||
},
|
||||
payoutIcon: {
|
||||
fontSize: 15,
|
||||
marginHorizontal: 3,
|
||||
color: "#a0a0a0",
|
||||
alignSelf: "center",
|
||||
},
|
||||
payoutButton: {
|
||||
flexDirection: "row",
|
||||
alignSelf: "flex-start",
|
||||
paddingVertical: 2,
|
||||
},
|
||||
commentButton: {
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
flexDirection: "row",
|
||||
},
|
||||
comment: {
|
||||
alignSelf: "center",
|
||||
fontSize: 10,
|
||||
color: "#626262",
|
||||
marginLeft: 3,
|
||||
},
|
||||
commentIcon: {
|
||||
alignSelf: "flex-start",
|
||||
fontSize: 20,
|
||||
color: "#007ee5",
|
||||
margin: 0,
|
||||
width: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
marginVertical: 5,
|
||||
},
|
||||
summary: {
|
||||
fontSize: 10,
|
||||
fontWeight: "200",
|
||||
overflow: "hidden",
|
||||
},
|
||||
header: {
|
||||
shadowColor: "white",
|
||||
height: 50,
|
||||
borderRadius: 5,
|
||||
},
|
||||
body: {
|
||||
justifyContent: "flex-start",
|
||||
flexDirection: "row",
|
||||
},
|
||||
image: {
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
height: 160,
|
||||
},
|
||||
badge: {
|
||||
alignSelf: "center",
|
||||
borderColor: "lightgray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
width: 15,
|
||||
height: 15,
|
||||
padding: 2,
|
||||
backgroundColor: "lightgray",
|
||||
marginHorizontal: 5,
|
||||
},
|
||||
category: {
|
||||
alignSelf: "center",
|
||||
borderRadius: 10,
|
||||
height: 15,
|
||||
backgroundColor: "#007EE5",
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 1.5,
|
||||
},
|
||||
categoryText: {
|
||||
fontSize: 9,
|
||||
color: "white",
|
||||
fontWeight: "600",
|
||||
},
|
||||
text: {
|
||||
fontSize: 7,
|
||||
alignSelf: "center",
|
||||
textAlignVertical: "center",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
topLikers: {
|
||||
shadowColor: "white",
|
||||
backgroundColor: "#f8f8f8",
|
||||
borderWidth: 0,
|
||||
padding: 0,
|
||||
borderRadius: 5,
|
||||
},
|
||||
likers_1: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
borderWidth: 0.5,
|
||||
borderColor: "lightgray",
|
||||
marginVertical: -5,
|
||||
},
|
||||
likers_2: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
borderWidth: 0.5,
|
||||
borderColor: "lightgray",
|
||||
marginVertical: -5,
|
||||
marginLeft: -3,
|
||||
},
|
||||
likers_3: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
borderWidth: 0.5,
|
||||
borderColor: "lightgray",
|
||||
marginVertical: -5,
|
||||
marginLeft: -3,
|
||||
},
|
||||
footer: {
|
||||
shadowColor: "white",
|
||||
paddingLeft: 5,
|
||||
borderRadius: 5,
|
||||
fontSize: 7,
|
||||
fontWeight: "100",
|
||||
color: "#777777",
|
||||
},
|
||||
popover: {
|
||||
width: Dimensions.get("window").width - 20,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
track: {
|
||||
height: 2,
|
||||
borderRadius: 1,
|
||||
},
|
||||
thumb: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 30 / 2,
|
||||
backgroundColor: "white",
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 2,
|
||||
shadowOpacity: 0.35,
|
||||
},
|
||||
});
|
||||
|
||||
export default PostCard;
|
||||
35
src/components/postCard/container/postCardContainer.js
Normal file
35
src/components/postCard/container/postCardContainer.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
// Services and Actions
|
||||
|
||||
// Middleware
|
||||
|
||||
// Constants
|
||||
|
||||
// Utilities
|
||||
|
||||
// Component
|
||||
import { PostCardView } from "../";
|
||||
|
||||
/*
|
||||
* Props Name Description Value
|
||||
*@props --> props name here description here Value Type Here
|
||||
*
|
||||
*/
|
||||
|
||||
class PostCardContainer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
// Component Life Cycle Functions
|
||||
|
||||
// Component Functions
|
||||
|
||||
render() {
|
||||
return <PostCardView {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default PostCardContainer;
|
||||
5
src/components/postCard/index.js
Normal file
5
src/components/postCard/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import PostCardView from "./view/postCardView";
|
||||
import PostCard from "./container/postCardContainer";
|
||||
|
||||
export { PostCardView, PostCard };
|
||||
export default PostCard;
|
||||
200
src/components/postCard/view/postCardStyles.js
Normal file
200
src/components/postCard/view/postCardStyles.js
Normal file
@ -0,0 +1,200 @@
|
||||
import EStyleSheet from "react-native-extended-stylesheet";
|
||||
|
||||
export default EStyleSheet.create({
|
||||
post: {
|
||||
shadowColor: "white",
|
||||
padding: 0,
|
||||
marginRight: 0,
|
||||
marginLeft: 0,
|
||||
marginTop: 10,
|
||||
marginBottom: 0,
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e5e5",
|
||||
borderRadius: 5,
|
||||
},
|
||||
avatar: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
borderColor: "lightgray",
|
||||
borderWidth: 1,
|
||||
},
|
||||
author: {
|
||||
backgroundColor: "white",
|
||||
alignSelf: "flex-start",
|
||||
paddingVertical: 5,
|
||||
},
|
||||
timeAgo: {
|
||||
alignSelf: "center",
|
||||
fontSize: 9,
|
||||
fontWeight: "100",
|
||||
marginHorizontal: 3,
|
||||
},
|
||||
authorName: {
|
||||
color: "#222",
|
||||
fontWeight: "600",
|
||||
fontSize: 10,
|
||||
},
|
||||
upvoteButton: {
|
||||
margin: 0,
|
||||
flexDirection: "row",
|
||||
paddingVertical: 0,
|
||||
},
|
||||
upvoteIcon: {
|
||||
alignSelf: "flex-start",
|
||||
fontSize: 20,
|
||||
color: "#007ee5",
|
||||
margin: 0,
|
||||
width: 18,
|
||||
},
|
||||
payout: {
|
||||
alignSelf: "center",
|
||||
fontSize: 10,
|
||||
color: "#626262",
|
||||
marginLeft: 3,
|
||||
},
|
||||
payoutIcon: {
|
||||
fontSize: 15,
|
||||
marginHorizontal: 3,
|
||||
color: "#a0a0a0",
|
||||
alignSelf: "center",
|
||||
},
|
||||
payoutButton: {
|
||||
flexDirection: "row",
|
||||
alignSelf: "flex-start",
|
||||
paddingVertical: 2,
|
||||
},
|
||||
commentButton: {
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
flexDirection: "row",
|
||||
},
|
||||
comment: {
|
||||
alignSelf: "center",
|
||||
fontSize: 10,
|
||||
color: "#626262",
|
||||
marginLeft: 3,
|
||||
},
|
||||
commentIcon: {
|
||||
alignSelf: "flex-start",
|
||||
fontSize: 20,
|
||||
color: "#007ee5",
|
||||
margin: 0,
|
||||
width: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
marginVertical: 5,
|
||||
},
|
||||
summary: {
|
||||
fontSize: 10,
|
||||
fontWeight: "200",
|
||||
overflow: "hidden",
|
||||
},
|
||||
header: {
|
||||
shadowColor: "white",
|
||||
height: 50,
|
||||
borderRadius: 5,
|
||||
},
|
||||
body: {
|
||||
justifyContent: "flex-start",
|
||||
flexDirection: "row",
|
||||
},
|
||||
image: {
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
height: 160,
|
||||
},
|
||||
badge: {
|
||||
alignSelf: "center",
|
||||
borderColor: "lightgray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
width: 15,
|
||||
height: 15,
|
||||
padding: 2,
|
||||
backgroundColor: "lightgray",
|
||||
marginHorizontal: 5,
|
||||
},
|
||||
category: {
|
||||
alignSelf: "center",
|
||||
borderRadius: 10,
|
||||
height: 15,
|
||||
backgroundColor: "#007EE5",
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 1.5,
|
||||
},
|
||||
categoryText: {
|
||||
fontSize: 9,
|
||||
color: "white",
|
||||
fontWeight: "600",
|
||||
},
|
||||
text: {
|
||||
fontSize: 7,
|
||||
alignSelf: "center",
|
||||
textAlignVertical: "center",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
topLikers: {
|
||||
shadowColor: "white",
|
||||
backgroundColor: "#f8f8f8",
|
||||
borderWidth: 0,
|
||||
padding: 0,
|
||||
borderRadius: 5,
|
||||
},
|
||||
likers_1: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
borderWidth: 0.5,
|
||||
borderColor: "lightgray",
|
||||
marginVertical: -5,
|
||||
},
|
||||
likers_2: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
borderWidth: 0.5,
|
||||
borderColor: "lightgray",
|
||||
marginVertical: -5,
|
||||
marginLeft: -3,
|
||||
},
|
||||
likers_3: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
borderWidth: 0.5,
|
||||
borderColor: "lightgray",
|
||||
marginVertical: -5,
|
||||
marginLeft: -3,
|
||||
},
|
||||
footer: {
|
||||
shadowColor: "white",
|
||||
paddingLeft: 5,
|
||||
borderRadius: 5,
|
||||
fontSize: 7,
|
||||
fontWeight: "100",
|
||||
color: "#777777",
|
||||
},
|
||||
popover: {
|
||||
width: "$deviceWidth - 20",
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
track: {
|
||||
height: 2,
|
||||
borderRadius: 1,
|
||||
},
|
||||
thumb: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 30 / 2,
|
||||
backgroundColor: "white",
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 2,
|
||||
shadowOpacity: 0.35,
|
||||
},
|
||||
});
|
||||
423
src/components/postCard/view/postCardView.js
Normal file
423
src/components/postCard/view/postCardView.js
Normal file
@ -0,0 +1,423 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
FlatList,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import {
|
||||
Card,
|
||||
CardItem,
|
||||
Left,
|
||||
Right,
|
||||
Thumbnail,
|
||||
View,
|
||||
Icon,
|
||||
Body,
|
||||
Text,
|
||||
} from "native-base";
|
||||
import { Navigation } from "react-native-navigation";
|
||||
import Modal from "react-native-modal";
|
||||
import { Popover, PopoverController } from "react-native-modal-popover";
|
||||
import Slider from "react-native-slider";
|
||||
|
||||
// STEEM
|
||||
import { upvote, upvoteAmount } from "../../../providers/steem/dsteem";
|
||||
import { decryptKey } from "../../../utils/crypto";
|
||||
import { getUserData } from "../../../realm/realm";
|
||||
|
||||
// Styles
|
||||
import styles from "./postCardStyles";
|
||||
|
||||
class PostCard extends Component {
|
||||
/* Props
|
||||
* ------------------------------------------------
|
||||
* @prop { string } description - Description texts.
|
||||
* @prop { string } iconName - For icon render name.
|
||||
*
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.upvoteContent = this.upvoteContent.bind(this);
|
||||
this.calculateEstimatedAmount = this.calculateEstimatedAmount.bind(this);
|
||||
|
||||
this.state = {
|
||||
value: 0.0,
|
||||
isVoting: false,
|
||||
isVoted: props.content && props.content.isVoted,
|
||||
amount: "0.00",
|
||||
isModalVisible: false,
|
||||
};
|
||||
}
|
||||
|
||||
// Component Lifecycle Functions
|
||||
componentDidMount() {
|
||||
const { isLoggedIn } = this.props;
|
||||
|
||||
isLoggedIn && this.calculateEstimatedAmount();
|
||||
}
|
||||
|
||||
// Component Functions
|
||||
calculateEstimatedAmount = async () => {
|
||||
const { user } = this.props;
|
||||
const { value } = this.state;
|
||||
// Calculate total vesting shares
|
||||
const total_vests =
|
||||
parseFloat(user.vesting_shares) +
|
||||
parseFloat(user.received_vesting_shares) -
|
||||
parseFloat(user.delegated_vesting_shares);
|
||||
|
||||
const final_vest = total_vests * 1e6;
|
||||
|
||||
const power = (user.voting_power * (value * 10000)) / 10000 / 50;
|
||||
|
||||
const rshares = (power * final_vest) / 10000;
|
||||
|
||||
const estimated = await upvoteAmount(rshares);
|
||||
|
||||
this.setState({
|
||||
amount: estimated.toFixed(3),
|
||||
});
|
||||
};
|
||||
|
||||
upvoteContent = async () => {
|
||||
const { isLoggedIn, user, content } = this.prop;
|
||||
const { value } = this.state;
|
||||
|
||||
let postingKey;
|
||||
let userData;
|
||||
|
||||
if (isLoggedIn) {
|
||||
await this.setState({
|
||||
isVoting: true,
|
||||
});
|
||||
|
||||
await getUserData().then(result => {
|
||||
userData = Array.from(result);
|
||||
postingKey = decryptKey(userData[0].postingKey, "pinCode");
|
||||
});
|
||||
upvote(
|
||||
{
|
||||
voter: user && user.name,
|
||||
author: content && content.author,
|
||||
permlink: content && content.permlink,
|
||||
weight: (value * 100).toFixed(0) * 100,
|
||||
},
|
||||
postingKey
|
||||
)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.setState({
|
||||
isVoted: true,
|
||||
isVoting: false,
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.setState({
|
||||
isVoted: false,
|
||||
isVoting: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
toggleModal = () => {
|
||||
const { isModalVisible } = this.state;
|
||||
|
||||
this.setState({
|
||||
isModalVisible: !isModalVisible,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { content, isLoggedIn, user } = this.props;
|
||||
const { isVoted, isVoting, isModalVisible, value } = this.state;
|
||||
|
||||
// TODO: Should seperate bunch of component REFACTOR ME!
|
||||
return (
|
||||
<Card style={styles.post}>
|
||||
<CardItem style={styles.header}>
|
||||
<Left>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
Navigation.push("tab1Stack", {
|
||||
component: {
|
||||
name: "navigation.eSteem.Author",
|
||||
passProps: {
|
||||
author: content && content.author,
|
||||
isLoggedIn: isLoggedIn,
|
||||
user: user,
|
||||
},
|
||||
options: {
|
||||
topBar: {},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Thumbnail
|
||||
style={styles.avatar}
|
||||
source={{ uri: content && content.avatar }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<Body style={styles.body}>
|
||||
<View style={styles.author}>
|
||||
<Text style={styles.authorName}>{content.author}</Text>
|
||||
</View>
|
||||
<View style={styles.badge}>
|
||||
<Text style={styles.text}>{content.author_reputation}</Text>
|
||||
</View>
|
||||
<View style={styles.category}>
|
||||
<Text style={styles.categoryText}>{content.category}</Text>
|
||||
</View>
|
||||
<Text style={styles.timeAgo} note>
|
||||
{" "}
|
||||
{content.created}{" "}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="md-more" />
|
||||
</Right>
|
||||
</CardItem>
|
||||
<Image
|
||||
source={{ uri: content && content.image }}
|
||||
defaultSource={require("../../../assets/no_image.png")}
|
||||
style={styles.image}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
Navigation.push("tab1Stack", {
|
||||
component: {
|
||||
name: "navigation.eSteem.Post",
|
||||
passProps: {
|
||||
content: content,
|
||||
isLoggedIn: isLoggedIn,
|
||||
user: user,
|
||||
},
|
||||
options: {
|
||||
topBar: {},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<Text style={styles.title}>{content.title}</Text>
|
||||
<Text style={styles.summary}>{content.summary}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</TouchableOpacity>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<PopoverController>
|
||||
{({
|
||||
openPopover,
|
||||
closePopover,
|
||||
popoverVisible,
|
||||
setPopoverAnchor,
|
||||
popoverAnchorRect,
|
||||
}) => (
|
||||
<React.Fragment>
|
||||
<TouchableOpacity
|
||||
start
|
||||
ref={setPopoverAnchor}
|
||||
onPress={openPopover}
|
||||
style={styles.upvoteButton}
|
||||
>
|
||||
{isVoting ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<View>
|
||||
{isVoted ? (
|
||||
<Icon
|
||||
style={{
|
||||
color: "#007ee5",
|
||||
}}
|
||||
style={styles.upvoteIcon}
|
||||
active
|
||||
name="ios-arrow-dropup-circle"
|
||||
/>
|
||||
) : (
|
||||
<Icon
|
||||
style={{
|
||||
color: "#007ee5",
|
||||
}}
|
||||
style={styles.upvoteIcon}
|
||||
active
|
||||
name="ios-arrow-dropup-outline"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<Popover
|
||||
contentStyle={styles.popover}
|
||||
arrowStyle={styles.arrow}
|
||||
backgroundStyle={styles.background}
|
||||
visible={popoverVisible}
|
||||
onClose={closePopover}
|
||||
fromRect={popoverAnchorRect}
|
||||
placement={"top"}
|
||||
supportedOrientations={["portrait", "landscape"]}
|
||||
>
|
||||
<Text>${this.state.amount}</Text>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
closePopover();
|
||||
this.upvoteContent();
|
||||
}}
|
||||
style={{
|
||||
flex: 0.1,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
style={{ color: "#007ee5" }}
|
||||
active
|
||||
name="ios-arrow-dropup-outline"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<Slider
|
||||
style={{ flex: 0.75 }}
|
||||
minimumTrackTintColor="#13a9d6"
|
||||
trackStyle={styles.track}
|
||||
thumbStyle={styles.thumb}
|
||||
thumbTintColor="#007ee5"
|
||||
value={value}
|
||||
onValueChange={value => {
|
||||
this.setState({ value }, () => {
|
||||
this.calculateEstimatedAmount();
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
flex: 0.15,
|
||||
alignSelf: "center",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
>
|
||||
{(value * 100).toFixed(0)}%
|
||||
</Text>
|
||||
</View>
|
||||
</Popover>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</PopoverController>
|
||||
<TouchableOpacity
|
||||
onPress={this.toggleModal}
|
||||
style={styles.payoutButton}
|
||||
>
|
||||
<Text style={styles.payout}>${content.pending_payout_value}</Text>
|
||||
<Icon name="md-arrow-dropdown" style={styles.payoutIcon} />
|
||||
<Modal isVisible={isModalVisible}>
|
||||
<View
|
||||
style={{
|
||||
flex: 0.8,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity onPress={this.toggleModal}>
|
||||
<Text>Tap to close!</Text>
|
||||
</TouchableOpacity>
|
||||
<FlatList
|
||||
data={this.props.content.active_votes}
|
||||
keyExtractor={item => item.voter.toString()}
|
||||
renderItem={({ item }) => (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
borderColor: "lightgray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Thumbnail
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 17,
|
||||
flex: 0.1,
|
||||
}}
|
||||
source={{
|
||||
uri: item.avatar,
|
||||
}}
|
||||
/>
|
||||
<Text style={{ flex: 0.5 }}>
|
||||
{" "}
|
||||
{item.voter} ({item.reputation})
|
||||
</Text>
|
||||
<Text style={{ flex: 0.2 }}>{item.value}$</Text>
|
||||
<Text style={{ flex: 0.2 }}>{item.percent}%</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</Modal>
|
||||
</TouchableOpacity>
|
||||
</Left>
|
||||
<Right>
|
||||
<TouchableOpacity start style={styles.commentButton}>
|
||||
<Icon
|
||||
style={styles.commentIcon}
|
||||
active
|
||||
name="ios-chatbubbles-outline"
|
||||
/>
|
||||
<Text style={styles.comment}>{content.children}</Text>
|
||||
</TouchableOpacity>
|
||||
</Right>
|
||||
</CardItem>
|
||||
{content.top_likers ? (
|
||||
<CardItem style={styles.topLikers}>
|
||||
<Thumbnail
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${
|
||||
content.top_likers[0]
|
||||
}/avatar/small`,
|
||||
}}
|
||||
style={styles.likers_1}
|
||||
/>
|
||||
<Thumbnail
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${
|
||||
content.top_likers[1]
|
||||
}/avatar/small`,
|
||||
}}
|
||||
style={styles.likers_2}
|
||||
/>
|
||||
<Thumbnail
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${
|
||||
content.top_likers[2]
|
||||
}/avatar/small`,
|
||||
}}
|
||||
style={styles.likers_3}
|
||||
/>
|
||||
<Text style={styles.footer}>
|
||||
@{content.top_likers[0]}, @{content.top_likers[1]}, @
|
||||
{content.top_likers[2]}
|
||||
<Text style={styles.footer}> & </Text>
|
||||
{content.vote_count - content.top_likers.length} others like this
|
||||
</Text>
|
||||
</CardItem>
|
||||
) : (
|
||||
<CardItem>
|
||||
<Text style={styles.footer}>{content.vote_count} likes</Text>
|
||||
</CardItem>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PostCard;
|
||||
@ -18,7 +18,8 @@ import FastImage from "react-native-fast-image";
|
||||
|
||||
// Internal Components
|
||||
import { TabBar } from "../../../components/tabBar";
|
||||
import PostCard from "../../../components/post-card/postCard";
|
||||
import { PostCard } from "../../../components/postCard";
|
||||
|
||||
import Comment from "../../../components/comment/comment";
|
||||
|
||||
// TODO: Make utils for all using moment.
|
||||
@ -131,14 +132,12 @@ class AuthorScreen extends Component {
|
||||
});
|
||||
});
|
||||
|
||||
isFolllowing(this.props.author, user.username).then(
|
||||
result => {
|
||||
isFolllowing(this.props.author, user.username).then(result => {
|
||||
this.setState({
|
||||
isFolllowing: result,
|
||||
follow_loader: false,
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -385,21 +384,13 @@ class AuthorScreen extends Component {
|
||||
<Card style={{ margin: 0 }}>
|
||||
<CardItem style={styles.about}>
|
||||
<View style={{ flex: 0.3 }}>
|
||||
<Text>
|
||||
{this.state.author.post_count} Posts
|
||||
</Text>
|
||||
<Text>{this.state.author.post_count} Posts</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.4 }}>
|
||||
<Text>
|
||||
{this.state.follows.follower_count}{" "}
|
||||
Followers
|
||||
</Text>
|
||||
<Text>{this.state.follows.follower_count} Followers</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.4 }}>
|
||||
<Text>
|
||||
{this.state.follows.following_count}{" "}
|
||||
Following
|
||||
</Text>
|
||||
<Text>{this.state.follows.following_count} Following</Text>
|
||||
</View>
|
||||
</CardItem>
|
||||
|
||||
@ -499,24 +490,17 @@ class AuthorScreen extends Component {
|
||||
<View tabLabel="Replies" style={styles.tabbarItem} />
|
||||
<View tabLabel="Wallet" style={styles.tabbarItem}>
|
||||
<Card>
|
||||
<Text>
|
||||
STEEM Balance: {this.state.author.balance}
|
||||
</Text>
|
||||
<Text>STEEM Balance: {this.state.author.balance}</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>
|
||||
SBD Balance: {this.state.author.sbd_balance}
|
||||
</Text>
|
||||
<Text>SBD Balance: {this.state.author.sbd_balance}</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>STEEM Power: {this.state.author.steem_power} SP</Text>
|
||||
<Text>
|
||||
STEEM Power: {this.state.author.steem_power}{" "}
|
||||
Received STEEM Power: {this.state.author.received_steem_power}{" "}
|
||||
SP
|
||||
</Text>
|
||||
<Text>
|
||||
Received STEEM Power:{" "}
|
||||
{this.state.author.received_steem_power} SP
|
||||
</Text>
|
||||
<Text>
|
||||
Delegated Power Power:{" "}
|
||||
{this.state.author.delegated_steem_power} SP
|
||||
@ -524,12 +508,10 @@ class AuthorScreen extends Component {
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>
|
||||
Saving STEEM Balance:{" "}
|
||||
{this.state.author.savings_balance}
|
||||
Saving STEEM Balance: {this.state.author.savings_balance}
|
||||
</Text>
|
||||
<Text>
|
||||
Saving STEEM Balance:{" "}
|
||||
{this.state.author.savings_sbd_balance}
|
||||
Saving STEEM Balance: {this.state.author.savings_sbd_balance}
|
||||
</Text>
|
||||
</Card>
|
||||
</View>
|
||||
|
||||
@ -27,7 +27,8 @@ import { getPosts } from "../../providers/steem/dsteem";
|
||||
import Placeholder from "rn-placeholder";
|
||||
|
||||
// COMPONENTS
|
||||
import PostCard from "../../components/post-card/postCard";
|
||||
import { PostCard } from "../../components/postCard";
|
||||
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
class FeedPage extends React.Component {
|
||||
|
||||
@ -1,14 +1,6 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import { Navigation } from "react-native-navigation";
|
||||
import { FlatList, View, ActivityIndicator } from "react-native";
|
||||
|
||||
import styles from "../../styles/hot.styles";
|
||||
|
||||
@ -19,7 +11,7 @@ import { getPosts } from "../../providers/steem/dsteem";
|
||||
import Placeholder from "rn-placeholder";
|
||||
|
||||
// COMPONENTS
|
||||
import PostCard from "../../components/post-card/postCard";
|
||||
import { PostCard } from "../../components/postCard";
|
||||
|
||||
// SCREENS
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
@ -9,7 +9,7 @@ import { getPosts } from "../../providers/steem/dsteem";
|
||||
import Placeholder from "rn-placeholder";
|
||||
|
||||
// COMPONENTS
|
||||
import PostCard from "../../components/post-card/postCard";
|
||||
import { PostCard } from "../../components/postCard";
|
||||
|
||||
// SCREENS
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React from "react";
|
||||
import {
|
||||
StatusBar,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import { FlatList, ActivityIndicator } from "react-native";
|
||||
|
||||
import moment from "moment";
|
||||
import FastImage from "react-native-fast-image";
|
||||
@ -13,24 +8,10 @@ import FastImage from "react-native-fast-image";
|
||||
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
|
||||
import { TabBar } from "../../../components/tabBar";
|
||||
import DiscoverPage from "../discover/discover";
|
||||
import PostCard from "../../components/post-card/postCard";
|
||||
import { PostCard } from "../../components/postCard";
|
||||
import Comment from "../../components/comment/comment";
|
||||
|
||||
import {
|
||||
Content,
|
||||
Card,
|
||||
CardItem,
|
||||
View,
|
||||
Header,
|
||||
Left,
|
||||
Body,
|
||||
Right,
|
||||
Button,
|
||||
Icon,
|
||||
Title,
|
||||
Text,
|
||||
Container,
|
||||
} from "native-base";
|
||||
import { Card, CardItem, View, Body, Title, Container } from "native-base";
|
||||
|
||||
import { getUserData, getAuthStatus } from "../../realm/realm";
|
||||
import {
|
||||
@ -40,7 +21,6 @@ import {
|
||||
getUserComments,
|
||||
getUserReplies,
|
||||
} from "../../providers/steem/dsteem";
|
||||
import store from "../../redux/store/store";
|
||||
import styles from "../../styles/profile.styles";
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
@ -218,21 +198,13 @@ class ProfilePage extends React.Component {
|
||||
<Card style={{ margin: 0 }}>
|
||||
<CardItem style={styles.about}>
|
||||
<View style={{ flex: 0.3 }}>
|
||||
<Text>
|
||||
{this.state.user.post_count} Posts
|
||||
</Text>
|
||||
<Text>{this.state.user.post_count} Posts</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.4 }}>
|
||||
<Text>
|
||||
{this.state.follows.follower_count}{" "}
|
||||
Followers
|
||||
</Text>
|
||||
<Text>{this.state.follows.follower_count} Followers</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.4 }}>
|
||||
<Text>
|
||||
{this.state.follows.following_count}{" "}
|
||||
Following
|
||||
</Text>
|
||||
<Text>{this.state.follows.following_count} Following</Text>
|
||||
</View>
|
||||
</CardItem>
|
||||
|
||||
@ -297,9 +269,7 @@ class ProfilePage extends React.Component {
|
||||
isLoggedIn={true}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(post, index) =>
|
||||
index.toString()
|
||||
}
|
||||
keyExtractor={(post, index) => index.toString()}
|
||||
onEndReached={info => {
|
||||
if (this.state.loading == false) {
|
||||
console.log(info);
|
||||
@ -323,54 +293,37 @@ class ProfilePage extends React.Component {
|
||||
user={this.state.user}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(post, index) =>
|
||||
index.toString()
|
||||
}
|
||||
keyExtractor={(post, index) => index.toString()}
|
||||
onEndThreshold={0}
|
||||
bounces={false}
|
||||
ListFooterComponent={this.renderFooter}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
tabLabel="Replies"
|
||||
style={styles.tabbarItem}
|
||||
/>
|
||||
<View tabLabel="Replies" style={styles.tabbarItem} />
|
||||
<View tabLabel="Wallet" style={styles.tabbarItem}>
|
||||
<Card>
|
||||
<Text>
|
||||
STEEM Balance: {this.state.user.balance}
|
||||
</Text>
|
||||
<Text>STEEM Balance: {this.state.user.balance}</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>
|
||||
SBD Balance:{" "}
|
||||
{this.state.user.sbd_balance}
|
||||
</Text>
|
||||
<Text>SBD Balance: {this.state.user.sbd_balance}</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>STEEM Power: {this.state.user.steem_power} SP</Text>
|
||||
<Text>
|
||||
STEEM Power:{" "}
|
||||
{this.state.user.steem_power} SP
|
||||
</Text>
|
||||
<Text>
|
||||
Received STEEM Power:{" "}
|
||||
{this.state.user.received_steem_power}{" "}
|
||||
Received STEEM Power: {this.state.user.received_steem_power}{" "}
|
||||
SP
|
||||
</Text>
|
||||
<Text>
|
||||
Delegated Power Power:{" "}
|
||||
{this.state.user.delegated_steem_power}{" "}
|
||||
SP
|
||||
{this.state.user.delegated_steem_power} SP
|
||||
</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>
|
||||
Saving STEEM Balance:{" "}
|
||||
{this.state.user.savings_balance}
|
||||
Saving STEEM Balance: {this.state.user.savings_balance}
|
||||
</Text>
|
||||
<Text>
|
||||
Saving STEEM Balance:{" "}
|
||||
{this.state.user.savings_sbd_balance}
|
||||
Saving STEEM Balance: {this.state.user.savings_sbd_balance}
|
||||
</Text>
|
||||
</Card>
|
||||
</View>
|
||||
|
||||
@ -8,7 +8,8 @@ import FastImage from "react-native-fast-image";
|
||||
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
|
||||
import { TabBar } from "../../../components/tabBar";
|
||||
import DiscoverPage from "../../discover/discover";
|
||||
import PostCard from "../../../components/post-card/postCard";
|
||||
import { PostCard } from "../../../components/postCard";
|
||||
|
||||
import Comment from "../../../components/comment/comment";
|
||||
|
||||
import { Card, CardItem, View, Body, Icon, Text } from "native-base";
|
||||
@ -200,21 +201,13 @@ class ProfileScreen extends React.Component {
|
||||
<Card style={{ margin: 0 }}>
|
||||
<CardItem style={styles.about}>
|
||||
<View style={{ flex: 0.3 }}>
|
||||
<Text>
|
||||
{this.state.user.post_count} Posts
|
||||
</Text>
|
||||
<Text>{this.state.user.post_count} Posts</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.4 }}>
|
||||
<Text>
|
||||
{this.state.follows.follower_count}{" "}
|
||||
Followers
|
||||
</Text>
|
||||
<Text>{this.state.follows.follower_count} Followers</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.4 }}>
|
||||
<Text>
|
||||
{this.state.follows.following_count}{" "}
|
||||
Following
|
||||
</Text>
|
||||
<Text>{this.state.follows.following_count} Following</Text>
|
||||
</View>
|
||||
</CardItem>
|
||||
|
||||
@ -279,9 +272,7 @@ class ProfileScreen extends React.Component {
|
||||
isLoggedIn={true}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(post, index) =>
|
||||
index.toString()
|
||||
}
|
||||
keyExtractor={(post, index) => index.toString()}
|
||||
onEndReached={info => {
|
||||
if (this.state.loading == false) {
|
||||
console.log(info);
|
||||
@ -305,54 +296,37 @@ class ProfileScreen extends React.Component {
|
||||
user={this.state.user}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(post, index) =>
|
||||
index.toString()
|
||||
}
|
||||
keyExtractor={(post, index) => index.toString()}
|
||||
onEndThreshold={0}
|
||||
bounces={false}
|
||||
ListFooterComponent={this.renderFooter}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
tabLabel="Replies"
|
||||
style={styles.tabbarItem}
|
||||
/>
|
||||
<View tabLabel="Replies" style={styles.tabbarItem} />
|
||||
<View tabLabel="Wallet" style={styles.tabbarItem}>
|
||||
<Card>
|
||||
<Text>
|
||||
STEEM Balance: {this.state.user.balance}
|
||||
</Text>
|
||||
<Text>STEEM Balance: {this.state.user.balance}</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>
|
||||
SBD Balance:{" "}
|
||||
{this.state.user.sbd_balance}
|
||||
</Text>
|
||||
<Text>SBD Balance: {this.state.user.sbd_balance}</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>STEEM Power: {this.state.user.steem_power} SP</Text>
|
||||
<Text>
|
||||
STEEM Power:{" "}
|
||||
{this.state.user.steem_power} SP
|
||||
</Text>
|
||||
<Text>
|
||||
Received STEEM Power:{" "}
|
||||
{this.state.user.received_steem_power}{" "}
|
||||
Received STEEM Power: {this.state.user.received_steem_power}{" "}
|
||||
SP
|
||||
</Text>
|
||||
<Text>
|
||||
Delegated Power Power:{" "}
|
||||
{this.state.user.delegated_steem_power}{" "}
|
||||
SP
|
||||
{this.state.user.delegated_steem_power} SP
|
||||
</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text>
|
||||
Saving STEEM Balance:{" "}
|
||||
{this.state.user.savings_balance}
|
||||
Saving STEEM Balance: {this.state.user.savings_balance}
|
||||
</Text>
|
||||
<Text>
|
||||
Saving STEEM Balance:{" "}
|
||||
{this.state.user.savings_sbd_balance}
|
||||
Saving STEEM Balance: {this.state.user.savings_sbd_balance}
|
||||
</Text>
|
||||
</Card>
|
||||
</View>
|
||||
|
||||
@ -22,7 +22,7 @@ import PinCode from "./pinCode/pinCodeContainer";
|
||||
|
||||
// COMPONENTS
|
||||
import SteemConnect from "./steem-connect/steemConnect";
|
||||
import PostCard from "../components/post-card/postCard";
|
||||
import { PostCard } from "../components/postCard";
|
||||
import Search from "../components/search/search";
|
||||
|
||||
export const registerScreens = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user