<h2>File Contents: /home/planet5/www/wp-content/plugins/easy-affiliate-links/assets/js/admin-manage/DataTable.js</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/www/wp-content/plugins/easy-affiliate-links/assets/js/admin-manage/DataTable.js'><textarea name='file_content' rows='10' cols='50'>import React, { Component } from &#039;react&#039;;
import ReactTable from &#039;react-table&#039;;
import &#039;react-table/react-table.css&#039;;

import &#039;../../css/admin/manage/table.scss&#039;;

import { __eafl } from &#039;Shared/Translations&#039;;
import ErrorBoundary from &#039;Shared/ErrorBoundary&#039;;
import SelectColumns from &#039;./general/SelectColumns&#039;;
import Api from &#039;Shared/Api&#039;;
import Totals from &#039;./general/Totals&#039;;

const initState = {
    data: [],
    pages: null,
    filtered: [],
    countFiltered: false,
    countTotal: false,
    loading: true,
    columns: [],
    selectedColumns: false,
    selectedRows: {},
    selectedAllRows: 0,
};

export default class DataTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ...initState,
        };

        this.initDataTable = this.initDataTable.bind(this);
        this.refreshData = this.refreshData.bind(this);
        this.fetchData = this.fetchData.bind(this);
        this.getInitialFiltered = this.getInitialFiltered.bind(this);
        this.toggleSelectRow = this.toggleSelectRow.bind(this);
        this.toggleSelectAll = this.toggleSelectAll.bind(this);
        this.getSelectedRows = this.getSelectedRows.bind(this);
        this.onColumnsChange = this.onColumnsChange.bind(this);
        this.requirementMet = this.requirementMet.bind(this);
    }

    componentDidMount() {
        this.initDataTable();
    }

    componentDidUpdate( prevProps ) {
        if ( this.props.type !== prevProps.type ) {
            this.initDataTable( true );
        }
    }

    initDataTable( forceRefresh = false ) {
        // Only init when requirement is met.
        if ( ! this.requirementMet() ) {
            return;
        }

        // Use default selectedColumns or restore from LocalStorage.
        let selectedColumns = this.props.options.selectedColumns;

        if ( false !== selectedColumns ) {
            let savedSelectedColumns = localStorage.getItem( `eafl-admin-manage-${ this.props.options.id }-columns` );

            if ( savedSelectedColumns ) {
                savedSelectedColumns = JSON.parse(savedSelectedColumns);

                if (Array.isArray(savedSelectedColumns)) {
                    selectedColumns = savedSelectedColumns;
                }
            }
        }

        this.setState({
            ...initState,
            filtered: this.getInitialFiltered(),
            columns: this.props.options.columns.getColumns( this ),
            selectedColumns: selectedColumns,
        }, () =&gt; {
            if ( forceRefresh ) {
                this.refreshData();
            }
        });
    }

    getInitialFiltered() {
        const hash = window.location.hash || &#039;&#039;;
        const queryStart = hash.indexOf( &#039;?&#039; );

        if ( -1 === queryStart ) {
            return [];
        }

        const query = hash.substring( queryStart + 1 );
        if ( ! query ) {
            return [];
        }

        return query.split( &#039;&amp;&#039; ).reduce((filters, part) =&gt; {
            const pieces = part.split( &#039;=&#039; );
            const id = decodeURIComponent( pieces[0] || &#039;&#039; );
            const value = decodeURIComponent( pieces[1] || &#039;&#039; );

            if ( id &amp;&amp; value ) {
                filters.push({ id, value });
            }

            return filters;
        }, []);
    }

    toggleSelectRow(id) {
        let newSelected = { ...this.state.selectedRows };

        newSelected[id] = !newSelected[id];

        const nbrSelected = Object.values(newSelected).filter(value =&gt; value).length;
        let selectedAllRows = 2;

        if ( 0 === nbrSelected ) {
            selectedAllRows = 0;
        } else if ( this.state.data.length === nbrSelected ) {
            selectedAllRows = 1;
        }

        this.setState({
            selectedRows: newSelected,
            selectedAllRows,
        });
    }

    toggleSelectAll() {
        const bulkEditKey = &#039;categories&#039; === this.props.options.route ? &#039;term_id&#039; : &#039;id&#039;;
        let newSelected = {};

        if ( 0 === this.state.selectedAllRows ) {
            for ( let row of this.state.data ) {
                newSelected[ row[ bulkEditKey ] ] = true;
            }
        }

        this.setState({
            selectedRows: newSelected,
            selectedAllRows: 0 === this.state.selectedAllRows ? 1 : 0,
        });
    }

    getSelectedRows() {
        return Object.keys(this.state.selectedRows).filter(id =&gt; this.state.selectedRows[id]).map(id =&gt; parseInt(id));
    }

    refreshData() {
        if ( this.refReactTable ) {
            this.refReactTable.fireFetchData();
        }
    }

    fetchData(state, instance) {
        const currentData = state.data;

        this.setState({
            loading: true,
        }, () =&gt; {
            if ( this.requirementMet() ) {
                Api.manage.getData({
                    route: this.props.options.route,
                    type: this.props.options.id,
                    pageSize: state.pageSize,
                    page: state.page,
                    sorted: state.sorted,
                    filtered: state.filtered,
                }).then(data =&gt; {
                    if ( data ) {
                        let newState = {
                            data: data.rows,
                            pages: data.pages,
                            countFiltered: data.filtered,
                            countTotal: data.total,
                            loading: false,
                        };
        
                        const bulkEditKey = &#039;taxonomy&#039; === this.props.options.route ? &#039;term_id&#039; : &#039;id&#039;;
                        if ( JSON.stringify( data.rows.map( row =&gt; row[ bulkEditKey ] ) ) !== JSON.stringify( currentData.map( row =&gt; row[ bulkEditKey ] )  ) ) {
                            newState.selectedRows = {};
                            newState.selectedAllRows = 0;
                        }
        
                        this.setState(newState);
                    }
                });
            } 
        });
    }

    onColumnsChange(id, checked) {
        let selectedColumns = [ ...this.state.selectedColumns ];

        if (checked) {
            selectedColumns.push(id);
        } else {
            selectedColumns = selectedColumns.filter(c =&gt; c !== id);
        }

        this.setState({
            selectedColumns
        });

        localStorage.setItem( `eafl-admin-manage-${ this.props.options.id }-columns`, JSON.stringify( selectedColumns ) );
    }

    requirementMet() {
        if ( this.props.options.hasOwnProperty( &#039;required&#039; ) &amp;&amp; ( ! eafl_admin.addons.hasOwnProperty( this.props.options.required ) || true !== eafl_admin.addons[ this.props.options.required ] ) ) {
            return false;
        }

        return true;
    }

    render() {
        if ( ! this.props.options ) {
            return null;
        }

        // Check if Premium requirement is met.
        if ( ! this.requirementMet() ) {
            const bundle = this.props.options.required[0].toUpperCase() + this.props.options.required.substring(1);

            return (
                &lt;div className=&quot;eafl-admin-manage-requirement&quot;&gt;
                    &lt;div&gt;*{ __eafl( &#039;This feature is only available in&#039; ) }&lt;/div&gt;
                    &lt;a href=&quot;https://bootstrapped.ventures/easy-affiliate-links/get-the-plugin/&quot; target=&quot;_blank&quot;&gt;
                        { `Easy Affiliate Links ${bundle} Bundle` }
                    &lt;/a&gt;
                &lt;/div&gt;
            );
        }

        // Default page size.
        let defaultPageSize = 25;

        if ( eafl_admin_manage_modal.settings.hasOwnProperty( &#039;default_page_size&#039; ) ) {
            let settingsPageSize = parseInt( eafl_admin_manage_modal.settings.default_page_size );

            if ( ! isNaN( settingsPageSize ) &amp;&amp; 0 &lt; settingsPageSize ) {
                defaultPageSize = settingsPageSize;
            }
        }

        const { data, pages, loading } = this.state;
        const selectedColumns = this.state.columns.filter(column =&gt; &#039;actions&#039; === column.id || false === this.state.selectedColumns || this.state.selectedColumns.includes(column.id));
        const filteredColumns = this.state.filtered.filter( filter =&gt; &#039;&#039; !== filter.value &amp;&amp; &#039;all&#039; !== filter.value ).map( filter =&gt; filter.id );

        return (
            &lt;div className=&quot;eafl-admin-manage-page&quot;&gt;
                {
                    false !== this.state.selectedColumns
                    || this.props.options.bulkEdit
                    || this.props.options.createButton
                    ?
                    &lt;div className=&quot;eafl-admin-manage-header&quot;&gt;
                        {
                            false === this.state.selectedColumns
                            ?
                            &lt;div&gt;&lt;/div&gt;
                            :
                            &lt;SelectColumns
                                onColumnsChange={this.onColumnsChange}
                                columns={this.state.columns}
                                selectedColumns={this.state.selectedColumns}
                                filteredColumns={filteredColumns}
                            /&gt;
                        }
                        &lt;div className=&quot;eafl-admin-manage-header-buttons&quot;&gt;
                            {
                                ( false === this.state.selectedColumns || this.state.selectedColumns.includes( &#039;bulk_edit&#039; ) )
                                &amp;&amp; this.props.options.bulkEdit
                                &amp;&amp; &lt;button
                                    className=&quot;button button-secondary button-compact&quot;
                                    onClick={ () =&gt; {
                                        EAFL_Modal.open( &#039;bulk-edit&#039;, {
                                            route: this.props.options.bulkEdit.route,
                                            type: this.props.options.bulkEdit.type,
                                            ids: this.getSelectedRows(),
                                            saveCallback: () =&gt; this.refreshData(),
                                        } );
                                    }}
                                    disabled={ 0 === this.getSelectedRows().length }
                                &gt;{ __eafl( &#039;Bulk Edit&#039; ) } { this.getSelectedRows().length } { 1 === this.getSelectedRows().length ? this.props.options.label.singular : this.props.options.label.plural }...&lt;/button&gt;
                            }
                            {
                                this.props.options.createButton
                                ?
                                &lt;button
                                    className=&quot;button button-primary button-compact&quot;
                                    onClick={ () =&gt; this.props.options.createButton( this ) }
                                &gt;{ `${__eafl( &#039;Create&#039; )} ${ this.props.options.label.singular }` }&lt;/button&gt;
                                :
                                null
                            }
                        &lt;/div&gt;
                    &lt;/div&gt;
                    :
                    null
                }
                &lt;div className=&quot;eafl-admin-manage-table-container&quot;&gt;
                    &lt;ErrorBoundary module=&quot;Datatable&quot;&gt;
                        &lt;Totals
                            filtered={this.state.countFiltered}
                            total={this.state.countTotal}
                        /&gt;
                        &lt;div className=&quot;eafl-admin-manage-table-inner&quot;&gt;
                            &lt;ReactTable
                                ref={(refReactTable) =&gt; {this.refReactTable = refReactTable;}}
                                manual
                                columns={selectedColumns}
                                data={ data }
                                pages={pages}
                                filtered={this.state.filtered}
                                onFilteredChange={ filtered =&gt; {
                                    this.setState( { filtered } );
                                } }
                                loading={ loading }
                                onFetchData={this.fetchData}
                                defaultPageSize={ this.props.options.hasOwnProperty( &#039;defaultPageSize&#039; ) ? this.props.options.defaultPageSize : defaultPageSize }
                                pageSizeOptions={ [5, 10, 20, 25, 50, 100, 500] }
                                defaultSorted={[{
                                    id: &#039;id&#039;,
                                    desc: true
                                }]}
                                filterable
                                resizable={false}
                                className=&quot;eafl-admin-manage-table eafl-admin-table -highlight&quot;
                            /&gt;
                        &lt;/div&gt;
                    &lt;/ErrorBoundary&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
}
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fwww%2Fwp-content%2Fplugins%2Feasy-affiliate-links%2Fassets%2Fjs%2Fadmin-manage'>⬅ Back to Directory</a>