{"size": 1632, "ext": "js", "max_stars_repo_path": "src/components/catalog/RelatedProducts.js", "max_stars_repo_name": "sidneylopes/magento-react-native", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/catalog/RelatedProducts.js", "max_issues_repo_name": "sidneylopes/magento-react-native", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/catalog/RelatedProducts.js", "max_forks_repo_name": "sidneylopes/magento-react-native", "max_forks_repo_forks_event_min_datetime": "2021-05-20T14:16:51.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-20T14:16:51.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 29.6727272727, "max_line_length": 91, "alphanum_fraction": 0.675245098}
/**
 * Created by Dima Portenko on 14.05.2020
 */
import React, { useContext } from 'react';
import { StyleSheet, View } from 'react-native';
import FeaturedProducts from '../home/FeaturedProducts';
import { translate } from '../../i18n';
import { ThemeContext } from '../../theme';
import { NAVIGATION_HOME_PRODUCT_PATH } from '../../navigation/routes';
import { useDispatch } from 'react-redux';
import { setCurrentProduct } from '../../actions';
import { useRelatedProducts } from '../../hooks/useRelatedProducts';
import { Spinner } from '../common';

export const RelatedProducts = ({ product, currencySymbol, currencyRate, navigation }) => {
  const theme = useContext(ThemeContext);
  const dispatch = useDispatch();
  const { relatedProducts, loading, error } = useRelatedProducts({ product });

  if (!relatedProducts?.length && !loading || error) {
    return <View />;
  }

  if (loading) {
    return <Spinner />;
  }

  const onProductPress = (pressedProduct) => {
    dispatch(setCurrentProduct({ product: pressedProduct }));
    navigation.push(NAVIGATION_HOME_PRODUCT_PATH, {
      title: pressedProduct.name,
      product: pressedProduct,
    });
  };

  return (
    <FeaturedProducts
      style={{ marginBottom: theme.spacing.large }}
      products={{ items: relatedProducts }}
      title={translate('product.relatedProductsTitle')}
      titleStyle={styles.relatedProductTitle}
      onPress={onProductPress}
      currencySymbol={currencySymbol}
      currencyRate={currencyRate}
    />
  );
};

const styles = StyleSheet.create({
  relatedProductTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});
