unioil-loyalty-rn-app/app/screens/main/promo/promos.js

import * as React from 'react';
import { useEffect, useContext, useState } from 'react';
import { StyleSheet, SafeAreaView, Button, View, Text, ScrollView, RefreshControl, TouchableOpacity, TouchableWithoutFeedback,  Modal } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../../components/header.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import Assets from '../../../components/assets.manager.js';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';

export default function Promos(navigation) {

  const [modalVisible, setModalVisible] = useState(false);
  const [loading, setloading] = useState(false);
  const [connected, setconnection] = useState(false);
  const [infodialog, setinfodialog] = useState(false);
  const [session, setsession] = useState(null);
  const [promos, setpromos] = useState([]);

  const init = async () => {
    const ss = await DB.session()
    setloading(true)
    setconnection(true)
    await setsession(ss)
    await REQUEST("promos", "get", {}, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data.length > 0){
          await setpromos(res.data)
        }else{
          console.log(res.message, res.data)
        }
      }, function(error){  
        console.log(error)
    })
    await setloading(false)
  }

  useEffect(() => {
    NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is connected?", state.isConnected);
      if(state.isConnected){
        init()
      }else{
        Elements.nointernet2()
      }
    });
  }, [])

  const renderPromos = () => {
    return promos.map((data, index) => {
      return <Elements.card
        key={index}
        titlealign="left"
        disabled={1}
        height={Theme.screen.h / 3} 
        title={data.title || 'DIXIE'} 
        onPress={() => {
          navigation.navigation.navigate("PromoDetails", {data: data, onBackPress: () => null});
        }} 
        image={{uri: data.image}} />
    })
  }

  if(!connected){
    return (
      <SafeAreaView style={{flex: 1}}>
        <CustomHeader title="Promos" menu={true} navigation={navigation} />
        <Elements.nointernet
          message="No internet found. Please check your internet connection."
          buttonText="Try Again"
          onPress={() => {
            NetInfo.fetch().then(state => {
              console.log("Connection type", state.type);
              console.log("Is connected?", state.isConnected);
              if(state.isConnected){
                init()
              }else{
                Elements.nointernet2()
              }
            })
          }}
        />
      </SafeAreaView>
    )
  }

  return (
    <CustomSafeArea>
      <CustomHeader title="Promos" menu={true} navigation={navigation} />
      <ScrollView
          refreshControl={
            <RefreshControl refreshing={loading} onRefresh={init} />
          } 
          style={{flex: 1, padding: 10}}
          showsVerticalScrollIndicator={false}
        >        
          {renderPromos()}
        </ScrollView>
      {/* {!connected ? 
        <Elements.nointernet
          message="No internet found. Please check your internet connection."
          buttonText="Try Again"
          onPress={init}
        /> : 
        <ScrollView
          refreshControl={
            <RefreshControl refreshing={loading} onRefresh={init} />
          } 
          style={{flex: 1, padding: 10}}
        >        
          {renderPromos()}
        </ScrollView>
      } */}
    </CustomSafeArea>
  );
}

/*
// await setpromos([
    //   {
    //     title: 'Dixie Ganda',
    //     image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
    //     description: 'asd'
    //   },
    //   {
    //     title: 'Ganda Dixie',
    //     image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
    //     description: 'as asd ad'
    //   },
    //   {
    //     title: 'Nge Dixie',
    //     image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
    //     description: 'asdasdasd'
    //   }
    // ])
*/