You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

175 lines
4.6 KiB

import React from "react";
import {
StyleSheet,
ScrollView,
SafeAreaView,
Platform,
StatusBar,
LayoutAnimation,
FlatList,
Dimensions,
Image,
Text,
Pressable,
} from "react-native";
import { connect } from "react-redux";
import { blog } from "../../redux/actions";
import { useNavigation } from "@react-navigation/native";
//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";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
const { width, height } = Dimensions.get("window");
const ios = Platform.OS === "ios";
function Blogs({ getList, blogs, hashtag, setHashtag, theme }) {
const [position, setPosition] = React.useState("100%");
React.useEffect(() => {
getList();
setHashtag(null);
}, []);
React.useEffect(() => {
StatusBar.setBarStyle(
`${theme === "light" ? "dark" : "light"}-content`,
true
);
}, [theme]);
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} />
<Hashtags />
{hashtag !== 'همه' ? (
<FlatList
contentContainerStyle={styles.contentContainerStyle}
style={tw("px-4")}
data={blogs?.filter((blog) => blog?.tag === hashtag)}
renderItem={({ item }) => (
<HashtagBlog blog={item} blogsPage={true} theme={theme} />
)}
keyExtractor={(item) => item?.id}
/>
) : (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container, tw("flex px-4")]}
>
<Single />
<Header title={"تازهترینها از وبلاگ"} />
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-3")]}
data={blogs?.slice(0, 7)}
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?.slice(0, 7)}
renderItem={({ item }) => <New blog={item} />}
keyExtractor={(item) => item?.id}
/>
<Header title={"از دنیای آموزش"} />
<Target blogs={blogs?.slice(0, 3)} />
</ScrollView>
)}
</SafeAreaView>
);
}
const HashtagBlog = ({ blog, theme }) => {
const navigation = useNavigation();
return (
<Pressable
style={[tw("w-full flex pb-4 mb-4")]}
onPress={() => navigation.push("Blog", { id: blog?.id })}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }}
resizeMode="contain"
style={[
tw("rounded-sm"),
{ width: "100%", height: ((width - 32) * 3) / 4 },
]}
/>
<Text
style={{
fontSize: fontSize.lg,
fontFamily: "bold",
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
marginTop: 5,
textAlign: ios ? "right" : "auto",
}}
>
{blog?.title}
</Text>
</Pressable>
);
};
const mapStateToProps = (state) => ({
blogs: state.blog.list,
hashtag: state.blog.hashtag,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
getList: blog.list,
setHashtag: blog.setHashtag,
};
export default connect(mapStateToProps, mapDispatchToProps)(Blogs);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: height / 4,
paddingTop: 0,
},
container: {
paddingVertical: 0,
paddingHorizontal: 0,
},
});