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.
 
 
 
 

180 lines
7.6 KiB

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