I have a modal which opens when a product is clicked and details of that product are displayed in modal there is also a you might also like section of products which have the same view as product now I want that when a you might like product is clicked the modal should update the information without opening a modal above existing modal. How can I do that?
const cartProducts = useSelector(state => state.cart.cartProducts);
const dispatch = useDispatch();
const [MyProducts,setProducts] = useState([]);
const prodCode = product.ItemCode;
const {user} = useSelector(state=>state.auth);
async function fetchProducts(){
//console.log(prodCode);
await axios({
method:'GET',
url:`${BASE_URL}/items/${prodCode}`,
headers:{
'Authorization': AUTH_KEY,
}
})
.then((response)=>{
setIsLoading(false);
const status = response.data[0]['status'];
//console.log(status);
if(status=='success'){
const items = response.data[0]['body']['related'];
if(items){
//console.log(items);
setProducts(items);
}
//console.log(Products);
}
if(status=='error'){
MyToast(status);
}
}).catch((error)=>{
setIsLoading(false);
MyToast('Error: '+error.message);
//console.log('Error is: ',error.message);
});
}
useEffect(()=>{
if(MyProducts.length === 0 && visible){
fetchProducts();
}
},[MyProducts]);
return (
<Modal
animationType="slide"
transparent={true}
visible={visible}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.button} onPress={() => { handlePinClick()}}>
<IconPin name={isPin ? 'pushpin' : 'pushpino'} size={responsiveWidth(6)} color={Colors.primary} />
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => { handleFavoriteClick() }}>
<IconFavorite style={{ padding: responsiveWidth(1.5) }} name={'ios-heart'} size={responsiveWidth(8)} color={isFavorite ? 'red' : Colors.grey} />
</TouchableOpacity>
<IconClose style={[styles.button, { padding: responsiveWidth(1.5) }]} name='cross' size={responsiveWidth(8.5)} color={Colors.black} onPress={() => onClose()} />
</View>
<ScrollView style={{ paddingBottom: responsiveHeight(7) }}>
<Image style={styles.modalImage} source={{ uri: isFromAll ? product.feature_image : product['item_details'].feature_image }} />
<Text style={styles.modalProdName}>{isFromAll ? product.ItemName : product['item_details'].ItemName}</Text>
<ExpandableComponent product={product} isFromAll={isFromAll}/>
{MyProducts.length !== 0 &&
<View style={{ paddingVertical: responsiveHeight(1) }}>
<Text style={styles.youMightText}>You might also Like</Text>
{isLoading ?
<View style={{height:responsiveHeight(28),flexWrap:'wrap' }}>
{widthList.map((item, index) => <ShimmerItem key={index} item={item} />)}
</View> :
<FlatList
horizontal
data={MyProducts}
renderItem={({ item }) => <Product key={item.key} product={item} isFromAll={true}/>}
ListEmptyComponent={()=><EmptyComponent height={30} text={'No Product!'}/>}
/>
}
</View>
}
</ScrollView>
<View style={styles.bottomView}>
{cartProducts && <BottomSheetScreen itemsCount={cartProducts.length} />}
</View>
</View>
</View>
</Modal>
)
}
