feature.js

import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

import { getFeatures, listFeature } from "./actions";
import { showDialog } from "containers/App/actions";
import { selectDialog } from "containers/App/selectors";
import {
  selectFeatures,
  selectFeatureLoadingState,
  selectFeatureToEditById,
  selectFeatureById
} from "./selectors";
import TypeofProperty from "./containers/TypeofProperty";
import LanguageSpoken from "./containers/LanguageSpoken";
import Facility from "./containers/Facility";
import RoomAmenities from "./containers/RoomAmenities";
import Bathroom from "./containers/Bathroom";
import MediaAndTechnology from "./containers/MediaAndTechnology";
import FoodAndDrinks from "./containers/FoodAndDrinks";
import ServicesAndExtra from "./containers/ServicesAndExtra";
import OutdoorAndView from "./containers/OutdoorAndView";
import Accessibility from "./containers/Accessibility";
import EntertainmentAndFamilyServices
  from "./containers/EntertainmentAndFamilyServices";
import FeatureEditDialog from "./containers/FeatureEditDialog";
import Loader from "components/Loader";

const mapStateToProps = createStructuredSelector({
  features: selectFeatures(),
  isRequesting: selectFeatureLoadingState(),
  getFeatureToEditById: selectFeatureToEditById(),
  featureId: feature => selectFeatureById(feature),
  dialog: selectDialog()
});

const mapDispatchToProps = dispatch => ({
  fetchFeatures: () => dispatch(getFeatures()),
  listFeature: (features, feature_type) =>
    dispatch(listFeature(features, feature_type)),
  showDialog: dialog => dispatch(showDialog(dialog)),
  hideDialog: () => dispatch(showDialog(null))
});

class FeatureSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  componentDidMount() {
    if (!this.props.features.size) {
      this.props.fetchFeatures();
    }
  }

  listFeatureByType = (feature_info, feature_type) => {
    event.preventDefault();
    this.props.listFeature(feature_info, feature_type);
  };

  editFeatureByType = (feature_info, feature_type, id) => {
    event.preventDefault();
    this.props.listFeature(feature_info, feature_type);
  };

  handleFeatureEdit = (event, feature) => {
    event.preventDefault();
    console.log("feature handle", feature);
    this.setState({ show: true });
    const dialog = (
      <FeatureEditDialog
        feature={feature}
        featureToEdit={selectFeatureById(feature)}
        onClose={() => this.props.hideDialog(null)}
      />
    );
    this.props.showDialog(dialog);
  };

  handleFeatureAdd = (event, feature, id) => {
    event.preventDefault();
    console.log("id", feature);
    this.setState({ show: true });
    let dialog;
    if (feature === "typeofproperty") {
      dialog = (
        <TypeofProperty
          onClose={() => this.props.hideDialog(null)}
          feature_type={feature}
          feature_id={id}
          addFeature={this.listFeatureByType}
          editFeature={this.editFeatureByType}
        />
      );
    } else if (feature === "languagespoken") {
      dialog = <LanguageSpoken onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "facility") {
      dialog = <Facility onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "roomamenities") {
      dialog = <RoomAmenities onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "bathroom") {
      dialog = <Bathroom onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "mediaandtechnology") {
      dialog = (
        <MediaAndTechnology onClose={() => this.props.hideDialog(null)} />
      );
    } else if (feature === "foodanddrinks") {
      dialog = <FoodAndDrinks onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "servicesandextra") {
      dialog = <ServicesAndExtra onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "outdoorandview") {
      dialog = <OutdoorAndView onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "accessibility") {
      dialog = <Accessibility onClose={() => this.props.hideDialog(null)} />;
    } else if (feature === "entertainmentandfamilyservices") {
      dialog = (
        <EntertainmentAndFamilyServices
          onClose={() => this.props.hideDialog(null)}
        />
      );
    } else {
      return null;
    }
    this.props.showDialog(dialog);
  };

  renderFeatureName(features) {
    return features.valueSeq().map(feature => {
      return (
        <div key={feature.get("_id")}>
          <div className="card card-sm clickable">
            <h5>{feature.get("feature_name")}</h5>
            <p className="twoLine">
              {feature.get("feature_description")}
            </p>
            <button
              className="btn btn-default floating"
              onClick={event => this.handleFeatureEdit(event, feature)}
            >
              <i className="icon-pencil" />
            </button>
          </div>
        </div>
      );
    });
  }

  renderFeatureType() {
    const { features } = this.props;
    return features.size > 0
      ? features.valueSeq().map(feature => {
          return (
            <div className="features" key={feature.get("_id")}>
              <h3 className="bold">{feature.get("feature_name")}</h3>
              <div className="cards">
                {this.renderFeatureName(feature.get("features"))}
                <div
                  className="card card-sm card-add clickable"
                  onClick={event =>
                    this.handleFeatureAdd(event, feature.get("feature_type"))}
                >
                  <button className="btn btn-link">
                    <i className="icon-plus" />
                  </button>
                </div>
              </div>
            </div>
          );
        })
      : <p>No content</p>;
  }

  render() {
    const { features, dialog } = this.props;
    return (
      <div className="container">
        <h1>Features Setting</h1>
        {this.renderFeatureType()}
        {this.state.show ? dialog : null}
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(
  Loader("isRequesting")(FeatureSetting)
);

selectors.js

import { createSelector } from "reselect";

// export const selectFeatures = () => state => {
//   return state.getIn(["featureReducer", "features"]);
// };
//
// export const selectFeatureLoadingState = () => state =>
//   state.getIn(["featureReducer", "requesting"]);

const selectFeatureState = state => state.get("featureReducer");
const selectFeatureById = state => console.log("state _id", state.get("_id"));

const selectFeatures = () =>
  createSelector(selectFeatureState, featureState =>
    featureState.get("features")
  );

const selectFeatureLoadingState = () =>
  createSelector(selectFeatureState, loadingState =>
    loadingState.get("requesting")
  );

const selectFeatureToEditById = () =>
  createSelector(
    selectFeatureState,
    selectFeatureById,
    (features, featureId) => {
      console.log("features", features, featureId);
    }
  );

export {
  selectFeatures,
  selectFeatureLoadingState,
  selectFeatureById,
  selectFeatureToEditById
};