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.
 
 
 

110 lines
3.2 KiB

import React, { Component } from "react";
import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions";
import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Loader from "~/components/Loader/index";
import Item from "./Item/index";
import BreadCrumbs from "./BreadCrumb/index";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
mobile: {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 30,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
},
desktop: {
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
};
class AR extends Component {
componentDidMount() {
window.scrollTo(0, 0);
this.props.getMyList({ isActive: 1, productType: 3 });
}
render() {
const { arList, loading } = this.props;
if (loading)
return (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
);
if (arList.length === 0)
return (
<div className="ar d-flex flex-column">
<Navbar />
<div
className="mybooks__list--empty d-flex flex-column justify-content-center align-items-center"
style={{ width: "100vw", height: "calc(100vh - 100px)" }}
>
<p
style={{
fontSize:
window.innerWidth > 1000
? fontSize.desktop.p
: fontSize.mobile.p,
}}
>
برای استفاده از این بخش باید یک کتاب را فعالسازی کرده باشید
</p>
<Link to="/activation">فعالسازی کتاب</Link>
</div>
</div>
);
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="ar d-flex flex-column">
<Navbar />
<BreadCrumbs />
<div className="ar__box d-flex flex-wrap">
{arList.map((item, i) => (
<Item data={item} key={i} />
))}
</div>
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-ar d-flex flex-column">
<Navbar />
<BreadCrumbs />
<div className="mobile-ar__list d-flex flex-wrap">
{arList.map((item, i) => (
<Item data={item} key={i} />
))}
</div>
</div>
) : null}
</>
);
}
}
export default connect(
(state) => ({
arList: (state.userProduct.myList || []).filter(
(product) => product.productType === 3
),
loading: state.loading,
}),
{
getMyList: userProduct.myList,
}
)(AR);