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

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);