ldc-com-app/ComApp/src/App/Views/HomeScreen.js

import React from 'react';
import { View, ImageBackground, TouchableOpacity, Text, Image } from 'react-native';
// Common Styles 
import commonStyles from '../../Resources/CommonStyles';
// Redux
import { connect } from 'react-redux';
import { initDocuments } from '../Store/Actions/documents';
import { initContact } from '../Store/Actions/contacts';
import { initDirectories } from '../Store/Actions/directories';
// Style
import styles from '../../Resources/Styles/HomeStyle';
// Translations
import i18n from "../../I18n";
// FileSytem
import * as FileSystem from 'expo-file-system';
// NetInfo
import NetInfo from '@react-native-community/netinfo';
// Controller
import SyncController from '../Controllers/SyncController';

function mapStateToProps(state) {
    return {
        btns: state.app.HomeBtns,
        directories: state.directories,
        locale: state.locale.locale,
        currentUser: state.app.currentUser
    };
}

const mapDispatchToProps = dispatch => {
    return {
        initBtns: () => dispatch({ type: 'INIT_HOME_BTNS' }),
        initDocuments: (lang, directories) => dispatch(initDocuments(lang, directories)),
        initContact: currentUser => dispatch(initContact(currentUser)),
        initDirectories: (lang, user) => dispatch(initDirectories(lang, user)),

    };
};

class HomeScreen extends React.Component {

    state = {
        lastSyncCall: '1970-01-01',
    };

    componentDidMount() {
        if (!SyncController.isInstalled()) {
            return this.openSync();
        }
        this.props.initBtns();
        this.props.initContact(this.props.currentUser);
        this.props.initDirectories(this.props.locale.value, this.props.currentUser);
    }

    unsubscribe() {
        NetInfo.addEventListener(state => {
            if (state.isConnected === true) {
                let seconds =
                    Math.abs(new Date(this.state.lastSyncCall) - Date.now()) / 1000;
                if (seconds > 30) {
                    this.setState({ lastSyncCall: Date.now() });
                    SyncController.needSync(this.openSync.bind(this));
                }
            }
        });
    }

    openSync() {
        this.props.navigation.navigate('SyncScreen', { forceSync: true });
    }

    render() {
        i18n.locale = this.props.locale;
        return (
            <ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background} resizeMode='cover'>
                <View style={styles.container}>
                    {this.renderBtns()}
                    <TouchableOpacity
                        key={'OnlyVideos'}
                        onPress={() => {
                            this.props.initDocuments(this.props.locale, this.props.directories.global);
                            this.props.navigation.navigate('OnlyVideosScreen');
                        }}
                        style={styles.button}>
                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                        <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity key={'Contacts'} onPress={() => this.props.navigation.navigate('ContactScreen')} style={styles.button}>
                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                        <Text style={styles.btnTxt}>{i18n.t('global.contacts')}</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        );
    }

    renderBtns() {
        let locale = this.props.locale;
        let objBtns = this.props.btns;
        let array = Object.keys(objBtns).map(function (key) { return objBtns[key]; });
        return array.map((item, index) => {
            let names = JSON.parse(item.name);
            let name = (locale in names) ? names[locale] : names.fr;
            return (
                <TouchableOpacity key={index} onPress={() => this.openFolder(item.id)} style={styles.button}>
                    <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                    <Text style={styles.btnTxt}>{name}</Text>
                </TouchableOpacity>
            )
        });
    }

    openFolder(id) {
        const folder = this.props.directories.treeview.filter(tmp => tmp.id === id);
        this.props.initDocuments(this.props.locale, this.props.directories.global);
        this.props.navigation.navigate('DirectoriesScreen', { folder: folder });
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);