|
|
import React, { useEffect } from "react"; |
|
|
import { |
|
|
View, |
|
|
Dimensions, |
|
|
SafeAreaView, |
|
|
Platform, |
|
|
StatusBar, |
|
|
Text, |
|
|
FlatList, |
|
|
} 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, |
|
|
theme, |
|
|
}) { |
|
|
useEffect(() => { |
|
|
if (list.length === 0) { |
|
|
getFaq(); |
|
|
} |
|
|
}, [list]); |
|
|
|
|
|
useEffect(() => { |
|
|
StatusBar.setBarStyle( |
|
|
`${theme === "light" ? "dark" : "light"}-content`, |
|
|
true |
|
|
); |
|
|
}, [theme]); |
|
|
|
|
|
return list.length > 0 ? ( |
|
|
<SafeAreaView |
|
|
style={{ |
|
|
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
|
|
position: "relative", |
|
|
}} |
|
|
> |
|
|
<Navbar |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
menu: false, |
|
|
hamburgerMenu: false, |
|
|
title: null, |
|
|
bookmark: false, |
|
|
qr: true, |
|
|
back: true, |
|
|
backgroundColor: Colors.theme1.greenCF + "0F", |
|
|
}} |
|
|
/> |
|
|
<View> |
|
|
<Header |
|
|
background={bgFaq} |
|
|
title={"پرسشهای متداول"} |
|
|
description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"} |
|
|
// icon={} |
|
|
/> |
|
|
<View style={tw("px-4 mb-4")}> |
|
|
<Search |
|
|
value={search} |
|
|
onChange={searchFaq} |
|
|
placeholder={"بخشی از پرسش خود را اینجا بنویسید"} |
|
|
/> |
|
|
</View> |
|
|
{search?.length ? ( |
|
|
searchResult?.length ? ( |
|
|
<FlatList |
|
|
contentContainerStyle={{ paddingBottom: height }} |
|
|
style={[tw("flex px-4 mb-4")]} |
|
|
data={searchResult} |
|
|
keyExtractor={(item, index) => { |
|
|
return index; |
|
|
}} |
|
|
renderItem={({ item }) => ( |
|
|
<Instance question={item} selectFaq={selectFaq} /> |
|
|
)} |
|
|
initialNumToRender={10} |
|
|
/> |
|
|
) : ( |
|
|
<Text |
|
|
style={[ |
|
|
tw("w-full px-4 mt-10 text-center"), |
|
|
{ fontFamily: "bold", color: Colors.theme1.gray20 + "77" }, |
|
|
]} |
|
|
> |
|
|
موردی یافت نشد. |
|
|
</Text> |
|
|
) |
|
|
) : ( |
|
|
<FlatList |
|
|
contentContainerStyle={{ paddingBottom: height }} |
|
|
style={[tw("flex px-4 mb-4")]} |
|
|
data={list} |
|
|
keyExtractor={(item, index) => { |
|
|
return index; |
|
|
}} |
|
|
renderItem={({ item }) => ( |
|
|
<Instance question={item} selectFaq={selectFaq} /> |
|
|
)} |
|
|
initialNumToRender={10} |
|
|
/> |
|
|
)} |
|
|
</View> |
|
|
</SafeAreaView> |
|
|
) : null; |
|
|
} |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
list: state.faq.list, |
|
|
searchResult: state.faq.searchResult, |
|
|
search: state.faq.search, |
|
|
theme: state.publicApi.theme, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
getFaq: faq.list, |
|
|
selectFaq: faq.selectFaq, |
|
|
searchFaq: faq.searchFaq, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Faq);
|
|
|
|