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.
189 lines
6.2 KiB
189 lines
6.2 KiB
import React, { Component } from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
import { publicApi } from "~/Redux/actions"; |
|
|
|
import Navbar from "../Home/Navbar/index"; |
|
import Footer from "../Home/Footer/index"; |
|
import Collapse from "./Collapse/index"; |
|
import Loader from "~/components/Loader/index"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
mobile: { |
|
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20, |
|
button: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 25, |
|
p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 70, |
|
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 75, |
|
form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 70, |
|
}, |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
|
button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, |
|
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85, |
|
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, |
|
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
|
}, |
|
}; |
|
|
|
class Faq extends Component { |
|
state = { |
|
search: "", |
|
searchedMessages: null, |
|
}; |
|
|
|
componentDidMount() { |
|
this.props.getFaqList(); |
|
} |
|
|
|
setMessageActive = (id, status) => { |
|
if (this.state.searchedMessages) { |
|
if (status) { |
|
this.setState((prevState) => ({ |
|
searchedMessages: prevState.searchedMessages.map((item) => |
|
item.id === id ? { ...item, active: false } : item |
|
), |
|
})); |
|
} else { |
|
this.setState((prevState) => ({ |
|
searchedMessages: prevState.searchedMessages.map((item) => |
|
item.id === id |
|
? { ...item, active: true } |
|
: { ...item, active: false } |
|
), |
|
})); |
|
} |
|
} else { |
|
if (status) { |
|
this.setState((prevState) => ({ |
|
messages: prevState.messages.map((item) => |
|
item.id === id ? { ...item, active: false } : item |
|
), |
|
})); |
|
} else { |
|
this.setState((prevState) => ({ |
|
messages: prevState.messages.map((item) => |
|
item.id === id |
|
? { ...item, active: true } |
|
: { ...item, active: false } |
|
), |
|
})); |
|
} |
|
} |
|
}; |
|
|
|
handleSearch = (val) => { |
|
this.setState({ |
|
search: val, |
|
}); |
|
this.props.searchFaq(val); |
|
}; |
|
|
|
render() { |
|
const { faqList, searchResult } = this.props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
faqList && faqList.length > 0 ? ( |
|
<> |
|
<div className="faq d-flex flex-column align-items-center"> |
|
<Navbar page={"faq"} /> |
|
<header className="faq__header d-flex flex-column align-items-center"> |
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
|
سلام چطوری میتونم کمکتون کنم؟ |
|
</h1> |
|
<div className="faq__header--search d-flex align-items-center"> |
|
<input |
|
type="search" |
|
placeholder="دنبال چه چیزی برات باشیم؟" |
|
onChange={(e) => this.handleSearch(e.target.value)} |
|
/> |
|
<button |
|
type="submit" |
|
style={{ fontSize: fontSize.mobile.button }} |
|
> |
|
جستجو |
|
</button> |
|
</div> |
|
</header> |
|
<div className="faq__list d-flex flex-column"> |
|
{this.state.search === "" |
|
? faqList.map((item, i) => ( |
|
<Collapse |
|
setMessageActive={this.setMessageActive} |
|
message={item} |
|
key={i} |
|
/> |
|
)) |
|
: searchResult.map((item, i) => ( |
|
<Collapse |
|
setMessageActive={this.setMessageActive} |
|
message={item} |
|
key={i} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
<Footer /> |
|
</> |
|
) : ( |
|
<div |
|
className="d-flex justify-content-center align-items-center" |
|
style={{ height: "100vh", width: "100vw" }} |
|
> |
|
<Navbar page={"faq"} /> |
|
|
|
<Loader /> |
|
</div> |
|
) |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-faq d-flex flex-column align-items-center"> |
|
<Navbar page={"mobile-faq"} /> |
|
<header className="mobile-faq__header d-flex flex-column align-items-center"> |
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
|
سلام چطوری میتونم کمکتون کنم؟ |
|
</h1> |
|
<input |
|
type="search" |
|
placeholder="دنبال چه چیزی برات باشیم؟" |
|
onChange={(e) => this.handleSearch(e.target.value)} |
|
/> |
|
<button type="submit">جستجو</button> |
|
</header> |
|
<div className="mobile-faq__list d-flex flex-column"> |
|
{!this.state.search |
|
? faqList.map((item, i) => ( |
|
<Collapse |
|
setMessageActive={this.setMessageActive} |
|
message={item} |
|
key={i} |
|
/> |
|
)) |
|
: searchResult.map((item, i) => ( |
|
<Collapse |
|
setMessageActive={this.setMessageActive} |
|
message={item} |
|
key={i} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
faqList: state.publicApi.faqList, |
|
loading: state.publicApi.loading, |
|
searchResult: state.publicApi.searchResult, |
|
}), |
|
{ getFaqList: publicApi.getFaqList, searchFaq: publicApi.searchFaq } |
|
)(Faq);
|
|
|