Merge branch 'deni(lptp)' into 'master'

Deni(lptp)

See merge request !40

App/Containers/CategoryScreen.js

@@ -8,6 +8,8 @@ import { connect } from 'react-redux'
 import styles from './Styles/CategoryScreenStyle'
 import BaseHeader from '../Components/BaseHeader';
 import { Images } from '../Themes';
+import Api from '../Services/Api';
+import BaseText from '../Components/BaseText';
 
 class CategoryScreen extends Component {
   constructor(props) {
@@ -21,7 +23,8 @@ class CategoryScreen extends Component {
         Images.categoryAksesoris,
         Images.categoryTas,
         Images.categorySale,
-      ]
+      ],
+      data: []
     }
   }
   backAction = () => {
@@ -32,21 +35,39 @@ class CategoryScreen extends Component {
   componentDidMount() {
     // alert(JSON.stringify(this.props))
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
+    this.getCategory()
   }
 
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
-  
-  render () {
+
+  getCategory() {
+    Api.create().getCategory().then(response => {
+      console.log(JSON.stringify(response.data))
+      if (response.data.status == "success") {
+        this.setState({ data: response.data.data })
+      } else {
+        this.setState({ data: [] })
+      }
+    })
+  }
+
+  render() {
     return (
-      <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
-        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kategori'}/>
-        <ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {paddingHorizontal: 25, paddingTop: 25}]}>
-          {this.state.listCategory.map((item, index) => {
+      <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
+        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kategori'} />
+        <ScrollView showsVerticalScrollIndicator={false} style={{ paddingHorizontal: 25, backgroundColor: '#fff', borderTopLeftRadius: 32, borderTopRightRadius: 32 }}>
+          {this.state.data.map((item, index) => {
             return (
-              <TouchableOpacity onPress={() => this.props.navigation.navigate('ListSearchScreen')} style={{marginTop: index == 0? 0 : 15, marginBottom: index == this.state.listCategory.length -1? 50 : 0, elevation: 2, borderRadius: 15}} key={index}>
-                <Image source={item} style={{width: '100%', height: 100, borderRadius: 10, resizeMode: 'stretch'}}/>
+              <TouchableOpacity
+                style={{ backgroundColor: index % 2 == 0 ? '#b89469' : index % 3 == 0 ? '#7a7a7d' : '#636066', borderRadius: 16, height: 90, width: '100%', marginBottom: 15, marginTop: index == 0 ? 20 : 0, justifyContent: 'space-between', paddingHorizontal: 20, flexDirection: 'row' }}
+                onPress={() => this.props.navigation.navigate('ListSearchScreen', { catID: item.cat_id })}
+              >
+                <BaseText type={"bold"} text={item.title} style={{ fontSize: 16, color: 'white', marginTop: 5, alignSelf: 'center' }} />
+                <View style={{}}>
+                  <Image source={{ uri: item.category_image }} style={{ height: 90, width: 90 }} />
+                </View>
               </TouchableOpacity>
             )
           })}