Get localized error messages.

src/components/common/ConfirmationForm.tsx

@@ -21,10 +21,10 @@ export function ConfirmationForm({
   onConfirm,
   onClose,
 }: ConfirmationFormProps) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   return (
-    <Form onSubmit={onConfirm} error={error}>
+    <Form onSubmit={onConfirm} error={getErrorMessage(error)}>
       <Row marginY="4">{message}</Row>
       <FormButtons>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>

src/components/common/LoadingPanel.tsx

@@ -5,7 +5,7 @@ import { Empty } from '@/components/common/Empty';
 
 export interface LoadingPanelProps extends ColumnProps {
   data?: any;
-  error?: Error;
+  error?: unknown;
   isEmpty?: boolean;
   isLoading?: boolean;
   isFetching?: boolean;

src/components/common/TypeConfirmationForm.tsx

@@ -25,14 +25,13 @@ export function TypeConfirmationForm({
   onConfirm?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
-
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   if (!confirmationValue) {
     return null;
   }
 
   return (
-    <Form onSubmit={onConfirm} error={error}>
+    <Form onSubmit={onConfirm} error={getErrorMessage(error)}>
       <p>
         {formatMessage(messages.actionConfirmation, {
           confirmation: confirmationValue,

src/components/hooks/queries/useUpdateQuery.ts

@@ -1,6 +1,6 @@
+import { useToast } from '@umami/react-zen';
 import { useApi } from '../useApi';
 import { useModified } from '../useModified';
-import { useToast } from '@umami/react-zen';
 
 export function useUpdateQuery(path: string, params?: Record<string, any>) {
   const { post, useMutation } = useApi();

src/components/hooks/useApi.ts

@@ -2,23 +2,18 @@ import { useCallback } from 'react';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { getClientAuthToken } from '@/lib/client';
 import { SHARE_TOKEN_HEADER } from '@/lib/constants';
-import { httpGet, httpPost, httpPut, httpDelete, FetchResponse } from '@/lib/fetch';
+import { httpGet, httpPost, httpPut, httpDelete, FetchResponse, ErrorResponse } from '@/lib/fetch';
 import { useApp } from '@/store/app';
 
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
 async function handleResponse(res: FetchResponse): Promise<any> {
-  if (res.error) {
-    const { message, code } = res?.error?.error || {};
-    return Promise.reject(new Error(code || message || 'Unexpected error.'));
+  if (!res.ok) {
+    return Promise.reject(res.data?.error as ErrorResponse);
   }
   return Promise.resolve(res.data);
 }
 
-function handleError(err: Error | string) {
-  return Promise.reject((err as Error)?.message || err || null);
-}
-
 export function useApi() {
   const shareToken = useApp(selector);
 
@@ -39,36 +34,28 @@ export function useApi() {
   return {
     get: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpGet(getUrl(url), params, getHeaders(headers))
-          .then(handleResponse)
-          .catch(handleError);
+        return httpGet(getUrl(url), params, getHeaders(headers)).then(handleResponse);
       },
       [httpGet],
     ),
 
     post: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpPost(getUrl(url), params, getHeaders(headers))
-          .then(handleResponse)
-          .catch(handleError);
+        return httpPost(getUrl(url), params, getHeaders(headers)).then(handleResponse);
       },
       [httpPost],
     ),
 
     put: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpPut(getUrl(url), params, getHeaders(headers))
-          .then(handleResponse)
-          .catch(handleError);
+        return httpPut(getUrl(url), params, getHeaders(headers)).then(handleResponse);
       },
       [httpPut],
     ),
 
     del: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpDelete(getUrl(url), params, getHeaders(headers))
-          .then(handleResponse)
-          .catch(handleError);
+        return httpDelete(getUrl(url), params, getHeaders(headers)).then(handleResponse);
       },
       [httpDelete],
     ),

src/components/hooks/useMessages.ts

@@ -10,6 +10,16 @@ export function useMessages() {
     return message ? formatMessage(message) : id;
   };
 
+  const getErrorMessage = (error: unknown) => {
+    if (!error) {
+      return undefined;
+    }
+
+    const code = error?.['code'];
+
+    return code ? getMessage(code) : error?.['message'] || 'Unknown error';
+  };
+
   const formatMessage = (
     descriptor: {
       id: string;
@@ -21,5 +31,5 @@ export function useMessages() {
     return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
   };
 
-  return { formatMessage, messages, labels, getMessage };
+  return { formatMessage, messages, labels, getMessage, getErrorMessage };
 }

src/components/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { buildUrl } from '@/lib/url';
+import { buildPath } from '@/lib/url';
 
 export function useNavigation() {
   const router = useRouter();
@@ -11,15 +11,15 @@ export function useNavigation() {
   const [queryParams, setQueryParams] = useState(Object.fromEntries(searchParams));
 
   const updateParams = (params?: Record<string, string | number>) => {
-    return buildUrl(pathname, { ...queryParams, ...params });
+    return buildPath(pathname, { ...queryParams, ...params });
   };
 
   const replaceParams = (params?: Record<string, string | number>) => {
-    return buildUrl(pathname, params);
+    return buildPath(pathname, params);
   };
 
   const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
-    return buildUrl(
+    return buildPath(
       teamId ? `/teams/${teamId}${path}` : path,
       params === false ? {} : { ...queryParams, ...params },
     );