React Component Sub Classing With TypeScript

subpage.tsx

import * as React from 'react';
import { Link } from 'react-router';
import { _TR } from '../../common/language';

import * as utils from '../../common/utils';
import * as appinfo from '../../common/api.appinfo';

interface TTabInfo {
    title: string;
    subUrl: string;
}

const TAB_INFO_LIST: TTabInfo[] = [{
    title: _TR('appinfo_tab_overview'),
    subUrl: appinfo.BASE_URL
}, {
    title: _TR('appinfo_tab_config'),
    subUrl: appinfo.BASE_URL + appinfo.SUB_URL_INFO
}, {
    title: _TR('appinfo_tab_scope'),
    subUrl: appinfo.BASE_URL + appinfo.SUB_URL_SCOPE
}, {
    title: _TR('appinfo_tab_member'),
    subUrl: appinfo.BASE_URL + appinfo.SUB_URL_MEMBER
}, {
    title: _TR('appinfo_tab_login'),
    subUrl: appinfo.BASE_URL + appinfo.SUB_URL_LOGIN
}, {
    title: _TR('appinfo_tab_stat'),
    subUrl: appinfo.BASE_URL + appinfo.SUB_URL_STAT
}];

interface TSubPageProp {
    consumer: appinfo.TConsumerRaw;
}

interface TSubPageState {
    cosumerDetail: appinfo.TConsumerDetail;
}

class SubPage<TProp extends TSubPageProp, TState extends TSubPageState> extends React.Component<TProp, TState> {

    private _consumerKey: string;

    constructor() {
        super();
        this._consumerKey = utils.getUrlQueryValue('consumer_key');
        this.state = {
            consumerDetail: null
        } as any;
    }

    render() {
        const consumerKey = this._consumerKey;
        const consumerDetail = appinfo.getConsumerDetail(consumerKey);
        this.state.cosumerDetail = consumerDetail;

        function makeTabs() {
            const pathname = document.location.pathname;
            const query = {consumer_key: consumerKey};
            return (
                <ul className="tab_menu menu6">
                    {
                        TAB_INFO_LIST.map((item, i) => {
                            return (
                                <li key={i} className={item.subUrl == pathname ? 'on': ''}>
                                    <Link to={utils.makeUrlFromQuery(item.subUrl, query)}>
                                        {item.title}
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
            )
        }

        const contents = (() => {
            if (consumerDetail) {
                return (
                    <div>
                        <div className="h_page_area">
                            <h2 className="h_page">{consumerDetail.info.CONSUMER_NAME}</h2>
                        </div>
                        {
                            makeTabs()
                        }
                        {
                            this.subRender(consumerDetail)
                        }
                    </div>
                )
            }
        })();

        return (
            <div className="con appinfo">
                {contents}
            </div>
        )
    }

    subRender(consumerDetail: appinfo.TConsumerDetail) {
        return (<div>NOTHING</div>)
    }

    componentDidMount() {
        if (!this.state.cosumerDetail) {
            appinfo.reqConsumerDetail(this._consumerKey).then((detail) => {
                this.setState({
                    consumerDetail: detail
                } as any);
            });
        }
    }
}

export class SubPageSimple extends SubPage<TSubPageProp, TSubPageState> {}