class Content extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch(fetchNav(this.props.match.params.tab));
    }

    componentDidUpdate(prevProps) {
        if(this.props.match.params.tab != prevProps.match.params.tab) {
            this.props.dispatch(fetchNav(this.props.match.params.tab));
        }
    }

    render() {
        const {nav, match} = this.props;
        let redirect = null;
        return (
            <div>
                <ul>
                    {nav.some((item, key) => {
                        if (this.props.location.pathname != (match.url + item.path)) {
                            redirect = <Redirect to={(match.url + item.path)} />;
                        }
                        return true;
                    })}
                    {redirect}
                    {nav.map((item, key) => {
                        return <li key={key}>
                            <Link to={match.url + item.path}>{item.name}</Link>
                        </li>;
                    })}
                    <Switch>
                        {nav.map((item, key) => {
                            return <Route key={key} path={`${match.url}/list/:tab`} component={Content} />;
                        })}
                    </Switch>
                </ul>
            </div>
        );
    }
}

const mapStateToProps = (state, props) => {
    const {fetchNav} = state;
    const {
        lastUpdated,
        isFetching,
        nav: nav
    } = fetchNav[props.match.params.tab] || {
        isFetching: true,
        nav: []
    };

    return {
        nav,
        isFetching,
        lastUpdated
    }
};

export default connect(mapStateToProps)(withStyles(appStyle)(Content));