History.js 5.55 KB
import React, { Component } from 'react';
import {Image, View, Text, StyleSheet,ScrollView,TouchableOpacity } from 'react-native';
import CouponeItem from '../CouponItem'
import StampItem from '../StampItem'
import {get} from 'axios'
import { SERVER } from '../../common/servername';
import ReviewItem from '../ReviewItem'
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment'
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        current:1,
        review:[],
        user:{},
        history:[]
    }
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        AsyncStorage.getItem('user',(err,res) => {
            if(res) {
            get(`http://${SERVER}/historys/${JSON.parse(res).id}`).then(res => {
                this.setState({
                    history:res.data.data
                })
            })
            get(`http://${SERVER}/reviews/user/${JSON.parse(res).id}`).then(res => {
                this.setState({
                    review:res.data.data
                })
            })
            this.setState({
                user:JSON.parse(res)
            })
            }
            else {
                this.props.navigation.replace("LoginTab")
            }
        })
    }
    render() {
        return (
            <View>
                <View style={{width:"100%",flexDirection:"row",paddingTop:16,paddingBottom:16,paddingLeft:16,backgroundColor:"#615F5F"}}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack(null)}>
                        <Image source={require('../../assets/back.png')}/>
                    </TouchableOpacity>
                    <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                        활동 / 히스토리
                    </Text>
                </View>
                <ScrollView>
                    <View style={{
                        width:"100%",
                    shadowColor: "#000",
                    shadowOffset: {
                        width: 0,
                        height: 2,
                    },
                    backgroundColor:"white",
                    shadowOpacity: 0.25,
                    shadowRadius: 3.84,
                    elevation: 5,backgroundColor:"white"}}>
                    <View style={{flex:1,flexDirection:"row",justifyContent:"space-evenly" }}>
                        <TouchableOpacity onPress={() => this.setState({current:1})} style={{paddingTop:8.9, paddingBottom:11.1,}}>
                            <Text style={[{textAlign:"center"},this.state.current==1?{color:"#615F5F"}:{color:"#BDBCBC"}]}>
                                전체
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity  onPress={() => this.setState({current:2})}  style={{paddingTop:8.9, paddingBottom:11.1}}>
                            <Text style={[{textAlign:"center"},this.state.current==2?{color:"#615F5F"}:{color:"#BDBCBC"}]}>
                                리뷰
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity  onPress={() => this.setState({current:3})}  style={{paddingTop:8.9, paddingBottom:11.1}}>
                            <Text style={[{textAlign:"center"},this.state.current==3?{color:"#615F5F"}:{color:"#BDBCBC"}]}>
                                결제내역
                            </Text>
                        </TouchableOpacity>
                    </View>
                    </View>
                    <View style={{paddingLeft:18,paddingRight:14,paddingTop:6.5,backgroundColor:"white"}}>
                    
                    {this.state.current==2 && this.state.review.map((e,i) =>
                    <View style={{borderBottomColor:"#BDBCBC",borderBottomWidth:1,paddingTop:9.5}}> 
                        <ReviewItem user={this.state.user} item={e} />
                    </View>)}
                    {this.state.current==1 && this.state.history.map((e,i) =>
                    <View style={{borderBottomColor:"#BDBCBC",borderBottomWidth:1}}> 
                        <View style={{flexDirection:"row"}}>
                            <View style={{borderRightColor:"#BDBCBC",paddingTop:18.5,paddingBottom:18.5,borderRightWidth:1,width:"25%"}}>
                                <Text style={{fontSize:14,color:"#615F5F",textAlign:"center"}}>
                                    알림
                                </Text>
                            </View>
                            <View style={{borderRightColor:"#BDBCBC",paddingTop:18.5,paddingBottom:18.5,borderRightWidth:1,width:"50%"}}>
                                <Text style={{fontSize:14,color:"#615F5F",textAlign:"center"}}>
                                    {e.historyContent}
                                </Text>
                            </View>
                            <View style={{width:"25%",paddingTop:18.5,paddingBottom:18.5}}>
                                <Text style={{fontSize:14,color:"#615F5F",textAlign:"center"}}>
                                    {moment(e.createdAt).format("YY. MM. DD")}
                                </Text>
                            </View>
                        </View>
                    </View>)}
                    </View>
                </ScrollView>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});