From b70d56c2e8cb0279b0df4811138d9009c885f12d Mon Sep 17 00:00:00 2001
From: mrevanzak <mrevanzak@gmail.com>
Date: Sun, 26 Nov 2023 14:26:02 +0700
Subject: [PATCH] feat: edit product

---
 apps/expo/package.json                     |   3 +-
 apps/expo/src/app/(app)/(tabs)/listing.tsx | 167 +----------------
 apps/expo/src/app/(app)/[productId].tsx    |  36 ++--
 apps/expo/src/app/(app)/_layout.tsx        |   6 +
 apps/expo/src/app/(app)/edit-product.tsx   |  10 +
 apps/expo/src/components/ProductForm.tsx   | 203 +++++++++++++++++++++
 apps/expo/src/components/forms/Input.tsx   |   2 +-
 apps/expo/src/lib/hooks/useSelectImage.ts  |   3 +
 packages/api/src/router/product.ts         |  14 +-
 packages/db/schema/products.ts             |  24 +--
 pnpm-lock.yaml                             |   3 +
 11 files changed, 278 insertions(+), 193 deletions(-)
 create mode 100644 apps/expo/src/app/(app)/edit-product.tsx
 create mode 100644 apps/expo/src/components/ProductForm.tsx

diff --git a/apps/expo/package.json b/apps/expo/package.json
index dbdde35..055adb2 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -51,6 +51,7 @@
     "superjson": "1.13.1",
     "tus-js-client": "^3.1.1",
     "use-tus": "^0.7.3",
+    "uuid": "^9.0.1",
     "zod": "^3.21.4",
     "zustand": "^4.4.6"
   },
@@ -79,4 +80,4 @@
     ]
   },
   "prettier": "@vivat/prettier-config"
-}
+}
\ No newline at end of file
diff --git a/apps/expo/src/app/(app)/(tabs)/listing.tsx b/apps/expo/src/app/(app)/(tabs)/listing.tsx
index e050e8a..c77891a 100644
--- a/apps/expo/src/app/(app)/(tabs)/listing.tsx
+++ b/apps/expo/src/app/(app)/(tabs)/listing.tsx
@@ -1,172 +1,11 @@
 import React from "react";
-import { ActivityIndicator, Alert } from "react-native";
-import {
-  AnimatedImage,
-  AnimatedScanner,
-  BorderRadiuses,
-  Button,
-  KeyboardAwareScrollView,
-  Text,
-  View,
-} from "react-native-ui-lib";
-import { useRouter } from "expo-router";
-import Input from "@/components/forms/Input";
-import Picker from "@/components/forms/Picker";
-import { useSelectImage } from "@/lib/hooks/useSelectImage";
-import { api } from "@/utils/api";
-import colors from "@/utils/colors";
-import { storageClient } from "@/utils/supabase";
-import { useUser } from "@clerk/clerk-expo";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { FormProvider, useForm } from "react-hook-form";
-import { z } from "zod";
-
-const schema = z.object({
-  name: z.string().min(3),
-  description: z.string().min(3),
-  price: z.coerce.number(),
-  stock: z.coerce.number(),
-  categoryId: z.string(),
-});
+import { View } from "react-native-ui-lib";
+import ProductForm from "@/components/ProductForm";
 
 export default function UploadProductScreen() {
-  const router = useRouter();
-  const { user } = useUser();
-
-  const { data } = api.category.getCategories.useQuery({ partial: true });
-  const { mutate, isPending } = api.product.addProduct.useMutation();
-
-  const { image, onSelectImage, onUpload, uploadProggres } = useSelectImage();
-
-  const methods = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-  const { handleSubmit, reset } = methods;
-  const onSubmit = handleSubmit(async (data) => {
-    const filePath = `${user?.id}/${data.name}.png`;
-
-    const { error } = await onUpload("products", filePath);
-    if (error) {
-      Alert.alert("Gagal mengupload gambar");
-      return;
-    }
-
-    const imgUrl = storageClient.from("products").getPublicUrl(filePath);
-    mutate(
-      {
-        ...data,
-        image: imgUrl.data.publicUrl,
-      },
-      {
-        onSuccess: () => {
-          reset();
-          router.push("/home");
-        },
-      },
-    );
-  });
-
   return (
     <View bg-white padding-s4 flex>
-      <KeyboardAwareScrollView>
-        <FormProvider {...methods}>
-          <View
-            marginB-s4
-            br40
-            className="border-primary border bg-white"
-            padding-s4
-            flex
-          >
-            <Text text70 primary>
-              Upload Gambar
-            </Text>
-            <View flex center paddingV-s6 className="space-y-2">
-              {image?.assets ? (
-                <>
-                  <AnimatedImage
-                    source={{ uri: image.assets[0]?.uri }}
-                    style={{ width: 200, height: 200 }}
-                    loader={
-                      <ActivityIndicator
-                        color={colors.secondary}
-                        size="small"
-                      />
-                    }
-                  />
-                  {!!uploadProggres && (
-                    <AnimatedScanner progress={uploadProggres} />
-                  )}
-                  <Button
-                    onPress={onSelectImage}
-                    label="Ganti Gambar"
-                    bg-primary
-                  />
-                </>
-              ) : (
-                <Button
-                  onPress={onSelectImage}
-                  bg-primary
-                  outline
-                  outlineColor={colors.primary}
-                  borderRadius={BorderRadiuses.br40}
-                  padding-s2
-                  iconSource={() => (
-                    <MaterialCommunityIcons
-                      name="file-image-plus"
-                      size={40}
-                      color={colors.primary}
-                    />
-                  )}
-                />
-              )}
-            </View>
-          </View>
-          <Input
-            id="name"
-            label="Nama Produk"
-            placeholder="Masukan nama produk"
-          />
-          <Input
-            id="description"
-            label="Deskripsi Produk"
-            multiline
-            placeholder="Masukan deskripsi produk"
-          />
-          <Input
-            id="price"
-            label="Harga Produk"
-            placeholder="Masukan harga produk"
-            inputMode="numeric"
-          />
-          <Input
-            id="stock"
-            label="Stok Produk"
-            placeholder="Masukan stok produk"
-            inputMode="numeric"
-          />
-          <Picker
-            id="categoryId"
-            label="Kategori Produk"
-            placeholder="Pilih kategori produk"
-            topBarProps={{ title: "Kategori" }}
-            items={
-              data?.map((category) => ({
-                label: category.name,
-                value: category.id,
-              })) ?? [{ label: "Loading...", value: "loading" }]
-            }
-            useSafeArea
-          />
-        </FormProvider>
-        <Button
-          label="Simpan"
-          onPress={onSubmit}
-          bg-primary
-          br40
-          disabled={!!uploadProggres ?? isPending}
-        />
-      </KeyboardAwareScrollView>
+      <ProductForm />
     </View>
   );
 }
diff --git a/apps/expo/src/app/(app)/[productId].tsx b/apps/expo/src/app/(app)/[productId].tsx
index ca5f6fa..cb71c32 100644
--- a/apps/expo/src/app/(app)/[productId].tsx
+++ b/apps/expo/src/app/(app)/[productId].tsx
@@ -15,10 +15,13 @@ import { Link, usePathname } from "expo-router";
 import { api } from "@/utils/api";
 import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
+import { useUser } from "@clerk/clerk-expo";
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 
 export default function ProductDetailScreen() {
+  const { user } = useUser();
   const pathname = usePathname();
+
   const { data, isLoading, refetch } = api.product.showProduct.useQuery({
     id: pathname.slice(1),
   });
@@ -50,7 +53,7 @@ export default function ProductDetailScreen() {
             paddingL-s4
             centerV
             flex
-            className="-ml-4 rounded-l-none space-y-1"
+            className="-ml-4 space-y-1 rounded-l-none"
           >
             <Text white text65>
               {data?.name}
@@ -115,16 +118,27 @@ export default function ProductDetailScreen() {
             spread
             className="space-x-4 rounded-b-none"
           >
-            {/* <Button bg-white primary label="Keranjang" br40 flex /> */}
-            <Link
-              href={{
-                pathname: "/checkout",
-                params: { productId: data?.id ?? "" },
-              }}
-              asChild
-            >
-              <Button bg-secondary primary label="Beli" br40 flex />
-            </Link>
+            {user?.id === data?.user.id ? (
+              <Link
+                href={{
+                  pathname: "/edit-product",
+                  params: { productId: data?.id ?? "" },
+                }}
+                asChild
+              >
+                <Button bg-secondary primary label="Ubah Detil Produk" br40 flex />
+              </Link>
+            ) : (
+              <Link
+                href={{
+                  pathname: "/checkout",
+                  params: { productId: data?.id ?? "" },
+                }}
+                asChild
+              >
+                <Button bg-secondary primary label="Beli" br40 flex />
+              </Link>
+            )}
           </View>
         </View>
       </SafeAreaView>
diff --git a/apps/expo/src/app/(app)/_layout.tsx b/apps/expo/src/app/(app)/_layout.tsx
index ad28dee..1a42b47 100644
--- a/apps/expo/src/app/(app)/_layout.tsx
+++ b/apps/expo/src/app/(app)/_layout.tsx
@@ -59,6 +59,12 @@ export default function AuthLayout() {
           headerTitle: "Konfirmasi Pembayaran",
         }}
       />
+      <Stack.Screen
+        name="edit-product"
+        options={{
+          headerTitle: "Ubah detil produk",
+        }}
+      />
       <Stack.Screen
         name="address/index"
         options={{
diff --git a/apps/expo/src/app/(app)/edit-product.tsx b/apps/expo/src/app/(app)/edit-product.tsx
new file mode 100644
index 0000000..75e2cca
--- /dev/null
+++ b/apps/expo/src/app/(app)/edit-product.tsx
@@ -0,0 +1,10 @@
+import ProductForm from "@/components/ProductForm";
+import { View } from "react-native-ui-lib";
+
+export default function EditProductScreen() {
+  return (
+    <View bg-white padding-s4 flex>
+      <ProductForm edit />
+    </View>
+  );
+}
\ No newline at end of file
diff --git a/apps/expo/src/components/ProductForm.tsx b/apps/expo/src/components/ProductForm.tsx
new file mode 100644
index 0000000..f23eeb3
--- /dev/null
+++ b/apps/expo/src/components/ProductForm.tsx
@@ -0,0 +1,203 @@
+import { ActivityIndicator, Alert } from "react-native";
+import {
+  AnimatedImage,
+  AnimatedScanner,
+  BorderRadiuses,
+  Button,
+  KeyboardAwareScrollView,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import Input from "@/components/forms/Input";
+import Picker from "@/components/forms/Picker";
+import { useSelectImage } from "@/lib/hooks/useSelectImage";
+import { api } from "@/utils/api";
+import colors from "@/utils/colors";
+import { storageClient } from "@/utils/supabase";
+import { useUser } from "@clerk/clerk-expo";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormProvider, useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().min(3),
+  description: z.string().min(3),
+  price: z.coerce.number().positive(),
+  stock: z.coerce.number().positive(),
+  categoryId: z.string(),
+});
+
+interface ProductFormProps {
+  edit?: boolean;
+}
+
+export default function ProductForm({ edit }: ProductFormProps) {
+  const router = useRouter();
+  const { productId } = useLocalSearchParams<{ productId: string }>();
+  const { user } = useUser();
+  const utils = api.useUtils();
+
+  const { data } = api.category.getCategories.useQuery({ partial: true });
+  const productDetail = utils.product.showProduct.getData({
+    id: productId,
+  });
+  const addProduct = api.product.addProduct.useMutation();
+  const editProduct = api.product.editProduct.useMutation();
+
+  const { image, onSelectImage, onUpload, uploadProggres } = useSelectImage();
+
+  const methods = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    values: {
+      name: productDetail?.name ?? "",
+      description: productDetail?.description ?? "",
+      price: productDetail?.price ?? 0,
+      stock: productDetail?.stock ?? 0,
+      categoryId: productDetail?.categoryId ?? "",
+    },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+  const { handleSubmit, reset } = methods;
+  const onSubmit = handleSubmit(async (data) => {
+    const productId = edit ? productDetail?.id : v4();
+    const filePath = `${user?.id}/${productId}.png`;
+
+    const { error } = await onUpload("products", filePath);
+    if (error && error.message !== "No image selected") {
+      Alert.alert("Gagal mengupload gambar");
+      return;
+    }
+
+    const imgUrl = storageClient.from("products").getPublicUrl(filePath);
+    edit
+      ? editProduct.mutate(
+          {
+            ...data,
+            image: imgUrl.data.publicUrl,
+            id: productId!,
+          },
+          {
+            onSuccess: () => {
+              reset();
+              router.back();
+            },
+          },
+        )
+      : addProduct.mutate(
+          {
+            ...data,
+            image: imgUrl.data.publicUrl,
+          },
+          {
+            onSuccess: () => {
+              reset();
+              router.push("/home");
+            },
+          },
+        );
+  });
+  return (
+    <KeyboardAwareScrollView>
+      <FormProvider {...methods}>
+        <View
+          marginB-s4
+          br40
+          className="border-primary border bg-white"
+          padding-s4
+          flex
+        >
+          <Text text70 primary>
+            Upload Gambar
+          </Text>
+          <View flex center paddingV-s6 className="space-y-2">
+            {productDetail?.image ?? image?.assets ? (
+              <>
+                <AnimatedImage
+                  source={{
+                    uri: image?.assets?.at(0)?.uri ?? productDetail?.image,
+                  }}
+                  style={{ width: 200, height: 200 }}
+                  loader={
+                    <ActivityIndicator color={colors.secondary} size="small" />
+                  }
+                />
+                {!!uploadProggres && (
+                  <AnimatedScanner progress={uploadProggres} />
+                )}
+                <Button
+                  onPress={onSelectImage}
+                  label="Ganti Gambar"
+                  bg-primary
+                />
+              </>
+            ) : (
+              <Button
+                onPress={onSelectImage}
+                bg-primary
+                outline
+                outlineColor={colors.primary}
+                borderRadius={BorderRadiuses.br40}
+                padding-s2
+                iconSource={() => (
+                  <MaterialCommunityIcons
+                    name="file-image-plus"
+                    size={40}
+                    color={colors.primary}
+                  />
+                )}
+              />
+            )}
+          </View>
+        </View>
+        <Input
+          id="name"
+          label="Nama Produk"
+          placeholder="Masukan nama produk"
+        />
+        <Input
+          id="description"
+          label="Deskripsi Produk"
+          multiline
+          placeholder="Masukan deskripsi produk"
+        />
+        <Input
+          id="price"
+          label="Harga Produk"
+          placeholder="Masukan harga produk"
+          inputMode="numeric"
+        />
+        <Input
+          id="stock"
+          label="Stok Produk"
+          placeholder="Masukan stok produk"
+          inputMode="numeric"
+        />
+        <Picker
+          id="categoryId"
+          label="Kategori Produk"
+          placeholder="Pilih kategori produk"
+          topBarProps={{ title: "Kategori" }}
+          items={
+            data?.map((category) => ({
+              label: category.name,
+              value: category.id,
+            })) ?? [{ label: "Loading...", value: "loading" }]
+          }
+          useSafeArea
+        />
+      </FormProvider>
+      <Button
+        label="Simpan"
+        onPress={onSubmit}
+        bg-primary
+        br40
+        disabled={!!uploadProggres ?? addProduct.isPending}
+      />
+    </KeyboardAwareScrollView>
+  );
+}
diff --git a/apps/expo/src/components/forms/Input.tsx b/apps/expo/src/components/forms/Input.tsx
index 3418f70..af3122a 100644
--- a/apps/expo/src/components/forms/Input.tsx
+++ b/apps/expo/src/components/forms/Input.tsx
@@ -45,7 +45,7 @@ export default function Input({
           }}
           enableErrors
           retainValidationSpace={false}
-          value={field.value as string}
+          value={String(field.value)}
           onChangeText={field.onChange}
           onBlur={field.onBlur}
           validationMessage={error?.message}
diff --git a/apps/expo/src/lib/hooks/useSelectImage.ts b/apps/expo/src/lib/hooks/useSelectImage.ts
index 2080801..b325345 100644
--- a/apps/expo/src/lib/hooks/useSelectImage.ts
+++ b/apps/expo/src/lib/hooks/useSelectImage.ts
@@ -13,6 +13,9 @@ export function useSelectImage() {
 
   const onUpload = useCallback(
     (bucketName: string, filePath: string) => {
+      if (!image) {
+        return Promise.resolve({ error: new Error("No image selected") });
+      }
       return new Promise<{ error?: Error }>((resolve) => {
         setUpload(image as unknown as Blob, {
           ...uploadOptions(bucketName, filePath),
diff --git a/packages/api/src/router/product.ts b/packages/api/src/router/product.ts
index 8578468..4f69961 100644
--- a/packages/api/src/router/product.ts
+++ b/packages/api/src/router/product.ts
@@ -1,9 +1,11 @@
 import { z } from "zod";
 
+import { eq } from "@vivat/db";
 import {
-  insertProductSchema,
+  insertProductParams,
   productIdSchema,
   products,
+  updateProductParams,
 } from "@vivat/db/schema/products";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
@@ -35,7 +37,7 @@ export const productRouter = createTRPCRouter({
       });
     }),
   addProduct: protectedProcedure
-    .input(insertProductSchema)
+    .input(insertProductParams)
     .mutation(async ({ input, ctx }) => {
       return await ctx.db
         .insert(products)
@@ -54,4 +56,12 @@ export const productRouter = createTRPCRouter({
         })) ?? null
       );
     }),
+  editProduct: protectedProcedure
+    .input(updateProductParams)
+    .mutation(async ({ input, ctx }) => {
+      return await ctx.db
+        .update(products)
+        .set({ ...input })
+        .where(eq(products.id, input.id));
+    }),
 });
diff --git a/packages/db/schema/products.ts b/packages/db/schema/products.ts
index e63a603..31624d4 100644
--- a/packages/db/schema/products.ts
+++ b/packages/db/schema/products.ts
@@ -3,10 +3,13 @@ import { index, int, timestamp, varchar } from "drizzle-orm/mysql-core";
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
 import { z } from "zod";
 
+
+
 import { mySqlTable } from "./_table";
 import { categories } from "./categories";
 import { productSold, users } from "./users";
 
+
 export const products = mySqlTable(
   "products",
   {
@@ -15,7 +18,7 @@ export const products = mySqlTable(
       .primaryKey()
       .default(sql`(UUID())`),
     name: varchar("name", { length: 256 }).notNull(),
-    description: varchar("description", { length: 256 }),
+    description: varchar("description", { length: 256 }).notNull(),
     price: int("price").notNull(),
     stock: int("stock").notNull(),
     image: varchar("image", { length: 256 }).notNull(),
@@ -46,27 +49,20 @@ export const productsRelations = relations(products, ({ many, one }) => ({
 }));
 
 // Schema for products - used to validate API requests
-export const insertProductSchema = createInsertSchema(products).omit({
-  sellerId: true,
-});
-export const insertProductParams = createSelectSchema(products, {
+export const insertProductParams = createInsertSchema(products, {
   price: z.coerce.number(),
   stock: z.coerce.number(),
 }).omit({
   id: true,
+  sellerId: true,
 });
 export const updateProductSchema = createSelectSchema(products);
 export const updateProductParams = createSelectSchema(products, {
   price: z.coerce.number(),
   stock: z.coerce.number(),
 }).omit({
-  id: true,
+  sellerId: true,
+  createdAt: true,
+  updatedAt: true,
 });
-export const productIdSchema = updateProductSchema.pick({ id: true });
-
-// Types for products - used to type API request params and within Components
-export type Product = z.infer<typeof updateProductSchema>;
-export type NewProduct = z.infer<typeof insertProductSchema>;
-export type NewProductParams = z.infer<typeof insertProductParams>;
-export type UpdateProductParams = z.infer<typeof updateProductParams>;
-export type ProductId = z.infer<typeof productIdSchema>["id"];
+export const productIdSchema = updateProductSchema.pick({ id: true });
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd6278c..fdd7de8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,6 +137,9 @@ importers:
       use-tus:
         specifier: ^0.7.3
         version: 0.7.3(react@18.2.0)(tus-js-client@3.1.1)
+      uuid:
+        specifier: ^9.0.1
+        version: 9.0.1
       zod:
         specifier: ^3.21.4
         version: 3.22.4