Add API configuration

src/Components/API/api.ts

@@ -33,8 +33,8 @@ export async function FetchConfiguration(): Promise<IConfiguration> {
   });
 }
 
-export async function SetContainerList(request: ISetContainerListRequest): Promise<ISetContainerListResponse> {
+export async function SetContainerList(request: ISetContainerListRequest, configurationUrl?: string): Promise<ISetContainerListResponse> {
-  const url = import.meta.env.VITE_API_SET_CONTAINER_LIST_URL;
+  const url = configurationUrl ?? import.meta.env.VITE_API_SET_CONTAINER_LIST_URL;
   const dataParsed = JSON.stringify(request, GetCircularReplacerToDotnet());
   // The test library cannot use the Fetch API
   // @ts-expect-error

src/Components/App/Actions/MenuActions.ts

@@ -6,6 +6,7 @@ import { LoadState } from './Load';
 import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
 
 export function NewEditor(
+  editorState: IEditorState,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
   setLoaded: Dispatch<SetStateAction<boolean>>
 ): void {
@@ -14,6 +15,10 @@ export function NewEditor(
     return;
   }
 
+  if (editorState.configuration !== undefined) {
+    return;
+  }
+
   // Fetch the configuration from the API
   FetchConfiguration()
     .then((configuration: IConfiguration) => {

src/Components/App/App.tsx

@@ -130,7 +130,7 @@ export function App(props: IAppProps): JSX.Element {
     >
       <MainMenu
         newEditor={() => NewEditor(
-          setEditorState, setLoaded
+          editorState, setEditorState, setLoaded
         )}
         loadEditor={(files: FileList | null) => LoadEditor(
           files,

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -44,7 +44,7 @@ export function GetAction(
     };
     /* eslint-enable */
 
-    SetContainerList(request)
+    SetContainerList(request, configuration.APIConfiguration?.apiSetContainerListUrl)
       .then((response: ISetContainerListResponse) => {
         HandleSetContainerList(
           action,

src/Components/Editor/Editor.tsx

@@ -286,6 +286,7 @@ export function Editor(props: IEditorProps): JSX.Element {
         availableContainers={configuration.AvailableContainers}
         availableSymbols={configuration.AvailableSymbols}
         categories={configuration.Categories}
+        apiConfiguration={configuration.APIConfiguration}
         selectContainer={(container) => setNewHistory(
           SelectContainer(
             container,

src/Components/UI/UI.tsx

@@ -19,6 +19,7 @@ import { IMessage } from '../../Interfaces/IMessage';
 import { DISABLE_API } from '../../utils/default';
 import { UseWorker, UseAsync } from './UseWorker';
 import { FindContainerById } from '../../utils/itertools';
+import { IAPIConfiguration } from '../../Interfaces/IAPIConfiguration';
 
 export interface IUIProps {
   selectedContainer: IContainerModel | undefined
@@ -28,6 +29,7 @@ export interface IUIProps {
   availableContainers: IAvailableContainer[]
   availableSymbols: IAvailableSymbol[]
   categories: ICategory[]
+  apiConfiguration: IAPIConfiguration | undefined
   selectContainer: (containerId: string) => void
   deleteContainer: (containerId: string) => void
   onPropertyChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
@@ -73,11 +75,13 @@ export function UI(props: IUIProps): JSX.Element {
   if (window.Worker && !DISABLE_API) {
     UseWorker(
       props.current,
+      props.apiConfiguration?.apiGetFeedbackUrl,
       setMessages
     );
   } else if (!DISABLE_API) {
     UseAsync(
       props.current,
+      props.apiConfiguration?.apiGetFeedbackUrl,
       setMessages
     );
   }

src/Components/UI/UseWorker.tsx

@@ -10,6 +10,7 @@ const myWorker = window.Worker && new Worker('workers/message_worker.js');
 
 export function UseWorker(
   state: IHistoryState,
+  configurationUrl: string | undefined,
   setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>): void {
   React.useEffect(() => {
     // use webworker for the stringify to avoid freezing
@@ -30,6 +31,7 @@ export function UseWorker(
 }
 export function UseAsync(
   state: IHistoryState,
+  configurationUrl: string | undefined,
   setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>): void {
   React.useEffect(() => {
     const request: IGetFeedbackRequest = {

src/Interfaces/IAPIConfiguration.ts

@@ -0,0 +1,5 @@
+export interface IAPIConfiguration {
+  apiFetchUrl?: string
+  apiSetContainerListUrl?: string
+  apiGetFeedbackUrl?: string
+}

src/Interfaces/IConfiguration.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import { IAPIConfiguration } from './IAPIConfiguration';
 import { IAvailableContainer } from './IAvailableContainer';
 import { IAvailableSymbol } from './IAvailableSymbol';
 import { ICategory } from './ICategory';
@@ -11,4 +12,5 @@ export interface IConfiguration {
   Categories: ICategory[]
   Patterns: IPattern[]
   MainContainer: IAvailableContainer
+  APIConfiguration?: IAPIConfiguration
 }