LikeTab.js 5.55 KB
import React, { Component } from 'react';
import { View, Text, StyleSheet,TouchableOpacity,Image } from 'react-native';
import Store_Post from '../Store_Post'
import More from '../../assets/more_.svg'
import { ScrollView } from 'react-native-gesture-handler';
import {get,post,put} from 'axios'
import AsyncStorage from '@react-native-community/async-storage';
import { SERVER } from '../../common/servername';

export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state= {
        store_posts: [
        ],
        dropdown:false,
        user:{}

        
    }
    componentDidMount() {
        AsyncStorage.getItem("user",(err,res) => {
            if(!res) {
                alert("로그인 후 이용해주세요.")
                this.props.navigation.goBack(null)
            }
            else {
                this.setState({
                    user:JSON.parse(res)
                })
                
            AsyncStorage.getItem("current",(err,current) => {
                AsyncStorage.getItem("distance",(err,distance) => {
                    AsyncStorage.getItem("filter_server",(err,filter) => {
                        post(`http://${SERVER}/stores/readAll/${JSON.parse(res).id}`,
                        {
                            latitude:JSON.parse(current).lat,
                            longitude:JSON.parse(current).lng,
                            radius:JSON.parse(distance).distance,
                            sorting:filter,
                        }).then(res => {
                            this.setState({
                                store_posts:res.data.data.filter((e,i) => {
                                    if(e.isLike) {
                                        return true
                                    }
                                }),
                                refreshing:false
                            },() => {
                            })
                        })
                    })
                })
            })
            }
        })
    }
    FilterItem = (e) => {
        var temp = this.state.store_posts
        if(e==="distance") {
            this.setState({
                store_posts:temp.sort((a,b) => {
                    if(a.distance > b.distance) {
                        return 1
                    }
                    if(a.distance < b.distance) {
                        return -1
                    }
                        return 0
                }
                )
            })
        }
    }
    render() {
        return (
            <View style={{width:"100%",height:"100%",backgroundColor:"#979292"}}>
            <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>
                <TouchableOpacity style={{width:"5%",marginLeft:"auto",marginRight:16}} onPress={() => this.setState({dropdown:true})} >
                    <More />
                </TouchableOpacity>
            </View>
            
            {this.state.dropdown?<View style={{right:0,paddingTop:26,paddingBottom:24,paddingLeft:24,paddingRight:24,position:"absolute",backgroundColor:"white",zIndex:15,
                shadowColor: "#000",
                shadowOffset: {
                    width: 0,
                    height: 6,
                },
                shadowOpacity: 0.39,
                shadowRadius: 8.30,
                
                elevation: 13,}}>
                    <TouchableOpacity onPress={() => {this.props.navigation.navigate("EditLike")}}>
                        <Text style={{marginBottom:22,fontWeight:"bold",fontSize:15,color:"#615F5F"}}>
                            편집
                        </Text>
                        </TouchableOpacity>
                        <Text style={{marginBottom:20,fontWeight:"bold",fontSize:15,color:"#615F5F"}}>
                            정렬
                        </Text>
                        <TouchableOpacity onPress={() => {this.FilterItem("distance")}}>
                        <Text style={{fontSize:13,marginBottom:10,color:"#615F5F"}}>
                            - 거리순
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.FilterItem("latest")}}>
                        <Text style={{fontSize:13,color:"#615F5F"}}>
                            - 최근이용순
                        </Text>
                        </TouchableOpacity>
                    </View>:undefined}
            <ScrollView onTouchStart={() => this.setState({dropdown:false})} style={{marginBottom:8,width:"100%",height:"100%",backgroundColor:"#979292"}}>
                
                    {this.state.store_posts.map((e,i) => {

                        return (
                            <View style={{marginBottom:8}}>
                                <Store_Post contentsVisible={false} navigation={this.props.navigation} index={null} item={e}/>
                            </View>
                        )
                    })}
            </ScrollView>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});