Merge branch 'khanhTDT/fix-UI' into 'master'

fixUIinvntoryDone

See merge request !9

src/api/listProduct.ts

 import axios from 'axios'
-
 import config from '../configs'
 import { store } from '../redux/store'
 
@@ -16,7 +15,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,22 +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>
+        <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>
+                <Text style={styles.textInfo}>
                     {`Lô: ${props.lot} - Số lượng: ${props.quantity} - HSD: ${props.exp_date}`}
                 </Text>
             </View>
-    );
-};
+        </View>
+    )
 
+    }
 
-export default ItemProduct;
+export default ItemProduct

src/redux/reducers/auth.ts

@@ -22,7 +22,7 @@ const initialState : InitStateAuth = {
 function productReducer(state = initialState, action: ActionType) {
   const payload = action.payload
   switch (action.type) {
-    case 'LOGIN_SUCCESS': 
+    case Types.LOGIN_SUCCESS: 
       return  {
         ...state, 
         auth: payload,

src/redux/reducers/index.ts

@@ -5,16 +5,20 @@ import auth, { InitStateAuth } from "./auth"
 import invoice, { InitStateInvoice } from './invoice'
 import cart from './cart'
 import { Cart } from "../../model/cart";
+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/redux/sagas/productSaga.ts

@@ -9,7 +9,7 @@ function* fetchDataSaga(action:AnyAction) {
   
   console.log(action)
   try { 
-    const data:any = yield call(getListProducts) 
+    const data = yield call(getListProducts) 
     console.log('SAGA: ', data.data) //response: object chua data
     yield put({ type: Types.ADD_PRODUCT_FROM_API, payload: data.data })
   }

src/screens/HomeCreateBill/index.tsx

@@ -60,12 +60,12 @@ const App = () => {
     </TouchableOpacity>
   )
   /////////////////////////////////////////////////////////////////////////////
-  const products = useSelector((state: RootState) => state.product.data)
-  console.log('///////////////////////////////////////////////////////////////////////////////\n', products)
-  const [product, setProduct] = useState(products)
-  useEffect(() => {
-    setProduct(products);
-  }, [products]);
+  // const products = useSelector((state: RootState) => state.product.data)
+  // console.log('///////////////////////////////////////////////////////////////////////////////\n', products)
+  // const [product, setProduct] = useState(products)
+  // useEffect(() => {
+  //   setProduct(products);
+  // }, [products]);
   //----------------------------------------------------------------------------------------
   const cartProducts = useSelector((state: RootState) => state.cart.products)
   console.log('CART: ', cartProducts)

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}
@@ -114,9 +127,10 @@ const App = () => {
       <View >
         <FlatList
           data={products}
+          ItemSeparatorComponent={ItemSeparatorView}
           renderItem={({ item }) => _renderListProduct(item)}
         />
-        {_renderButtonSubmit()}
+        {/* {_renderButtonSubmit()} */}
       </View>
     </SafeAreaView>
   );