Cacher is the code snippet organizer for pro developers

import React from "react";
import { PropTypes } from "prop-types";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";

import { Segment } from "semantic-ui-react";

import "semantic-ui-css/semantic.min.css";
import image from "../../../../img/dashboard.png";
import paragraph from "../../../../img/paragraph.png";
import HomePageFooter from "../Footers/MainFooter";
import HomePageHeading from "./HomePageHeading";
import CategoryComponent from "./CategoryComponent";
import DiscoverComponent from "./DiscoverComponent";
import TrendingComponent from "./TrendingComponent";
import PopularLocalities from "./PopularLocalities";
import {
  fetchCityLocality,
  fetchCategory,
  fetchTrending,
  fetchCategoryAPI
} from "../../actions/index";

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      city: "",
      cityId: 1,
      cityName: "Bengaluru",
      count: 0,
      localityKey: null,
      offeringKey: "",
      offStatus: "",
      cat_id: "",
      api_type: "",
      loading: true,
      categoryArray: [],
      serverError: false,
      locality: ""
    };

    // binding the method to fetch data from HomePageHeading
    // this.onUpdate = this.onUpdate.bind(this)
    this.fetchHomepageHeadingData = this.fetchHomepageHeadingData.bind(this);
    this.fetchCategoryData = this.fetchCategoryData.bind(this);
  }

  // defining initial state of localityArray and trendingArray
  getInitialState() {
    return {
      localityArray: [],
      trendingArray: []
    };
  }

  // Fetch City Locality API;
  componentDidMount() {
    this.props.fetchCityLocality().then(response => {
      if (response.payload.status === 500) {
        this.setState({
          serverError: true
        });
      }
    });
    var date = new Date();
    var rand = date.getTime();
    this.setState({ count: this.state.count + rand });
  }

  // fetching data from HomePageHeading
  // cityId and localityArray
  fetchHomepageHeadingData(
    city,
    locality,
    cityId,
    localityId,
    cityArray,
    localityArray,
    offeringKey,
    offStatus,
    cat_id,
    api_type
  ) {
    const { params } = this.props.match;
    const cityUrl = city.split(" ").join("-");
    const localityUrl = locality.split(" ").join("-");
    params["city"] = cityUrl;
    params["locality"] = localityUrl;
    if (localityUrl != undefined && localityUrl != null && localityUrl != "") {
      this.props.history.push("/" + cityUrl + "/" + localityUrl);
    }

    this.setState({
      localityArray: localityArray,
      cityId: cityId,
      localityKey: localityId,
      offeringKey: offeringKey,
      offStatus: offStatus,
      cat_id: cat_id,
      api_type: api_type
    });
  }

  componentWillMount() {
    if (this.state.cityId != undefined) {
      this.props.fetchCategory(this.state.cityId).then(response => {
        if (response.payload.status === 500) {
          this.setState({
            serverError: true
          });
        }
      });
    }
  }

  fetchCategoryData(categoryArray) {
    this.setState({
      categoryArray: categoryArray
    });
  }

  // componentWillUpdate() {
  //   debugger;
  //   this.props.history.push("/"+ this.cityUrl);
  // }

  render() {
    // updating the new states
    const {
      loading,
      localityArray,
      cityName,
      cityId,
      localityKey,
      count,
      offeringKey,
      offStatus,
      cat_id,
      categoryArray,
      api_type,
      serverError,
      city,
      locality
    } = this.state;
    // debugger;
    console.log(this.props);
    // if (this.state.redirect) {
    //   return (
    //     <Redirect
    //       from="/"
    //       to={{
    //         pathname= `/${city}/${locality}`
    //       }}
    //     />
    //   );
    // }
    if (serverError) {
      {
        serverError && (
          <SweetAlert
            show={serverError}
            type="warning"
            title="Internal Server Error"
            text="Sorry!! Please refresh to go to the home page "
            onConfirm={() => {
              this.props.history.push("/");
              this.setState({
                show: false,
                serverError: false
              });
            }}
          />
        );
      }
    }

    return (
      <div className="body">
        <div className="back-image">
          <Segment
            style={{
              minHeight: 600,
              margin: "0",
              background: "url({image})"
            }}
          >
            <HomePageHeading
              categoryArray={this.props.categories}
              randomValue={count}
              defaultCityName={cityName}
              // routeData={this.props.location}
              giveDatatoHomePage={this.fetchHomepageHeadingData}
            />
          </Segment>
        </div>
        <CategoryComponent
          cityKey={cityId}
          localityKey={localityKey}
          arrayOfLocality={localityArray}
          categoryArray={this.props.categories}
        />
        <DiscoverComponent cityId={cityId} localityId={localityKey} />
        <TrendingComponent cityId={cityId} localityId={localityKey} />
        <PopularLocalities
          offId={offeringKey}
          cat_id={cat_id}
          status={offStatus}
          api_type={api_type}
          localityId={localityKey}
          arrayOfLocality={localityArray}
          cityId={cityId}
        />
        <HomePageFooter />
      </div>
    );
  }
}

HomePage.propTypes = {
  fetchCityLocality: PropTypes.func.isRequired
};

// mapping the data to the props from API Response
function mapStateToProps(state) {
  if (state.categoryReducer.length > 0 && state.localityReducer.length > 0) {
    return {
      categories: state.categoryReducer[0].message.ballyhoo,
      city: state.localityReducer[0].city,
      locality: state.localityReducer[0].locality
    };
  } else {
    return {
      categories: [],
      city: [],
      locality: []
    };
  }
}

export default withRouter(
  connect(mapStateToProps, {
    fetchCityLocality,
    fetchCategory,
    fetchCategoryAPI
  })(HomePage)
);

import React from "react";
import { Route, Redirect, Switch } from "react-router-dom";

import App from "./app";
import "../../css/app.css";

import HomePage from "./components/pages/HomePage";

const Routes = () => (
  <div>
    <App>
      <Switch>
        {/* <Route path="/" name="Home" component={HomePage} /> */}
        <Route path="/:city/:locality" name="Home" component={HomePage} />
        <Redirect from="/" to="/:city/:locality" />
      </Switch>
    </App>
  </div>
);

export default Routes;