unioil-loyalty-rn-app/app/screens/main/station/xindex.js

import * as React from 'react';
import {useState, useEffect} from 'react';
import { SafeAreaView, ScrollView, Button, View, Text, StyleSheet, TextInput, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
import CustomHeader from '../../../components/header.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons';
import DB from '../../../components/storage';
import REQUEST from '../../../components/api';

import {Divider} from 'react-native-elements';
import SlidingUpPanel from 'rn-sliding-up-panel';
import Geolocation from '@react-native-community/geolocation';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

class Stations extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    panel: null,
    showPanel: false,
    session: null,
    stations: [],
    initialRegion :{ 
      latitude: 14.599512,
      longitude: 120.984222,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
    mylocation: {}
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  fetch = async (coords, successCallBack, errorCallback) => {
    this.state.panel.hide()
    let session = await DB.session()
    this.setState({ session: session })
    REQUEST('gas_stations', 'post', {
      Authorization: session.token
    }, {}, {
      lcard_uuid: session.user.lcard_uuid,
      longitude: coords.longitude,
      latitude: coords.latitude
    }, (success) => {
      successCallBack(success)
    }, (error) => {
      errorCallback(error)
    })
  }

  updateRegion = () => {
    if(this.state.stations.length > 0){
      let region = this.state.initialRegion
      region.latitude = parseFloat(this.state.stations[0].latitude)
      region.longitude = parseFloat(this.state.stations[0].longitude)
      region.latitudeDelta = 0.00700
      region.longitudeDelta = 0.00100
      this.setState({ initialRegion: region })
    }
  }

  init = async () => {
    this.setState({ loading: true })
    Geolocation.getCurrentPosition(info => {
      console.log(info)
      this.fetch(info.coords, success => {
        this.setState({ loading: false, stations: success.data, mylocation: info.coords })
        this.state.panel.show()
        this.state.updateRegion()
      }, error => {
        this.setState({ loading: false })
      })
    }, error => {
      console.log(error)
      this.setState({ loading: false })
    })
  }

  renderStations = (data) => {
    return data.map((station, index) => {
      let stars = [1,2,3,4,5].map((star, i) => {
        let name = station.stars >= star ? "star" : "staro"
        let mgn = index > 0 ? 5 : 0
        return (
          <TouchableOpacity key={i}>
            <Icon.AntDesign name={name} style={{marginLeft: mgn}} color={Theme.colors.yellow} size={20} />
          </TouchableOpacity>)
      })
      return (
        <View key={index}>
          <View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
              <View style={{flex: 5}}>
                <Text style={{fontSize: 16, padding: 5, color: Theme.colors.textPrimary}}>{station.name}</Text>
                <Text style={{color: Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13}}>{station.address}</Text>
                <View style={{flexDirection: 'row', paddingTop: 7}}>
                  {stars}
                </View>
              </View>
              <View style={{flex: 0, justifyContent: 'center'}}>
                <Icon.Ionicons name={station.favorite ? "md-heart" : "ios-heart-empty"} size={28} color={station.favorite ? "red" : Theme.colors.darkGray} />
              </View>
            </View>
          <Divider style={{marginTop: 5, padding: 0, margin:0, width: Theme.screen.w}} />
        </View>
      )
    })
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <CustomHeader title="Stations" menu={true} navigation={this.props.navigation} />
        <View style={styles.mapContainer}>
          <MapView
            provider={PROVIDER_GOOGLE}
            loadingEnabled={true}
            style={styles.map}
            showsUserLocation={true}
            region={this.state.initialRegion}/>
        </View>
        <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
          <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
            <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
              <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
            </View>
            <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
              <TextInput style={{fontSize: 17}} placeholder="Search for a station name" />
            </View>
          </View>
        </View>
        <View style={styles.panelInctiveContainer}>
          <SlidingUpPanel 
            ref={c => this.setState({ panel: c })}
            backdropOpacity={1}
            allowDragging={true}
            showBackdrop={false}
            draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
              <TouchableOpacity activeOpacity={1} onPress={() => this.setState({ showPanel: true })} style={{ width: '100%', height: 60, top: -70}}>
                <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
                  <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {this.state.stations.length}</Text>
                  <View style={{flex: 0}}>{this.state.loading ? <ActivityIndicator color="gray" /> : null}</View>
                </View>
              </TouchableOpacity>
              <ScrollView>
                {this.renderStations(this.state.stations)}
                <View style={{height: Theme.screen.h}}></View>
              </ScrollView>
            </View>
          </SlidingUpPanel>
        </View>
      </SafeAreaView>
    );
  }
}

export default Stations

const styles = StyleSheet.create({
  mapContainer: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
    marginTop: 50,
    height: Theme.screen.h - 15,
    width: Theme.screen.w,
    justifyContent: 'flex-end',
    alignItems: 'center',
   },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  panelActiveContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor:'transparent',
    top: Theme.screen.h / 2.35
  },
  panelInctiveContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor:'red',
    height: 40,
    top: Theme.screen.h / 1.9
  }
});