simba-mobile-cud/app/screens/groupes/SuperviseurActifGroup.js

import React, {Component} from 'react'
import {
    StyleSheet, View, PixelRatio, Text, RefreshControl,
    FlatList, ProgressBarAndroid, ProgressViewIOS, Alert, StatusBar
} from 'react-native'
import BaseScreen from './../BaseScreen'
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions'
import {listAllMembers} from './../../webservice/MemberGeolocatedApi'
import {listFreeCodesSuperViseur} from './../../webservice/NetworkApi'
import {readUser, listDemandAdhesion, acceptDemandAdhesion, deleteUser} from "../../webservice/AuthApi";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Icons from 'react-native-vector-icons/Ionicons'
import Swipeout from 'react-native-swipeout'
import {theme} from "../BaseScreen";

require("./../../utils/Translations");
import I18n from 'react-native-i18n'

const route = require('./../../route.json')
import LottieView from 'lottie-react-native'; // if you have "esModuleInterop": true
import {IndicatorViewPager, PagerTabIndicator} from 'react-native-best-viewpager';
import Tag from '../../components/Tag';

import {Card, CardTitle, CardContent, CardAction, CardButton, CardImage} from 'react-native-material-cards'

let moment = require('moment-timezone');
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import {Header} from "react-native-elements";
import {IlinkEmitter} from "../../utils/events";
import DeviceInfo from 'react-native-device-info'
import {Color} from '../../config/Color'
import {Typography, FontWeight} from '../../config/typography'
import {thousandsSeparators} from '../../utils/UtilsFunction'
import {listAllActifs} from "../../webservice/MemberGeolocatedApi";

const thousands = require('thousands');

var users = null;
var chart = null;

export default class SuperviseurActifGroup extends BaseScreen {
    static tabsStyle: {
        tabBarButtonColor: '#ff0000'
    }
    static navigatorStyle = {
        tabBarHidden: false,
        topTabTextColor: '#ffffff',
        topTabsHeight: 70,
        topTabTextFontFamily: 'BioRhyme-Bold',
        selectedTopTabTextColor: '#ff505c',

        statusBarColor: theme.primaryDark,
        navBarBackgroundColor: theme.primary,
        navBarTextColor: 'white',
        navBarButtonColor: 'white',
        // Icons
        topTabIconColor: '#ffffff',
        selectedTopTabIconColor: '#ff505c',

        // Tab indicator
        selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
        selectedTopTabIndicatorColor: '#ff505c',
    };

    static options(passProps) {
        return {
            topBar: {
                rightButtons: []
            }
        }

    }

    static navigationOptions = ({navigation}) => {
        return {
            title: I18n.t("ACTIF_MANAGE"),
            drawerLabel: navigation.getParam("name", I18n.t('ACTIF_MANAGE')),
            drawerIcon: ({tintColor}) => (
                <Icon
                    name={'people'}
                    size={24}
                />
            ),
        }
    };

    constructor(props) {
        super(props, true);
        this.state = SuperviseurActifGroup.initState();

        listAllActifs().then((data) => {

            if (data !== null) {
                this.setState({listmembers: data.response, isLoading: false, isRefreshing: false})
            }
        });

        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
        this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        moment.locale(this.currentLocale);

    }

    updateLangue() {
        this.props.navigation.setParams({name: I18n.t('GROUP_MANAGE')})
        this.forceUpdate()
    }

    static initState() {
        return ({
            enabledListMembers: true,
            listmembers: [],
            usersicon: null,
            isLoadingDemand: true,
            charticon: null,
            isRefreshing: false,
            user: {},
            freeCodes: [],
            isLoading: true,
        })
    }

    render() {
        return (
            <View style={{flex: 1, marginBottom: 10}}>
                <StatusBar
                    backgroundColor="#00000030"
                    barStyle="light-content"
                    translucent={false}
                />
                {this.state.isLoading ? this._renderLoadingItems() : this._renderListMembers()}
            </View>
        );

    }

    _renderListMembers() {
        return (<View>
            <FlatList
                style={{backgroundColor: '#EEE'}}
                data={this.state.listmembers instanceof Array ? this.state.listmembers : (this.state.listmembers.datas ? this.state.listmembers.datas : [])}
                ListEmptyComponent={
                    () => {
                        return (
                            <View style={{flex: 1}}>
                                <View style={{justifyContent: "center", alignItems: 'center', marginTop: 100}}>
                                    <LottieView
                                        style={styles.lottie}
                                        source={require("../../assets/json/629-empty-box.json")}
                                        autoPlay
                                        loop
                                    />
                                    <Text style={styles.text}>{I18n.t('NO_ACTIF_SAVED')}</Text>
                                </View>
                            </View>)
                    }
                }
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        colors={[theme.primary, theme.purpleLight, theme.reddeconnect, theme.accentLight]}
                        onRefresh={() => {
                            this.setState({isRefreshing: true})
                            listAllActifs().then((data) => {

                                if (data !== null) {
                                    this.setState({listmembers: data.response, isLoading: false, isRefreshing: false})
                                }
                            });
                        }}
                    />
                }
                renderItem={({item}) =>
                    this.renderMembers(item)
                }

            />
        </View>)

    }

    _renderLoadingItems() {
        return (<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <ProgressBarAndroid/>
        </View>)
    }

    renderMembers(item) {
        console.log("ITEM RENDER", item);
        let sumAsset = 0;
        item.networks.map((element) => {
            sumAsset += element.total_assets;
        });
        /*        var re = moment.tz(item.created_at, moment.tz.guess()).format();
                re = moment(re).fromNow();*/
        return (
            <>
                {
                    sumAsset > 0 ?
                        <Card>
                            <CardTitle
                                title={item.company}
                                subtitle={`${sumAsset} ${sumAsset > 1 ? I18n.t("ACTIFS_SAVED") : I18n.t("ACTIF_SAVED")}`}
                            />
                            <CardContent style={{flex: 1, justifyContent: 'space-evenly'}}>
                                <View>
                                    {
                                        item.networks.map((element) => (
                                            <Text><Text
                                                style={{color: "black",}}>{element.network} :
                                                {element.total_assets} {element.total_assets > 1 ? I18n.t("ACTIFS") : I18n.t("ACTIF")}</Text> {}
                                            </Text>
                                        ))
                                    }
                                </View>
                            </CardContent>
                        </Card> : null
                }
            </>
        )
    }
}
const styles = StyleSheet.create({
    circlePoint: {
        width: 50,
        height: 50,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    fromNow: {
        color: theme.accentLight
    },
    callIcon: {
        marginRight: 5,
    },
    phone: {
        textAlign: 'center',
        color: "white"
    },
    balanceMember: {
        marginLeft: 7,
        fontSize: 18,
        fontWeight: "bold",
        color: theme.primary,
    },
    balanceIcon: {},
    name: {
        color: 'black',
        fontSize: 20,
        margin: 20,
        fontWeight: 'bold'
    },
    surname: {
        fontSize: 17,
        marginLeft: 20,
    },
    text: {
        fontSize: 17,
        fontWeight: 'bold',
    },
    lottie: {
        width: 248,
        height: 248
    },
})