containers/Settings/MarketSettingsShop.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { getGoalGaloreSettings, getMarketsShopSettings, getRoundSpecialShopSettings } from '../../selectors/settings';
import EditableSettingsTable from '../../components/MenuItems/Settings/EditableSettingsTable';
import { CONFIRM_MODAL_CONTENT, MARKET_SHOP_SETTINGS_TYPES, MENU_ITEMS, MODALS, PERMISSIONS } from '../../constants';
import { checkPermisson, getActiveModal, getNavigatedLink } from '../../selectors/common';
import ConfirmationModal from '../../components/Modals/ConfirmationModal';
import { aSetNavigationInfo, aSetOpenModal } from '../../reducers/common';
import { aGetGoalGaloreSettings, aGetMarketsShopSettings, aGetRoundSpecialShopSettings } from '../../reducers/settings';
import {
  aSaveGoalGaloreSettings,
  aSaveMarketsSettings,
  aSaveMarketsShopSettings,
  aSaveRoundSpecialShopSettings,
} from '../../reducers/actions';
import { withRouterHooks } from '../../utils/router';

const mapToProps = (state) => ({
  marketShopSettings: getMarketsShopSettings(state),
  roundSpecialShopSettings: getRoundSpecialShopSettings(state),
  goalGaloreSettings: getGoalGaloreSettings(state),
  checkPermisson: (payload) => checkPermisson(state, payload),
  activeModal: getActiveModal(state),
  nextNavigationLink: getNavigatedLink(state),
});

const actionsToProps = (dispatch) => ({
  getMarketsShopSettings: (payload) => dispatch(aGetMarketsShopSettings(payload)),
  saveMarketsSettings: (payload) => dispatch(aSaveMarketsSettings(payload)),
  getRoundSpecialShopSettings: (payload) => dispatch(aGetRoundSpecialShopSettings(payload)),
  getGoalGaloreShopSettings: (payload) => dispatch(aGetGoalGaloreSettings(payload)),
  saveMarketsShopSettings: (payload) => dispatch(aSaveMarketsShopSettings(payload)),
  saveRoundSpecialShopSettings: (payload) => dispatch(aSaveRoundSpecialShopSettings(payload)),
  saveGoalGaloreSettings: (payload) => dispatch(aSaveGoalGaloreSettings(payload)),
  setOpenModal: (payload) => dispatch(aSetOpenModal(payload)),
  setNavigationInfo: (payload) => dispatch(aSetNavigationInfo(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.marketShopSettings All markets shop settings
 * @property {boolean} props.checkPermisson Check if user have
 * permission for specific action or view
 * @property {Function} props.getMarketsShopSettings Call API to get market shop settings
 * @property {Function} props.saveMarketsShopSettings Call API to change market shop settings
 * @property {Function} props.setOpenModal Open modal
 * @property {string} props.activeModal Active modal
 * @property {object} props.nextNavigationLink link for navigation
 * @property {Function} props.setNavigationInfo set navigation info for unsaved data
 *
 */
class MarketsSettingsShop extends Component {
  constructor(props) {
    super(props);

    this.state = {
      table: null,
      roundSpecialTable: null,
      goalGaloreTable: null,
    };
    /**
     * @member {Array}
     */
    this.fields = [
      {
        label: 'ID',
        field: 'id',
        getValue: (item, field) => item[field],
      },
      {
        label: 'Name',
        field: 'name',
        getValue: (item, field) => item[field],
      },
      {
        label: 'Status',
        field: 'status',
        getValue: (item, field) => item[field] === 1,
        checkbox: true,
      },
    ];
    /**
     * @member {boolean}
     */
    this.editMarketSettingsPermission = props.checkPermisson(PERMISSIONS.SHOP_SETTINGS_MARKET_EDIT);
    this.editRoundSpecialPermission = props.checkPermisson(PERMISSIONS.SETTINGS_ROUND_SPECIAL_EDIT);
    this.editGoalGalorePermission = props.checkPermisson(PERMISSIONS.GOAL_GALORE_SETTINGS_EDIT);
  }

  /**
   * Get initial data
   *
   * @returns {void}
   */
  componentDidMount() {
    this.props.getMarketsShopSettings();
    this.props.getRoundSpecialShopSettings();
    this.props.getGoalGaloreShopSettings();
  }

  /**
   * Call API to save data
   *
   * @param marketType
   * @function
   * @returns {void}
   */
  save = (marketType) => {
    if (marketType === MARKET_SHOP_SETTINGS_TYPES.ROUND_SPECIAL_SETTING && this.state.roundSpecialTable) {
      this.props.saveRoundSpecialShopSettings({ roundSpecialSettings: this.state.roundSpecialTable });
      this.editableRoundSpecialShopSettingsTable.clearChanges();
    } else if (marketType === MARKET_SHOP_SETTINGS_TYPES.GOAL_GALORE_SETTING && this.state.goalGaloreTable) {
      this.props.saveGoalGaloreSettings({ goalGaloreSettings: this.state.goalGaloreTable });
      this.editableGoalGaloreTable.clearChanges();
    } else if (this.state.table) {
      this.props.saveMarketsShopSettings({ marketsShopSettings: this.state.table });
      this.editableSettingsTable.clearChanges();
    }
  };

  saveAll = () => {
    if (this.editMarketSettingsPermission) this.save(MARKET_SHOP_SETTINGS_TYPES.NORMAL_MARKET_SETTING);
    if (this.editRoundSpecialPermission) this.save(MARKET_SHOP_SETTINGS_TYPES.ROUND_SPECIAL_SETTING);
    if (this.editGoalGalorePermission) this.save(MARKET_SHOP_SETTINGS_TYPES.GOAL_GALORE_SETTING);
  };

  /**
   * close modal and navigate
   *
   * @returns {void}
   */
  unsavedNavigation = () => {
    this.props.setOpenModal({ modal: '' });
    this.props.navigate(this.props.nextNavigationLink);
  };

  /**
   * set table info
   *
   * @param marketType
   * @param {Array} data
   * @returns {void}
   */
  setTableInfo = (marketType, data) => {
    if (marketType === MARKET_SHOP_SETTINGS_TYPES.ROUND_SPECIAL_SETTING) {
      this.setState({ roundSpecialTable: data });
    } else if (marketType === MARKET_SHOP_SETTINGS_TYPES.GOAL_GALORE_SETTING) {
      this.setState({ goalGaloreTable: data });
    } else {
      this.setState({ table: data });
    }
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <>
        <div className="user">
          {this.props.marketShopSettings && (
            <EditableSettingsTable
              key={MENU_ITEMS.SETTINGS.SHOP_SETTINGS_MARKET_VIEW.path}
              tableRows={this.props.marketShopSettings}
              fields={this.fields}
              save={this.save.bind(this, MARKET_SHOP_SETTINGS_TYPES.NORMAL_MARKET_SETTING)}
              editPermission={this.editMarketSettingsPermission}
              setNavigationInfo={this.props.setNavigationInfo}
              nextNavigationLink={this.props.nextNavigationLink}
              setTableInfo={this.setTableInfo.bind(this, MARKET_SHOP_SETTINGS_TYPES.NORMAL_MARKET_SETTING)}
              ref={(ref) => {
                this.editableSettingsTable = ref;
              }}
            />
          )}
        </div>
        {this.props.roundSpecialShopSettings && (
          <>
            <div className="main-wrapper__heading">Round Specials Markets</div>
            <div className="user">
              <EditableSettingsTable
                key={MENU_ITEMS.SETTINGS.SETTINGS_MARKET_VIEW.path}
                tableRows={this.props.roundSpecialShopSettings}
                fields={this.fields}
                save={this.save.bind(this, MARKET_SHOP_SETTINGS_TYPES.ROUND_SPECIAL_SETTING)}
                editPermission={this.editRoundSpecialPermission}
                setNavigationInfo={this.props.setNavigationInfo}
                nextNavigationLink={this.props.nextNavigationLink}
                setTableInfo={this.setTableInfo.bind(this, MARKET_SHOP_SETTINGS_TYPES.ROUND_SPECIAL_SETTING)}
                ref={(ref) => {
                  this.editableRoundSpecialShopSettingsTable = ref;
                }}
              />
            </div>
          </>
        )}
        {this.props.goalGaloreSettings && (
          <>
            <div className="main-wrapper__heading">Goal Galore / MegaDraw Markets</div>
            <div className="user">
              <EditableSettingsTable
                key={MENU_ITEMS.SETTINGS.SHOP_SETTINGS_MARKET_VIEW.path}
                tableRows={this.props.goalGaloreSettings}
                fields={this.fields}
                save={this.save.bind(this, MARKET_SHOP_SETTINGS_TYPES.GOAL_GALORE_SETTING)}
                editPermission={this.editGoalGalorePermission}
                setNavigationInfo={this.props.setNavigationInfo}
                nextNavigationLink={this.props.nextNavigationLink}
                setTableInfo={this.setTableInfo.bind(this, MARKET_SHOP_SETTINGS_TYPES.GOAL_GALORE_SETTING)}
                ref={(ref) => {
                  this.editableGoalGaloreTable = ref;
                }}
              />
            </div>
          </>
        )}
        {this.props.activeModal === MODALS.SAVE_BEFORE_NAVIGATION ? (
          <ConfirmationModal
            modalData={CONFIRM_MODAL_CONTENT.SAVE_CHANGES}
            cancel={this.unsavedNavigation}
            confirmation={this.saveAll}
            cancelBtnText="Cancel"
            confirmBtnText="Save"
            logo
          />
        ) : null}
      </>
    );
  }
}

export default connect(mapToProps, actionsToProps)(withRouterHooks(MarketsSettingsShop));