refactor: update data structure of props (f449cff6) · Commits · Isfand Yar Khan / ever-demand

packages/shop-mobile-expo/src/components/Common/ProductItem/List.tsx

+10 −30

Original line number	Diff line number	Diff line
		@@ -6,7 +6,7 @@ import { Avatar, Title, Text, Button } from 'react-native-paper';
		import Ionicons from '@expo/vector-icons/Ionicons';

		// TYPES
		import type { ProductInfoInterface } from '../../../client/products/argumentInterfaces';
		import type { ProductItemType } from './index';

		// STYLES
		import {
		@@ -14,27 +14,13 @@ import {
		CONSTANT_SIZE as CS,
		CONSTANT_COLOR as CC,
		} from '../../../assets/ts/styles';
		import { useNavigation } from '@react-navigation/native';

		// LOCAL TYPES
		export interface ProductItemType {
		data: ProductInfoInterface;
		export interface Props {
		data: ProductItemType['data'];
		onPressProfile: () => any;
		}

		const ProductItemList: React.FC<ProductItemType> = (props: ProductItemType) => {
		// NAVIGATION
		const NAVIGATION = useNavigation();

		// FUNCTIONS
		const onPressProfile = () => {
		NAVIGATION.navigate(
		'DRAWER/IN_STORE' as never,
		{
		warehouseId: props.data.warehouseId,
		} as never,
		);
		};

		const ProductItemList: React.FC<Props> = (props) => {
		// LOCAL STYLES
		const STYLES = StyleSheet.create({
		container: {
		@@ -97,7 +83,7 @@ const ProductItemList: React.FC<ProductItemType> = (props: ProductItemType) => {
		<View style={{ ...STYLES.section, ...STYLES.header }}>
		<TouchableOpacity
		style={STYLES.headerAvatarContainer}
		onPress={onPressProfile}>
		onPress={props?.onPressProfile}>
		<Avatar.Image
		size={CS.FONT_SIZE_XLG * 2.2}
		source={{
		@@ -109,16 +95,10 @@ const ProductItemList: React.FC<ProductItemType> = (props: ProductItemType) => {
		</TouchableOpacity>
		<View style={STYLES.headerContent}>
		<Title style={STYLES.headerContentTitle}>
		{
		props?.data?.warehouseProduct?.product?.title[0]
		?.value
		}
		{props?.data.title}
		</Title>
		<Text style={STYLES.headerContentDescription}>
		{
		props?.data?.warehouseProduct?.product
		?.description[0]?.value
		}
		{props?.data.description}
		</Text>
		</View>
		<View style={STYLES.headerAvailability}>
		@@ -136,8 +116,8 @@ const ProductItemList: React.FC<ProductItemType> = (props: ProductItemType) => {
		<Image
		style={STYLES.prodImg}
		source={{
		uri: props?.data?.warehouseProduct?.product?.images?.length
		? props?.data?.warehouseProduct?.product?.images[0].url
		uri: props?.data?.coverImage
		? props?.data?.coverImage
		: 'https://static.vecteezy.com/system/resources/previews/004/941/788/original/cardboard-boxes-or-packaging-paper-and-shipping-box-carton-parcels-and-delivery-packages-pile-flat-warehouse-goods-and-cargo-transportation-design-illustration-vector.jpg',
		}}
		/>

packages/shop-mobile-expo/src/components/Common/ProductItem/Slide.tsx

+12 −31

Original line number	Diff line number	Diff line
		@@ -2,12 +2,11 @@
		import React from 'react';
		import { StyleSheet, View, Image, TouchableOpacity } from 'react-native';
		import { Avatar, Title, Text, Button } from 'react-native-paper';
		import { useNavigation } from '@react-navigation/native';
		// tslint:disable-next-line: no-implicit-dependencies no-submodule-imports
		import Ionicons from '@expo/vector-icons/Ionicons';

		// TYPES
		import type { ProductInfoInterface } from '../../../client/products/argumentInterfaces';
		import type { ProductItemType } from '.';

		// STYLES
		import {
		@@ -17,18 +16,16 @@ import {
		} from '../../../assets/ts/styles';

		// LOCAL TYPES
		export interface ProductItemType {
		data: ProductInfoInterface;
		export interface Props {
		data: ProductItemType['data'];
		onPressProfile: () => any;
		}

		const ProductItemSlide: React.FC<ProductItemType> = (
		props: ProductItemType,
		) => {
		// NAVIGATION
		const NAVIGATION = useNavigation();

		const ProductItemSlide: React.FC<Props> = (props) => {
		// DATA
		const AVATAR_WAREHOUSE_SIZE = CS.FONT_SIZE_XLG * 2.5;

		// LOCAL STYLES
		const STYLES = StyleSheet.create({
		container: {
		...GS.h100,
		@@ -117,23 +114,13 @@ const ProductItemSlide: React.FC<ProductItemType> = (
		},
		});

		// FUNCTIONS
		const onPressProfile = () => {
		NAVIGATION.navigate(
		'DRAWER/IN_STORE' as never,
		{
		warehouseId: props.data.warehouseId,
		} as never,
		);
		};

		return (
		<View style={STYLES.container}>
		<Image
		style={STYLES.prodImg}
		source={{
		uri: props?.data?.warehouseProduct?.product?.images?.length
		? props?.data?.warehouseProduct?.product?.images[0].url
		uri: props?.data.coverImage
		? props?.data.coverImage
		: 'https://static.vecteezy.com/system/resources/previews/004/941/788/original/cardboard-boxes-or-packaging-paper-and-shipping-box-carton-parcels-and-delivery-packages-pile-flat-warehouse-goods-and-cargo-transportation-design-illustration-vector.jpg',
		}}
		/>
		@@ -174,22 +161,16 @@ const ProductItemSlide: React.FC<ProductItemType> = (
		<View style={{ ...STYLES.section, ...STYLES.header }}>
		<View style={STYLES.headerContent}>
		<Title style={STYLES.headerContentTitle}>
		{
		props?.data?.warehouseProduct?.product?.title[0]
		?.value
		}
		{props?.data.title}
		</Title>
		<Text style={STYLES.headerContentDescription}>
		{
		props?.data?.warehouseProduct?.product
		?.description[0]?.value
		}
		{props?.data?.description}
		</Text>
		</View>

		<TouchableOpacity
		style={STYLES.headerAvatarContainer}
		onPress={onPressProfile}>
		onPress={props.onPressProfile}>
		<Avatar.Image
		size={AVATAR_WAREHOUSE_SIZE}
		source={{

packages/shop-mobile-expo/src/components/Common/ProductItem/index.tsx

+41 −4

Original line number	Diff line number	Diff line
		import React from 'react';
		import { Text } from 'react-native';
		import { useNavigation } from '@react-navigation/native';

		// TYPES
		import type ENV from '../../../environments/model';
		import type { ProductInfoInterface } from '../../../client/products/argumentInterfaces';

		// HELPERS
		import { isEmpty } from '../../../helpers/utils';

		// COMPONENTS
		import ProductItemVertical from './List';
		@@ -11,16 +14,50 @@ import ProductItemHorizontal from './Slide';

		// LOCAL TYPES
		export interface ProductItemType {
		data: ProductInfoInterface;
		data: {
		warehouseId: string;
		warehouseLogo?: string;
		productId: string;
		title: string;
		description: string;
		price: number;
		coverImage?: string;
		};
		type: ENV['PRODUCTS_VIEW_TYPE'];
		}

		const ProductItem: React.FC<ProductItemType> = (props) => {
		// NAVIGATION
		const NAVIGATION = useNavigation();

		// DATA
		const ROUTE_WAREHOUSE_ID = {
		warehouseId: props?.data.warehouseId,
		};

		// FUNCTIONS
		const onPressProfile = () => {
		if (!isEmpty(ROUTE_WAREHOUSE_ID.warehouseId)) {
		NAVIGATION.navigate(
		'DRAWER/IN_STORE' as never,
		ROUTE_WAREHOUSE_ID as never,
		);
		}
		};

		switch (props.type) {
		case 'list':
		return <ProductItemVertical data={props.data} />;
		return (
		<ProductItemVertical
		{...{ data: props.data, onPressProfile }}
		/>
		);
		case 'slides':
		return <ProductItemHorizontal data={props.data} />;
		return (
		<ProductItemHorizontal
		{...{ data: props.data, onPressProfile }}
		/>
		);
		default:
		return <Text>Type invalid</Text>;
		}