refactor: adapt to the api

kyzsuukii · Apr 3, 2024 · 3fb5ecf · 3fb5ecf
1 parent 4131950
commit 3fb5ecf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/src/components/upload-form.tsx b/src/components/upload-form.tsx
@@ -42,8 +42,12 @@ const ACCEPTED_IMAGE_TYPES = [
 ];
 
 export const formSchema = z.object({
-  title: z.string(),
-  productImages: z
+  name: z.string(),
+  category: z.string(),
+  description: z.string(),
+  price: z.string(),
+  stock: z.string(),
+  thumbnail: z
     .custom<FileList>()
     .refine((file) => file?.length == 1, {
       message: "Image is required",
@@ -54,10 +58,6 @@ export const formSchema = z.object({
     .refine((file) => file?.[0]?.size <= MAX_FILE_SIZE, {
       message: "File size must be less than or equal to 2Mb",
     }),
-  category: z.string(),
-  description: z.string(),
-  price: z.string(),
-  stock: z.string(),
 });
 
 const Spinner = () => (
@@ -75,10 +75,10 @@ export default function ProductUploadForm({ session }: { session: string }) {
   const [loading, setLoading] = useState(false);
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    const { productImages, ...rest } = values;
+    const { thumbnail, ...rest } = values;
     const formData = {
       ...rest,
-      productImages: productImages?.[0],
+      thumbnail: thumbnail?.[0],
     };
     try {
       setLoading(true);
@@ -120,10 +120,10 @@ export default function ProductUploadForm({ session }: { session: string }) {
               <div>
                 <FormField
                   control={form.control}
-                  name="title"
+                  name="name"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Title</FormLabel>
+                      <FormLabel>Name</FormLabel>
                       <FormControl>
                         <Input placeholder="Product title" {...field} />
                       </FormControl>
@@ -135,15 +135,12 @@ export default function ProductUploadForm({ session }: { session: string }) {
               <div>
                 <FormField
                   control={form.control}
-                  name="productImages"
+                  name="thumbnail"
                   render={() => (
                     <FormItem>
                       <FormLabel>Thumbnail</FormLabel>
                       <FormControl>
-                        <Input
-                          type="file"
-                          {...form.register("productImages")}
-                        />
+                        <Input type="file" {...form.register("thumbnail")} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>

diff --git a/src/routes/_admin/dashboard/products.tsx b/src/routes/_admin/dashboard/products.tsx
@@ -36,6 +36,8 @@ function DashboardProduct() {
 
   if (isLoading) return <Loading />;
 
+  console.log(data);
+
   return (
     <div className="my-12 container mx-auto">
       <div className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
@@ -50,7 +52,7 @@ function DashboardProduct() {
         {data.map((product: any) => (
           <Card key={product.id}>
             <CardHeader>
-              <CardTitle className="truncate">{product.title}</CardTitle>
+              <CardTitle className="truncate">{product.name}</CardTitle>
               <CardDescription className="truncate">
                 {product.description}
               </CardDescription>
@@ -59,7 +61,7 @@ function DashboardProduct() {
               <div className="aspect-w-16 aspect-h-12 object-cover">
                 <LazyLoadImage
                   className="rounded"
-                  src={`${config.SERVER_API_URL}/${product.image_path}`}
+                  src={`${config.SERVER_API_URL}/${product.thumbnail}`}
                   alt={product.title}
                 />
               </div>