Skip to content

Commit

Permalink
fix: solve comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Sofia Cantero committed Oct 31, 2024
1 parent a3223b6 commit b37e76a
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 113 deletions.
6 changes: 2 additions & 4 deletions src/app/(app)/product-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@ const FiltersButton = ({ products }: { products: Product[] }) => {
return;
}
return (
<View
className={`absolute bottom-24 flex w-auto items-center justify-center self-center pb-20`}
>
<View className="absolute bottom-24 flex w-auto items-center justify-center self-center pb-20">
<TouchableOpacity className="flex-row items-center gap-4 rounded-full bg-dark_violet p-4 px-8">
<Text className="text-lg font-bold text-white">Filers</Text>
<Image className="h-4 w-4" source={images.filterIcon()} />
Expand Down Expand Up @@ -127,7 +125,7 @@ export default function ProductList() {
</TouchableOpacity>
<SearchBar setQuery={setQuery} query={query} />
<SearchResult query={query} clearQuery={clearQuery} />
<View className={`${query === '' ? 'pb-52' : 'pb-72'}`}>
<View className={query === '' ? 'pb-52' : 'pb-72'}>
<ProductsList
products={productsToDisplay}
onEndReached={handleLoadMore}
Expand Down
117 changes: 8 additions & 109 deletions src/app/details/[id].tsx
Original file line number Diff line number Diff line change
@@ -1,117 +1,12 @@
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
import { useState } from 'react';
import { FlatList } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { twMerge } from 'tailwind-merge';

import { useGetItemDetails } from '@/api/products/use-details';
import { AddToCartSection } from '@/components/details/add-to-cart';
import { ImageDisplayer } from '@/components/details/image-displayer';
import { HeaderLogo } from '@/components/header-logo';
import {
Button,
Image,
SafeAreaView,
ScrollView,
Text,
TouchableOpacity,
View,
} from '@/ui';

type DropdownItem = {
label: string;
value: number;
};

type AddToCartSectionProps = {
setQuantity: React.Dispatch<React.SetStateAction<number>>;
quantity: number;
};

const ImageDisplayer = ({ images }: { images: string[] | undefined }) => {
const [selectedImage, setSelectedImage] = useState(0);

if (images === undefined) {
return;
}

return (
<>
<View className="h-68 w-68 my-3 w-full rounded-lg">
<Image
source={{ uri: images[selectedImage] }}
className="h-72 w-full"
contentFit="contain"
/>
</View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={images}
keyExtractor={(index) => index.toString()}
renderItem={({ item, index }) => (
<TouchableOpacity
className="mr-4 h-28 w-28 rounded-md"
onPress={() => setSelectedImage(index)}
>
<Image
source={{ uri: item }}
contentFit="contain"
className="h-28 w-28 rounded-md"
/>
</TouchableOpacity>
)}
contentContainerStyle={{ paddingBottom: 16 }}
/>
</>
);
};

const AddToCartSection = ({ quantity, setQuantity }: AddToCartSectionProps) => {
const numberItems: DropdownItem[] = Array.from(
{ length: quantity },
(_, index) => ({
label: (index + 1).toString(),
value: index + 1,
})
);
const [selectedValue, setSelectedValue] = useState<string | null>('1');

return (
<View className="mb-4 flex-row items-center justify-between">
<View className="items-center">
<Text className="mb-3 mr-2 font-bold">Quantity</Text>
<Dropdown
style={{
width: 90,
borderColor: 'black',
borderWidth: 2,
padding: 8,
borderRadius: 8,
height: 43,
marginBottom: 8,
}}
data={numberItems}
labelField="label"
valueField="value"
placeholder="1"
value={selectedValue}
onChange={(item: DropdownItem) => {
setSelectedValue(item.value.toString());
setQuantity(item.value);
}}
/>
</View>
<View className="w-4/5 items-center">
<Text className=" mr-2 font-bold">Avalability: {quantity} items</Text>
<Button
className="mt-3 h-12 w-72"
label="Add to cart"
textClassName="font-bold text-base"
onPress={() => {}}
/>
</View>
</View>
);
};
import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from '@/ui';

export default function DetailsScreen() {
const router = useRouter();
Expand Down Expand Up @@ -144,7 +39,11 @@ export default function DetailsScreen() {
<Text className="text-2xl font-light">{data?.category.name}</Text>
<Text className="font-semi-bold font-">{data?.unit_price}</Text>
<ImageDisplayer images={data?.pictures} />
<AddToCartSection quantity={quantity} setQuantity={setQuantity} />
<AddToCartSection
quantity={quantity}
setQuantity={setQuantity}
buy={() => {}}
/>
<View className="mb-4">
<Text className="mb-3 mr-2 font-bold">Product description</Text>
<Text>{data?.description}</Text>
Expand Down
67 changes: 67 additions & 0 deletions src/components/details/add-to-cart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { useState } from 'react';
import { Dropdown } from 'react-native-element-dropdown';

import { Button, Text, View } from '@/ui';

type DropdownItem = {
label: string;
value: number;
};

type AddToCartSectionProps = {
setQuantity: React.Dispatch<React.SetStateAction<number>>;
quantity: number;
buy: () => void;
};

export const AddToCartSection = ({
quantity,
setQuantity,
buy,
}: AddToCartSectionProps) => {
const numberItems: DropdownItem[] = Array.from(
{ length: quantity },
(_, index) => ({
label: (index + 1).toString(),
value: index + 1,
})
);
const [selectedValue, setSelectedValue] = useState<string>('1');

return (
<View className="mb-4 flex-row items-center justify-between">
<View className="items-center">
<Text className="mb-3 mr-2 font-bold">Quantity</Text>
<Dropdown
style={{
width: 90,
borderColor: 'black',
borderWidth: 2,
padding: 8,
borderRadius: 8,
height: 43,
marginBottom: 8,
}}
data={numberItems}
labelField="label"
valueField="value"
placeholder="1"
value={selectedValue}
onChange={(item: DropdownItem) => {
setSelectedValue(item.value.toString());
setQuantity(item.value);
}}
/>
</View>
<View className="w-4/5 items-center">
<Text className=" mr-2 font-bold">Avalability: {quantity} items</Text>
<Button
className="mt-3 h-12 w-72"
label="Add to cart"
textClassName="font-bold text-base"
onPress={buy}
/>
</View>
</View>
);
};
47 changes: 47 additions & 0 deletions src/components/details/image-displayer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { useState } from 'react';
import { FlatList } from 'react-native';

import { Image, TouchableOpacity, View } from '@/ui';

export const ImageDisplayer = ({
images,
}: {
images: string[] | undefined;
}) => {
const [selectedImage, setSelectedImage] = useState(0);

if (images === undefined) {
return;
}

return (
<>
<View className="h-68 w-68 my-3 w-full rounded-lg">
<Image
source={{ uri: images[selectedImage] }}
className="h-72 w-full"
contentFit="contain"
/>
</View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={images}
keyExtractor={(index) => index.toString()}
renderItem={({ item, index }) => (
<TouchableOpacity
className="mr-4 h-28 w-28 rounded-md"
onPress={() => setSelectedImage(index)}
>
<Image
source={{ uri: item }}
contentFit="contain"
className="h-28 w-28 rounded-md"
/>
</TouchableOpacity>
)}
contentContainerStyle={{ paddingBottom: 16 }}
/>
</>
);
};

0 comments on commit b37e76a

Please sign in to comment.