campus_react_local/App/views/community/PicAndTextViewController/PicAndTextPageView.js

/**
 * Created by zack on 2018/5/21.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity,
	FlatList,
	Modal
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import HttpTools from '../../../network/HttpTools'
import {auth, question, imgText, login} from '../../../network/API'
import PicAndTextListItem from './View/PicAndTextListItem'

export default class FollowPageView extends Component {
	constructor(props) {
		super(props)
		this.state = {
			isLikeModalVisible: false,
			dataSources: [],
		}

		this.itemId = ''
	}

	componentDidMount() {
		
	}

	getPicAndTextList() {
		const param = {
			page: 1,
			limit: 10,
		}

		HttpTools.get(imgText, param, (response) => {
			if (response) {
				this.setState({dataSources: response})
			}
		}, (error) => {

		})
	}

	getUserInfo(callback) {
		const param = JSON.stringify({
			username: '15303737970',
			password: '471155401'
		})

		HttpTools.post(login, param, (response) => {
			global.token = response.token

			callback && callback()
		}, (error) => {

		})
	}

	createPicAndText() {
		const param = JSON.stringify({
			text: "美国队长的实际战力到底在什么水平？",
			urls: [
				"https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2017/8/20/e89274364bb5e2ceb378b8864ac05e39.jpg",
				"https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2017/8/20/e89274364bb5e2ceb378b8864ac05e39.jpg"
			]
		})

		HttpTools.post(imgText, param, (response) => {

		}, (error) => {

		})
	}


	clickBottomButton(index, itemId, isLiked) {
		if (index === 0) {  //赞
			this.addLike(itemId)

			let newDataSources = this.state.dataSources.map((item) => {
				if (item.id === itemId) {
					item.is_liked = isLiked === 1 ? 0 : 1
				}

				return item
			})

			let list = []
			for (let i = 0 ; i < newDataSources.length; i ++) {
				list.push(newDataSources[i])
			}

			this.setState({dataSources: list})
		}else if (index === 1) { //评论
			this.props.didSelectedPicAndTextItem(itemId)
		}else if (index === 2) { //转发
			this.addShares(itemId)
		}else if (index === 3) { // 眼睛
			this.itemId = itemId
			this.setState({isLikeModalVisible: true})
		}
	}

	addLike(itemId, isLiked) {
		let url = ''
		if (isLiked) { //取消点赞
			url = 'img_txt/' + itemId + '/dislike'
		}else {
			url = 'img_txt/' + itemId + '/like'
		}

		const param = JSON.stringify({
			id: itemId
		})

		HttpTools.post(url, param, (response) => {

		}, (error) => {

		})
	}

	addShares(itemId) {
		let	url = 'img_txt/' + itemId + '/share'

		const param = JSON.stringify({
			id: itemId
		})

		HttpTools.post(url, param, (response) => {

		}, (error) => {

		})
	}

	addBlock(itemId) {
		let	url = 'img_txt/' + itemId + '/block'

		const param = JSON.stringify({
			id: itemId
		})

		HttpTools.post(url, param, (response) => {

		}, (error) => {

		})
	}

	addJunk(itemId) {
		let	url = 'img_txt/' + itemId + '/junk'

		const param = JSON.stringify({
			id: itemId
		})

		HttpTools.post(url, param, (response) => {

		}, (error) => {

		})
	}

	clickLikeModalView(index) {
		if (index === 0) {
			this.addBlock(this.itemId)
		}else if (index === 1) {
			this.addJunk(this.itemId)
		}else if (index === 2) { //取消关注

		}else {
			this.setState({isLikeModalVisible: false})
		}
	}

	renderItem(item) {
		return(
			<PicAndTextListItem
				title = {item.text}
				userName = {item.user_name}
				imageUrls = {item.urls}
				userIcon = {item.user_avatar}
				commentCount = {item.comment_count}
				likes = {item.likes}
				shares = {item.shares}
				isLiked = {item.is_liked}

				clickBottomButton = {(index) => {
					this.clickBottomButton(index, item.id, item.is_liked)
				}}
				didClickImageViewContainer = {(imageUrls) => {
					this.props.didClickImageViewContainer(imageUrls)
				}}
			/>
		)
	}

	render() {
		return(
			<View style={styles.View}>
				<View style={styles.ListView}>
					<FlatList
						data = {this.state.dataSources}
						renderItem={({item}) => this.renderItem(item)}
						keyExtractor = {(item,index) =>{
							return 'key' + item.key + index
						}}
						ListFooterComponent = {() => {
							return(
								<View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
							)
						}}
					/>
				</View>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isLikeModalVisible}
					onDismiss={() => {

					}}
					onRequestClose={() => {}}
					onShow={() => {} }
				>

					<TouchableOpacity activeOpacity={1} onPress={() => {this.clickLikeModalView(100)}}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',
							justifyContent: 'center',
							alignItems: 'center'
						}}
					>
						<View style={{
							width: 320,
							height: 180,
							backgroundColor: 'white',
							borderRadius: 10,
						}}>
							<TouchableOpacity onPress={() => {
								this.clickLikeModalView(0)
							}} style={{height: 60, flexDirection: 'row', alignItems: 'center'}}>
								<Image source={require('../../../resources/images/TabBar/PicAndText/close.png')}  style={{width: 15, height: 15, backgroundColor: 'white', marginLeft: 34}}/>
								<View style={{justifyContent: 'center',
									marginLeft: 17}}>
									<Text style={{fontSize: 15, color: '#000000'}}>{'不感兴趣'}</Text>
									<Text style={{fontSize: 12, color: '#b8b8b8', marginTop: 8}}>{'减少这类内容'}</Text>
								</View>
							</TouchableOpacity>

							<TouchableOpacity onPress={() => {
								this.clickLikeModalView(1)
							}}  style={{height: 60, flexDirection: 'row', alignItems: 'center'}}>
								<Image source={require('../../../resources/images/TabBar/PicAndText/warning.png')} style={{width: 15, height: 15, backgroundColor: 'white', marginLeft: 34}}/>
								<View style={{justifyContent: 'center',
									marginLeft: 17}}>
									<Text style={{fontSize: 15, color: '#000000'}}>{'反馈垃圾内容'}</Text>
									<Text style={{fontSize: 12, color: '#b8b8b8', marginTop: 8}}>{'低俗，标题党等'}</Text>
								</View>
							</TouchableOpacity>

							<TouchableOpacity onPress={() => {
								this.clickLikeModalView(2)
							}}  style={{height: 60, flexDirection: 'row', alignItems: 'center'}}>
								<Image source={require('../../../resources/images/TabBar/PicAndText/cancle.png')}  style={{width: 15, height: 15, backgroundColor: 'white', marginLeft: 34}}/>
								<View style={{ justifyContent: 'center',
									marginLeft: 17}}>
									<Text style={{fontSize: 15, color: '#000000'}}>{'取消关注 Zack'}</Text>
								</View>
							</TouchableOpacity>

							<View style={{width: 210, height: 0.5, backgroundColor: '#efeff4', position: 'absolute', left: 0, top: 60}} />
							<View style={{width: 210, height: 0.5, backgroundColor: '#efeff4', position: 'absolute', left: 0, top: 120}} />
						</View>
					</TouchableOpacity>
				</Modal>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: '#ffffff',
		alignItems: 'center',
	},
	ListView: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
	},
	BlankImageView: {
		marginTop: NavigationBarHeight.height + 80,
		width: 175,
		height: 143,
	},
	TitleText: {
		fontSize: 17,
		color: '#05120b',
		marginTop: 45,

	},
	FollowButton: {
		marginTop: 25,
		width: 230,
		height: 46,
		backgroundColor: '#ffffff',
		borderWidth: 1.0,
		borderColor: '#fc4747',
		borderRadius: 23,
		justifyContent: 'center',
		alignItems: 'center'
	},
	FollowButtonText: {
		fontSize: 17,
		color: '#fc4747',
	},
})