sample.js

import "./SchemaTablesList.css";

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import _ from "lodash";
import { withRouter } from "react-router-dom";

/* ACTIONS */
import { initializeTables, deleteTablesInSchema } from "../Actions/index";
import { initializeTableTags } from "../Actions/actionsTableTags";
import { initializeSchema, deleteSchema } from "../Actions/actionsSchema";
import { searchTable } from "../Actions/actionsSchemaTableSearch";
import {
    searchColumns,
    actionInitializeSearchColumnParameters
} from "../Actions/actionsSchemaTableColumnSearch";

import { toggleSchemaState } from "../Actions/actionsSchemaTablesList";

import SchemaTable from "./SchemaTable";
import AddNewTable from "./Tables/Forms/addNewTable";
import InsideSchemaSearchResults from "./Tables/Display/InsideSchemaSearchResults";
import TableFiltersCriteria from './Tables/TableFiltersCriteria';

class SchemaTablesList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showAddTableUI: false,
            searchMode: false,
            searchVal: "",
            showFilters: false
        };

        this.onDeleteSchema = this.onDeleteSchema.bind(this);
        this.onTableSearch = this.onTableSearch.bind(this);
        this.schemaColumnsSeeMoreResults = this.schemaColumnsSeeMoreResults.bind(
            this
        );
    }

    componentDidMount() {
        this.currentSchema = this.props.schema.id;
    }

    componentWillMount() {
        this.props.initializeTables();
        this.props.initializeTableTags();
    }

    componentWillReceiveProps(nextProps) {
        const nextSchema = nextProps.schema.id;

        if (this.currentSchema !== nextSchema) {
            //this component will detect if a schema has been changed.
            console.log("receiveprops");
            this.currentSchema = nextSchema;
            this.setState({ searchMode: false, searchVal: "" });
            this.props.actionInitializeSearchColumnParameters();
        }

        const routeParamsId = parseInt(nextProps.match.params.id);
        this.props.toggleSchemaState(routeParamsId); //put this here, not in render method...
    }

    renderTables() {
        if (this.props.schemaTables === undefined) {
            return <div>Rendering...</div>;
        }
        const schemaTablesDisplay = _.map(this.props.schemaTables, x => (
            <SchemaTable key={x.id} table={x} name={x.name} />
        ));

        return this.state.searchMode ? (
            <InsideSchemaSearchResults
                onClickSeeMoreResults={this.schemaColumnsSeeMoreResults}
                schemaTables={this.props.schemaTableSearchResults}
                schemaTableColumns={this.props.schemaTableColumnSearchResults}
            />
        ) : (
            schemaTablesDisplay
        );
    }

    schemaColumnsSeeMoreResults() {
        this.props.searchColumns(this.props.schemaTables, this.state.searchVal); //action
    }

    renderAddUI() {
        return this.state.showAddTableUI ? (
            <AddNewTable
                schemaId={this.props.match.params.id}
                onSaveNewTable={e => this.onSaveNewTable.bind(this)(e)}
                onCancelNewTable={e => this.onCancelNewTable.bind(this)(e)}
            />
        ) : (
            ""
        );
    }

    onAddNewTable(e) {
        this.setState({ showAddTableUI: true });
    }

    onSaveNewTable() {
        this.setState({ showAddTableUI: false });
    }

    onCancelNewTable(e) {
        this.setState({ showAddTableUI: false });
    }

    onDeleteSchema() {
        this.props.deleteSchema(this.props.schema);
        this.props.deleteTablesInSchema(parseInt(this.props.match.params.id));
        this.props.history.push("/");
    }

    onTableSearch(e) {
        // console.log(e.target.value)
        let searchVal = e.target.value;
        console.log(searchVal);
        this.setState({ searchMode: searchVal.length > 0, searchVal });
        if (searchVal.length > 0) {
            this.props.searchColumns(this.props.schemaTables, searchVal); //action
            this.props.searchTable(this.props.schemaTables, searchVal); //action
        } else {
            this.props.actionInitializeSearchColumnParameters();
        }
    }

    // methods
    render() {
        const showAddNewTableBtn = !this.state.showAddTableUI ? (
            <button
                type="button"
                className="btn btn-outline-primary"
                onClick={e => this.onAddNewTable.bind(this)(e)}
            >
                <i className="fas fa-plus" /> Add new table
            </button>
        ) : (
            ""
        );

        return (
            <div>
                <h1>
                    {this.props.schema.name}
                    <button
                        className="btn btn-danger"
                        onClick={this.onDeleteSchema}
                    >
                        Delete this schema
                    </button>{" "}
                    {showAddNewTableBtn}
                </h1>
                <p>**Description here...**</p>
                {this.renderAddUI()}
                <div className="row">
                    <div className="col-md-12 div-searchbox">
                        <input
                            type="text"
                            value={this.state.searchVal}
                            className="form-control col-md-3 search-textbox"
                            placeholder="Search this database..."
                            onChange={e => this.onTableSearch(e)}
                        />

                        <TableFiltersCriteria />
                    </div>
                </div>

                <div className="row">{this.renderTables()}</div>
            </div>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(
        {
            initializeTables,
            initializeTableTags,
            initializeSchema,
            deleteSchema,
            deleteTablesInSchema,
            toggleSchemaState,
            searchTable,
            searchColumns,
            actionInitializeSearchColumnParameters
        },
        dispatch
    );
}

function mapStateToProps(
    {
        schemas,
        schemaTableSearchResults,
        tableTags,
        schemaTables,
        schemaTableColumnSearchResults
    },
    ownProps
) {
    const routeParamsId = parseInt(ownProps.match.params.id);
    const schema = schemas.filter(x => x.id === routeParamsId)[0]; //TODO: improve the query.

    return {
        schemaTables: schemaTables.filter(x => x.schemaId === routeParamsId),
        tableTags,
        schema,
        schemaTableSearchResults,
        schemaTableColumnSearchResults
    };
}

// export default Dashboard;
// export default connect(mapStateToProps, mapDispatchToProps)(SchemaTablesList);

export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(SchemaTablesList)
);