Add error ui for product edit

minsoeaung · Nov 22, 2023 · 28d9958 · 28d9958
1 parent dcadd43
commit 28d9958
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 29 deletions.
diff --git a/API/Middlewares/ExceptionMiddleware.cs b/API/Middlewares/ExceptionMiddleware.cs
@@ -31,8 +31,9 @@ public async Task InvokeAsync(HttpContext context)
             var response = new ProblemDetails()
             {
                 Status = StatusCodes.Status500InternalServerError,
-                Detail = _env.IsDevelopment() ? ex.StackTrace : null,
+                Detail = _env.IsDevelopment() ? ex.StackTrace : "Something went wrong.",
                 Title = ex.Message,
+                Type = "https://datatracker.ietf.org/doc/html/rfc7231#section-6.6.1"
             };
 
             var options = new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase };

diff --git a/Client/src/api/apiClient.tsx b/Client/src/api/apiClient.tsx
@@ -43,15 +43,15 @@ ApiClient.interceptors.response.use(
                                 resolve(response);
                             })
                             .catch((error) => {
-                                reject(error);
+                                reject(error.response?.data);
                             });
                     })
                     .catch((error) => {
-                        reject(error);
+                        reject(error.response?.data);
                     });
             });
         } else {
-            return Promise.reject(error);
+            return Promise.reject(error.response?.data);
         }
     }
 );
diff --git a/Client/src/components/ErrorDisplay.tsx b/Client/src/components/ErrorDisplay.tsx
@@ -0,0 +1,21 @@
+import { Alert, AlertDescription, AlertIcon, AlertTitle, VStack } from '@chakra-ui/react';
+import { ApiError } from '../types/apiError.ts';
+
+export const ErrorDisplay = ({ error }: { error: ApiError }) => {
+    return (
+        <Alert status="error">
+            <AlertIcon />
+            <VStack alignItems="start" spacing={0}>
+                <AlertTitle>{error?.title || 'Something went wrong'}</AlertTitle>
+                {error?.detail ? (
+                    <AlertDescription>{error.detail}</AlertDescription>
+                ) : !!error?.errors ? (
+                    Object.keys(error.errors).map((key) => {
+                        const errors = error.errors![key];
+                        return errors.map((error) => <AlertDescription>{error}</AlertDescription>);
+                    })
+                ) : null}
+            </VStack>
+        </Alert>
+    );
+};
diff --git a/Client/src/components/Header.tsx b/Client/src/components/Header.tsx
@@ -191,13 +191,17 @@ const Header = () => {
                                             Cart {!!cart?.cartItems.length && `(${cart.cartItems.length})`}
                                         </MenuItem>
                                         {user.roles.some((role) => ['Admin', 'Super'].includes(role)) && (
-                                            <MenuItem
-                                                as={Link}
-                                                to="/inventory?pageSize=10"
-                                                icon={<Icon as={MdOutlineInventory2} />}
-                                            >
-                                                Inventory
-                                            </MenuItem>
+                                            <>
+                                                <MenuDivider />
+                                                <MenuItem
+                                                    as={Link}
+                                                    to="/inventory?pageSize=10"
+                                                    icon={<Icon as={MdOutlineInventory2} />}
+                                                    fontWeight="bold"
+                                                >
+                                                    Inventory
+                                                </MenuItem>
+                                            </>
                                         )}
                                         <MenuDivider />
                                         <MenuItem onClick={logout} color="red.500">

diff --git a/Client/src/hooks/mutations/useProductCUD.ts b/Client/src/hooks/mutations/useProductCUD.ts
@@ -90,6 +90,9 @@ export const useProductCUD = () => {
 
                 if (data.type === 'UPDATE') await queryClient.invalidateQueries([PRODUCT_DETAILS, String(data.id)]);
             },
+            // onError: (error) => {
+            //     console.log(error, 'from query');
+            // },
         }
     );
 };
diff --git a/Client/src/pages/Inventory/Details.tsx b/Client/src/pages/Inventory/Details.tsx
@@ -6,6 +6,7 @@ import {
     AlertDialogFooter,
     AlertDialogHeader,
     AlertDialogOverlay,
+    Box,
     Button,
     Card,
     CardBody,
@@ -42,6 +43,8 @@ import { useBrands } from '../../hooks/queries/useBrands.ts';
 import { useProductCUD } from '../../hooks/mutations/useProductCUD.ts';
 import { ImageInputWithPreview } from '../../components/ImageInputWithPreview.tsx';
 import { BRAND_IMAGES, CATEGORY_IMAGES, PRODUCT_IMAGES } from '../../constants/fileUrls.ts';
+import { ErrorDisplay } from '../../components/ErrorDisplay.tsx';
+import { ApiError } from '../../types/apiError.ts';
 
 const validType = ['category', 'brand', 'product'] as const;
 
@@ -308,6 +311,14 @@ const ProductEdit = ({ id }: { id: number }) => {
                     )
                 )}
             </Flex>
+            {!!mutation.error && (
+                <>
+                    <br />
+                    <Box>
+                        <ErrorDisplay error={mutation.error as ApiError} />
+                    </Box>
+                </>
+            )}
             <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} isCentered>
                 <AlertDialogOverlay>
                     <AlertDialogContent>

diff --git a/Client/src/pages/User/Cart/index.tsx b/Client/src/pages/User/Cart/index.tsx
@@ -1,31 +1,18 @@
-import {
-    AbsoluteCenter,
-    Box,
-    Card,
-    Center,
-    Flex,
-    Heading,
-    HStack,
-    Link,
-    Stack,
-    useColorModeValue,
-} from '@chakra-ui/react';
+import { AbsoluteCenter, Box, Card, Flex, Heading, HStack, Link, Stack, useColorModeValue } from '@chakra-ui/react';
 import { useCart } from '../../../hooks/queries/useCart.ts';
 import { CartItem } from './CartItem.tsx';
 import { CartOrderSummary } from './CartOrderSummary.tsx';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import AntdSpin from '../../../components/AntdSpin';
 import { Fallback } from '../../../components/Fallback';
+import { ErrorDisplay } from '../../../components/ErrorDisplay.tsx';
+import { ApiError } from '../../../types/apiError.ts';
 
 const CartPage = () => {
-    const { isLoading, isFetching, data, isError } = useCart();
+    const { isLoading, isFetching, data, isError, error } = useCart();
 
     if (isError) {
-        return (
-            <Center mt={10}>
-                <p>Error loading cart items.</p>
-            </Center>
-        );
+        return <ErrorDisplay error={error as unknown as ApiError} />;
     }
 
     if (isLoading) {

diff --git a/Client/src/types/apiError.ts b/Client/src/types/apiError.ts
@@ -0,0 +1,7 @@
+export type ApiError = {
+    status: number;
+    detail: string | undefined;
+    title: string;
+    type: string;
+    errors: Record<string, string[]> | undefined;
+};