You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

173 lines
5.4 KiB

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 Download from "./Download/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);
// 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>
);
let scale = Math.max(
1,
mobile ? Math.min(800, window.innerWidth) / 540 : 1
);
return (
<>
<>
<div
className={
(this.props.status && mobile ? "mobile-home" : "home") +
" d-flex flex-column"
}
style={
this.props.status && mobile
? {
transformStyle: "flat",
transformOrigin: "top",
transform: `scale(${scale})`,
}
: null
}
>
<Navbar page={"home"} />
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}
{window.location.host.indexOf("app") > -1 ? null : <Download />}
</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) => {
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}
</>
);
};