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, }, ], };