Product detail Screen

package.json

@@ -86,6 +86,7 @@
     "react-hook-form": "^7.51.4",
     "react-i18next": "^12.3.1",
     "react-native": "0.74.5",
+    "react-native-element-dropdown": "^2.12.2",
     "react-native-flash-message": "^0.4.2",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-keyboard-controller": "^1.13.2",

src/api/common/utils.tsx

@@ -77,3 +77,43 @@ export const toSnakeCase = (obj: GenericObject): GenericObject => {
   }
   return newObj;
 };
+
+const DEFAULT_ERROR_MESSAGE = 'something went wrong';
+const parseError = (data: any) => {
+  const { error, errors } = data || {};
+  if (error) {
+    return error;
+  }
+  if (errors) {
+    const { fullMessages, base } = errors;
+    if (fullMessages) {
+      const [firstMessage] = fullMessages;
+      return firstMessage;
+    } else if (base) {
+      const [firstMessage] = base;
+      return firstMessage;
+    } else if (Array.isArray(errors)) {
+      const [firstMessage] = errors;
+      return firstMessage;
+    } else {
+      const errorKey = Object.keys(errors)[0];
+      const error = errors[errorKey][0];
+      return `${errorKey} ${error}`;
+    }
+  }
+  return DEFAULT_ERROR_MESSAGE;
+};
+export const parseAxiosError = (error: any) => {
+  if (error) {
+    const { response } = error;
+    if (!response) {
+      return DEFAULT_ERROR_MESSAGE;
+    }
+    if (response.status === 500) {
+      return DEFAULT_ERROR_MESSAGE;
+    } else {
+      return parseError(response?.data);
+    }
+  }
+  return DEFAULT_ERROR_MESSAGE;
+};

src/api/products/use-details.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { client, parseAxiosError } from '../common';
+import type { Product } from './types';
+export const getItemDetails = async (id: number): Promise<Product> => {
+  try {
+    const { data } = await client.get(`products/${id}`);
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+};
+export const useGetItemDetails = (id: number) =>
+  useQuery({
+    queryKey: ['getItemDetails'],
+    queryFn: () => getItemDetails(id),
+  });

src/app/(app)/_layout.tsx

@@ -8,6 +8,7 @@ import {
   Favorite as FavoriteIcon,
   Home as HomeIcon,
   Menu as MenuIcon,
+  Sell as SellIcon,
 } from '@/ui/icons';
 
 const renderIcon = (
@@ -28,13 +29,13 @@ const tabs = [
     testID: 'feed-tab',
     headerShown: false,
   },
-  // {
-  //   name: 'product-list',
-  //   title: 'product-list',
-  //   icon: SellIcon,
-  //   testID: 'product-list-tab',
-  //   headerShown: false,
-  // },
+  {
+    name: 'product-list',
+    title: 'Product List',
+    testID: 'product-list-tab',
+    icon: SellIcon,
+    headerShown: false,
+  },
   {
     name: 'settings',
     title: 'Settings',
@@ -102,6 +103,7 @@ export default function TabLayout() {
               renderIcon(icon, color, focused),
             tabBarTestID: testID,
             headerShown,
+            tabBarButton: name === 'product-list' ? () => null : undefined,
           }}
         />
       ))}

src/app/product-list.tsx → src/app/(app)/product-list.tsx

@@ -20,7 +20,7 @@ const FiltersButton = ({ products }: { products: Product[] }) => {
     return;
   }
   return (
-    <View className="absolute -bottom-8 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()} />
@@ -125,7 +125,7 @@ export default function ProductList() {
       </TouchableOpacity>
       <SearchBar setQuery={setQuery} query={query} />
       <SearchResult query={query} clearQuery={clearQuery} />
-      <View className={`${query === '' ? 'pb-56' : 'pb-80'}`}>
+      <View className={query === '' ? 'pb-52' : 'pb-72'}>
         <ProductsList
           products={productsToDisplay}
           onEndReached={handleLoadMore}

src/app/_layout.tsx

@@ -41,7 +41,6 @@ function RootLayoutNav() {
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="login" options={{ headerShown: false }} />
         <Stack.Screen name="signup" options={{ headerShown: false }} />
-        <Stack.Screen name="product-list" options={{ headerShown: false }} />
       </Stack>
     </Providers>
   );

src/app/details/[id].tsx

@@ -0,0 +1,55 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { useState } from 'react';
+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 { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from '@/ui';
+
+export default function DetailsScreen() {
+  const router = useRouter();
+  const { id } = useLocalSearchParams();
+  const { data } = useGetItemDetails(Number(id));
+  const [quantity, setQuantity] = useState<number>(1);
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-100">
+      <Stack.Screen options={{ headerShown: false }} />
+      <ScrollView>
+        <HeaderLogo />
+        <View className="px-4 py-3">
+          <View className="flex-row justify-between">
+            <View
+              className={twMerge(
+                data?.state === 'totaly_new' ? 'bg-new' : 'bg-restored',
+                'h-6 w-1/5 items-center justify-center rounded-md'
+              )}
+            >
+              <Text className="text-md text-white">
+                {data?.state === 'totaly_new' ? 'New' : 'Restored'}
+              </Text>
+            </View>
+            <TouchableOpacity className="mr-4" onPress={router.back}>
+              <Text className="text-2xl font-bold text-red-700">X</Text>
+            </TouchableOpacity>
+          </View>
+          <Text className="text-2xl font-semibold">{data?.title}</Text>
+          <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}
+            buy={() => {}}
+          />
+          <View className="mb-4">
+            <Text className="mb-3 mr-2 font-bold">Product description</Text>
+            <Text>{data?.description}</Text>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

src/components/details/add-to-cart.tsx

@@ -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>
+  );
+};

src/components/details/image-displayer.tsx

@@ -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 }}
+      />
+    </>
+  );
+};

src/components/home/carousel-item.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'expo-router';
 import { twMerge } from 'tailwind-merge';
 
 import type { Product } from '@/api/products/types';
@@ -22,7 +23,12 @@ const Icon = ({ focused, ...props }: IconType) => {
 };
 export const CarouselItem = ({ item }: { item: Product }) => {
   return (
-    <>
+    <Link
+      href={{
+        pathname: '/details/[id]',
+        params: { id: item.id },
+      }}
+    >
       <View className="h-64 w-48 rounded-lg bg-white shadow shadow-gray-600">
         <View className="items-center">
           <Image
@@ -52,6 +58,6 @@ export const CarouselItem = ({ item }: { item: Product }) => {
           <Icon focused={false} />
         </View>
       </View>
-    </>
+    </Link>
   );
 };

src/components/home/carousel.tsx

@@ -33,7 +33,7 @@ export const HorizontalCarousel = () => {
       <TouchableOpacity
         className="items-center"
         onPress={() => {
-          router.push('/product-list');
+          router.push('/(app)/product-list');
         }}
       >
         <Text className="font-semibold text-link">See all</Text>