|
|
import React, { useState, useEffect } from "react"; |
|
|
import Navbar from "../../components/Navbar"; |
|
|
import Footer from "../Home/Footer"; |
|
|
import BreadCrumbs from "../../components/BreadCrumbs"; |
|
|
import Lesson from "./Lesson"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import chat from "../../assets/icons/chat.png"; |
|
|
import slide from "../../assets/icons/slide.png"; |
|
|
import play from "../../assets/icons/play.png"; |
|
|
import bookmark from "../../assets/icons/bookmark.png"; |
|
|
import StyledRating from "../../components/StyledRating"; |
|
|
import location from "../../util/location"; |
|
|
import { connect } from "react-redux"; |
|
|
import { publicApi } from "../../redux/actions"; |
|
|
import scroll from "../../util/scroll"; |
|
|
import Loader from "../../components/Loader"; |
|
|
|
|
|
function Course({ getInfo, info, categories, loading }: any) { |
|
|
const [links, setLinks] = useState([ |
|
|
{ link: "/", name: "صفحه اصلی" }, |
|
|
{ link: "/courses", name: "دورهها" }, |
|
|
{ link: "/courses/2", name: "نام کتاب" }, |
|
|
]); |
|
|
const [course, setCourse] = useState<any>(undefined); |
|
|
useEffect(() => { |
|
|
scroll.goToTop(); |
|
|
getInfo({ |
|
|
bookId: location.getId() |
|
|
}); |
|
|
}, []); |
|
|
|
|
|
const checkFreeCat = () => { |
|
|
// const freeCat = info?.vods.filter((item: any) => item?.isFreeVOD)[0]; |
|
|
// localStorage.setItem("free", location.getId() + "," + freeCat?.categoryId); |
|
|
// local => bookId, category |
|
|
localStorage.setItem("bookId", location.getId()); |
|
|
localStorage.removeItem("category"); |
|
|
}; |
|
|
return ( |
|
|
<div |
|
|
className="course main d-flex flex-column" |
|
|
style={{ filter: loading ? "blur(8px)" : "" }} |
|
|
> |
|
|
<Navbar /> |
|
|
<main> |
|
|
<header className="course__header desktop align-items-end"> |
|
|
<div className="course__info d-flex"> |
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} |
|
|
alt="" |
|
|
/> |
|
|
</div> |
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
<div> |
|
|
<BreadCrumbs links={links} /> |
|
|
<h1>{info?.name}</h1> |
|
|
<p>{info?.text}</p> |
|
|
<i>{info?.vodTeacher}</i> |
|
|
</div> |
|
|
<div className="d-flex " style={{ minWidth: 150 }}> |
|
|
<div className="course-info-items d-flex align-items-center justify-content-around" style={{ minWidth: 150 }}> |
|
|
<img src={slide} alt="" /> |
|
|
<div className="d-flex flex-column" style={{ minWidth: 100 }}> |
|
|
<i>{info?.vodDuration} ساعت درس </i> |
|
|
{/* <p>در این قسمت توضیحی</p> */} |
|
|
</div> |
|
|
</div> |
|
|
{/* <div className="course-info-items d-flex align-items-center justify-content-around"> |
|
|
<img src={chat} alt="" /> |
|
|
<div className="d-flex flex-column"> |
|
|
<i>ارتباط با استاد</i> |
|
|
<p>در این قسمت توضیحی</p> |
|
|
</div> |
|
|
</div> */} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="course__options d-flex flex-column align-items-end justify-content-end"> |
|
|
<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> |
|
|
<b>{Number(info?.rate) * 2 || 10}</b> |
|
|
<i>/10</i> |
|
|
</div> |
|
|
<span>از 288 رای</span> |
|
|
</div> |
|
|
<StyledRating rate={info?.rate} /> |
|
|
<h2>میانگین رای کاربران</h2> |
|
|
</div> |
|
|
<button className="course__options--button d-flex align-items-center justify-content-between"> |
|
|
اضافه کردن به علاقهمندیها |
|
|
<img src={bookmark} alt="" /> |
|
|
</button> |
|
|
<Link |
|
|
to={"/video/" + info?.vods[0]?.id} |
|
|
className="course__options--button d-flex align-items-center justify-content-between" |
|
|
onClick={() => checkFreeCat()} |
|
|
> |
|
|
مشاهده پیشنمایش دوره |
|
|
<img src={play} alt="" /> |
|
|
</Link> |
|
|
</div> |
|
|
</header> |
|
|
<header className="mobile flex-column"> |
|
|
<div className="course__info d-flex"> |
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} |
|
|
alt="" |
|
|
/> |
|
|
</div> |
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
<BreadCrumbs links={links} /> |
|
|
<h1>{info?.name}</h1> |
|
|
<i>240 ساعت</i> |
|
|
<div className="course__options--rate d-flex align-items-center justify-content-between"> |
|
|
<div className="course__options--rate__number d-flex flex-column align-items-center"> |
|
|
<h2>میانگین رای کاربران</h2> |
|
|
<div> |
|
|
<b>10</b> |
|
|
<i>/2</i> |
|
|
</div> |
|
|
</div> |
|
|
<StyledRating rate={Number(info?.rate) || 0} /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="course__options d-flex align-items-center justify-content-between"> |
|
|
<button className="course__options--button d-flex align-items-center justify-content-around"> |
|
|
اضافه کردن به علاقهمندیها |
|
|
<img src={bookmark} alt="" /> |
|
|
</button> |
|
|
<Link |
|
|
to={"/video/" + info?.vods[0]?.id} |
|
|
className="course__options--button d-flex align-items-center justify-content-around" |
|
|
onClick={() => checkFreeCat()} |
|
|
> |
|
|
مشاهده پیشنمایش دوره |
|
|
<img src={play} alt="" /> |
|
|
</Link> |
|
|
</div> |
|
|
<p> |
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
|
|
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در |
|
|
ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و |
|
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی |
|
|
در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را |
|
|
می طلبد تا با نرم افزارها شناخت بیشتری دارد. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<section className="course__list d-flex flex-column"> |
|
|
<header className="course__list--header"> |
|
|
{/* <h2>سر فصل دوره</h2> */} |
|
|
{/* <p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p> */} |
|
|
</header> |
|
|
{categories?.map((lesson: any, i: any) => ( |
|
|
<Lesson key={i} lesson={lesson} /> |
|
|
))} |
|
|
</section> |
|
|
</main> |
|
|
<Footer /> |
|
|
{loading && ( |
|
|
<div className="full-loader"> |
|
|
<Loader size={50} /> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state: any) => ({ |
|
|
info: state.publicApi.bookInfo, |
|
|
categories: state.publicApi.categories, |
|
|
loading: state.publicApi.loading, |
|
|
}), |
|
|
{ getInfo: publicApi.bookInfo } |
|
|
)(Course);
|
|
|
|