140 lines
3.4 KiB

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