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
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);
|
|
|