unioil-loyalty-rn-app/app/screens/payatpump/fragments/stationpanel.js

import React from 'react';
import { useState, useEffect, useRef } from 'react';
import { Divider } from 'react-native-elements';
import {
  Text,
  View,
  TouchableOpacity,
  ActivityIndicator,
  SafeAreaView,
  Platform,
  Alert,
} from 'react-native';
import { connect } from 'react-redux';
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons';
import DB from '../../../components/storage';
import REQUEST from '../../../components/api';

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
    alignItems: 'center',
    justifyContent: 'center',
  },
  panel: {
    flex: 1,
    backgroundColor: '#fff',
  },
  panelHeader: {
    height: 60,
    backgroundColor: Theme.colors.lightGray,
    alignItems: 'center',
    justifyContent: 'center',
  },
};

const renderStations = (data, onPress, onUpdateFavorite, props) => {
  return data.map((station, index) => {
    // filter the value of key pair if it is empty
    var filteredAddress = Object.entries(station.address).filter(([key, value]) => {
      if (key === "stateCode") return `${value.replace(/\s/g, '')}`
      return `${value}`
    })
      .map(([key, value]) => `${value}`)

    return (
      <TouchableOpacity
        key={index}
        activeOpacity={1}
        onPress={() => onPress(station) || null}
        style={{ backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}>
        <View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
          <View style={{ flex: 5 }}>
            <Text
              style={{
                fontSize: 16,
                padding: 5,
                color: props.app_theme?.theme.colors.text,
              }}>
              {station.storeName}
            </Text>
            <Text
              style={{
                color: props.app_theme?.theme.colors.text,
                padding: 5,
                width: '90%',
                fontSize: 13,
              }}>
              {filteredAddress.join(', ').toString()}
            </Text>
          </View>
        </View>
        <Divider
          style={{ marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w }}
        />
      </TouchableOpacity>
    );
  });
};

const updateFavorite = async (city, index, callback) => {
  let session = await DB.session();
  let urlTask = city.favorite
    ? 'station_delete_favorite'
    : 'station_add_favorite';
  let method = city.favorite ? 'delete' : 'get';
  REQUEST(
    urlTask,
    method, { Authorization: session.token },
    {
      noID: true,
      value: city.station_uuid,
    }, {},
    function (res) {
      callback(index, city.favorite ? false : true);
    },
    function (err) {
      Alert.alert("Information", `\n${err.message}`);
    }, "Favorite", city.favorite ? "Delete" : "Add"
  );
};

const renderStationPanel = (props) => {
  const [snap, setSnap] = useState(['10%', '10%', '3%']);
  const bottomSheetRef = useRef(null);
  const [initialSnap, setInitialSnap] = useState(0)

  useEffect(() => {
    init();
  }, [props.visible, props.data.length]);


  const init = () => {
    if (props.visible == true) {
      if (props.data.length === 1) {
        setSnap([Platform.OS === "android" ? '23%' : '16%', '8%', '8%']);
      } else if (props.data.length === 2) {
        setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
        setInitialSnap(0);
      } else {
        setSnap(['38%', '8%', '8%']);
        setInitialSnap(0);
      }
    } else if (props.data.length != 0) {
      if (props.data.length === 1) {
        setSnap([Platform.OS === "android" ? '23%' : '16%', '8%', '8%']);
      } else if (props.data.length === 2) {
        setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
        setInitialSnap(0);
      } else {
        setSnap(['38%', '8%', '8%']);
        setInitialSnap(0);
      }
    } else {
      setSnap([Platform.select({ ios: '14%', android: '12%' }), '8%', '8%']);
      setInitialSnap(2);
    }
  };
  const getPanelTitle = () => {
    if (props.error) return 'There was an error'
    else if (props.loading && !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
    else if (!props.loading && !props.isSearched && props.data.length == 0) return 'No Nearby Stations Found'
    else if (props.isSearched) return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
    else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
  }

  const renderHeaders = () => {
    return (
      <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}>
        <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
          <Text style={{
            flex: 4,
            padding: 5,
            color: props.app_theme?.theme.colors.text,
            fontSize: 15,
          }}>
            {getPanelTitle()}
          </Text>
          <View style={{ flex: 0, justifyContent: 'center' }}>
            {props.error ? (
              <TouchableOpacity onPress={props.onError} activeOpacity={1}>
                <Text style={{ color: '#fff' }}>Try Again</Text>
              </TouchableOpacity>
            ) : props.loading ? (
              <ActivityIndicator color={Theme.colors.primary} size={25} />
            ) : null}
          </View>
        </View>
      </View>
    );
  };

  const renderContents = () => {
    return (
      <SafeAreaView style={props.data.length < 3 && { height: '100%', backgroundColor: 'white' }}>
        {props.data.length > 0 ? renderStations(props.data, props.onClick, props.onUpdateFavorite, props) :
          <View style={{ height: 250, width: '100%', backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}></View>}
      </SafeAreaView>
    );
  };

  return (
    <BottomSheet
      ref={bottomSheetRef}
      snapPoints={snap}
      enablePanDownToClose={true}
      index={initialSnap}
    >
      <View>
        {renderHeaders()}
        {renderContents()}
      </View>
    </BottomSheet>
  );
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(renderStationPanel)