Get localized error messages.

package.components.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/components",
-  "version": "0.121.0",
+  "version": "0.122.0",
   "description": "Umami React components.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

src/app/(main)/admin/users/UserAddForm.tsx

@@ -14,7 +14,7 @@ import { ROLES } from '@/lib/constants';
 
 export function UserAddForm({ onSave, onClose }) {
   const { mutate, error, isPending } = useUpdateQuery(`/users`);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -26,7 +26,7 @@ export function UserAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField
         label={formatMessage(labels.username)}
         name="username"

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -29,7 +29,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user}>
+    <Form onSubmit={handleSubmit} error={getMessage(error?.['code'])} values={user}>
       <FormField name="username" label={formatMessage(labels.username)}>
         <TextField data-test="input-username" />
       </FormField>
@@ -37,7 +37,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
         name="password"
         label={formatMessage(labels.password)}
         rules={{
-          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
         }}
       >
         <PasswordField autoComplete="new-password" data-test="input-password" />

src/app/(main)/links/LinkDeleteButton.tsx

@@ -15,7 +15,7 @@ export function LinkDeleteButton({
   name: string;
   onSave?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, isPending, error, touch } = useDeleteQuery(`/links/${linkId}`);
 
   const handleConfirm = (close: () => void) => {
@@ -37,7 +37,7 @@ export function LinkDeleteButton({
               target: name,
             })}
             isLoading={isPending}
-            error={error}
+            error={getErrorMessage(error)}
             onConfirm={handleConfirm.bind(null, close)}
             onClose={close}
             buttonLabel={formatMessage(labels.delete)}

src/app/(main)/links/LinkEditForm.tsx

@@ -32,7 +32,7 @@ export function LinkEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     linkId ? `/links/${linkId}` : '/links',
     {
@@ -82,7 +82,7 @@ export function LinkEditForm({
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={{ slug, ...data }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ slug, ...data }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/pixels/PixelDeleteButton.tsx

@@ -13,7 +13,7 @@ export function PixelDeleteButton({
   name: string;
   onSave?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, isPending, error } = useDeleteQuery(`/pixels/${pixelId}`);
   const { touch } = useModified();
 
@@ -36,7 +36,7 @@ export function PixelDeleteButton({
               target: name,
             })}
             isLoading={isPending}
-            error={error}
+            error={getErrorMessage(error)}
             onConfirm={handleConfirm.bind(null, close)}
             onClose={close}
             buttonLabel={formatMessage(labels.delete)}

src/app/(main)/pixels/PixelEditForm.tsx

@@ -31,7 +31,7 @@ export function PixelEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     pixelId ? `/pixels/${pixelId}` : '/pixels',
     {
@@ -74,7 +74,7 @@ export function PixelEditForm({
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={{ slug, ...data }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ slug, ...data }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/settings/profile/PasswordEditForm.tsx

@@ -9,7 +9,7 @@ import {
 import { useMessages, useUpdateQuery } from '@/components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useUpdateQuery('/me/password');
 
   const handleSubmit = async (data: any) => {
@@ -29,7 +29,7 @@ export function PasswordEditForm({ onSave, onClose }) {
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField
         label={formatMessage(labels.currentPassword)}
         name="currentPassword"
@@ -42,7 +42,7 @@ export function PasswordEditForm({ onSave, onClose }) {
         label={formatMessage(labels.newPassword)}
         rules={{
           required: 'Required',
-          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
         }}
       >
         <PasswordField autoComplete="new-password" />
@@ -52,7 +52,7 @@ export function PasswordEditForm({ onSave, onClose }) {
         label={formatMessage(labels.confirmPassword)}
         rules={{
           required: formatMessage(labels.required),
-          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
           validate: samePassword,
         }}
       >

src/app/(main)/teams/TeamAddForm.tsx

@@ -9,7 +9,7 @@ import {
 } from '@umami/react-zen';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useUpdateQuery('/teams');
 
   const handleSubmit = async (data: any) => {
@@ -22,7 +22,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>

src/app/(main)/teams/TeamJoinForm.tsx

@@ -9,7 +9,7 @@ import {
 import { useMessages, useModified, useUpdateQuery } from '@/components/hooks';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, error } = useUpdateQuery('/teams/join');
   const { touch } = useModified();
 
@@ -24,7 +24,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField
         label={formatMessage(labels.accessCode)}
         name="accessCode"

src/app/(main)/teams/TeamLeaveForm.tsx

@@ -14,7 +14,7 @@ export function TeamLeaveForm({
   onSave: () => void;
   onClose: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useDeleteQuery(`/teams/${teamId}/users/${userId}`);
   const { touch } = useModified();
 
@@ -37,7 +37,7 @@ export function TeamLeaveForm({
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}
-      error={error}
+      error={getErrorMessage(error)}
     />
   );
 }

src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx

@@ -12,7 +12,7 @@ export function TeamDeleteForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { labels, formatMessage } = useMessages();
+  const { labels, formatMessage, getErrorMessage } = useMessages();
   const { mutate, error, isPending, touch } = useDeleteQuery(`/teams/${teamId}`);
 
   const handleConfirm = async () => {
@@ -31,7 +31,7 @@ export function TeamDeleteForm({
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}
-      error={error}
+      error={getErrorMessage(error)}
       buttonLabel={formatMessage(labels.delete)}
       buttonVariant="danger"
     />

src/app/(main)/teams/[teamId]/TeamEditForm.tsx

@@ -21,7 +21,7 @@ export function TeamEditForm({
   onSave?: () => void;
 }) {
   const team = useTeam();
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(`/teams/${teamId}`);
 
@@ -37,7 +37,7 @@ export function TeamEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ ...team }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/teams/[teamId]/TeamMemberEditForm.tsx

@@ -24,7 +24,7 @@ export function TeamMemberEditForm({
   onClose?: () => void;
 }) {
   const { mutate, error, isPending } = useUpdateQuery(`/teams/${teamId}/users/${userId}`);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -36,7 +36,7 @@ export function TeamMemberEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ role }}>
       <FormField
         name="role"
         rules={{ required: formatMessage(labels.required) }}

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -13,7 +13,7 @@ export function WebsiteMetricsBar({
   compareMode?: boolean;
 }) {
   const { dateRange } = useDateRange(websiteId);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(websiteId);
   const isAllTime = dateRange.value === 'all';
 
@@ -65,7 +65,7 @@ export function WebsiteMetricsBar({
       data={metrics}
       isLoading={isLoading}
       isFetching={isFetching}
-      error={error}
+      error={getErrorMessage(error)}
       minHeight="136px"
     >
       <MetricsBar>

src/app/(main)/websites/[websiteId]/cohorts/CohortEditForm.tsx

@@ -31,7 +31,7 @@ export function CohortEditForm({
   onClose?: () => void;
 }) {
   const { data } = useWebsiteCohortQuery(websiteId, cohortId);
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     `/websites/${websiteId}/segments${cohortId ? `/${cohortId}` : ''}`,
@@ -60,7 +60,11 @@ export function CohortEditForm({
   };
 
   return (
-    <Form error={error} onSubmit={handleSubmit} defaultValues={data || defaultValues}>
+    <Form
+      error={getErrorMessage(error)}
+      onSubmit={handleSubmit}
+      defaultValues={data || defaultValues}
+    >
       {({ watch }) => {
         const type = watch('parameters.action.type');
 

src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx

@@ -28,7 +28,7 @@ export function SegmentEditForm({
   onClose?: () => void;
 }) {
   const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     `/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
@@ -53,7 +53,11 @@ export function SegmentEditForm({
   }
 
   return (
-    <Form error={error} onSubmit={handleSubmit} defaultValues={data || { parameters: { filters } }}>
+    <Form
+      onSubmit={handleSubmit}
+      defaultValues={data || { parameters: { filters } }}
+      error={getErrorMessage(error)}
+    >
       <FormField
         name="name"
         label={formatMessage(labels.name)}

src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx

@@ -4,7 +4,7 @@ import { DOMAIN_REGEX } from '@/lib/constants';
 
 export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
   const website = useWebsite();
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
 
   const handleSubmit = async (data: any) => {
@@ -18,7 +18,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={website}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} values={website}>
       <FormField name="id" label={formatMessage(labels.websiteId)}>
         <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
       </FormField>

src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx

@@ -23,7 +23,7 @@ export interface WebsiteShareFormProps {
 }
 
 export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: WebsiteShareFormProps) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const [id, setId] = useState(shareId);
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
 
@@ -52,7 +52,7 @@ export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: Websit
   };
 
   return (
-    <Form onSubmit={handleSave} error={error} values={{ url }}>
+    <Form onSubmit={handleSave} error={getErrorMessage(error)} values={{ url }}>
       <Column gap>
         <Switch isSelected={!!id} onChange={handleSwitch}>
           {formatMessage(labels.enableShareUrl)}

src/app/(main)/websites/[websiteId]/settings/WebsiteTransferForm.tsx

@@ -31,7 +31,7 @@ export function WebsiteTransferForm({
   const { user } = useLoginQuery();
   const website = useWebsite();
   const [teamId, setTeamId] = useState<string>(null);
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useUpdateQuery(`/websites/${websiteId}/transfer`);
   const { data: teams, isLoading } = useUserTeamsQuery(user.id);
   const isTeamWebsite = !!website?.teamId;
@@ -68,7 +68,7 @@ export function WebsiteTransferForm({
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={{ teamId }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} values={{ teamId }}>
       <Text>
         {formatMessage(
           isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,

src/app/api/auth/login/route.ts

@@ -4,7 +4,8 @@ import redis from '@/lib/redis';
 import { getUserByUsername } from '@/queries';
 import { json, unauthorized } from '@/lib/response';
 import { parseRequest } from '@/lib/request';
-import { saveAuth, checkPassword } from '@/lib/auth';
+import { saveAuth } from '@/lib/auth';
+import { checkPassword } from '@/lib/password';
 import { secret } from '@/lib/crypto';
 import { ROLES } from '@/lib/constants';
 

src/app/login/LoginForm.tsx

@@ -16,7 +16,7 @@ import { setClientAuthToken } from '@/lib/client';
 import { Logo } from '@/components/icons';
 
 export function LoginForm() {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const router = useRouter();
   const { mutate, error, isPending } = useUpdateQuery('/auth/login');
 
@@ -32,12 +32,12 @@ export function LoginForm() {
   };
 
   return (
-    <Column justifyContent="center" alignItems="center" padding="8" gap="6">
+    <Column justifyContent="center" alignItems="center" gap="6">
       <Icon size="lg">
         <Logo />
       </Icon>
       <Heading>umami</Heading>
-      <Form onSubmit={handleSubmit} error={error}>
+      <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
         <FormField
           label={formatMessage(labels.username)}
           data-test="input-username"
@@ -58,6 +58,7 @@ export function LoginForm() {
           <FormSubmitButton
             data-test="button-submit"
             variant="primary"
+            isLoading={isPending}
             isDisabled={isPending}
             style={{ flex: 1 }}
           >

src/app/login/LoginPage.tsx

@@ -4,7 +4,7 @@ import { LoginForm } from './LoginForm';
 
 export function LoginPage() {
   return (
-    <Column justifyContent="center" alignItems="center" height="100vh" backgroundColor="2">
+    <Column alignItems="center" height="100vh" backgroundColor="2" paddingTop="12">
       <LoginForm />
     </Column>
   );

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 },
     );

src/lib/fetch.ts

@@ -1,4 +1,4 @@
-import { buildUrl } from '@/lib/url';
+import { buildPath } from '@/lib/url';
 
 export interface ErrorResponse {
   error: {
@@ -36,18 +36,17 @@ export async function request(
     return {
       ok: res.ok,
       status: res.status,
-      data: res.ok ? data : undefined,
-      error: res.ok ? undefined : data,
+      data,
     };
   });
 }
 
 export async function httpGet(path: string, params: object = {}, headers: object = {}) {
-  return request('GET', buildUrl(path, params), undefined, headers);
+  return request('GET', buildPath(path, params), undefined, headers);
 }
 
 export async function httpDelete(path: string, params: object = {}, headers: object = {}) {
-  return request('DELETE', buildUrl(path, params), undefined, headers);
+  return request('DELETE', buildPath(path, params), undefined, headers);
 }
 
 export async function httpPost(path: string, params: object = {}, headers: object = {}) {

src/lib/url.ts

@@ -10,9 +10,9 @@ export function getQueryString(params: object = {}): string {
   return searchParams.toString();
 }
 
-export function buildUrl(url: string, params: object = {}): string {
+export function buildPath(path: string, params: object = {}): string {
   const queryString = getQueryString(params);
-  return `${url}${queryString && '?' + queryString}`;
+  return queryString ? `${path}?${queryString}` : path;
 }
 
 export function safeDecodeURI(s: string | undefined | null): string | undefined | null {