news detail

view/Auth.js

@@ -378,7 +378,7 @@ class Auth extends React.Component {
         <Stack.Screen name="Transaction Detail" component={TransactionDetail} />
         {/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
 
-        <Stack.Screen name="News Detail" component={NewsDetail} />
+        <Stack.Screen name="News Detail" component={NewsDetail} options={{ headerShown: false }}/>
         <Stack.Screen name="Confirm Your Order" component={MenuConfirmation} />
         <Stack.Screen name="Date Time" component={DateTime} />
         <Stack.Screen name="New Register" component={NewRegister}

view/Home.js

 
+import { SimpleLineIcons } from '@expo/vector-icons';
+import Axios from 'axios';
+import * as Device from 'expo-device';
+import * as Location from 'expo-location';
+import * as Permissions from 'expo-permissions';
 import * as React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, ActivityIndicator } from 'react-native';
-import { Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons';
+import { ActivityIndicator, Alert, Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { SliderBox } from "react-native-image-slider-box";
 import { Card } from 'react-native-shadow-cards';
 import { connect } from 'react-redux';
-import Axios from 'axios';
-import i18n from 'i18n-js';
-import _ from 'lodash';
-import * as Location from 'expo-location';
-import * as Permissions from 'expo-permissions';
-import * as Device from 'expo-device';
-import ActionType from '../redux/globalActionType';
-import session from '../function/session';
-import Constants from 'expo-constants';
 import info from '../app.json';
+import session from '../function/session';
+import ActionType from '../redux/globalActionType';
 
 
 let version = info.expo.version
@@ -32,11 +29,17 @@ class Home extends React.Component {
       account_number: "",
       my_lat: 0,
       my_long: 0,
-      indicator: true
+      indicator: true,
+      slider_height: 350,
+      slugs: []
     }
   }
 
   componentDidMount() {
+    const screenWidth = Math.round(Dimensions.get('window').width);
+    this.setState({
+      slider_height: screenWidth
+    })
     this._account();
     this._getPermissions()
     this._renderCarousell()
@@ -99,13 +102,16 @@ class Home extends React.Component {
     Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/list/promotions-carousel').then(respon => {
       const dataCarousell = respon.data.contents;
       let imageLink = []
+      let slugs = []
 
       for (let i = 0; i < dataCarousell.length; i++) {
         const element = dataCarousell[i];
         imageLink.push(element.title_thumb)
+        slugs.push(element.slug)
       }
       this.setState({
-        images: imageLink
+        images: imageLink,
+        slugs: slugs
       })
     }).catch(error =>{
       
@@ -215,13 +221,14 @@ class Home extends React.Component {
                 </TouchableOpacity>
               </View>
             </View>
+            <View style={{backgroundColor: 'red'}}>
             <SliderBox
               images={this.state.images}
               autoplay
               circleLoop
               dotColor='black'
               inactiveDotColor='white'
-              sliderBoxHeight={300}
+              sliderBoxHeight={this.state.slider_height}
               paginationBoxVerticalPadding={20}
               resizeMethod={'resize'}
               resizeMode={'stretch'}
@@ -246,8 +253,11 @@ class Home extends React.Component {
                 width: '100%',
               }}
               imageLoadingColor='#c7c7c7'
+              onCurrentImagePressed={(index) => this.props.navigation.navigate('News Detail', {slug: this.state.slugs[index]})}
             />
             </View>
+
+          </View>
           <View style={styles.content}>
             <View style={styles.card}>
               <Card>

view/NewsDetail.js

 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import { Image } from 'react-native-elements';
+import Axios from 'axios';
+import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
+import HTML from 'react-native-render-html';
 
 export default class NewsDetail extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            title: '',
+            subtitle: '',
+            image: '',
+            content: '',
+            image_height: 400
+        }
+    }
+
+    componentDidMount() {
+        const screenWidth = Math.round(Dimensions.get('window').width);
+        this.setState({
+          image_height: screenWidth
+        })
+        this.get_news_detail(this.props.route.params.slug)
+    }
+
+    get_news_detail(slug) {
+        Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/detail/' + slug).then(res => {
+            // console.log(JSON.stringify(res.data))
+            const detail = res.data;
+            this.setState({
+                title: detail.title,
+                subtitle: detail.subtitle,
+                image: detail.content_image,
+                content: detail.content,
+            })
+        })
+        
+    }
 
     render() {
+        console.log('Image : ' + this.state.image)
         return (
             <View style={styles.container}>
                 <View style={styles.header}>
-                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>News Detail</Text>
+                    <TouchableOpacity>
+                    <Image source={require('../assets/icon/back.png')} style={{width: 35, height: 35}} />
+                    </TouchableOpacity>
+                    <Text style={styles.headerTitle}>NEWS DETAIL</Text>
                 </View>
-                <View style={styles.body}>
-                    <View style={styles.images}>
-
+                <ScrollView style={styles.body}>
+                    <View style={styles.image_container(this.state.image_height)}>
+                        <Image style={styles.image(this.state.image_height)} source={this.state.image ? { uri: this.state.image } : null} />
                     </View>
                     <View style={styles.content}>
-                        <Text style={{ margin: 10, fontSize: 20 }}>Judul : </Text>
-                        <Text style={{ margin: 10, fontSize: 20 }}>Keterangan :</Text>
-                    </View>
+                        <Text style={styles.title}>{this.state.title}</Text>
+                        <View style={{backgroundColor: '#adadad', height: 1.5, flex: 1}} />
+                        <HTML html={this.state.content} />
                     </View>
+                </ScrollView>
             </View>
         )
     }
@@ -27,22 +68,45 @@ export default class NewsDetail extends React.Component {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
+        marginTop: 29,
         backgroundColor: 'white',
     },
     header: {
-
-        flex: 0.5,
+        height: 60,
+        paddingHorizontal: 10,
+        flexDirection: 'row',
+        backgroundColor: '#CFB368',
+        alignItems : 'center'
     },
-    images: {
-        margin: 10,
-        flex: 2,
-        backgroundColor: 'green'
+    headerTitle: {
+        flex: 1,
+        textAlign: 'center', 
+        margin: 20, 
+        fontSize: 23, 
+        alignSelf: 'center',
+        color: 'white',
+        fontFamily: 'Gotham-Black'
+    },
+    image_container: (height) => ({
+        height: height,
+        backgroundColor: 'gray'
+    }),
+    image: (height) => ({
+        width: '100%',
+        height: height
+    }),
+    title: {
+        textAlign: 'center',
+        fontFamily: 'Gotham-Black',
+        fontSize: 22,
+        marginBottom: 10,
+        color: '#CFB368'
     },
     content: {
-        flex: 2,
+        paddingHorizontal: 25,
+        paddingVertical: 30
     },
     body: {
-        flex: 3,
-    },
+    }
 })