blog

NguyenPhuongNam99 · Jan 10, 2023 · cd5af70 · cd5af70
1 parent 3077299
commit cd5af70
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 3 deletions.
diff --git a/src/features/blog-detail/BlogDetail.tsx b/src/features/blog-detail/BlogDetail.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import {StyleSheet, View, Text, Image, ScrollView} from 'react-native';
+import AppIonicons from '../../components/icon/AppIonicons';
+import RenderHtml from 'react-native-render-html';
+import {useNavigation} from '@react-navigation/native';
+
+const BlogDetail = ({route}) => {
+  const {item} = route.params;
+  const navigation = useNavigation();
+  const source = {
+    html: `
+${item?.description}`,
+  };
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+        <View style={styles.containerHeader}>
+          <View style={styles.row}>
+            <AppIonicons
+              name="chevron-back-outline"
+              size={20}
+              onPress={() => navigation.goBack()}
+            />
+            <Text style={styles.colorTitle}>{item.title}</Text>
+          </View>
+        </View>
+
+        <View style={styles.headerTitle}>
+          <View style={styles.blockTitle}>
+            <Image source={{uri: item.thumbnail}} style={styles.fullwidth} />
+          </View>
+        </View>
+
+        <View style={{width: '100%', paddingHorizontal: 10}}>
+          <RenderHtml contentWidth={200} source={source} />
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  containerHeader: {
+    width: '100%',
+    height: 50,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  row: {flexDirection: 'row', width: '100%'},
+  colorTitle: {
+    color: 'black',
+    fontSize: 14,
+  },
+  headerTitle: {
+    width: '100%',
+    height: 290,
+    paddingHorizontal: 10,
+    marginTop: 15,
+  },
+  blockTitle: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'white',
+    borderRadius: 9,
+  },
+  fullwidth: {width: '100%', height: '100%', borderRadius: 9},
+});
+export default BlogDetail;
diff --git a/src/features/blog/Blog.tsx b/src/features/blog/Blog.tsx
@@ -0,0 +1,106 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import axios from 'axios';
+import React, {useEffect, useState} from 'react';
+import {FlatList, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import AppIonicons from '../../components/icon/AppIonicons';
+import { useNavigation } from '@react-navigation/native';
+
+const Blog = () => {
+  const [data, setData] = useState([]);
+  const navigation = useNavigation();
+
+  const getAllBlog = async () => {
+    const tokenNew = await AsyncStorage.getItem('storage_Key');
+
+    try {
+      const response = await axios.get(
+        'http://206.189.37.26:8080/v1/blog/getAllBlog',
+        {
+          headers: {
+            Authorization: `Bearer ${tokenNew}`,
+          },
+        },
+      );
+      console.log('response', response.data);
+      setData(response.data);
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  useEffect(() => {
+    getAllBlog();
+  }, []);
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerContainer}>
+        <AppIonicons name="chevron-back-outline" size={20} onPress={() => navigation.goBack()} />
+        <Text style={styles.headerTitle}>Blog</Text>
+        <Text> </Text>
+      </View>
+
+      <FlatList
+        data={data}
+        renderItem={({item}) => {
+          return (
+            <TouchableOpacity style={styles.containerList} onPress={() => navigation.navigate('BlogDetail' as never, {item: item} as never)}>
+              <View style={styles.blockList}>
+                <View style={styles.blockLeft}>
+                  <Image
+                    source={{
+                      uri: item.thumbnail,
+                    }}
+                    style={styles.fullwidth}
+                  />
+                </View>
+                <View style={styles.blockRight}>
+                  <Text numberOfLines={2}>{item.title}</Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+          );
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  headerContainer: {
+    width: '100%',
+    height: 50,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  headerTitle: {color: 'black', fontSize: 14},
+  containerList: {
+    width: '100%',
+    height: 80,
+    marginTop: 10,
+    paddingHorizontal: 10,
+    borderRadius: 9
+  },
+  blockList: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'white',
+    flexDirection: 'row', borderRadius: 9
+  },
+  blockLeft: {width: '30%', height: '100%'},
+  blockRight: {
+    width: '70%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    paddingLeft: 10,
+  },
+  fullwidth: {width: '100%', height: '100%', borderTopLeftRadius: 9, borderBottomLeftRadius: 9},
+});
+
+export default Blog;
diff --git a/src/features/homepage/header/ListMenuIcon.tsx b/src/features/homepage/header/ListMenuIcon.tsx
@@ -11,6 +11,9 @@ const ListMenuIcon = () => {
     if (item.id === String(2)) {
       navigation.navigate('HotelIcon' as never);
     }
+    if (item.id === String(3)) {
+      navigation.navigate('Blog' as never);
+    }
     if (item.id === String(5)) {
       navigation.navigate('RestaurantIcon' as never);
     }
@@ -20,9 +23,7 @@ const ListMenuIcon = () => {
     if (item.id === String(1)) {
       navigation.navigate('Payment' as never);
     }
-    if (item.id === String(3)) {
-      navigation.navigate('Notification' as never);
-    }
+
   };
   return (
     <View style={styles.listIcon}>

diff --git a/src/navigations/StackNavigation.tsx b/src/navigations/StackNavigation.tsx
@@ -39,6 +39,8 @@ import EvaluateTour from '../features/evaluateTour/EvaluateTour';
 import HotelDetailv3 from '../features/detail-ver2/recent-schedule-detail/hotelDetailv3';
 import DetailRoom from '../features/detail-room/DetailRoom';
 import Place12Detail from '../features/place12-detail/Place12-detail';
+import Blog from '../features/blog/Blog';
+import BlogDetail from '../features/blog-detail/BlogDetail';
 
 const StackHome = createNativeStackNavigator();
 const StackNotifi = createNativeStackNavigator();
@@ -92,6 +94,8 @@ export const StackHomeScreen = () => {
       <StackHome.Screen name="DetailPlace" component={DetailPlace} />
       <StackHome.Screen name="DetailRoom" component={DetailRoom} />
       <StackHome.Screen name="Place12Detail" component={Place12Detail} />
+      <StackHome.Screen name="Blog" component={Blog} />
+      <StackHome.Screen name="BlogDetail" component={BlogDetail} />
 
       <StackHome.Screen
         name="RecentScheduleDetailV2"