Skip to content

Commit 43f91ec

Browse files
Kartikeyyadav7Kartikeyyadav7
committed
blog page done
1 parent c849a70 commit 43f91ec

File tree

5 files changed

+205
-33
lines changed

5 files changed

+205
-33
lines changed

‎lib/date.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const formatedDate = (dateString: string) => {
2+
const date = new Date(dateString);
3+
const formatedDate = date.toDateString();
4+
const formatedTheformatedDate = formatedDate.slice(4, 19);
5+
return formatedTheformatedDate;
6+
};

‎navigation/AppInsiderStack.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import HomeScreen from "../screens/HomeScreen";
55
import ExploreScreen from "../screens/ExploreScreen";
66
import BookmarkScreen from "../screens/BookmarkScreen";
77
import ProfileScreen from "../screens/ProfileScreen";
8+
import BlogScreen from "../screens/BlogScreen";
89
import { createNativeStackNavigator } from "@react-navigation/native-stack";
910

1011
const Stack = createNativeStackNavigator();
@@ -14,6 +15,7 @@ export const HomeScreenNavigator = () => {
1415
<Stack.Navigator initialRouteName="Home">
1516
<Stack.Screen name="Home" component={HomeScreen} />
1617
<Stack.Screen name="Category" component={CategoryScreen} />
18+
<Stack.Screen name="Blog" component={BlogScreen} />
1719
</Stack.Navigator>
1820
);
1921
};

‎screens/BlogScreen.tsx

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React, { useEffect, useState } from "react";
2+
import {
3+
View,
4+
Text,
5+
ScrollView,
6+
Image,
7+
ActivityIndicator,
8+
Dimensions,
9+
StyleSheet,
10+
} from "react-native";
11+
import { client } from "../lib/contentful";
12+
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
13+
import Markdown from "react-native-markdown-display";
14+
15+
const BlogScreen = ({ route }: any) => {
16+
const [blog, setBlog] = useState<any | (() => any)>([]);
17+
const { id } = route.params;
18+
19+
useEffect(() => {
20+
client
21+
.getEntry(id)
22+
.then((entry: any) => {
23+
setBlog(entry);
24+
})
25+
.catch(console.error);
26+
}, []);
27+
28+
const deviceHeight = Dimensions.get("window").height;
29+
const deviceWidth = Dimensions.get("window").width;
30+
let formatedTheformatedDate: any;
31+
if (blog.fields) {
32+
const date = new Date(blog.fields.publishedOn);
33+
const formatedDate = date.toDateString();
34+
formatedTheformatedDate = formatedDate.slice(4, 19);
35+
}
36+
return (
37+
<View>
38+
{blog.fields ? (
39+
<ScrollView>
40+
<View style={styles.container}>
41+
<View style={styles.attributeContainer}>
42+
<Text style={styles.title}>{blog.fields.title}</Text>
43+
<MaterialIcons name="bookmark-border" color="black" size={26} />
44+
</View>
45+
<View>
46+
<View style={styles.attribute}>
47+
<Text style={styles.author}>By {blog.fields.author}</Text>
48+
{/* <Text style={styles.date}>{formatedTheformatedDate}</Text> */}
49+
</View>
50+
</View>
51+
<Image
52+
style={styles.cardImage}
53+
source={{
54+
uri: `https://${blog.fields.coverImage.fields.file.url}`,
55+
}}
56+
/>
57+
<View style={styles.separator}></View>
58+
<View style={styles.blog}>
59+
<Markdown
60+
style={{
61+
body: { color: "#000", fontSize: 15 },
62+
// heading1: {color: 'purple'},
63+
code_block: {
64+
backgroundColor: "#000",
65+
color: "#fff",
66+
fontSize: 14,
67+
},
68+
}}
69+
>
70+
{blog.fields.blogContent}
71+
</Markdown>
72+
</View>
73+
</View>
74+
</ScrollView>
75+
) : (
76+
<ActivityIndicator
77+
style={{
78+
height: deviceHeight,
79+
width: deviceWidth,
80+
alignItems: "center",
81+
justifyContent: "center",
82+
}}
83+
size="large"
84+
color="black"
85+
/>
86+
)}
87+
</View>
88+
);
89+
};
90+
91+
const styles = StyleSheet.create({
92+
container: {
93+
flex: 1,
94+
backgroundColor: "#fff",
95+
marginHorizontal: 12,
96+
paddingTop: 10,
97+
},
98+
title: {
99+
color: "#000",
100+
fontSize: 19,
101+
fontWeight: "700",
102+
},
103+
attributeContainer: {
104+
flexDirection: "row",
105+
justifyContent: "space-between",
106+
alignItems: "center",
107+
// marginTop: 6,
108+
},
109+
attribute: {
110+
flexDirection: "row",
111+
112+
marginTop: 6,
113+
},
114+
author: {
115+
color: "#000",
116+
},
117+
separator: {
118+
marginTop: 10,
119+
borderBottomColor: "#c4bfbe",
120+
borderBottomWidth: 1,
121+
},
122+
date: {
123+
paddingLeft: 5,
124+
color: "#000",
125+
},
126+
blog: {
127+
marginTop: 2,
128+
},
129+
cardImage: {
130+
height: 150,
131+
width: undefined,
132+
marginTop: 15,
133+
},
134+
});
135+
136+
export default BlogScreen;

‎screens/CategoryScreen.tsx

+12-5
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import {
99
} from "react-native";
1010

1111
import { client } from "../lib/contentful";
12+
import { formatedDate } from "../lib/date";
1213

13-
const CategoryScreen = ({ route }: any) => {
14+
const CategoryScreen = ({ navigation, route }: any) => {
1415
const [blog, setBlog] = useState<any | (() => any)>([]);
1516
useEffect(() => {
1617
client
@@ -31,7 +32,10 @@ const CategoryScreen = ({ route }: any) => {
3132
<ScrollView>
3233
<View style={styles.container}>
3334
{blog.map((item: any) => (
34-
<TouchableOpacity key={item.sys.id}>
35+
<TouchableOpacity
36+
key={item.sys.id}
37+
onPress={() => navigation.navigate("Blog", { id: item.sys.id })}
38+
>
3539
<View style={styles.card}>
3640
<View style={styles.list}>
3741
<View style={styles.separator}>
@@ -50,7 +54,7 @@ const CategoryScreen = ({ route }: any) => {
5054
</Text>
5155
<View style={styles.timeContainer}>
5256
<Text style={styles.time}>
53-
{item.fields.publishedOn}
57+
{formatedDate(item.fields.publishedOn)}
5458
</Text>
5559
</View>
5660
</View>
@@ -111,6 +115,7 @@ const styles = StyleSheet.create({
111115
},
112116
title: {
113117
fontSize: 18,
118+
color: "#000",
114119
},
115120
description: {
116121
fontSize: 15,
@@ -119,15 +124,17 @@ const styles = StyleSheet.create({
119124
flexDirection: "row",
120125
justifyContent: "space-between",
121126
paddingHorizontal: 0,
122-
color: "#888",
127+
// color: "#888",
128+
color: "#000",
123129
flex: 1,
124130
marginTop: 5,
125131
marginBottom: 5,
126132
width: undefined,
127133
},
128134
time: {
129135
fontSize: 13,
130-
color: "#808080",
136+
// color: "#808080",
137+
color: "#000",
131138
marginTop: 5,
132139
},
133140

‎screens/HomeScreen.tsx

+49-28
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import {
66
TouchableOpacity,
77
Image,
88
ScrollView,
9+
ActivityIndicator,
10+
Dimensions,
911
} from "react-native";
1012
import { client } from "../lib/contentful";
11-
13+
import { formatedDate } from "../lib/date";
1214
import Categories from "../components/Categories";
1315

1416
const HomeScreen = ({ navigation }: any) => {
@@ -24,43 +26,60 @@ const HomeScreen = ({ navigation }: any) => {
2426
console.log(err);
2527
});
2628
}, []);
27-
29+
const deviceHeight = Dimensions.get("window").height;
30+
const deviceWidth = Dimensions.get("window").width;
2831
return (
2932
<View>
3033
<Categories navigation={navigation} />
3134
<ScrollView>
3235
<View style={styles.container}>
33-
{blog.map((item: any) => (
34-
<TouchableOpacity key={item.sys.id}>
35-
<View style={styles.card}>
36-
<View style={styles.list}>
37-
<View style={styles.separator}>
38-
<Text style={styles.title}>{item.fields.title}</Text>
39-
<Image
40-
style={styles.cardImage}
41-
source={{
42-
uri: `https://${item.fields.coverImage.fields.file.url}`,
43-
}}
44-
/>
36+
{blog ? (
37+
blog.map((item: any) => (
38+
<TouchableOpacity
39+
key={item.sys.id}
40+
onPress={() => navigation.navigate("Blog", { id: item.sys.id })}
41+
>
42+
<View style={styles.card}>
43+
<View style={styles.list}>
44+
<View style={styles.separator}>
45+
<Text style={styles.title}>{item.fields.title}</Text>
46+
<Image
47+
style={styles.cardImage}
48+
source={{
49+
uri: `https://${item.fields.coverImage.fields.file.url}`,
50+
}}
51+
/>
4552

46-
<View style={styles.cardHeader}>
47-
<View>
48-
<Text style={styles.description}>
49-
{item.fields.description}
50-
</Text>
51-
<View style={styles.timeContainer}>
52-
<Text style={styles.time}>
53-
{item.fields.publishedOn}
53+
<View style={styles.cardHeader}>
54+
<View>
55+
<Text style={styles.description}>
56+
{item.fields.description}
5457
</Text>
55-
{/* <View style={styles.boomark}> */}
58+
<View style={styles.timeContainer}>
59+
<Text style={styles.time}>
60+
{formatedDate(item.fields.publishedOn)}
61+
</Text>
62+
{/* <View style={styles.boomark}> */}
63+
</View>
5664
</View>
5765
</View>
5866
</View>
5967
</View>
6068
</View>
61-
</View>
62-
</TouchableOpacity>
63-
))}
69+
</TouchableOpacity>
70+
))
71+
) : (
72+
<ActivityIndicator
73+
style={{
74+
height: deviceHeight,
75+
width: deviceWidth,
76+
alignItems: "center",
77+
justifyContent: "center",
78+
}}
79+
size="large"
80+
color="black"
81+
/>
82+
)}
6483
</View>
6584
</ScrollView>
6685
</View>
@@ -114,6 +133,7 @@ const styles = StyleSheet.create({
114133
},
115134
title: {
116135
fontSize: 18,
136+
color: "#000",
117137
},
118138
description: {
119139
fontSize: 15,
@@ -122,15 +142,16 @@ const styles = StyleSheet.create({
122142
flexDirection: "row",
123143
justifyContent: "space-between",
124144
paddingHorizontal: 0,
125-
color: "#888",
145+
color: "#000",
126146
flex: 1,
127147
marginTop: 5,
128148
marginBottom: 5,
129149
width: undefined,
130150
},
131151
time: {
132152
fontSize: 13,
133-
color: "#808080",
153+
// color: "#808080",
154+
color: "#000",
134155
marginTop: 5,
135156
},
136157

0 commit comments

Comments
 (0)