|
|
|
|
@ -5,42 +5,86 @@ import { book } from "../../redux/actions"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import location from "../../util/location"; |
|
|
|
|
import Course from "./Course"; |
|
|
|
|
import HomeSearchBox from "../../components/HomeSearchBox"; |
|
|
|
|
import BreadCrumbs from "../../components/BreadCrumbs"; |
|
|
|
|
import Loader from "../../components/Loader"; |
|
|
|
|
import Vocal from "../../components/Vocal/Vocal"; |
|
|
|
|
import { info } from "console"; |
|
|
|
|
|
|
|
|
|
function Courses({ getList, list, selectedMenu, loading }: any) { |
|
|
|
|
function Courses({ |
|
|
|
|
getList, |
|
|
|
|
list, |
|
|
|
|
selectedMenu, |
|
|
|
|
loading, |
|
|
|
|
page, |
|
|
|
|
theme, |
|
|
|
|
selectedSort, |
|
|
|
|
sortFilter, |
|
|
|
|
sortFilterCourse, |
|
|
|
|
}: any) { |
|
|
|
|
const [links, setLinks] = useState([ |
|
|
|
|
{ link: "/", name: "صفحه اصلی" }, |
|
|
|
|
{ link: "/courses", name: "دورهها" }, |
|
|
|
|
{ link: "/courses/2", name: "نام کتاب" }, |
|
|
|
|
]); |
|
|
|
|
const [vocal, setVocal] = useState(false); |
|
|
|
|
const [inputValue, setInputValue] = useState(""); |
|
|
|
|
useEffect(() => { |
|
|
|
|
getList(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (inputValue) { |
|
|
|
|
sortFilter({ search: inputValue, sort: selectedSort }); |
|
|
|
|
setVocal(false); |
|
|
|
|
} |
|
|
|
|
}, [inputValue]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="courses main d-flex flex-column" style={{ filter: (loading) ? "blur(8px)" : "" }}> |
|
|
|
|
<div |
|
|
|
|
className="courses main d-flex flex-column" |
|
|
|
|
style={{ filter: loading ? "blur(8px)" : "" }} |
|
|
|
|
> |
|
|
|
|
<Navbar /> |
|
|
|
|
<main className="d-flex flex-column"> |
|
|
|
|
{page === "grades" && ( |
|
|
|
|
<header className="d-flex"> |
|
|
|
|
<BreadCrumbs links={links} /> |
|
|
|
|
</header> |
|
|
|
|
{list |
|
|
|
|
)} |
|
|
|
|
{page === "search" && ( |
|
|
|
|
<HomeSearchBox |
|
|
|
|
setVocal={setVocal} |
|
|
|
|
inputValue={inputValue} |
|
|
|
|
setInputValue={setInputValue} |
|
|
|
|
theme={theme} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{page === "search" && |
|
|
|
|
inputValue && |
|
|
|
|
sortFilterCourse?.map((item: any, i: any) => ( |
|
|
|
|
<Course data={item} key={i} theme={theme} /> |
|
|
|
|
))} |
|
|
|
|
{page === "grades" && |
|
|
|
|
list |
|
|
|
|
?.filter( |
|
|
|
|
(item: any) => |
|
|
|
|
item.gradeId === |
|
|
|
|
(selectedMenu || Number(localStorage.getItem("selectedGrade"))) |
|
|
|
|
) |
|
|
|
|
.map((item: any, i: any) => ( |
|
|
|
|
<Course data={item} key={i} /> |
|
|
|
|
))} |
|
|
|
|
.map((item: any, i: any) => <Course data={item} key={i} theme={theme} />)} |
|
|
|
|
|
|
|
|
|
<h3 className={(inputValue && sortFilterCourse.length === 0 ) ? "courses-notFound" : ""}>محصولی یافت نشد.</h3> |
|
|
|
|
{page === "search" && vocal ? ( |
|
|
|
|
<Vocal setVocal={setVocal} setInputValue={setInputValue} /> |
|
|
|
|
) : null} |
|
|
|
|
</main> |
|
|
|
|
<Footer /> |
|
|
|
|
{ |
|
|
|
|
loading && <div className="full-loader"> |
|
|
|
|
{loading && ( |
|
|
|
|
<div className="full-loader"> |
|
|
|
|
<Loader size={50} /> |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
@ -49,7 +93,10 @@ export default connect( |
|
|
|
|
(state: any) => ({ |
|
|
|
|
list: state.book.list, |
|
|
|
|
selectedMenu: state.publicApi.selectedMenu, |
|
|
|
|
loading : state.book.loading |
|
|
|
|
loading: state.book.loading, |
|
|
|
|
theme: state.publicApi.theme, |
|
|
|
|
selectedSort: state.book.selectedSort, |
|
|
|
|
sortFilterCourse: state.book.sortFilterCourse, |
|
|
|
|
}), |
|
|
|
|
{ getList: book.list } |
|
|
|
|
{ getList: book.list, sortFilter: book.sortFilter } |
|
|
|
|
)(Courses); |
|
|
|
|
|
Reza
3 years ago
