API URL fixes (#6381)

- Part of #5697
- Cherry picking just the API fixes

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -19,7 +19,7 @@ import { useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { doClassicLogin, doSimpleLogin } from '../../functions/auth';
-import { useServerApiState } from '../../states/ApiState';
+import { apiUrl, useServerApiState } from '../../states/ApiState';
 
 export function AuthenticationForm() {
   const classicForm = useForm({
@@ -165,7 +165,7 @@ export function RegistrationForm() {
   function handleRegistration() {
     setIsRegistering(true);
     api
-      .post(ApiEndpoints.user_register, registrationForm.values, {
+      .post(apiUrl(ApiEndpoints.user_register), registrationForm.values, {
         headers: { Authorization: '' }
       })
       .then((ret) => {

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -16,7 +16,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { useServerApiState } from '../../states/ApiState';
+import { apiUrl, useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { useUserState } from '../../states/UserState';
 import { CopyButton } from '../items/CopyButton';
@@ -47,7 +47,7 @@ export function AboutInvenTreeModal({
 
   const { isLoading, data } = useQuery({
     queryKey: ['version'],
-    queryFn: () => api.get(ApiEndpoints.version).then((res) => res.data)
+    queryFn: () => api.get(apiUrl(ApiEndpoints.version)).then((res) => res.data)
   });
 
   function fillTable(

src/frontend/src/components/modals/QrCodeModal.tsx

@@ -24,6 +24,7 @@ import { useEffect, useState } from 'react';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { apiUrl } from '../../states/ApiState';
 
 export function QrCodeModal({
   context,
@@ -65,7 +66,7 @@ export function QrCodeModal({
 
     handlers.append(decodedText);
     api
-      .post(ApiEndpoints.barcode, { barcode: decodedText })
+      .post(apiUrl(ApiEndpoints.barcode), { barcode: decodedText })
       .then((response) => {
         showNotification({
           title: response.data?.success || t`Unknown response`,

src/frontend/src/components/nav/Header.tsx

@@ -9,6 +9,7 @@ import { api } from '../../App';
 import { navTabs as mainNavTabs } from '../../defaults/links';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { InvenTreeStyle } from '../../globalStyle';
+import { apiUrl } from '../../states/ApiState';
 import { ScanButton } from '../items/ScanButton';
 import { MainMenu } from './MainMenu';
 import { NavHoverMenu } from './NavHoverMenu';
@@ -37,7 +38,7 @@ export function Header() {
     queryKey: ['notification-count'],
     queryFn: async () => {
       return api
-        .get(ApiEndpoints.notifications_list, {
+        .get(apiUrl(ApiEndpoints.notifications_list), {
           params: {
             read: false,
             limit: 1

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -36,7 +36,7 @@ export function NotificationDrawer({
     queryKey: ['notifications', opened],
     queryFn: async () =>
       api
-        .get(ApiEndpoints.notifications_list, {
+        .get(apiUrl(ApiEndpoints.notifications_list), {
           params: {
             read: false,
             limit: 10

src/frontend/src/components/nav/PartCategoryTree.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { apiUrl } from '../../states/ApiState';
 import { StylishText } from '../items/StylishText';
 
 export function PartCategoryTree({
@@ -25,7 +26,7 @@ export function PartCategoryTree({
     queryKey: ['part_category_tree', opened],
     queryFn: async () =>
       api
-        .get(ApiEndpoints.category_tree, {})
+        .get(apiUrl(ApiEndpoints.category_tree), {})
         .then((response) =>
           response.data.map((category: any) => {
             return {

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -33,6 +33,7 @@ import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
+import { apiUrl } from '../../states/ApiState';
 import { useUserSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
 import { RenderInstance } from '../render/Instance';
@@ -257,7 +258,7 @@ export function SearchDrawer({
     });
 
     return api
-      .post(ApiEndpoints.api_search, params)
+      .post(apiUrl(ApiEndpoints.api_search), params)
       .then(function (response) {
         return response.data;
       })

src/frontend/src/components/nav/StockLocationTree.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { apiUrl } from '../../states/ApiState';
 import { StylishText } from '../items/StylishText';
 
 export function StockLocationTree({
@@ -25,7 +26,7 @@ export function StockLocationTree({
     queryKey: ['stock_location_tree', opened],
     queryFn: async () =>
       api
-        .get(ApiEndpoints.stock_location_tree, {})
+        .get(apiUrl(ApiEndpoints.stock_location_tree), {})
         .then((response) =>
           response.data.map((location: any) => {
             return {

src/frontend/src/components/tables/part/PartThumbTable.tsx

@@ -142,7 +142,7 @@ export function PartThumbTable({
       { limit: limit, offset: offset, search: filterQuery }
     ],
     queryFn: async () => {
-      return api.get(ApiEndpoints.part_thumbs_list, {
+      return api.get(apiUrl(ApiEndpoints.part_thumbs_list), {
         params: {
           offset: offset,
           limit: limit,

src/frontend/src/states/ApiState.tsx

@@ -27,14 +27,14 @@ export const useServerApiState = create<ServerApiStateProps>()(
       fetchServerApiState: async () => {
         // Fetch server data
         await api
-          .get(ApiEndpoints.api_server_info)
+          .get(apiUrl(ApiEndpoints.api_server_info))
           .then((response) => {
             set({ server: response.data });
           })
           .catch(() => {});
         // Fetch status data for rendering labels
         await api
-          .get(ApiEndpoints.global_status)
+          .get(apiUrl(ApiEndpoints.global_status))
           .then((response) => {
             const newStatusLookup: StatusLookup = {} as StatusLookup;
             for (const key in response.data) {
@@ -47,7 +47,7 @@ export const useServerApiState = create<ServerApiStateProps>()(
 
         // Fetch login/SSO behaviour
         await api
-          .get(ApiEndpoints.sso_providers, {
+          .get(apiUrl(ApiEndpoints.sso_providers), {
             headers: { Authorization: '' }
           })
           .then((response) => {