{"size": 1639, "ext": "js", "max_stars_repo_path": "src/views/Auto/ProductType/index.js", "max_stars_repo_name": "IkramTi/Insur_Frontend_Project", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/Auto/ProductType/index.js", "max_issues_repo_name": "IkramTi/Insur_Frontend_Project", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/views/Auto/ProductType/index.js", "max_forks_repo_name": "IkramTi/Insur_Frontend_Project", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.1029411765, "max_line_length": 76, "alphanum_fraction": 0.6937156803}
import React, { useState } from 'react';
import { connect, useSelector, useDispatch } from 'react-redux';
import { reduxForm, formValueSelector } from 'redux-form';
import Card from 'components/Card';
import CardBody from 'components/CardBody';
import Cover from 'components/Covers';
import services from 'services';
import useLifecycleMethods from 'helpers/useLifecycleMethods.helpers';

const { ProductService } = services;

const ProductType = ({ ...props }) => {
	const { Product } = useSelector((state) => ({
		Product: state.Product.data,
	}));
	const dispatch = useDispatch();
	const products = Product.map((item, key) => {
		return {
			id: item.id,
			title: item.name,
			icon: 'local_mall',
			description: '',
		};
	});

	const initialProduct =
		props.selectedProduct !== undefined ? props.selectedProduct : products[0];
	const [selectedProduct, setSelectedProduct] = useState(initialProduct);

	const { componentDidMount } = useLifecycleMethods();

	componentDidMount(() => {
		dispatch(ProductService.fetchData());
	});

	const handleProductChange = (product) => {
		setSelectedProduct(product);
		props.change('product', product);
	};

	const onSelectProduct = (product) => {
		handleProductChange(product);
	};

	return (
		<Card>
			<CardBody>
				<Cover
					covers={products}
					selectedCover={selectedProduct}
					onSelectCover={onSelectProduct}
				/>
			</CardBody>
		</Card>
	);
};

const form = reduxForm({
	form: 'product',
	destroyOnUnmount: false,
})(ProductType);

const selector = formValueSelector('product');

export default connect((state) => ({
	selectedProduct: selector(state, 'product'),
}))(form);
