MainApp.js

import React, {useEffect, useState} from 'react';
import {StyleSheet, View, ScrollView} from 'react-native';
import {colors, getData} from '../../utils';
import {
  List,
  Gap,
  HomeProfile,
  Loan,
  Header,
  StatusBar,
} from '../../components';
import Axios from 'axios';
import {useSelector} from 'react-redux';
import {Fire} from '../../config';
import {showMessage} from 'react-native-flash-message';

const Dashboard = ({route, navigation}) => {
  const [dataLogin, setDataLogin] = useState({});
  const [dataHutang, setDataHutang] = useState({});
  const [dataCicilan, setDataCicilan] = useState([]);

  const [profile, setProfile] = useState({
    displayName: '',
    email: '',
  });

  useEffect(() => {
    getDataLogin();
    getDataHutang();
    getDataCicilan();
    getData('user').then(res => {
      setProfile(res);
    });
  }, []);

  const getDataLogin = async () => {
    try {
      let formData = new FormData();
      formData.append('user', 'ngadimin');
      formData.append('pass', 'h4oejsgmQ#6ChYBtDb');

      const httpReq = await Axios({
        headers: {
          Authorization:
            'Basic dXNtYW5ydWJpYW50b3JvcW9kcnFvZHJiZWV3b293YToyNjM3NmVkeXV3OWUwcmkzNDl1ZA==',
        },
        method: 'post',
        url: 'http://api.tanpariba.co.id:8000/v4.0/account/login',
        data: formData,
      });

      if (httpReq.data.data) {
        // console.log(httpReq.data.data);
        const data = httpReq.data.data;
        setDataLogin(data);
        console.log('setDataLogin:', data);
        // jalankan fungsi sukses login
      } else {
        console.log(httpReq.data);
        // jalankan fungsi error login
      }
    } catch (error) {
      // jalankan fungsi cath error
      console.log(error);
    }
  };

  const getDataHutang = async () => {
    try {
      let formData = new FormData();
      formData.append('session', '470237778affea2393d37825de144ecb');

      const httpReq = await Axios({
        headers: {
          Authorization:
            'Basic dXNtYW5ydWJpYW50b3JvcW9kcnFvZHJiZWV3b293YToyNjM3NmVkeXV3OWUwcmkzNDl1ZA==',
        },
        method: 'post',
        url: 'http://api.tanpariba.co.id:8000/v4.0/page_mobile/dashboard',
        data: formData,
      });

      if (httpReq.data.data_hutang) {
        console.log(httpReq.data.data_hutang);
        const data = httpReq.data.data_hutang;
        setDataHutang(data);
        // jalankan fungsi sukses login
      } else {
        console.log(httpReq);
        // jalankan fungsi error login
      }
    } catch (error) {
      // jalankan fungsi cath error
      console.log(error);
    }
  };

  const getDataCicilan = async () => {
    try {
      let formData = new FormData();
      formData.append('session', '470237778affea2393d37825de144ecb');

      const httpReq = await Axios({
        headers: {
          Authorization:
            'Basic dXNtYW5ydWJpYW50b3JvcW9kcnFvZHJiZWV3b293YToyNjM3NmVkeXV3OWUwcmkzNDl1ZA==',
        },
        method: 'post',
        url: 'http://api.tanpariba.co.id:8000/v4.0/page_mobile/dashboard',
        data: formData,
      });

      if (httpReq.data.data_cicilan) {
        // console.log(httpReq.data.data_cicilan);
        const data = httpReq.data.data_cicilan;
        const filterData = data.filter(el => el !== null);
        setDataCicilan(filterData);
        // jalankan fungsi sukses login
      } else {
        console.log(httpReq);
        // jalankan fungsi error login
      }
    } catch (error) {
      // jalankan fungsi cath error
      console.log(error);
    }
  };

  const stateGlobal = useSelector(state => state);

  const signOut = () => {
    Fire.auth()
      .signOut()
      .then(() => {
        console.log('success sign out');
        navigation.replace('GetStarted');
      })
      .catch(err => {
        showMessage({
          message: err.message,
          type: 'default',
          backgroundColor: colors.background.tertiary,
          color: colors.text.secondary,
        });
      });
  };

  const {displayName, email} = route.params;
  console.log('displayName', displayName);
  return (
    <View style={styles.page}>
      <StatusBar type="secondary" background={colors.background.secondary} />
      <Header type="headerIconOnly" onPressRight={signOut} />
      {/* <HomeProfile name={dataLogin.display_name} email={dataLogin.user_email} /> */}
      <HomeProfile name="Admin" email="admintanpariba@gmail.com" />
      <Loan sisaHutang="7 gr" jatuhTempo="31-12-2020" />
      <View style={styles.listLoan}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <Gap height={10} />
          {/* <List
            type="diagram"
            sudah_bayar={dataHutang.sudah_bayar}
            total_hutang={dataHutang.total_hutang}
            persen_bayar={dataHutang.persen_bayar}
          /> */}
          <List
            type="diagram"
            sudah_bayar="3 gr"
            total_hutang="10 gr"
            persen_bayar="30%"
          />
          {stateGlobal.cicilans.map((item, index) => {
            return (
              <List
                key={index}
                cicilan={item.ke}
                bayar={item.jml}
                waktu={item.tgl_nyicil}
                sisa={item.sisa_hutang}
                sudah_bayar={item.sudah_bayar}
              />
            );
          })}
        </ScrollView>
      </View>
    </View>
  );
};

export default Dashboard;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: colors.background.primary,
  },
  listLoan: {
    flex: 1,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    marginTop: -25,
    paddingVertical: 14,
    backgroundColor: colors.background.primary,
    alignItems: 'center',
  },
});