Add error boundaries

patelnets · Feb 22, 2024 · d8f4183 · d8f4183
1 parent 2ef63ba
commit d8f4183
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 17 deletions.
diff --git a/app/error.tsx b/app/error.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html>
+      <body>
+        <h2>{error.message}</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
diff --git a/app/getQueryClient.ts b/app/getQueryClient.ts
@@ -0,0 +1,6 @@
+// app/getQueryClient.jsx
+import { QueryClient } from '@tanstack/react-query';
+import { cache } from 'react';
+
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;
diff --git a/app/product/[slug]/edit/error.tsx b/app/product/[slug]/edit/error.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import { GenericErrorBoundary } from '@/components/error-boundaries/GenericErrorBoundary';
+
+export default GenericErrorBoundary;
diff --git a/app/product/[slug]/error.tsx b/app/product/[slug]/error.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import { GenericErrorBoundary } from '@/components/error-boundaries/GenericErrorBoundary';
+
+export default GenericErrorBoundary;
diff --git a/app/product/[slug]/page.tsx b/app/product/[slug]/page.tsx
@@ -3,14 +3,16 @@ import { getProduct, STORES } from '@/fetch-queries/products/get-product';
 import { Button } from '@nextui-org/button';
 import Link from 'next/link';
 import { Image } from '@nextui-org/image';
-import React from 'react';
-import { Divider } from '@nextui-org/divider';
 import { getServerSession } from 'next-auth';
 import { authOptions } from '@/libs/next-auth';
+import { DeleteProduct } from '@/components/products/Delete';
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const session = await getServerSession(authOptions);
   const product = await getProduct({ id: params.slug });
+
+  console.log('product', product);
+
   return (
     <div className={'flex gap-2 flex-col justify-center items-center'}>
       <h1 className={'text-2xl'}> {product.name} </h1>
@@ -35,9 +37,12 @@ export default async function Page({ params }: { params: { slug: string } }) {
         ))}
       </ul>
       {session && (
-        <Link className={'self-start'} href={`/product/${params.slug}/edit`}>
-          <Button color='primary'>Edit</Button>
-        </Link>
+        <div className={'flex gap-2'}>
+          <Link className={'self-start'} href={`/product/${params.slug}/edit`}>
+            <Button color='primary'>Edit</Button>
+          </Link>
+          <DeleteProduct id={product.id} />
+        </div>
       )}
     </div>
   );

diff --git a/app/products/add/error.tsx b/app/products/add/error.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import { GenericErrorBoundary } from '@/components/error-boundaries/GenericErrorBoundary';
+
+export default GenericErrorBoundary;
diff --git a/app/products/error.tsx b/app/products/error.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import { GenericErrorBoundary } from '@/components/error-boundaries/GenericErrorBoundary';
+
+export default GenericErrorBoundary;
diff --git a/components/error-boundaries/GenericErrorBoundary.tsx b/components/error-boundaries/GenericErrorBoundary.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { Button } from '@nextui-org/react';
+
+export const GenericErrorBoundary = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  return (
+    <div
+      className={
+        'flex flex-col w-full justify-center items-center h-full gap-4'
+      }
+    >
+      <h2>{error.message}</h2>
+      <Button onClick={() => reset()}>Try again</Button>
+    </div>
+  );
+};
diff --git a/components/products/Delete.tsx b/components/products/Delete.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { Button } from '@nextui-org/react';
+import { useMutation } from '@tanstack/react-query';
+import { deleteProduct } from '@/fetch-queries/products/delete-product';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+
+interface Props {
+  id: string;
+}
+export const DeleteProduct = ({ id }: Props) => {
+  const { data: session } = useSession();
+  const { mutate: mutateDelete, isPending } = useMutation({
+    mutationFn: deleteProduct,
+    throwOnError: true,
+  });
+
+  const router = useRouter();
+
+  const onHandleDelete = () => {
+    mutateDelete(
+      // @ts-ignore
+      { id, token: session?.token.id_token },
+      {
+        onSuccess: () => router.push('/products'),
+      }
+    );
+  };
+
+  if (!session) return null;
+  return (
+    <Button isLoading={isPending} onClick={onHandleDelete}>
+      Delete Product
+    </Button>
+  );
+};
diff --git a/components/products/ImageUploads.tsx b/components/products/ImageUploads.tsx
@@ -6,6 +6,7 @@ import { postImages } from '@/fetch-queries/products/post-image';
 import { useSession } from 'next-auth/react';
 import { Button } from '@nextui-org/react';
 import ArrowUpOnSquareIcon from '@heroicons/react/20/solid/ArrowUpOnSquareStackIcon';
+import { useRouter } from 'next/navigation';
 
 interface Props {
   productId: string;
@@ -16,6 +17,7 @@ export const ImageUploads = ({ productId }: Props) => {
     throwOnError: true,
   });
   const { data: session } = useSession();
+  const router = useRouter();
 
   const [files, setFiles] = useState<File[]>([]);
   const onDrop = useCallback((acceptedFiles: File[]) => {
@@ -34,12 +36,20 @@ export const ImageUploads = ({ productId }: Props) => {
       formdata.append('files', file);
     }
 
-    mutateUpload({
-      id: productId,
-      files: formdata,
-      // @ts-ignore
-      token: session?.token.id_token,
-    });
+    mutateUpload(
+      {
+        id: productId,
+        files: formdata,
+        // @ts-ignore
+        token: session?.token.id_token,
+      },
+      {
+        onSuccess: () => {
+          router.refresh();
+          setFiles([]);
+        },
+      }
+    );
   };
 
   return (
@@ -53,11 +63,26 @@ export const ImageUploads = ({ productId }: Props) => {
         <input {...getInputProps()} />
         {isDragActive ? (
           <p>Drop the files here</p>
+        ) : files.length > 0 ? (
+          <div>
+            <p>{files.length} file(s)</p>
+            <ul>
+              {files.map((file) => (
+                <li key={file.name}>{file.name}</li>
+              ))}
+            </ul>
+          </div>
         ) : (
           <ArrowUpOnSquareIcon width={25} />
         )}
       </div>
-      <Button onClick={onHandleUpload}>Upload images</Button>
+      <Button
+        isLoading={isPending}
+        isDisabled={files.length === 0}
+        onClick={onHandleUpload}
+      >
+        Upload images
+      </Button>
     </div>
   );
 };
diff --git a/components/products/ProductForm.tsx b/components/products/ProductForm.tsx
@@ -72,7 +72,12 @@ export const ProductForm = ({ initialValues }: { initialValues?: Inputs }) => {
           token: session?.token.id_token,
           data: { name: data.name, stores: data.stores, id: initialValues.id },
         },
-        { onSuccess: () => router.push('/products') }
+        {
+          onSuccess: () => {
+            router.refresh();
+            router.push('/products');
+          },
+        }
       );
     } else {
       mutateAdd(
@@ -81,12 +86,16 @@ export const ProductForm = ({ initialValues }: { initialValues?: Inputs }) => {
           token: session?.token.id_token,
           data: { name: data.name, stores: data.stores },
         },
-        { onSuccess: () => router.push('/products') }
+        {
+          onSuccess: () => {
+            router.refresh();
+            router.push('/products');
+          },
+        }
       );
     }
   };
 
-  console.log(initialValues);
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <ControlledInput

diff --git a/fetch-queries/products/delete-product.ts b/fetch-queries/products/delete-product.ts
@@ -0,0 +1,25 @@
+export async function deleteProduct({
+  id,
+  token,
+}: {
+  id: string;
+  token: string;
+}) {
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_BACKEND_URL}/products/${id}`,
+    {
+      method: 'DELETE',
+      headers: {
+        Authorization: token,
+      },
+    }
+  );
+
+  if (!response.ok) {
+    const data: { message: string } = await response.json();
+    console.error(data);
+    throw new Error(data.message || 'An error occurred');
+  }
+  const data = await response.json();
+  return data;
+}
diff --git a/fetch-queries/products/get-product.ts b/fetch-queries/products/get-product.ts
@@ -59,9 +59,9 @@ export async function getProduct({ id }: { id: string }) {
   );
 
   if (!response.ok) {
-    const data: { message: string } = await response.json();
+    const data: { detail: string } = await response.json();
     console.error(data);
-    throw new Error(data.message || 'An error occurred');
+    throw new Error(data.detail || 'An error occurred');
   }
   const data: Response = await response.json();
   return data;