|
|
import React, { useEffect } from "react"; |
|
|
import { |
|
|
View, |
|
|
Dimensions, |
|
|
ScrollView, |
|
|
SafeAreaView, |
|
|
Platform, |
|
|
StatusBar, |
|
|
Text, |
|
|
} from "react-native"; |
|
|
import { connect } from "react-redux"; |
|
|
import { faq } from "../../redux/actions"; |
|
|
|
|
|
//style |
|
|
import tw from "tailwind-rn"; |
|
|
import Colors from "../../constants/Colors"; |
|
|
|
|
|
//components |
|
|
import Header from "../../components/Header"; |
|
|
import Navbar from "../../components/Navbar"; |
|
|
import Search from "../../components/Search"; |
|
|
import Instance from "./components/Instance"; |
|
|
|
|
|
//assets |
|
|
import bgFaq from "./assets/faq.png"; |
|
|
|
|
|
const { width, height } = Dimensions.get("window"); |
|
|
|
|
|
function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) { |
|
|
useEffect(() => { |
|
|
getFaq(); |
|
|
}, []); |
|
|
|
|
|
return ( |
|
|
<SafeAreaView |
|
|
style={{ |
|
|
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
|
|
position: "relative", |
|
|
backgroundColor: "white", |
|
|
}} |
|
|
> |
|
|
<Navbar |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
menu: false, |
|
|
hamburgerMenu: false, |
|
|
title: "", |
|
|
bookmark: false, |
|
|
qr: true, |
|
|
back: true, |
|
|
backgroundColor: Colors.theme1["light"].greenCF + "0F", |
|
|
}} |
|
|
/> |
|
|
<Header |
|
|
background={bgFaq} |
|
|
title={"پرسشهای متداول"} |
|
|
description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"} |
|
|
// icon={} |
|
|
/> |
|
|
<View style={tw("px-4 mb-4")}> |
|
|
<Search |
|
|
value={search} |
|
|
onChange={searchFaq} |
|
|
placeholder={"بخشی از پرسش خود را اینجا بنویسید"} |
|
|
/> |
|
|
</View> |
|
|
<ScrollView |
|
|
style={[tw("bg-white flex px-4 mb-4")]} |
|
|
contentContainerStyle={{ paddingBottom: height / 2.4 }} |
|
|
> |
|
|
{!search ? ( |
|
|
list.length && |
|
|
list.map((item, index) => ( |
|
|
<Instance key={index} question={item} selectFaq={selectFaq} /> |
|
|
)) |
|
|
) : list.length && searchResult.length ? ( |
|
|
searchResult.map((item, index) => ( |
|
|
<Instance key={index} question={item} selectFaq={selectFaq} /> |
|
|
)) |
|
|
) : ( |
|
|
<Text |
|
|
style={[ |
|
|
tw("w-full text-center mt-10"), |
|
|
{ fontFamily: "regular", fontSize: width / 24 }, |
|
|
]} |
|
|
> |
|
|
سوالی یافت نشد. |
|
|
</Text> |
|
|
)} |
|
|
</ScrollView> |
|
|
</SafeAreaView> |
|
|
); |
|
|
} |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
list: state.faq.list, |
|
|
searchResult: state.faq.searchResult, |
|
|
search: state.faq.search, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
getFaq: faq.list, |
|
|
selectFaq: faq.selectFaq, |
|
|
searchFaq: faq.searchFaq, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Faq);
|
|
|
|