feat: purchases view

src/app/(app)/_layout.tsx

@@ -36,6 +36,13 @@ const tabs = [
     icon: SellIcon,
     headerShown: false,
   },
+  {
+    name: 'purchases',
+    title: 'Purchases',
+    testID: 'purchases-tab',
+    icon: SellIcon,
+    headerShown: false,
+  },
   {
     name: 'shopping-cart',
     title: 'Shopping Cart',

src/app/(app)/purchases.tsx

@@ -0,0 +1,69 @@
+import { useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import { FlatList } from 'react-native';
+
+import type { CartItem } from '@/api/cart/types';
+import { API_CONSTS } from '@/api/consts';
+import { usePruchases } from '@/api/purchase/get-purchases';
+import type { Purchase } from '@/api/purchase/types';
+import { HeaderLogo } from '@/components/header-logo';
+import { PurchaseCard } from '@/components/purchases/purchase-card';
+import { SafeAreaView, Text, View } from '@/ui';
+
+export default function Purchases() {
+  const { data, hasNextPage, fetchNextPage, isFetchingNextPage, refetch } =
+    usePruchases({
+      variables: { items: API_CONSTS.INITIAL_ITEMS },
+    });
+
+  const [lineItems, setLineItems] = useState<CartItem[]>([]);
+  const handleReachEnd = () => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      refetch();
+    }, [refetch])
+  );
+
+  useEffect(() => {
+    const allLineItems =
+      data?.pages.flatMap((page) =>
+        page.data.flatMap((purchase: Purchase) => purchase.line_items)
+      ) || [];
+    setLineItems(allLineItems);
+  }, [data]);
+
+  return (
+    <SafeAreaView className="bg-light_background">
+      <HeaderLogo />
+      <View className=" bg-light_background pb-32 pt-4">
+        <Text className="mx-4">My previous purchases</Text>
+        <FlatList
+          data={lineItems}
+          extraData={lineItems}
+          className="py-4"
+          onEndReached={handleReachEnd}
+          renderItem={({ item }) => {
+            return (
+              <View className="mx-4">
+                <PurchaseCard
+                  id={item.id}
+                  price={item.product.unit_price}
+                  state={item.product.state}
+                  name={item.product.title}
+                  image_url={item.product.pictures[0]}
+                  quantity={item.quantity}
+                />
+              </View>
+            );
+          }}
+          keyExtractor={(item) => item.id.toString()}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}

src/components/purchases/purchase-card.tsx

@@ -0,0 +1,75 @@
+import { Link } from 'expo-router';
+import { memo } from 'react';
+
+import { Image, Text, View } from '@/ui';
+
+export interface ShoppingProductCardProps {
+  id: number;
+  name: string;
+  price: string;
+  state: string;
+  image_url: string;
+  quantity: number;
+}
+
+const StateLabel = ({ state }: { state: string }) => {
+  return (
+    <View
+      className={`mb-2 mt-1 w-12 items-center space-x-2 rounded-md px-2 py-1 ${
+        state === 'used' ? 'bg-restored' : 'bg-new'
+      }`}
+    >
+      <Text className={`text-xs font-semibold text-white`}>
+        {state === 'used' ? 'Used' : 'New'}
+      </Text>
+    </View>
+  );
+};
+
+export const PurchaseCard = memo(
+  ({
+    name,
+    price,
+    state,
+    image_url,
+    id,
+    quantity,
+  }: ShoppingProductCardProps) => {
+    const detailsRoute = '/details/[id]';
+    return (
+      <View className="mb-6 w-full flex-row items-center justify-between space-x-4  rounded-lg bg-white p-3 shadow shadow-gray-600">
+        <Link
+          href={{
+            pathname: detailsRoute,
+            params: { id: id },
+          }}
+        >
+          <Image
+            source={{ uri: image_url }}
+            className="flex h-28 w-24"
+            contentFit="contain"
+          />
+        </Link>
+        <View className="w-full flex-1 px-4 py-3">
+          <View className="flex-row items-center justify-between">
+            <Link
+              href={{
+                pathname: detailsRoute,
+                params: { id: id },
+              }}
+              className='className="h-full w-2/4'
+            >
+              <Text className="text-md font-semibold">{name}</Text>
+            </Link>
+            <Text className="font-semibold">Price: {price}</Text>
+          </View>
+          <StateLabel state={state} />
+          <View className="mt-4 flex-row items-center justify-between">
+            <Text className="text-md font-semibold">{quantity} item</Text>
+            <Text> Bought on</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+);