|
|
|
@ -11,10 +11,9 @@ import play from "../../assets/icons/play.png"; |
|
|
|
import bookmark from "../../assets/icons/bookmark.png"; |
|
|
|
import bookmark from "../../assets/icons/bookmark.png"; |
|
|
|
import StyledRating from "../../components/StyledRating"; |
|
|
|
import StyledRating from "../../components/StyledRating"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { book } from "../../redux/actions"; |
|
|
|
import { publicApi } from "../../redux/actions"; |
|
|
|
import scroll from "../../util/scroll"; |
|
|
|
import scroll from "../../util/scroll"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function Course({ lessons, getInfo, info }: any) { |
|
|
|
function Course({ lessons, getInfo, info }: any) { |
|
|
|
const [links, setLinks] = useState([ |
|
|
|
const [links, setLinks] = useState([ |
|
|
|
{ link: "/", name: "صفحه اصلی" }, |
|
|
|
{ link: "/", name: "صفحه اصلی" }, |
|
|
|
@ -25,14 +24,23 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
scroll.goToTop(); |
|
|
|
scroll.goToTop(); |
|
|
|
getInfo({ |
|
|
|
getInfo({ |
|
|
|
bookId: 1 |
|
|
|
bookId: 18, |
|
|
|
// window.location.pathname.slice(
|
|
|
|
// window.location.pathname.slice(
|
|
|
|
// window.location.pathname.lastIndexOf("/") + 1,
|
|
|
|
// window.location.pathname.lastIndexOf("/") + 1,
|
|
|
|
// window.location.pathname.length
|
|
|
|
// window.location.pathname.length
|
|
|
|
// ),
|
|
|
|
// ),
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
let allCats; |
|
|
|
|
|
|
|
let cats = []; |
|
|
|
|
|
|
|
if (info?.vods) { |
|
|
|
|
|
|
|
allCats = Array.from( |
|
|
|
|
|
|
|
new Set(info?.vods.map((item: any) => item.categoryId && item.categoryId)) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
cats = allCats.map((item: any) => |
|
|
|
|
|
|
|
info?.vods.filter((item1: any) => item1.categoryId === item) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="course main d-flex flex-column"> |
|
|
|
<div className="course main d-flex flex-column"> |
|
|
|
<Navbar /> |
|
|
|
<Navbar /> |
|
|
|
@ -40,12 +48,16 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
<header className="course__header desktop align-items-end"> |
|
|
|
<header className="course__header desktop align-items-end"> |
|
|
|
<div className="course__info d-flex"> |
|
|
|
<div className="course__info d-flex"> |
|
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
|
<img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" /> |
|
|
|
<img |
|
|
|
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<BreadCrumbs links={links} /> |
|
|
|
<BreadCrumbs links={links} /> |
|
|
|
<h1>{info?.name}</h1> |
|
|
|
<h1>{info?.name}</h1> |
|
|
|
|
|
|
|
<p>{info?.text}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="d-flex justify-content-between"> |
|
|
|
<div className="d-flex justify-content-between"> |
|
|
|
<div className="course-info-items d-flex align-items-center justify-content-around"> |
|
|
|
<div className="course-info-items d-flex align-items-center justify-content-around"> |
|
|
|
@ -69,12 +81,12 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
<div className="course__options--rate d-flex flex-column align-items-center justify-content-start"> |
|
|
|
<div className="course__options--rate d-flex flex-column align-items-center justify-content-start"> |
|
|
|
<div className="course__options--rate__number d-flex align-items-center"> |
|
|
|
<div className="course__options--rate__number d-flex align-items-center"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<b>10</b> |
|
|
|
<b>{Number(info?.rate) * 2 || 10}</b> |
|
|
|
<i>/2</i> |
|
|
|
<i>/10</i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span>از 288 رای</span> |
|
|
|
<span>از 288 رای</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<StyledRating /> |
|
|
|
<StyledRating rate={info?.rate} /> |
|
|
|
<h2>میانگین رای کاربران</h2> |
|
|
|
<h2>میانگین رای کاربران</h2> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button className="course__options--button d-flex align-items-center justify-content-between"> |
|
|
|
<button className="course__options--button d-flex align-items-center justify-content-between"> |
|
|
|
@ -93,7 +105,10 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
<header className="mobile flex-column"> |
|
|
|
<header className="mobile flex-column"> |
|
|
|
<div className="course__info d-flex"> |
|
|
|
<div className="course__info d-flex"> |
|
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
|
<img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" /> |
|
|
|
<img |
|
|
|
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
|
<BreadCrumbs links={links} /> |
|
|
|
<BreadCrumbs links={links} /> |
|
|
|
@ -107,7 +122,7 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
<i>/2</i> |
|
|
|
<i>/2</i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<StyledRating /> |
|
|
|
<StyledRating rate={Number(info?.rate) || 0} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -139,7 +154,7 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
<h2>سر فصل دوره</h2> |
|
|
|
<h2>سر فصل دوره</h2> |
|
|
|
<p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p> |
|
|
|
<p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p> |
|
|
|
</header> |
|
|
|
</header> |
|
|
|
{lessons.map((lesson: any, i: any) => ( |
|
|
|
{cats?.map((lesson: any, i: any) => ( |
|
|
|
<Lesson key={i} lesson={lesson} /> |
|
|
|
<Lesson key={i} lesson={lesson} /> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
@ -152,7 +167,7 @@ function Course({ lessons, getInfo, info }: any) { |
|
|
|
export default connect( |
|
|
|
export default connect( |
|
|
|
(state: any) => ({ |
|
|
|
(state: any) => ({ |
|
|
|
lessons: state.book.mockLessons, |
|
|
|
lessons: state.book.mockLessons, |
|
|
|
info : state.book.info, |
|
|
|
info: state.publicApi.bookInfo, |
|
|
|
}), |
|
|
|
}), |
|
|
|
{ getInfo: book.info } |
|
|
|
{ getInfo: publicApi.bookInfo } |
|
|
|
)(Course); |
|
|
|
)(Course); |
|
|
|
|
