fix UI Inventory

src/api/listProduct.ts

 import axios from 'axios'
+import { useSelector } from 'react-redux'
 
 import config from '../configs'
 import { store } from '../redux/store'
-export function* getListProducts() {
+export function getListProducts() {
 
+    const token = store.getState().auth.token
     const body = {
         "drug_barcode": "",
         "drug_name": "",
@@ -14,7 +16,7 @@ export function* getListProducts() {
     }
     const header = {
         headers: {
-            'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzNjQ5LTAiLCJpYXQiOjE2MjUzOTI5MzIsImV4cCI6MTYyNTQ3OTMzMn0.l_z2ABgvD51hDJmI-mOGM9gOpBTlhyp3UPUNDTbsdWAcZ0KTzeLmJXhV81HdH2S3_mtmM_bGlHCnPi_wHueBkw'
+            'Authorization': token
         }
     }
     const baseURL = config.axiosConfig().baseURL

src/components/ItemProduct/index.style.ts

@@ -3,24 +3,26 @@ import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
 
-  inputLogin: {
-    flexDirection: "row",
-    height: 40,
-    alignItems: "center",
-    borderBottomColor: '#FFFFFF',
-    borderBottomWidth: 0.5,
+  container: {
+    flexDirection: 'row',
+    padding: 10,
   },
-  inputText: {
-    paddingLeft: 5,
-    paddingBottom: 8,
-    width: '100%',
+  image: {
+    width: 60,
+    height: 60,
   },
-  validateText: {
-    color: 'red',
-    fontSize: 11,
-    marginLeft: 0,
-    alignItems: "center",
+  infoContainer: {
+    marginLeft: 10,
+    justifyContent: 'space-between',
+    padding: 5,
   },
+  textName: {
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  textInfo: {
+    fontSize: 16,
+  }
 });
 
 export default styles;
\ No newline at end of file

src/components/ItemProduct/index.tsx

@@ -4,21 +4,24 @@ import { View, Text, Image, TextInput } from 'react-native';
 import styles from './index.style'
 
 type Props = {
-    drg_drug_cd: string, drg_drug_name: string, lot: string, quantity: number, exp_date:string
+    image_url: string
+    drg_drug_cd: string, drg_drug_name: string, lot: string, quantity: number, exp_date: string
 }
 const ItemProduct = (props: Props) => {
 
     return (
-
-        <View>
-            <Text>
-                {`${props.drg_drug_cd} - ${props.drg_drug_name}`}
-            </Text>
-            <Text>
-                {`Lô: ${props.lot} - Số lượng: ${props.quantity} - HSD: ${props.exp_date}`}
-            </Text>
+        <View style={styles.container}>
+            <Image style={styles.image} source={{ uri: props.image_url }} />
+            <View style={styles.infoContainer}>
+                <Text style={styles.textName}>
+                    {`${props.drg_drug_cd} - ${props.drg_drug_name}`}
+                </Text>
+                <Text style={styles.textInfo}>
+                    {`Lô: ${props.lot} - Số lượng: ${props.quantity} - HSD: ${props.exp_date}`}
+                </Text>
+            </View>
         </View>
-    );
+    )
 };
 
 

src/redux/reducers/index.ts

@@ -5,16 +5,21 @@ import auth, { InitStateAuth } from "./auth"
 import invoice, { InitStateInvoice } from './invoice'
 import cart from './cart'
 import { Cart } from "../../model/cart";
+import { Product } from "../../model/invoice";
+import product, { InitStateProduct } from "./product";
 
 export type RootState = {
   auth: InitStateAuth,
   invoice: InitStateInvoice,
+  cart: Cart,
+  product: InitStateProduct,
 }
 
 const rootReducer = combineReducers({
   auth,
   invoice,
   cart,
+  product,
 });
 
 export default rootReducer;
\ No newline at end of file

src/redux/reducers/product.ts

@@ -5,7 +5,7 @@ import Types from '../types'
 
 
 
-type InitStateProduct = {
+export type InitStateProduct = {
 
   page: number,
   size: number,
@@ -55,7 +55,7 @@ const defaultData = {
   updated_user: '',
   vat_percent: 0,
 
-  unit: [defaultUnit]
+  unit: []
 }
 
 
@@ -65,7 +65,7 @@ const initState: InitStateProduct = {
   total_elements: 0,
   total_pages: 1,
   last: true,
-  data: [defaultData]
+  data: []
 }
 
 function invoiceReducer(state: InitStateProduct = initState, action: AnyAction) {

src/screens/HomeProductCreate/index.tsx

@@ -19,11 +19,12 @@ import ItemProduct from '../../components/ItemProduct';
 import { addProductToCart } from '../../redux/actions/cart';
 import { Cart, Product } from "../../model/cart";
 import { Data } from '../../model/product';
+import { RootState } from '../../redux/reducers';
 
 const App = () => {
 
   //data product-------------------------------------------------------
-  const products = useSelector(state => state.product.data)
+  const products = useSelector((state: RootState) => state.product.data)
   console.log('Product: ', products)
   //-------------------------------------------------------------------
   const _renderHeaderLeft = () => {
@@ -51,12 +52,24 @@ const App = () => {
     />
   )
 
-
+  const ItemSeparatorView = () => {
+    return (
+      // Flat List Item Separator ______________________________________________
+      <View
+        style={{
+          height: 1,
+          width: '100%',
+          backgroundColor: '#C8C8C8',
+        }}
+      />
+    );
+  };
   const _renderListProduct = (product: Data) => {
     const product1 = product
     return (
       <TouchableOpacity onPress={() => { addToCart(product) }}>
         <ItemProduct
+          image_url={product.image_url}
           drg_drug_cd={product.drg_drug_cd}
           drg_drug_name={product.drg_drug_name}
           lot={product.lot}
@@ -113,9 +126,11 @@ const App = () => {
       <View >
         <FlatList
           data={products}
+          ItemSeparatorComponent={ItemSeparatorView}
           renderItem={({ item }) => _renderListProduct(item)}
+          // keyExtractor={({ item }) => item.drug_id}
         />
-        {_renderButtonSubmit()}
+        {/* {_renderButtonSubmit()} */}
       </View>
     </SafeAreaView>
   );