From 5a9523756fc75d074764076c38d9d8982aac6171 Mon Sep 17 00:00:00 2001
From: Sasha <64744993+r1tsuu@users.noreply.github.com>
Date: Fri, 17 Jan 2025 21:47:42 +0200
Subject: [PATCH] fix(ui): replace hard coded path to API with `serverURL` and
 `routes.api` (#10618)

Fixes https://github.com/payloadcms/payload/issues/10617
---
 packages/ui/src/providers/Locale/index.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/providers/Locale/index.tsx b/packages/ui/src/providers/Locale/index.tsx
index 79b57e2aa68..26ec89a32d7 100644
--- a/packages/ui/src/providers/Locale/index.tsx
+++ b/packages/ui/src/providers/Locale/index.tsx
@@ -19,8 +19,9 @@ export const LocaleLoadingContext = createContext({
 
 const fetchPreferences = async <T extends Record<string, unknown> | string>(
   key: string,
+  baseURL: string,
 ): Promise<{ id: string; value: T }> =>
-  await fetch(`/api/payload-preferences/${key}`, {
+  await fetch(`${baseURL}/payload-preferences/${key}`, {
     credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
@@ -38,7 +39,11 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
   locale: initialLocaleFromPrefs,
 }) => {
   const {
-    config: { localization = false },
+    config: {
+      localization = false,
+      routes: { api: apiRoute },
+      serverURL,
+    },
   } = useConfig()
 
   const { user } = useAuth()
@@ -80,6 +85,8 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
     prevLocale.current = locale
   }, [locale])
 
+  const fetchURL = `${serverURL}${apiRoute}`
+
   useEffect(() => {
     /**
      * This effect should only run when `localeFromParams` changes, i.e. when the user clicks an anchor link
@@ -90,7 +97,7 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
       if (localization && user?.id) {
         const localeToUse =
           localeFromParams ||
-          (await fetchPreferences<Locale['code']>('locale')?.then((res) => res.value)) ||
+          (await fetchPreferences<Locale['code']>('locale', fetchURL)?.then((res) => res.value)) ||
           defaultLocale
 
         const newLocale =
@@ -102,7 +109,7 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
     }
 
     void resetLocale()
-  }, [defaultLocale, getPreference, localization, localeFromParams, user?.id])
+  }, [defaultLocale, getPreference, localization, fetchURL, localeFromParams, user?.id])
 
   return (
     <LocaleContext.Provider value={locale}>