import React, { Component } from "react"; import { connect } from "react-redux"; import { publicApi } from "~/Redux/actions"; import Navbar from "./Navbar"; import HomeHeader from "./HomeHeader/index"; import HomeStatic from "./HomeStatic/index"; import HomeScroll from "./HomeScroll/index"; import Footer from "./Footer/index"; import HomeSlider from "./HomeSlider/index"; import HomeSearch from "./HomeSearch/index"; import Membership from "./Membership/index"; import SingleBlog from "./SingleBlog/index"; import Loader from "~/components/Loader/index"; // import pic1 from "~/assets/images/pic1.png"; // import pic from "~/assets/images/pic.png"; // import online from "~/assets/icons/online-education.png"; // import chemistry from "~/assets/icons/chemistry.png"; // import calculator from "~/assets/icons/calculator.png"; // import homework from "~/assets/icons/homework.png"; // import sciense_6 from "~/assets/images/sciense-6.png"; // import chemistry_10 from "~/assets/images/chemistry-10.png"; // import sciense_8 from "~/assets/images/sciense-8.png"; // import sciense_9 from "~/assets/images/sciense-9.png"; // import zist_10 from "~/assets/images/zist-10.png"; // import blog1 from "~/assets/images/blog1.png"; // import blog2 from "~/assets/images/blog2.png"; // import blog3 from "~/assets/images/blog3.png"; // import ar from "~/assets/icons/qr.svg"; // import qr from "~/assets/icons/qr.svg"; // import myBook from "~/assets/images/myBook.png"; // import homeBlog from "~/assets/images/homeBlog.png"; // import bookActivation from "~/assets/images/bookActivating.png"; // import home_chat from "~/assets/icons/home_chat.png"; // import home_ar from "~/assets/icons/home_ar(2).png"; import "./index.scss"; class Home extends Component { componentDidMount() { const mobile = window.innerWidth < 1000; window.scrollTo(0, 0); console.log("xx"); // if (this.props.homeData.length == 0) { if (mobile && this.props.userStatus) { this.props.getHomeData({ device: 2 }); } else { this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 }); } return null; // } } //componentDidupdate = this.componentDidMount(); render() { const { homeData, loading } = this.props; if (!loading && this.props.homeData.length === 0) return this.componentDidMount(); const mobile = window.innerWidth < 1000; if (loading && this.props.homeData.length === 0) return ( <div className="d-flex justify-content-center align-items-center" style={{ height: "100vh", width: "100vw" }} > <Navbar page={"home"} /> <Loader /> </div> ); console.log({ homeData }); return ( <> <> <div className={ (this.props.status && mobile ? "mobile-home" : "home") + " d-flex flex-column" } > <Navbar page={"home"} /> {homeData.map((item, i) => ( <Identifier item={item} key={i} /> ))} </div> {window.innerWidth > 1000 ? <Footer /> : null} </> </> ); } } export default connect( (state) => ({ homeData: state.publicApi.homeData, loading: state.publicApi.loading, userStatus: state.user.status, }), { getHomeData: publicApi.getHomeData } )(Home); const Identifier = (props) => { console.log({ item: props.item }); return ( <> {props.item.type === "header" ? ( <HomeHeader height={props.item.height} title={props.item.title} data={props.item.data} /> ) : null} {props.item.type === "static" ? ( <HomeStatic height={props.item.height} title={props.item.title} data={props.item.data} designType={props.item.design} /> ) : null} {props.item.type === "scroll" ? ( props.item.data.length > 0 ? ( <HomeScroll number={props.item.number} height={props.item.height} title={props.item.title} data={props.item.data} designType={props.item.design} moreText={props.item.moreText} /> ) : null ) : null} {props.item.type === "slider" ? ( props.item.data.length > 0 ? ( <HomeSlider designType={props.item.design} number={props.item.number} height={props.item.height} title={props.item.title} data={props.item.data} link={props.item.link} /> ) : null ) : null} {props.item.type === "search" ? ( <HomeSearch height={props.item.height} data={props.item.data} /> ) : null} {props.item.type === "membership" && window.innerWidth > 1000 ? ( <Membership /> ) : null} {props.item.type === "singleBlog" && window.innerWidth > 1000 ? ( <SingleBlog height={props.item.height} data={props.item.data} direction={props.item.direction} /> ) : null} </> ); };