import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; import { Action } from 'redux'; import { actions } from '../../Redux/Reducers/Products/Products.reducer'; import { actions as cartActions } from '../../Redux/Reducers/Cart/Cart.reducer'; import selectors from '../../Redux/Selectors'; import Browse from './Browse.component'; import { Product, ProductsState } from '../../Models'; import Routes from '../../Navigation/Routes'; const BrowseContainer = (props: ProductsState): JSX.Element => { const products = useSelector(selectors.products.getProducts); const refreshing = useSelector(selectors.products.isRefreshing); const page = useSelector(selectors.products.getPage); const dispatch = useDispatch(); const navigation = useNavigation(); const handlers = { onRefresh: (): Action => dispatch(actions.refetchProducts({ page })), onEndReached: (): Action => dispatch(actions.productsEndReached({ page })), handleProductPress: (id: number): void => navigation.navigate(Routes.Product, { id }), addToCart: (product: Product): Action => { navigation.navigate(Routes.Orders, { screen: Routes.Cart }); return dispatch(cartActions.addToCart(product)); }, removeFromCart: (productId: number): Action => dispatch(cartActions.removeFromCart(productId)), addQuantity: (productId: number): Action => dispatch(cartActions.addQuantity(productId)), subQuantity: (productId: number): Action => dispatch(cartActions.subQuantity(productId)) }; useEffect(() => { dispatch(actions.productsQuery({ page })); }, []); return ( <Browse {...props} {...handlers} products={products} refreshing={refreshing} page={page} /> ); }; export default BrowseContainer;