fix/improved error handling in blocks

.changeset/major-chefs-cough.md

@@ -0,0 +1,14 @@
+---
+'@o2s/blocks.notification-details': minor
+'@o2s/blocks.notification-list': minor
+'@o2s/blocks.article-search': minor
+'@o2s/blocks.orders-summary': minor
+'@o2s/blocks.order-details': minor
+'@o2s/blocks.invoice-list': minor
+'@o2s/blocks.service-list': minor
+'@o2s/blocks.ticket-list': minor
+'@o2s/blocks.order-list': minor
+'@o2s/blocks.category': minor
+---
+
+improved error handling

packages/blocks/article-search/src/frontend/ArticleSearch.client.tsx

@@ -4,6 +4,10 @@ import { createNavigation } from 'next-intl/navigation';
 import React, { useState, useTransition } from 'react';
 import { debounce } from 'throttle-debounce';
 
+import { toast } from '@o2s/ui/hooks/use-toast';
+
+import { useGlobalContext } from '@o2s/ui/providers/GlobalProvider';
+
 import { Autocomplete } from '@o2s/ui/components/Autocomplete';
 import { Container } from '@o2s/ui/components/Container';
 
@@ -25,18 +29,33 @@ export const ArticleSearchPure: React.FC<ArticleSearchPureProps> = ({
 }) => {
     const { useRouter } = createNavigation(routing);
     const router = useRouter();
+    const { labels } = useGlobalContext();
 
     const [suggestions, setSuggestions] = useState<Model.ArticleList['articles']>([]);
     const [isPending, startTransition] = useTransition();
 
     const getSuggestions = debounce(300, async (value: string) => {
         startTransition(async () => {
-            const result = await sdk.blocks.searchArticles(
-                { query: value, limit: 5, offset: 0, category },
-                { 'x-locale': locale },
-                accessToken,
-            );
-            if (result.articles) setSuggestions(result.articles);
+            try {
+                const result = await sdk.blocks.searchArticles(
+                    { query: value, limit: 5, offset: 0, category },
+                    { 'x-locale': locale },
+                    accessToken,
+                );
+                if (result.articles) {
+                    setSuggestions(result.articles);
+                } else {
+                    setSuggestions([]);
+                }
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                    duration: 60000,
+                });
+                setSuggestions([]);
+            }
         });
     });
 

packages/blocks/article-search/src/frontend/ArticleSearch.server.tsx

@@ -24,6 +24,7 @@ export const ArticleSearch: React.FC<ArticleSearchProps> = async ({
             { 'x-locale': locale },
             accessToken,
         );
+
         return (
             <ArticleSearchDynamic
                 {...data}

packages/blocks/category/src/frontend/Category.client.tsx

@@ -3,6 +3,10 @@
 import { createNavigation } from 'next-intl/navigation';
 import React, { useState, useTransition } from 'react';
 
+import { toast } from '@o2s/ui/hooks/use-toast';
+
+import { useGlobalContext } from '@o2s/ui/providers/GlobalProvider';
+
 import { BlogCard } from '@o2s/ui/components/Cards/BlogCard';
 import { Container } from '@o2s/ui/components/Container';
 import { ContentSection } from '@o2s/ui/components/ContentSection';
@@ -28,6 +32,7 @@ export const CategoryPure: React.FC<CategoryPureProps> = ({
     ...component
 }) => {
     const { Link: LinkComponent } = createNavigation(routing);
+    const { labels } = useGlobalContext();
 
     const initialArticles: Request.GetCategoryBlockArticlesQuery = {
         id: component.id,
@@ -42,11 +47,19 @@ export const CategoryPure: React.FC<CategoryPureProps> = ({
 
     const handlePagination = (data: Partial<Request.GetCategoryBlockArticlesQuery>) => {
         startTransition(async () => {
-            const newArticles = { ...articles, ...data };
-            const newData = await sdk.blocks.getCategoryArticles(newArticles, { 'x-locale': locale }, accessToken);
+            try {
+                const newArticles = { ...articles, ...data };
+                const newData = await sdk.blocks.getCategoryArticles(newArticles, { 'x-locale': locale }, accessToken);
 
-            setArticles(newArticles);
-            setData(newData);
+                setArticles(newArticles);
+                setData(newData);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };
 

packages/blocks/invoice-list/src/frontend/InvoiceList.client.tsx

@@ -48,20 +48,36 @@ export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, access
 
     const handleFilter = (data: Partial<Request.GetInvoiceListBlockQuery>) => {
         startTransition(async () => {
-            const newFilters = { ...filters, ...data };
-            const newData = await sdk.blocks.getInvoiceList(newFilters, { 'x-locale': locale }, accessToken);
-
-            setFilters(newFilters);
-            setData(newData);
+            try {
+                const newFilters = { ...filters, ...data };
+                const newData = await sdk.blocks.getInvoiceList(newFilters, { 'x-locale': locale }, accessToken);
+
+                setFilters(newFilters);
+                setData(newData);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };
 
     const handleReset = () => {
         startTransition(async () => {
-            const newData = await sdk.blocks.getInvoiceList(initialFilters, { 'x-locale': locale }, accessToken);
-
-            setFilters(initialFilters);
-            setData(newData);
+            try {
+                const newData = await sdk.blocks.getInvoiceList(initialFilters, { 'x-locale': locale }, accessToken);
+
+                setFilters(initialFilters);
+                setData(newData);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };
 

packages/blocks/notification-details/src/frontend/NotificationDetails.client.tsx

@@ -4,6 +4,10 @@ import React, { useEffect } from 'react';
 
 import { Mappings } from '@o2s/utils.frontend';
 
+import { toast } from '@o2s/ui/hooks/use-toast';
+
+import { useGlobalContext } from '@o2s/ui/providers/GlobalProvider';
+
 import { Container } from '@o2s/ui/components/Container';
 import { RichText } from '@o2s/ui/components/RichText';
 
@@ -17,23 +21,39 @@ import { NotificationDetailsPureProps } from './NotificationDetails.types';
 
 export const NotificationDetailsPure: React.FC<NotificationDetailsPureProps> = ({ locale, ...component }) => {
     const { data: notification } = component;
+    const { labels } = useGlobalContext();
 
     useEffect(() => {
         const markAsViewed = async () => {
-            await sdk.blocks.markNotificationAs(
-                {
-                    id: component.id,
-                    status: 'VIEWED',
-                },
-                { 'x-locale': locale },
-                component.accessToken,
-            );
+            try {
+                await sdk.blocks.markNotificationAs(
+                    {
+                        id: component.id,
+                        status: 'VIEWED',
+                    },
+                    { 'x-locale': locale },
+                    component.accessToken,
+                );
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         };
 
         if (notification.status.value === 'UNVIEWED') {
             markAsViewed();
         }
-    }, [component.accessToken, component.id, locale, notification.status.value]);
+    }, [
+        component.accessToken,
+        component.id,
+        labels.errors.requestError.content,
+        labels.errors.requestError.title,
+        locale,
+        notification.status.value,
+    ]);
 
     return (
         <div className="w-full">

packages/blocks/notification-list/src/frontend/NotificationList.client.tsx

@@ -8,6 +8,10 @@ import { Mappings } from '@o2s/utils.frontend';
 
 import { cn } from '@o2s/ui/lib/utils';
 
+import { toast } from '@o2s/ui/hooks/use-toast';
+
+import { useGlobalContext } from '@o2s/ui/providers/GlobalProvider';
+
 import type { DataListColumnConfig } from '@o2s/ui/components/DataList';
 import { DataView } from '@o2s/ui/components/DataView';
 import { FiltersSection } from '@o2s/ui/components/Filters';
@@ -31,6 +35,7 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
     ...component
 }) => {
     const { Link: LinkComponent } = createNavigation(routing);
+    const { labels } = useGlobalContext();
 
     const initialFilters: Request.GetNotificationListBlockQuery = {
         id: component.id,
@@ -51,20 +56,40 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
 
     const handleFilter = (data: Partial<Request.GetNotificationListBlockQuery>) => {
         startTransition(async () => {
-            const newFilters = { ...filters, ...data };
-            const newData = await sdk.blocks.getNotificationList(newFilters, { 'x-locale': locale }, accessToken);
-
-            setFilters(newFilters);
-            setData(newData);
+            try {
+                const newFilters = { ...filters, ...data };
+                const newData = await sdk.blocks.getNotificationList(newFilters, { 'x-locale': locale }, accessToken);
+
+                setFilters(newFilters);
+                setData(newData);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };
 
     const handleReset = () => {
         startTransition(async () => {
-            const newData = await sdk.blocks.getNotificationList(initialFilters, { 'x-locale': locale }, accessToken);
-
-            setFilters(initialFilters);
-            setData(newData);
+            try {
+                const newData = await sdk.blocks.getNotificationList(
+                    initialFilters,
+                    { 'x-locale': locale },
+                    accessToken,
+                );
+
+                setFilters(initialFilters);
+                setData(newData);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };
 

packages/blocks/order-details/src/frontend/OrderDetails.client.tsx

@@ -11,6 +11,10 @@ import { Orders } from '@o2s/framework/modules';
 
 import { cn } from '@o2s/ui/lib/utils';
 
+import { toast } from '@o2s/ui/hooks/use-toast';
+
+import { useGlobalContext } from '@o2s/ui/providers/GlobalProvider';
+
 import { ActionList } from '@o2s/ui/components/ActionList';
 import { InfoCard } from '@o2s/ui/components/Cards/InfoCard';
 import { DynamicIcon } from '@o2s/ui/components/DynamicIcon';
@@ -99,6 +103,7 @@ export const OrderDetailsPure: React.FC<Readonly<OrderDetailsPureProps>> = ({
     ...component
 }) => {
     const { Link: LinkComponent } = createNavigation(routing);
+    const { labels } = useGlobalContext();
 
     const initialFilters: Request.GetOrderDetailsBlockQuery = {
         id: component.id,
@@ -114,34 +119,50 @@ export const OrderDetailsPure: React.FC<Readonly<OrderDetailsPureProps>> = ({
 
     const [isPending, startTransition] = useTransition();
 
-    const handleFilter = (data: Partial<any>) => {
+    const handleFilter = (data: Partial<Request.GetOrderDetailsBlockQuery>) => {
         startTransition(async () => {
-            const newFilters = { ...filters, ...data };
-            const newData = await sdk.blocks.getOrderDetails(
-                {
-                    id: orderId,
-                },
-                newFilters,
-                { 'x-locale': locale },
-                accessToken,
-            );
-            setFilters(newFilters);
-            setItems(newData.productList.products.data);
+            try {
+                const newFilters = { ...filters, ...data };
+                const newData = await sdk.blocks.getOrderDetails(
+                    {
+                        id: orderId,
+                    },
+                    newFilters,
+                    { 'x-locale': locale },
+                    accessToken,
+                );
+                setFilters(newFilters);
+                setItems(newData.productList.products.data);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };
 
     const handleReset = () => {
         startTransition(async () => {
-            const newData = await sdk.blocks.getOrderDetails(
-                {
-                    id: orderId,
-                },
-                initialFilters,
-                { 'x-locale': locale },
-                accessToken,
-            );
-            setFilters(initialFilters);
-            setItems(newData.productList.products.data);
+            try {
+                const newData = await sdk.blocks.getOrderDetails(
+                    {
+                        id: orderId,
+                    },
+                    initialFilters,
+                    { 'x-locale': locale },
+                    accessToken,
+                );
+                setFilters(initialFilters);
+                setItems(newData.productList.products.data);
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
         });
     };