1 | import React, { Component } from 'react';
|
2 | import { Platform, Text, View } from 'react-native';
|
3 |
|
4 | import {
|
5 | default as withProductDetailData,
|
6 | WithProductDetailProps,
|
7 | WithProductDetailProviderProps
|
8 | } from './ProductDetailProvider';
|
9 |
|
10 | import {
|
11 | CommerceDataSource,
|
12 | CommerceTypes,
|
13 | ReviewDataSource,
|
14 | ReviewTypes
|
15 | } from '@brandingbrand/fscommerce';
|
16 |
|
17 | export interface UnwrappedProductDetailProps {
|
18 | id: string;
|
19 | }
|
20 |
|
21 | export type ProductDetailProduct = CommerceTypes.Product;
|
22 | export type ProductDetailProps = UnwrappedProductDetailProps & WithProductDetailProviderProps;
|
23 |
|
24 | class ProductDetail extends Component<UnwrappedProductDetailProps & WithProductDetailProps> {
|
25 | render(): JSX.Element {
|
26 | const data = JSON.stringify(this.props.commerceData, null, 2);
|
27 | if (Platform.OS === 'web') {
|
28 | return <pre>{data}</pre>;
|
29 | } else {
|
30 | return (
|
31 | <View>
|
32 | <Text>{data}</Text>
|
33 | </View>
|
34 | );
|
35 | }
|
36 | }
|
37 | }
|
38 |
|
39 | export default withProductDetailData<UnwrappedProductDetailProps>(
|
40 | async (DataSource: CommerceDataSource, props: UnwrappedProductDetailProps) => {
|
41 | return DataSource.fetchProduct(props.id);
|
42 | },
|
43 | async (DataSource: ReviewDataSource, reviewQuery: ReviewTypes.ReviewQuery) => {
|
44 | return DataSource.fetchReviewDetails(reviewQuery);
|
45 | }
|
46 | )(ProductDetail);
|