|
|
import React, { useState } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import _ from "lodash"; |
|
|
import { book } from "../../redux/actions"; |
|
|
import search from "../../assets/icons/search.png"; |
|
|
import searchBlack from "../../assets/icons/searchBlack.svg"; |
|
|
import voice from "../../assets/icons/voice.png"; |
|
|
import voiceBlack from "../../assets/icons/voice-black.png"; |
|
|
|
|
|
function HomeSearchBox({ |
|
|
lastItems, |
|
|
setVocal, |
|
|
inputValue, |
|
|
setInputValue, |
|
|
sortFilter, |
|
|
selectedSort, |
|
|
theme, |
|
|
}: any) { |
|
|
const submitInput = (value: any) => { |
|
|
setInputValue(value); |
|
|
sortFilter({ search: value, sort: selectedSort }); |
|
|
}; |
|
|
|
|
|
const submitSort = (value: any) => { |
|
|
sortFilter({ search: inputValue, sort: value }); |
|
|
}; |
|
|
|
|
|
const light = theme === "light"; |
|
|
return ( |
|
|
<section |
|
|
className={_.join( |
|
|
[ |
|
|
"home-search-box d-flex flex-column align-items-center", |
|
|
theme === "light" ? "home-search-box-light" : "home-search-box-dark", |
|
|
], |
|
|
" " |
|
|
)} |
|
|
> |
|
|
<form className="d-flex" onSubmit={(e) => e.preventDefault()}> |
|
|
<input |
|
|
type="search" |
|
|
placeholder="نام درس یا دوره را جستجو کنید" |
|
|
onChange={(e) => submitInput(e.target.value)} |
|
|
value={inputValue} |
|
|
/> |
|
|
<button |
|
|
type="submit" |
|
|
onClick={() => sortFilter({ search: inputValue, sort: selectedSort })} |
|
|
> |
|
|
<img src={search} alt="" /> |
|
|
</button> |
|
|
{light ? ( |
|
|
<img |
|
|
className="mobile home-search-box__searchIcon" |
|
|
src={searchBlack} |
|
|
onClick={() => |
|
|
sortFilter({ search: inputValue, sort: selectedSort }) |
|
|
} |
|
|
alt="" |
|
|
/> |
|
|
) : ( |
|
|
<img |
|
|
className="mobile home-search-box__searchIcon" |
|
|
src={search} |
|
|
onClick={() => |
|
|
sortFilter({ search: inputValue, sort: selectedSort }) |
|
|
} |
|
|
alt="" |
|
|
/> |
|
|
)} |
|
|
|
|
|
<button |
|
|
className="home-search-box__voice" |
|
|
onClick={() => setVocal(true)} |
|
|
> |
|
|
{light ? <img src={voiceBlack} alt="" /> : <img src={voice} alt="" />} |
|
|
</button> |
|
|
</form> |
|
|
<footer className="desktop align-items-center"> |
|
|
<strong>جدیدترینها</strong> |
|
|
<ul className="d-flex"> |
|
|
{lastItems.map((item: any, i: any) => ( |
|
|
<li |
|
|
key={i} |
|
|
onClick={() => |
|
|
// sortFilter({ search: inputValue, sort: item.name }) |
|
|
setInputValue(item.name) |
|
|
} |
|
|
> |
|
|
{item.name} |
|
|
</li> |
|
|
))} |
|
|
</ul> |
|
|
</footer> |
|
|
</section> |
|
|
); |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state: any) => ({ |
|
|
selectedSort: state.book.selectedSort, |
|
|
theme: state.publicApi.theme, |
|
|
}), |
|
|
{ sortFilter: book.sortFilter } |
|
|
)(HomeSearchBox); |
|
|
|
|
|
HomeSearchBox.defaultProps = { |
|
|
lastItems: [ |
|
|
{ |
|
|
name: "علوم", |
|
|
}, |
|
|
{ |
|
|
name: "ریاضی", |
|
|
}, |
|
|
], |
|
|
};
|
|
|
|