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.
138 lines
3.0 KiB
138 lines
3.0 KiB
import React, { useState, useEffect } from "react"; |
|
import "./index.scss"; |
|
import Navbar from "../../components/Navbar"; |
|
import HomeSearchBox from "../../components/HomeSearchBox"; |
|
import Courses from "./Courses"; |
|
import GradeFilter from "../../components/GradeFilter"; |
|
import Books from "./Books"; |
|
import Blogs from "./Blogs"; |
|
import Footer from "./Footer"; |
|
import Header from "./Header"; |
|
import AppDownload from "./AppDownload"; |
|
import Vocal from "../../components/Vocal/Vocal"; |
|
import scroll from "../../util/scroll"; |
|
import { connect } from "react-redux"; |
|
import { book, publicApi } from "../../redux/actions"; |
|
|
|
function Home({ |
|
courseList, |
|
getCourseList, |
|
grades, |
|
headerData, |
|
blogs, |
|
gradeFilterBooks, |
|
sortFilterCourse, |
|
selectedSort, |
|
sortFilter, |
|
getHeader, |
|
}: any) { |
|
const [grade, setGrade] = useState(null); |
|
const [vocal, setVocal] = useState(false); |
|
const [inputValue, setInputValue] = useState(""); |
|
|
|
useEffect(() => { |
|
if (inputValue) { |
|
sortFilter({ search: inputValue, sort: selectedSort }); |
|
setVocal(false); |
|
} |
|
}, [inputValue]); |
|
useEffect(() => { |
|
getCourseList(); |
|
scroll.goToTop(); |
|
getHeader({device : 1}); |
|
}, []); |
|
return ( |
|
<> |
|
<div |
|
className="home main d-flex flex-column" |
|
style={{ filter: vocal ? "blur(8px)" : "" }} |
|
> |
|
<Navbar /> |
|
<div className="desktop"> |
|
<Header headerData={headerData} /> |
|
</div> |
|
<HomeSearchBox |
|
setVocal={setVocal} |
|
inputValue={inputValue} |
|
setInputValue={setInputValue} |
|
/> |
|
<Courses courses={sortFilterCourse ? sortFilterCourse : courseList} /> |
|
<GradeFilter grades={grades} grade={grade} setGrade={setGrade} /> |
|
<Books list={gradeFilterBooks ? gradeFilterBooks : courseList} /> |
|
<Blogs /> |
|
<AppDownload /> |
|
<Footer /> |
|
</div> |
|
{vocal ? ( |
|
<Vocal setVocal={setVocal} setInputValue={setInputValue} /> |
|
) : null} |
|
</> |
|
); |
|
} |
|
|
|
export default connect( |
|
(state: any) => ({ |
|
courseList: state.book.list, |
|
gradeFilterBooks: state.book.gradeFilterBooks, |
|
sortFilterCourse: state.book.sortFilterCourse, |
|
selectedSort: state.book.selectedSort, |
|
headerData: state.publicApi.header, |
|
}), |
|
{ |
|
getCourseList: book.list, |
|
sortFilter: book.sortFilter, |
|
getHeader: publicApi.getHeader, |
|
} |
|
)(Home); |
|
Home.defaultProps = { |
|
grades: [ |
|
{ |
|
name: "اول", |
|
value: 1, |
|
}, |
|
{ |
|
name: "دوم", |
|
value: 2, |
|
}, |
|
{ |
|
name: "سوم", |
|
value: 3, |
|
}, |
|
{ |
|
name: "چهارم", |
|
value: 4, |
|
}, |
|
{ |
|
name: "پنجم", |
|
value: 5, |
|
}, |
|
{ |
|
name: "ششم", |
|
value: 6, |
|
}, |
|
{ |
|
name: "هفتم", |
|
value: 7, |
|
}, |
|
{ |
|
name: "هشتم", |
|
value: 8, |
|
}, |
|
{ |
|
name: "نهم", |
|
value: 9, |
|
}, |
|
{ |
|
name: "دهم", |
|
value: 10, |
|
}, |
|
{ |
|
name: "یازدهم", |
|
value: 11, |
|
}, |
|
{ |
|
name: "دوازدهم", |
|
value: 12, |
|
}, |
|
], |
|
};
|
|
|