DrawerNavigator.js

import React, {Component} from 'react';
import {Image, Platform, Dimensions, ScrollView, BackHandler} from "react-native";
import {
    Content,
    Thumbnail,
    Body,
    Text,
    List,
    ListItem,
    Icon as Icons,
    Container,
    Left,
    Right,
    Badge,
    Button,
    View,
    StyleProvider,
    getTheme,
    variables,
    Toast
} from "native-base";
import {addNavigationHelpers, DrawerNavigator, NavigationActions, StackNavigator} from "react-navigation";
import {resetActionAuth} from '../actions/navigate'
import Icon from 'react-native-vector-icons/FontAwesome';
import Octicons from 'react-native-vector-icons/Octicons';
import PropTypes from 'prop-types';
import TaskListScene from '../scenes/task/TaskListScene'
import BonusScene from '../scenes/BonusScene'
import NewsScene from '../scenes/news/NewsScene'
import SettingsScene from '../scenes/SettingsScene'
import GameScene from '../scenes/GameScene'
import AddressProgramScene from '../scenes/AddressProgramScene'
import NetworksScene from '../scenes/NetworksScene'
import RouteScene from '../scenes/RouteScene'
import ChartScene from '../scenes/ChartScene'
import MonitoringScene from '../scenes/MonitoringScene'
import ConsultantScene from '../scenes/ConsultantScene'
import FirstScreen from '../scenes/FirstScreen'
import ConsultantPhotoAnswerScene from '../scenes/ConsultPhotoAnswerScene'
import ConsultantManageScene from '../scenes/ConsultantManageScene'
import TradePlansList from '../scenes/TradePlansList'

import SimpleForm from '../scenes/task/SimpleForm';
import SDCard from '../scenes/task/SDCard';
import SDCityCard from '../scenes/task/SDCityCard';
import SimpleFormNativeBase from '../scenes/task/SimpleFormNativeBase'
import TradePointDetails from '../scenes/task/TradePointDetails'
import ConsultantCreateSchedule from '../scenes/ConsultantCreateSchedule'
import ChooseTT from '../scenes/ChooseTT'
import CheckListScene from '../scenes/CheckListScene'
import RoutTTDetails from '../scenes/RoutTTDetails'
import PhotoReport from '../scenes/PhotoReport'
import PhotoReportList from '../scenes/PhotoReportList'
import Synchronization from '../scenes/Synchronization'
// import {access, Admin, Manager, Supervisor, Consultant} from "../core/roles"
import {connect} from "react-redux";
import {API_URL} from '../middleware/api'
import AuthScene from "../scenes/auth/AuthScene";
import ManageRouteScene from "../scenes/ManageRouteScene";
import FileDownload from "../scenes/FileDownload";
import TaskTestScene from "../scenes/task/TaskTestScene";
import TestListScene from "../scenes/TestListScene";
import SupervisorCreateRoutes from "../scenes/SupervisorCreateRoutes";
import AddVisits from "../scenes/AddVisits";
import VisitBeginEnd from "../scenes/VisitBeginEnd";
import photoReport from "../reducer/photoReport";
import consultantReduser from "../reducer/consultantReduser";
import testReduser from "../reducer/testReduser";

const dimen = Dimensions.get('window');
const isIphoneX = () => Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (dimen.height === 812 || dimen.width === 812)
const isIpad = () => Platform.OS === 'ios' && Platform.isPad &&
    (dimen.height === 1024 || dimen.width === 1366)
const marginTop = () => Platform.OS === 'ios' ? isIphoneX() ? 5 : 25 : 0

export const LOGOUT = 'logout';

const AppNavigator =
    DrawerNavigator(
        {
            TaskListScene: {screen: TaskListScene},
            AuthScene: {screen: AuthScene},
            NewsScene: {screen: NewsScene},
            BonusScene: {screen: BonusScene},
            GameScene: {screen: GameScene},
            SettingsScene: {screen: SettingsScene},
            AddressProgramScene: {screen: AddressProgramScene},
            NetworksScene: {screen: NetworksScene},
            ChartScene: {screen: ChartScene},
            MonitoringScene: {screen: MonitoringScene},
            ConsultantScene: {screen: ConsultantScene},
            FirstScreen: {screen: FirstScreen},
            ConsultantPhotoAnswerScene: {screen: ConsultantPhotoAnswerScene},
            ConsultantManageScene: {screen: ConsultantManageScene},
            SimpleForm: {screen: SimpleForm},
            SDCard: {screen: SDCard},
            SDCityCard: {screen: SDCityCard},
            CheckListScene: {screen: CheckListScene},
            SimpleFormNativeBase: {screen: SimpleFormNativeBase},
            TradePointDetails: {screen: TradePointDetails},
            RouteScene: {screen: RouteScene},
            ConsultantCreateSchedule: {screen: ConsultantCreateSchedule},
            ChooseTT: {screen: ChooseTT},
            RoutTTDetails: {screen: RoutTTDetails},
            PhotoReport: {screen: PhotoReport},
            PhotoReportList: {screen: PhotoReportList},
            ManageRouteScene: {screen: ManageRouteScene},
            TradePlansList: {screen: TradePlansList},
            FileDownload: {screen: FileDownload},
            TaskTestScene: {screen: TaskTestScene},
            TestListScene: {screen: TestListScene},
            SupervisorCreateRoutes: {screen: SupervisorCreateRoutes},
            AddVisits: {screen: AddVisits},
            VisitBeginEnd: {screen: VisitBeginEnd},
            Synchronization: {screen: Synchronization},
        }, {
            drawerBackgroundColor: "#e2e2e3",
            initialRouteName: 'FirstScreen',
            contentComponent: props => {
                const role = props.screenProps.role;
                const avatar = API_URL + props.screenProps.auth.userProfile.avatar;
                const notSyncedMonitoring = Object.keys(props.screenProps.monitorings).length !== 0;
                const notSyncedCheckList = Object.keys(props.screenProps.checkLists).length !== 0;
                const notSyncedPhotoreports = props.screenProps.photoreports !== undefined && Object.keys(props.screenProps.photoreports).length !== 0;
                const notSyncedPhotoreportsUpdate = props.screenProps.photoreportsUpdate !== undefined && Object.keys(props.screenProps.photoreportsUpdate).length !== 0;
                const notSyncedTasksDone = props.screenProps.tasksDone !== undefined && Object.keys(props.screenProps.tasksDone).length !== 0;
                const notSyncedTasksReject = props.screenProps.tasksReject !== undefined && Object.keys(props.screenProps.tasksReject).length !== 0;
                const notSyncedTasksUpdate = props.screenProps.tasksUpdate !== undefined && Object.keys(props.screenProps.tasksUpdate).length !== 0;
                const notSyncedTests = props.screenProps.tests !== undefined && Object.keys(props.screenProps.tests).length !== 0;
                const isAtWork = Object.keys(props.screenProps.auth.workData).length !== 0;
                // console.log('isAtWork', isAtWork)
// console.log('avatar', avatar)
                return (
                    <ScrollView>
                        <Content bounces={false} style={{flex: 1, backgroundColor: "#e2e2e3", top: -1}}>
                            <View style={{height: 20, backgroundColor: "#369ad6"}}/>
                            <List style={styles.listStyle}>

                                {<ListItem style={styles.listItemThumb}>
                                    {
                                        avatar.length !== 0 ?
                                            <Thumbnail style={{width: 50, height: 50}}
                                                       source={{uri: avatar}}/>
                                            :
                                            <Icons name="ios-contact" style={{fontSize: 80, color: "#fff"}}/>
                                    }
                                    <Body>
                                    <Text style={{
                                        color: "#fff",
                                        fontSize: 20
                                    }}>{props.screenProps.auth.userProfile.fio}</Text>
                                    <Text
                                        style={{
                                            color: "#fff",
                                            fontSize: 16
                                        }}>{props.screenProps.auth.userProfile.phone}</Text>
                                    </Body>
                                </ListItem>}

                                {(role === 'Consultant' || role === 'Supervisor') && (<ListItem button noBorder
                                                                                                onPress={() => isAtWork ? props.navigation.navigate("ConsultantManageScene") : props.navigation.navigate("ConsultantScene")}
                                                                                                style={styles.listItem}>
                                    <Left style={styles.left}>
                                        <Icon name="clock-o" size={20} style={styles.icon}/>
                                        <Text style={styles.text}>
                                            Учет рабочего времени
                                        </Text>
                                    </Left>
                                </ListItem>)}

                                {(role === 'Manager' || role === 'ADM') &&
                                <ListItem button noBorder
                                          onPress={() => props.navigation.navigate("AddressProgramScene")}
                                          style={styles.listItem}>
                                    <Left style={styles.left}>
                                        <Icons name="md-globe" style={styles.icon}/>
                                        <Text style={styles.text}>
                                            Адресная программа
                                        </Text>
                                    </Left>
                                </ListItem>}

                                {(role === 'Supervisor') &&
                                <ListItem button noBorder
                                          onPress={() => props.navigation.navigate("RouteScene", {title: 'Адресная программа'})}
                                          style={styles.listItem}>
                                    <Left style={styles.left}>
                                        <Icons name="md-globe" style={styles.icon}/>
                                        <Text style={styles.text}>
                                            Адресная программа
                                        </Text>
                                    </Left>
                                </ListItem>}

                                {(role === 'Manager' || role === 'ADM')
                                && <ListItem button noBorder
                                             onPress={() => props.navigation.navigate("NetworksScene")
                                             }
                                             style={styles.listItem}>
                                    <Left style={styles.left}>
                                        <Icons name="md-git-network" style={styles.icon}/>
                                        <Text style={styles.text}>
                                            Сети
                                        </Text>
                                    </Left>
                                </ListItem>}

                                {/*{role==='Supervisor'&&<ListItem button noBorder*/}
                                {/*{role==="Supervisor"*/}
                                {/*&&*/}
                                {/*<ListItem button noBorder*/}
                                {/*onPress={() => props.navigation.navigate("RouteScene", {title: 'Маршруты'})}*/}
                                {/*style={styles.listItem}>*/}
                                {/*<Left style={styles.left}>*/}
                                {/*<Icon name="suitcase" size = {20} style={styles.icon}/>*/}
                                {/*<Text style={styles.text}>*/}
                                {/*Маршруты*/}
                                {/*</Text>*/}
                                {/*</Left>*/}
                                {/*</ListItem>*/}
                                {/*}*/}


                                {role==='Consultant'
                                    ?
                                    <ListItem button noBorder
                                    onPress={() => props.navigation.navigate("ChooseTT", {route: "ConsultantCreateSchedule"})}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icons name="md-analytics" style={styles.icon}/>
                                    <Text style={styles.text}>
                                    График работы
                                    </Text>
                                    </Left>
                                    </ListItem>
                                    :null
                                }

                                {role==="Supervisor"
                                    ?
                                    <ListItem button noBorder
                                    onPress={() => props.navigation.navigate("ChooseTT", {route: "SupervisorCreateRoutes"})}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icons name="md-analytics" style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Маршруты
                                    </Text>
                                    </Left>
                                    </ListItem>
                                    :null
                                }

                                {(role === 'Consultant'||role === 'Supervisor')&& <ListItem button noBorder
                                    onPress={() => props.navigation.navigate("TaskListScene")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Octicons name="tasklist" size={20} style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Задачи
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                {/*{(role==='Consultant'||role==='Supervisor')&&(<ListItem button noBorder*/}
                                {<ListItem button noBorder
                                    onPress={() => props.navigation.navigate("RouteScene", {title: 'Мониторинг'})}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icons name="md-desktop" style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Мониторинг
                                    </Text>
                                    </Left>
                                    </ListItem>}


                                {role==='Consultant'&&<ListItem button noBorder
                                    onPress={() => props.navigation.navigate("TradePlansList")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icon name="shopping-basket" size={20} style={styles.icon}/>
                                    <Text style={styles.text}>
                                    План продаж
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                {<ListItem button noBorder
                                    onPress={() => props.navigation.navigate("PhotoReportList")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icons name="camera" style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Фотоотчет
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                {<ListItem button noBorder onPress={() => props.navigation.navigate("FileDownload")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icon name="book" size={20} style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Обучение
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                {<ListItem button noBorder
                                    onPress={() => props.navigation.navigate("TestListScene")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icon name="tasks" size={20} style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Тесты
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                {<ListItem button noBorder
                                    onPress={() => props.navigation.navigate("SettingsScene")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icon name="user" size={20} style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Профиль
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                {(notSyncedMonitoring || notSyncedCheckList || notSyncedPhotoreports || notSyncedPhotoreportsUpdate || notSyncedTasksDone || notSyncedTasksReject || notSyncedTasksUpdate || notSyncedTests) &&
                                    <ListItem button noBorder
                                    onPress={() => props.navigation.navigate("Synchronization")}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Octicons name="sync" size={20} style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Необходима синхронизация
                                    </Text>
                                    </Left>
                                    </ListItem>}
                                {<ListItem button noBorder
                                    onPress={() => {
                                    props.navigation.navigate("AuthScene")
                                }}
                                    style={styles.listItem}>
                                    <Left style={styles.left}>
                                    <Icons name="md-exit" style={styles.icon}/>
                                    <Text style={styles.text}>
                                    Выход
                                    </Text>
                                    </Left>
                                    </ListItem>}

                                    </List>
                                    </Content>
                                    </ScrollView>
                                    )
                                    }
                                })


                                class AppWithNavigationState extends Component {

                                render() {
                                const {dispatch, nav, auth, role} = this.props;
                                return (
                                <AppNavigator
                                screenProps={this.props}
                                />

                                )
                            }

                            }

                                AppWithNavigationState.propTypes = {
                                dispatch: PropTypes.func.isRequired,
                                nav: PropTypes.object.isRequired,
                            };

                                const mapStateToProps = state => ({
                                nav: state.nav,
                                auth: state.auth,
                                monitorings: state.loadSKU.monitorings,
                                checkLists: state.checkList.checkLists,
                                photoreports: photoReport.photoreports,
                                photoreportsUpdate: photoReport.photoreportsUpdate,
                                tasksDone: consultantReduser.tasksDone,
                                tasksReject: consultantReduser.tasksReject,
                                tasksUpdate: consultantReduser.tasksUpdate,
                                tests: testReduser.tests,
                                role: state.auth.userProfile.role,
                            });

                                export default connect(mapStateToProps)(AppWithNavigationState);

                                const styles = {
                                listStyle: {
                                paddingTop: 0,
                            },
                                listItemThumb: {
                                backgroundColor: "#369ad6",
                                marginLeft: 0,
                                paddingLeft: 10,
                                paddingTop: Platform.OS === 'ios' ? isIphoneX() ? 25 : 10 : 10
                            },
                                listItem: {
                                backgroundColor: "#e2e2e3",
                                marginLeft: 5
                            },
                                left: {

                                alignItems: "center",
                                backgroundColor: "#e2e2e3"
                            },
                                icon: {
                                textAlign: 'center',
                                color: '#727278'
                            },
                                text: {
                                fontSize: 17,
                                marginLeft: 5,
                                paddingBottom: 2,
                                color: '#5a5a5f'
                            }
                            };