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