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.
 
 
 
 
 

218 lines
6.6 KiB

import React, { useEffect } from "react";
import {
View,
Text,
FlatList,
Image,
SafeAreaView,
ScrollView,
StyleSheet,
Platform,
Dimensions,
Appearance,
StatusBar,
} from "react-native";
import { WebView } from "react-native-webview";
import { connect } from "react-redux";
import { blog, publicApi } from "../../redux/actions";
import { LinearGradient } from "expo-linear-gradient";
//components
import Hashtags from "../Blogs/layouts/Hashtags";
import Header from "../Blogs/layouts/Header";
import New from "../Blogs/layouts/New";
import Navbar from "../../components/Navbar";
//assets
import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
const ios = Platform.OS === "ios";
const { height, width } = Dimensions.get("window");
export const Blog = ({ getInfo, blog, getList, blogs, route }) => {
const colorScheme = Appearance.getColorScheme();
useEffect(() => {
getInfo({ id: route.params.id });
if (blogs.length === 0) {
getList();
}
}, []);
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "",
bookmark: true,
qr: false,
back: true,
bookmarkItem: { contentId: blog?.id },
}}
/>
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container, tw("flex")]}
>
<View style={tw("flex px-4 pb-24")}>
<Hashtags />
<View
style={[
tw("w-full rounded-sm overflow-hidden relative"),
{ height: ((width - 32) / 4) * 2.8 },
]}
>
<Image
source={{ uri: `https:dnvn.ir/api/v1/file/${blog?.fileIds}` }}
resizeMode="contain"
style={tw("w-full h-full absolute left-0 top-0")}
/>
<LinearGradient
colors={["transparent", "rgba(0,0,0,0.9)"]}
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.1 }}
style={tw(
"flex justify-end absolute top-0 left-0 z-10 w-full h-full pb-2 px-0"
)}
>
<View
style={tw(
"flex justify-end absolute top-0 left-0 z-10 w-full h-full pb-0 px-2"
)}
>
<View
style={tw(
"w-full flex flex-row-reverse items-center justify-between"
)}
>
<View style={tw("flex")}>
<View style={tw("flex py-2 justify-center")}>
<Text
style={{
fontFamily: "regular",
color: Colors.theme1[colorScheme].white,
fontSize: fontSize.tiny,
textAlign: ios ? "right" : "auto",
}}
>
{"نوشته از:" + " " + "کامران ایزدی"}
</Text>
<Text
style={{
fontFamily: "regular",
color: Colors.theme1[colorScheme].white,
fontSize: fontSize.tiny,
textAlign: ios ? "right" : "auto",
}}
>
{"سردبیر بخش وبلاگ دانوین"}
</Text>
</View>
</View>
<View style="flex justify-center items-end">
<Text
style={{
fontFamily: "regular",
color: Colors.theme1[colorScheme].white,
fontSize: fontSize.sm,
textAlign: ios ? "left" : "left",
}}
>
{"زمان مطالعه" + " " + "۳۰ دقیقه"}
</Text>
<Text
style={{
fontFamily: "regular",
color: Colors.theme1[colorScheme].white,
fontSize: fontSize.sm,
textAlign: ios ? "left" : "left",
}}
>
{"1400/11/24"}
</Text>
</View>
</View>
</View>
</LinearGradient>
</View>
{/* <View style={[tw("flex my-5"), { textAlign: "right" }]}>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.base,
textAlign: ios ? "right" : "auto",
}}
>
{blog?.title}
</Text>
<WebView
style={[
tw(
"flex-1 w-full flex flex-row items-center justify-center text-left"
),
{ fontSize: fontSize.base },
]}
originWhitelist={["*"]}
source={{ html: blog.text, textAlign: "right" }}
containerStyle={{
textAlign: "right",
fontSize: fontSize.base,
display: "flex",
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
/>
</View> */}
<Header title={"پیشنهادی "} />
{blogs.length && (
<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, index) => { return item.id }}
/>
)}
</View>
</ScrollView>
</SafeAreaView>
);
};
const mapStateToProps = (state) => ({
blog: state.blog.blog,
blogs: state.blog.list,
});
const mapDispatchToProps = {
getInfo: blog.info,
getList: blog.list,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Blog);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
},
container: {
backgroundColor: "white",
paddingVertical: 0,
paddingHorizontal: 0,
},
});