|
|
import React from "react"; |
|
|
import { |
|
|
StyleSheet, |
|
|
ScrollView, |
|
|
SafeAreaView, |
|
|
Platform, |
|
|
StatusBar, |
|
|
LayoutAnimation, |
|
|
FlatList, |
|
|
} from "react-native"; |
|
|
|
|
|
import { connect } from "react-redux"; |
|
|
import { blog } from "../../redux/actions"; |
|
|
|
|
|
//components |
|
|
import Navbar from "../../components/Navbar"; |
|
|
import Drawer from "../../components/Drawer"; |
|
|
import Hashtags from "./layouts/Hashtags"; |
|
|
import Header from "./layouts/Header"; |
|
|
import Single from "./layouts/Single"; |
|
|
import New from "./layouts/New"; |
|
|
import Target from "./layouts/Target"; |
|
|
|
|
|
//style |
|
|
import tw from "tailwind-rn"; |
|
|
|
|
|
function Blogs({ getList, blogs }) { |
|
|
const [position, setPosition] = React.useState("100%"); |
|
|
|
|
|
React.useEffect(() => { |
|
|
getList(); |
|
|
}, []); |
|
|
|
|
|
const setBoxPosition = () => { |
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); |
|
|
setPosition(position === "100%" ? "0%" : "100%"); |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<SafeAreaView |
|
|
style={{ |
|
|
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
|
|
position: "relative", |
|
|
}} |
|
|
> |
|
|
<Navbar |
|
|
setBoxPosition={setBoxPosition} |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
menu: false, |
|
|
hamburgerMenu: true, |
|
|
title: "", |
|
|
bookmark: false, |
|
|
qr: true, |
|
|
back: false, |
|
|
}} |
|
|
/> |
|
|
<Drawer setBoxPosition={setBoxPosition} position={position} /> |
|
|
<ScrollView |
|
|
contentContainerStyle={styles.contentContainerStyle} |
|
|
style={[styles.container, tw("flex px-4")]} |
|
|
> |
|
|
<Hashtags /> |
|
|
<Single /> |
|
|
<Header title={"تازهترینها از وبلاگ"} /> |
|
|
<FlatList |
|
|
showsHorizontalScrollIndicator={false} |
|
|
horizontal={true} |
|
|
inverted={true} |
|
|
style={[tw("flex flex-row mt-3 pb-3")]} |
|
|
data={blogs} |
|
|
renderItem={({ item }) => <New blog={item} />} |
|
|
keyExtractor={(item) => item.id} |
|
|
/> |
|
|
<Header title={"پیشنهاد سردبیر"} /> |
|
|
<FlatList |
|
|
showsHorizontalScrollIndicator={false} |
|
|
horizontal={true} |
|
|
inverted={true} |
|
|
style={[tw("flex flex-row mt-3 pb-3")]} |
|
|
data={blogs} |
|
|
renderItem={({ item }) => <New blog={item} />} |
|
|
keyExtractor={(item) => item.id} |
|
|
/> |
|
|
<Header title={"از دنیای آموزش"} /> |
|
|
<Target blogs={blogs.slice(0,3)} /> |
|
|
</ScrollView> |
|
|
</SafeAreaView> |
|
|
); |
|
|
} |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
blogs: state.blog.list, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
getList: blog.list, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Blogs); |
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
contentContainerStyle: { |
|
|
paddingBottom: 100, |
|
|
}, |
|
|
container: { |
|
|
backgroundColor: "white", |
|
|
paddingVertical: 0, |
|
|
paddingHorizontal: 0, |
|
|
}, |
|
|
});
|
|
|
|