faet: category screen

apps/expo/src/app/(app)/(tabs)/home.tsx

@@ -1,19 +1,77 @@
 import React from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { ActivityIndicator } from "react-native";
+import {
+  AnimatedImage,
+  BorderRadiuses,
+  Card,
+  Spacings,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { Link } from "expo-router";
+import { api } from "@/utils/api";
+import colors from "@/utils/colors";
+import { FlashList } from "@shopify/flash-list";
 
 export default function HomeScreen() {
-  // const utils = api.useContext();
-
-  // const postQuery = api.post.all.useQuery();
-
-  // const deletePostMutation = api.post.delete.useMutation({
-  //   onSettled: () => utils.post.all.invalidate(),
-  // });
+  const { data, refetch, isFetching } = api.category.getCategories.useQuery();
 
   return (
-    <SafeAreaView>
-      {/* Changes page title visible on the header */}
-      {/* <Stack.Screen options={{ title: "Home Page" }} /> */}
-    </SafeAreaView>
+    <View flex bg-primary>
+      <AnimatedImage
+        source={{ uri: "https://picsum.photos/200/160" }}
+        // source={{ uri: data?.image }}
+        height={124}
+        style={{ borderRadius: BorderRadiuses.br60 }}
+        containerStyle={{
+          paddingHorizontal: Spacings.s10,
+          paddingTop: Spacings.s2,
+          paddingBottom: Spacings.s6,
+          backgroundColor: colors.primary,
+        }}
+        loader={<ActivityIndicator color={colors.secondary} size="large" />}
+      />
+      <View bg-white br50 flex padding-s4 className="rounded-b-none">
+        <FlashList
+          data={data}
+          numColumns={2}
+          estimatedItemSize={50}
+          onRefresh={() => refetch()}
+          refreshing={isFetching}
+          renderItem={({ item }) => {
+            return (
+              <View centerH flex margin-8 className="space-y-2">
+                <Link
+                  asChild
+                  href={{
+                    pathname: "/search",
+                    params: {
+                      categoryId: item.id,
+                    },
+                  }}
+                >
+                  <Card flex-1 enableShadow>
+                    <AnimatedImage
+                      source={{ uri: item.imageUrl }}
+                      height={124}
+                      width={123}
+                      borderRadius={BorderRadiuses.br50}
+                      loader={
+                        <ActivityIndicator
+                          color={colors.secondary}
+                          size="large"
+                          className="mb-24"
+                        />
+                      }
+                    />
+                  </Card>
+                </Link>
+                <Text>{item.name}</Text>
+              </View>
+            );
+          }}
+        />
+      </View>
+    </View>
   );
 }

apps/expo/src/app/(app)/_layout.tsx

@@ -19,7 +19,7 @@ export default function AuthLayout() {
         options={{
           header: (props) => <Header {...props} />,
           contentStyle: {
-            backgroundColor: colors.primary,
+            backgroundColor: 'white',
           },
         }}
       />

apps/expo/src/app/(app)/search.tsx

@@ -8,7 +8,7 @@ import {
   Text,
   View,
 } from "react-native-ui-lib";
-import { Link } from "expo-router";
+import { Link, useLocalSearchParams } from "expo-router";
 import { useDebouncedValue } from "@/lib/hooks/useDebouncedValues";
 import { useSearchStore } from "@/lib/stores/useSearchStore";
 import { api } from "@/utils/api";
@@ -17,10 +17,12 @@ import rupiahFormatter from "@/utils/rupiahFormatter";
 import { FlashList } from "@shopify/flash-list";
 
 export default function SearchScreen() {
+  const { categoryId } = useLocalSearchParams();
   const search = useSearchStore((state) => state.search);
   const [debouncedSearch] = useDebouncedValue(search, 500);
   const { data, isFetching, refetch } = api.product.getProducts.useQuery({
     query: debouncedSearch,
+    categoryId: categoryId as string,
   });
 
   return (
@@ -34,6 +36,11 @@ export default function SearchScreen() {
         estimatedItemSize={200}
         onRefresh={() => refetch()}
         refreshing={isFetching}
+        ListEmptyComponent={
+          <Text text70BO center marginT-s6>
+            Produk tidak ditemukan
+          </Text>
+        }
         renderItem={({ item }) => {
           return (
             <Link

packages/api/src/router/product.ts

@@ -1,12 +1,12 @@
 import { z } from "zod";
 
-import { gt } from "@vivat/db";
-
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const productRouter = createTRPCRouter({
   getProducts: protectedProcedure
-    .input(z.object({ query: z.string() }))
+    .input(
+      z.object({ query: z.string(), categoryId: z.string().uuid().optional() }),
+    )
     .query(async ({ input, ctx }) => {
       return await ctx.db.query.products.findMany({
         columns: {
@@ -18,10 +18,13 @@ export const productRouter = createTRPCRouter({
         with: {
           user: true,
         },
-        where: (products, { like, and }) =>
+        where: (products, { like, and, eq, gt }) =>
           and(
             like(products.name, `%${input.query.toLowerCase()}%`),
             gt(products.stock, 0),
+            ...(input.categoryId
+              ? [eq(products.categoryId, input.categoryId)]
+              : []),
           ),
       });
     }),

packages/api/src/services/categories/queries.ts

@@ -5,8 +5,7 @@ import type { CategoryId } from "@vivat/db/schema/categories";
 import { categories, categoryIdSchema } from "@vivat/db/schema/categories";
 
 export const getCategories = async () => {
-  const c = await db.select().from(categories);
-  return { categories: c };
+  return await db.select().from(categories).orderBy(categories.name);
 };
 
 export const getCategoryById = async (id: CategoryId) => {