i dont even

import * as React from 'react';
import { Fragment } from 'react';
import { Link, RouteComponentProps, NavLink, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as TableStore from '../store/TableForm';
import { TableState, columnData } from '../store/TableForm';

// Material-UI Imports
import Paper from 'material-ui/Paper';
import FormInput from './FormInput';
import Divider from 'material-ui/Divider';

import { withStyles } from 'material-ui/styles';

import { Table, TableBody, TableCell, TableHead, TableRow } from 'material-ui';
import { Select, Menu, MenuItem, Button } from 'material-ui';

import { Icon, IconButton } from 'material-ui';

import { Collapse } from 'material-ui';

import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography } from 'material-ui';
import { List, ListItem, ListItemText, ListSubheader } from 'material-ui';
import { TypographyProps } from 'material-ui/Typography';

// Material-UI-Icons Imports
import { Folder, Edit, Delete, NoteAdd, ViewList, Add, Search } from 'material-ui-icons'

import FormatAlignLeftIcon from 'material-ui-icons/FormatAlignLeft'
import KeyboardArrowDownIcon from 'material-ui-icons/KeyboardArrowDown'
import KeyboardArrowUpIcon from 'material-ui-icons/KeyboardArrowUp'
import KeyboardArrowRightIcon from 'material-ui-icons/KeyboardArrowRight'
import CloseIcon from 'material-ui-icons/Close';


//Component Imports
import DialogWin from './DialogWin';
import FormFill from './FormFill';
import FormDatas from './FormDatas';

import { formData } from '../store/TableForm';


type TableProps =
    TableStore.TableState
    & typeof TableStore.actionCreators
    & RouteComponentProps<{}>;

const schema = {
    title: "Formi",
    type: "object",
    required: ["title"],
    properties: {
        title: { type: "string", title: "Name", default: "" },
        id: { type: 'string', title: 'type', default: '' }
    }
};

interface IState {
    dialogData: any,
    nestedOpen: any,
    fillData: any,
    listData: any,
    nestVal: string
}


class TableForm extends React.Component<TableProps, IState> {
    constructor(props: IState & TableProps) {
        super(props);
        this.state = {
            dialogData: undefined,
            nestedOpen: false,
            fillData: undefined,
            listData: undefined,
            nestVal: "0"
        }
        //hello.bind(this);
    }
    componentDidMount() {
        this.props.pull(); //load form list from storage
        //this.props.sqlGetData(); // launch data in target table.
        //this.props.sqlGetColumns(); // launch columns of target table
        //this.props.sqlGetTable(); // launch list of tablenames in target database.
    }
    testData = [
        { title: "First item", type: "text" },
        { title: "2 item", type: "text" },
        { title: "3 item", type: "text" }
    ];

    toggleOpen = (probObj: columnData[], heading: string) => {
        this.setState({ dialogData: <DialogWin dialogContent={probObj} key={"dialogWinDiv"} helloString={heading} onClose={(() => { this.setState({ dialogData: undefined }) }).bind(this)} /> });
    };

    CloseButton = () => {
        if (this.state.fillData) {
            this.setState({ fillData: null })
        }
    };

    handleFill = (pKey: string, rKey: string) => {
        this.props.load(pKey, rKey);

        this.setState({
            fillData: <FormFill {...this.props} closeThis={this.CloseButton.bind(this)} />
        })
    };

    handleClick = (rKey: string) => {
        this.setState({ nestVal: rKey });
        this.setState({ nestedOpen: !this.state.nestedOpen });
    };

    addForm = () => {
        return (
            <NavLink exact to={'/form'} activeClassName='active' key="navLink"><Button key="navButton"><Add /> Create New Form</Button></NavLink>
        )
    };

    dropIt = (pKey: string, rKey: string, tName: string) => {
        this.props.load(pKey, rKey);
        console.log(this.props.form);
        this.props.dropTable(pKey, rKey, tName);
        this.props.pull();
    };

    loadDataProps = (pKey: string, rKey: string) => {
        this.props.load(pKey, rKey);
        console.log('dataProps loaded');
    };

    listForms = (data: formData[]) => {
        return <div className="formsList" key="formListDiv">

            {this.props.formList.map(form => {
                console.log('listin mappi');
                return (
                    <div>
                        <ListItem
                            button
                            onClick={() => { this.handleClick(form.rowKey) }}
                        >
                            <KeyboardArrowUpIcon />
                            <ListItemText inset primary={form.tableName} />
                        </ListItem>
                        <Collapse in={this.state.nestVal == form.rowKey ? true : false} timeout="auto" unmountOnExit>
                            <Button className="button" key={"button1" + form.rowKey} style={{ marginRight: '20px' }} variant="raised" aria-label="Inspect" onClick={() => { this.toggleOpen(form.columns, form.partitionKey) }}><Folder /> Details </Button>
                            <Button className="button" key={"button2" + form.rowKey} style={{ marginRight: '20px' }} variant="raised" aria-label="Fill" onClick={() => { this.handleFill(form.partitionKey, form.rowKey) }}> <NoteAdd /> Fill </Button>
                            <Button className="button" key={"button3" + form.rowKey} style={{ marginRight: '20px' }} variant="raised" aria-label="Do Nothing"> <Edit /> Edit </Button>
                            <NavLink onClick={() => { this.loadDataProps(form.partitionKey, form.rowKey) }} exact to={'/datas'} activeClassName='active' key={"navLink" + form.rowKey}><Button className="button" key={"button5" + form.rowKey} style={{ marginRight: '20px' }} variant="raised" aria-label="Inspect"> <Search /> Inspect Data</Button></NavLink>
                            <Button className="button" key={"button6" + form.rowKey} variant="raised" aria-label="Delete" onClick={() => this.dropIt(form.partitionKey, form.rowKey, form.tableName)}> <Delete /> Delete </Button>
                        </Collapse>
                    </div>
                )
            })}
        </div>

    };

    public render() {

        return (
            <div key="forms">
                <Paper key="paperBase">
                    <List
                        key={"list"}
                        component="nav"
                        subheader={<ListSubheader component="h1">Form List</ListSubheader>}
                    >
                        {this.listForms(this.props.formList)}
                    </List>
                </Paper>
                <div key="dyanimicDiv">
                    {this.state.dialogData}
                    {this.addForm()}
                    {this.state.fillData}
                </div>
                {/*<FormInput />*/}

            </div>
        );

    }
}



// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.table, // Selects which state properties are merged into the component's props
    TableStore.actionCreators                 // Selects which action creators are merged into the component's props
)(TableForm) as typeof TableForm;