93 lines
2.5 KiB
JavaScript
93 lines
2.5 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
import AppHeader from '../components/layout/AppHeader';
|
|
import ScreenContainer from '../components/layout/ScreenContainer';
|
|
import AlternativeProductCard from '../components/product/AlternativeProductCard';
|
|
import { findAlternatives } from '../services/alternativesService';
|
|
import { colors } from '../utils/constants';
|
|
|
|
const DISPLAY_ALTERNATIVE_LIMIT = 5;
|
|
|
|
export default function AlternativesScreen({ product, preferences, productCache, onBack, onChoose, onOpenProduct }) {
|
|
const [alternatives, setAlternatives] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
async function loadAlternatives() {
|
|
setIsLoading(true);
|
|
const results = await findAlternatives(product, preferences, productCache);
|
|
if (isMounted) {
|
|
setAlternatives(results);
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
loadAlternatives();
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, [product, preferences, productCache]);
|
|
|
|
return (
|
|
<ScreenContainer>
|
|
<AppHeader
|
|
title="Alternativen"
|
|
subtitle={`Bessere Optionen für ${product.name}`}
|
|
onBack={onBack}
|
|
/>
|
|
|
|
{isLoading ? <Text style={styles.note}>Alternativen werden berechnet...</Text> : null}
|
|
{!isLoading && alternatives.length === 0 ? (
|
|
<View style={styles.empty}>
|
|
<Text style={styles.emptyTitle}>Keine Alternative gefunden</Text>
|
|
<Text style={styles.emptyCopy}>Für dieses Produkt wurde in ähnlichen Kategorien noch keine klar bessere Option gefunden.</Text>
|
|
</View>
|
|
) : null}
|
|
|
|
{alternatives.slice(0, DISPLAY_ALTERNATIVE_LIMIT).map((item) => (
|
|
<AlternativeProductCard
|
|
item={item}
|
|
key={item.product.id}
|
|
onChoose={() => {
|
|
if (typeof item.product.price === 'number') {
|
|
onChoose(item.product);
|
|
return;
|
|
}
|
|
|
|
onOpenProduct(item.product);
|
|
}}
|
|
onOpen={() => onOpenProduct(item.product)}
|
|
/>
|
|
))}
|
|
</ScreenContainer>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
note: {
|
|
color: colors.muted,
|
|
fontSize: 14
|
|
},
|
|
empty: {
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.border,
|
|
borderRadius: 18,
|
|
borderWidth: 1,
|
|
padding: 16
|
|
},
|
|
emptyTitle: {
|
|
color: colors.text,
|
|
fontSize: 16,
|
|
fontWeight: '800'
|
|
},
|
|
emptyCopy: {
|
|
color: colors.muted,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
marginTop: 4
|
|
}
|
|
});
|