|
|
|
@ -1,7 +1,7 @@ |
|
|
|
|
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"; |
|
|
|
@ -11,62 +11,82 @@ 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 ? 25 : window.innerWidth / 70, |
|
|
|
|
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
|
|
|
|
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.getArList({ type: 3 });
|
|
|
|
|
this.props.getMyList({ isActive: 1, productType: 3 }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const { data, arList } = this.props; |
|
|
|
|
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 ? ( |
|
|
|
|
arList.length > 0 ? ( |
|
|
|
|
<> |
|
|
|
|
<div className="ar d-flex flex-column"> |
|
|
|
|
<Navbar /> |
|
|
|
|
<BreadCrumbs /> |
|
|
|
|
<div className="ar__box d-flex flex-column"></div> |
|
|
|
|
</div> |
|
|
|
|
<Footer /> |
|
|
|
|
</> |
|
|
|
|
) : ( |
|
|
|
|
<div |
|
|
|
|
className="d-flex justify-content-center align-items-center" |
|
|
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
|
|
> |
|
|
|
|
<Loader /> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
) : null} |
|
|
|
|
{window.innerWidth < 1000 ? ( |
|
|
|
|
arList.length ? ( |
|
|
|
|
<div className="mobile-ar d-flex flex-column"> |
|
|
|
|
<> |
|
|
|
|
<div className="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 className="ar__box d-flex flex-column"></div> |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<div |
|
|
|
|
className="d-flex justify-content-center align-items-center" |
|
|
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
|
|
> |
|
|
|
|
<Loader /> |
|
|
|
|
<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} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
@ -75,9 +95,10 @@ class AR extends Component { |
|
|
|
|
|
|
|
|
|
export default connect( |
|
|
|
|
(state) => ({ |
|
|
|
|
arList: state.userProduct.list, |
|
|
|
|
arList: state.userProduct.myList || [], |
|
|
|
|
loading: state.loading, |
|
|
|
|
}), |
|
|
|
|
{ |
|
|
|
|
getArList: userProduct.list, |
|
|
|
|
getMyList: userProduct.myList, |
|
|
|
|
} |
|
|
|
|
)(AR); |
|
|
|
|