Elep

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Layout from './Layout/Layout';
import One from './Questions/One';
import Two from './Questions/Two';
import Three from './Questions/Three';
import Four from './Questions/Four';
import Home from './Home';
import Five from './Questions/Five';

const total = 5;

const base_url = "/test/start";

class TestMain extends Component {
    state = {
        current: 0,
        routes: [
            {
                path: "/test/start/one",
                component: One
            },
            {
                path: "/test/start/two",
                component: Two
            },
            {
                path: "/test/start/three",
                component: Three
            },
            {
                path: "/test/start/four",
                component: Four
            },
            {
                path: "/test/start/five",
                component: Five
            }
        ],
        user: {}
    }

changeQuestion = (num) => {
        this.setState({current: num})
    }

componentDidMount(){
        fetch('/api/user', {credentials: 'same-origin', headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }})
        .then(response => response.text())
        .then(user => this.setState({ user }))
    }

prev = () => {
        return this.state.current > 1 ? this.state.current-1 : 0;
    }

next = () => {
        return total > this.state.current ? this.state.current+1 : 0;
    }
    
    render() {
        return (
            <Router>
                
                <Layout next={this.next}>
                    {this.state.routes.map(
                        (route, i) => 
                            <Route key={i} path={base_url + "/" + (i+1)}>
                                <route.component 
                                    select={() => this.changeQuestion(i+1)} 
                                    next={this.next}
                                    prev={this.prev}
                                    current={i+1}
                                    user={this.state.user} />
                            </Route>
                        )
                    }
                </Layout>
            </Router>
        )
    }
}

export default TestMain