menu selection

view/Item.js

@@ -10,7 +10,8 @@ class Item extends React.Component {
             
             <View style={{ flex: 1, margin: 10 }}>
                 <ScrollView ref={view => this._scrollView = view}>
-                {/* <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.category.name}</Text> */}
+                
+                <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.category.name}</Text>
                 <View style={{ flexDirection: 'row' }}>
                     <View >
                         <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>

view/MenuSelection.js

@@ -15,7 +15,7 @@ class MenuSelection extends React.Component {
     super(props)
     this.state = {
       listCategory: [],
-      list_category:[],
+      list_category: [],
       listMenu: [],
       list_orders: [],
       outlet_id: '',
@@ -37,34 +37,48 @@ class MenuSelection extends React.Component {
       outlet_id: "dec1abbb-95d0-46ae-a6cd-2bf306590f15"
     }
     Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/menu/get_list', params).then(res => {
-      
+
       let data = res.data.data
       this.setState({
         listCategory: data.category,
         listMenu: data.menu
       })
 
-      this.state.listMenu.map((i) => (
-        i.qty = 0
-        
-      ))
-    }).catch(error => {
-      let response = error.response.data;
+      let last_category = ''
+      let list_menu = []
+
+      console.log("INI DATANYA "+JSON.stringify(data.menu))
+      for (let row in data.menu) {
+        if (last_category != row.category.name) {
+          category = {
+            "id": 'CATEGORY',
+            "name": row.category.name
+          }
+          list_menu.append(category)
+          list_menu.append(row)
+          last_category = row.category.name
+
+        } else {
+          // tampilin item
+          list_menu.append(row)
+        }
+      }
+
     })
   }
   renderTabBar = ({ item }) => {
     return (
       <View style={{ margin: 10 }}>
-          <TouchableOpacity onPress={() => this.scrollToItem()}>
-            <Image style={{ height: 50, width: 50, borderRadius: 25 }} source={{ uri: item.image }} />
-            <Text>{item.name}</Text>
-          </TouchableOpacity>
+        <TouchableOpacity>
+          <Image style={{ height: 50, width: 50, borderRadius: 25 }} source={{ uri: item.image }} />
+          <Text>{item.name}</Text>
+        </TouchableOpacity>
       </View>
     )
   }
-  scroll(item) {
-    this.refs._scrollView.scrollTo(0);
-  }
+  // scroll(item) {
+  //   this.refs._scrollView.scrollTo(0);
+  // }
 
   refresh() {
     this.setState({ isFetching: true }, function () { this.getMenuList() });
@@ -84,14 +98,14 @@ class MenuSelection extends React.Component {
   scrollToItem = () => {
     // let newData = []
     // newData.push(this.state.listMenu)
-    
+
     // console.log("DATA  " + JSON.stringify(newData))
     // newData.map((item => {
     //    let abc =  item[0].category
     // }))
 
-    this.props._scrollView.scrollTo({ y: 1 * 100});
-    
+    this.props._scrollView.scrollTo({ y: 1 * 100 });
+
   }
 
   handleAdd(item, index) {
@@ -127,7 +141,6 @@ class MenuSelection extends React.Component {
       price: item.price,
 
     }
-
     this.props.reduceQuantityItem(order_item)
     const list_order_item = this.props.order_item;
     let quantity = 0
@@ -148,7 +161,7 @@ class MenuSelection extends React.Component {
   }
 
   render() {
-  
+
     return (
       <View style={styles.container}>
         <StatusBar hidden={true} />
@@ -156,7 +169,7 @@ class MenuSelection extends React.Component {
           <FlatList horizontal={true} style={{ flexDirection: 'row' }}
             data={this.state.listCategory}
             renderItem={this.renderTabBar}
-            keyExtractor= {(item) => item.id}
+            keyExtractor={(item) => item.id}
           />
         </View>
         <View style={{ flex: 3 }}>

view/ShoppingCart.js

@@ -51,6 +51,59 @@ class ShoppingCart extends React.Component {
         })
     }
 
+    handleAdd(item, index) {
+        const order_item = {
+          id: item.id,
+          name: item.name,
+          price: item.price,
+          image: item.image
+        }
+    
+        this.props.addToChart(order_item)
+    
+        const list_order_item = this.props.order_item;
+        let quantity = 0
+        for (let i = 0; i < list_order_item.length; i++) {
+          const row = list_order_item[i];
+          if (row.id == item.id) {
+            quantity = row.quantity
+          }
+        }
+    
+        const listMenu = [...this.state.listMenu]
+        listMenu[index].qty = quantity
+        this.setState({
+          listMenu
+        })
+      }
+    
+      handleMin(item, index) {
+        const order_item = {
+          id: item.id,
+          name: item.name,
+          price: item.price,
+    
+        }
+    
+        this.props.reduceQuantityItem(order_item)
+        const list_order_item = this.props.order_item;
+        let quantity = 0
+        if (quantity != 0) {
+          quantity = quantity - 1
+          for (let i = 0; i < list_order_item.length; i++) {
+            const row = list_order_item[i];
+            if (row.id == item.id) {
+              quantity = row.quantity
+            }
+          }
+          const listMenu = [...this.state.listMenu]
+          listMenu[index].qty = quantity
+          this.setState({
+            listMenu
+          })
+        }
+      }
+
     checkedSelection(val) {
         // console.log(val)
         if (val == 'balance') {
@@ -132,9 +185,9 @@ class ShoppingCart extends React.Component {
                 </View>
                 <View style={styles.order}>
 
-                    {this.props.order_item.map((item, i) => {
+                    {this.props.order_item.map((item, index) => {
                         return (
-                            <View style={{ flex: 1, margin: 10 }} key={i}>
+                            <View style={{ flex: 1, margin: 10 }} key={index}>
                                 <View style={{ flexDirection: 'row' }}>
                                     <View >
                                         <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
@@ -145,7 +198,7 @@ class ShoppingCart extends React.Component {
                                         <View style={{ flexDirection: 'row', flex: 1 }}>
                                             <View style={styles.shadowEdit}></View>
                                             <View style={styles.shadowAdd}>
-                                                <TouchableOpacity onPress={() => this.props.handleMin()}>
+                                                <TouchableOpacity onPress={() => this.props.handleMin(item,index)}>
                                                     <Text style={{ fontSize: 20, margin: 2 }}> - </Text>
                                                 </TouchableOpacity>
                                                 <TextInput
@@ -153,7 +206,7 @@ class ShoppingCart extends React.Component {
                                                     autoCapitalize="none">
                                                     {item.quantity}
                                                 </TextInput>
-                                                <TouchableOpacity onPress={() => this.props.handleAdd()}>
+                                                <TouchableOpacity onPress={() => this.props.handleAdd(item,index)}>
                                                     <Text style={{ fontSize: 20, margin: 2 }}> + </Text>
                                                 </TouchableOpacity>
                                             </View>
@@ -504,6 +557,18 @@ const styles = StyleSheet.create({
 })
 
 
+const mapDispatchToProps = (dispacth) => {
+    return {
+      //REDUCE QUANTITY ITEM
+      reduceQuantityItem: (item) => dispacth({
+        type: ActionType.REDUCE_QUANTITY_ITEM,
+        data: {
+          item: item
+        }
+      }),
+    }
+  }
+
 const mapStateToProps = (state) => {
     console.log(state)
     return {
@@ -518,4 +583,4 @@ const mapStateToProps = (state) => {
 }
 
 
-export default connect(mapStateToProps)(ShoppingCart)
+export default connect(mapStateToProps,mapDispatchToProps)(ShoppingCart)