fix: use direct path with same origin when calling api

packages/dashboard/src/components/AppLogo/AppLogo.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { useSystemStore } from '../../state/systemStore';
 
 const AppLogo: React.FC<{ id: string; size?: number; className?: string; alt?: string }> = ({ id, size = 80, className = '', alt = '' }) => {
-  const { baseUrl } = useSystemStore();
-  const logoUrl = `${baseUrl}/apps/${id}/metadata/logo.jpg`;
+  const logoUrl = `/api/apps/${id}/metadata/logo.jpg`;
 
   return (
     <div aria-label={alt} className={`drop-shadow ${className}`} style={{ width: size, height: size }}>

packages/dashboard/src/components/StatusScreens/StatusWrapper.tsx

@@ -1,7 +1,7 @@
 import { SlideFade } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { SystemStatus, useSystemStore } from '../../state/systemStore';
+import { SystemStatus } from '../../state/systemStore';
 import RestartingScreen from './RestartingScreen';
 import UpdatingScreen from './UpdatingScreen';
 
@@ -13,8 +13,7 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 const StatusWrapper: React.FC<IProps> = ({ children }) => {
   const [s, setS] = useState<SystemStatus>(SystemStatus.RUNNING);
-  const { baseUrl } = useSystemStore();
-  const { data } = useSWR(`${baseUrl}/status`, fetcher, { refreshInterval: 1000 });
+  const { data } = useSWR('/api/status', fetcher, { refreshInterval: 1000 });
 
   useEffect(() => {
     if (data?.status === SystemStatus.RUNNING) {

packages/dashboard/src/core/apollo/client.ts

@@ -1,8 +1,8 @@
 import { ApolloClient, from, InMemoryCache } from '@apollo/client';
 import links from './links';
 
-export const createApolloClient = async (url: string): Promise<ApolloClient<any>> => {
-  const additiveLink = from([links.errorLink, links.authLink, links.httpLink(url)]);
+export const createApolloClient = async (): Promise<ApolloClient<any>> => {
+  const additiveLink = from([links.errorLink, links.authLink, links.httpLink]);
 
   return new ApolloClient({
     link: additiveLink,

packages/dashboard/src/core/apollo/links/httpLink.ts

@@ -1,9 +1,7 @@
 import { HttpLink } from '@apollo/client';
 
-const httpLink = (url: string) => {
-  return new HttpLink({
-    uri: `${url}/graphql`,
-  });
-};
+const httpLink = new HttpLink({
+  uri: '/api/graphql',
+});
 
 export default httpLink;

packages/dashboard/src/hooks/useCachedRessources.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ApolloClient } from '@apollo/client';
 import { createApolloClient } from '../core/apollo/client';
-import { useSystemStore } from '../state/systemStore';
 
 interface IReturnProps {
   client?: ApolloClient<unknown>;
@@ -9,13 +8,12 @@ interface IReturnProps {
 }
 
 export default function useCachedResources(): IReturnProps {
-  const { baseUrl, setBaseUrl } = useSystemStore();
   const [isLoadingComplete, setLoadingComplete] = useState(false);
   const [client, setClient] = useState<ApolloClient<unknown>>();
 
-  async function loadResourcesAndDataAsync(url: string) {
+  async function loadResourcesAndDataAsync() {
     try {
-      const restoredClient = await createApolloClient(url);
+      const restoredClient = await createApolloClient();
 
       setClient(restoredClient);
     } catch (error) {
@@ -27,22 +25,8 @@ export default function useCachedResources(): IReturnProps {
   }
 
   useEffect(() => {
-    const hostname = window.location.hostname;
-    const port = window.location.port;
-    const protocol = window.location.protocol;
-
-    if (!port) {
-      setBaseUrl(`${protocol}://${hostname}/api`);
-    } else {
-      setBaseUrl(`${protocol}//${hostname}:${port}/api`);
-    }
-  }, [setBaseUrl]);
-
-  useEffect(() => {
-    if (baseUrl) {
-      loadResourcesAndDataAsync(baseUrl);
-    }
-  }, [baseUrl]);
+    loadResourcesAndDataAsync();
+  }, []);
 
   return { client, isLoadingComplete };
 }

packages/dashboard/src/state/systemStore.ts

@@ -7,15 +7,11 @@ export enum SystemStatus {
 }
 
 type Store = {
-  baseUrl: string;
   status: SystemStatus;
-  setBaseUrl: (url: string) => void;
   setStatus: (status: SystemStatus) => void;
 };
 
 export const useSystemStore = create<Store>((set) => ({
-  baseUrl: '',
   status: SystemStatus.RUNNING,
-  setBaseUrl: (url: string) => set((state) => ({ ...state, baseUrl: url })),
   setStatus: (status: SystemStatus) => set((state) => ({ ...state, status })),
 }));