Untitled

import React from 'react';
import { Root, View, Panel, PanelHeader } from '@vkontakte/vkui/';
import '@vkontakte/vkui/dist/vkui.css';
import './App.css';

const view1 = 'view1';
const view2 = 'view2';
const view3 = 'view3';
const view4 = 'view4';
const view5 = 'view5';

const panel1 = 'panel1';

const panel2 = 'panel2';
const panel3 = 'panel3';

const panel4 = 'panel4';
const panel5 = 'panel5'
const panel6 = 'panel6';

const panel7 = 'panel7';
const panel8 = 'panel8';

const panel9 = 'panel9';
const panel10 = 'panel10';
const panel11 = 'panel11';

class App extends React.Component {
    constructor(props) {
		super(props);
        this.state = {
			activeView: view1,
			activePanel_view1: panel1,
			activePanel_view2: panel2,
			activePanel_view3: panel4,
			activePanel_view4: panel7,
			activePanel_view5: panel9
		}
	}

setActiveView = (view) => {
		this.setState ({
			activeView: view,
		});
		switch (view) {
			case view1:
				this.statusUser = null;
			break;
			case view2:
				this.statusUser = view2;
			break ;
			case view3:
				this.statusUser = view3;
			break;
		default:
			break;
		}
	}

setActivePanel_organizer = (panel) => {
		this.setState ({
			activePanel_view2: panel
		})
	}

setActivePanel_participant = (panel) => {
		this.setState ({
			activePanel_view3: panel
		})
	}

setActivePanel_contest = (panel) => {
		this.setState ({
			activePanel_view4: panel
		})
	}

setActivePanel_settings = (panel) => {
		this.setState ({
			activePanel_view5: panel
		})
	}

render () {
		return (
			<Root activeView={this.state.activeView}>
				<View id={view1} activePanel={this.state.activePanel_view1}>
					<Panel id={panel1}>
						<PanelHeader>view1-panel1</PanelHeader>
						<div className='button_test' onClick={() => {this.setActiveView(view2)}}>view2-panel2</div>
						<div className='button_test' onClick={() => {this.setActiveView(view3)}}>view3-panel4</div>
					</Panel>
				</View>

<View id={view2} activePanel={this.state.activePanel_view2}>
					<Panel id={panel2}>
						<PanelHeader onClick={ () => {this.setActiveView(view1) }}>view2-panel2</PanelHeader>
						<div className='button_test' onClick={ () => { this.setActivePanel_organizer(panel3) }}>view2-panel3</div> 
					</Panel>
					<Panel id={panel3}>
						<PanelHeader onClick={ () => {this.setActivePanel_organizer(panel2) }}>view2-panel3</PanelHeader>
						<div className='button_test' onClick={() => {this.setActiveView(view4)}}>view4-panel7</div>
						<div className='button_test' onClick={() => {this.setActiveView(view5)}}>view5-panel9</div>
					</Panel>
				</View>

<View id={view3} activePanel={this.state.activePanel_view3}>
					<Panel id={panel4}>
						<PanelHeader onClick={ () => {this.setActiveView(view1) }}>view3-panel4</PanelHeader>
						<div className='button_test' onClick={() => {this.setActivePanel_participant(panel6)}}>view3-panel6</div>
						<div className='button_test' onClick={ () => {this.setActiveView(view4) }}>view4-panel7</div>
						<div className='button_test' onClick={ () => {this.setActivePanel_participant(panel5) }}>view3-panel5</div>
					</Panel>
					<Panel id={panel5}>
						<PanelHeader onClick={ () => {this.setActivePanel_participant(panel4) }}>view3-panel5</PanelHeader>
						<div className='button_test' onClick={ () => {this.setActiveView(view4) }}>view4-panel7</div>
					</Panel>
					<Panel id={panel6}>
						<PanelHeader onClick={ () => {this.setActivePanel_participant(panel4) }}>view3-panel6</PanelHeader>
						<div className='button_test' onClick={ () => {this.setActiveView(view4) }}>view4-panel7</div>
					</Panel>
				</View>

<View id={view4} activePanel={this.state.activePanel_view4}>
					<Panel id={panel7}>
						<PanelHeader onClick={ () => {this.setActiveView(this.statusUser)}}>view4-panel7</PanelHeader>
						<div className='button_test' onClick={ () => {this.setActivePanel_contest(panel8)}}>view4-panel8</div>
					</Panel>
					<Panel id={panel8}>
						<PanelHeader onClick={ () => {this.setActivePanel_contest(panel7)}}>view4-panel7</PanelHeader>
					</Panel>
				</View>

<View id={view5} activePanel={this.state.activePanel_view5}>
					<Panel id={panel9}>
						<PanelHeader onClick={ () => {this.setActiveView(view2) }}>view5-panel9</PanelHeader>
						<div className='button_test' onClick={ () => {this.setActivePanel_settings(panel10)}}>view5-panel10</div>
						<div className='button_test' onClick={ () => {this.setActivePanel_settings(panel11)}}>view5-panel11</div>
					</Panel>
					<Panel id={panel10}>
						<PanelHeader onClick={ () => {this.setActivePanel_settings(panel9) }}>view5-panel10</PanelHeader>
					</Panel>
					<Panel id={panel11}>
						<PanelHeader onClick={ () => {this.setActivePanel_settings(panel9) }}>view5-panel11</PanelHeader>
					</Panel>
				</View>
			</Root>

);
	}
	
}

export default App;