UI/api: add api client provider

This allows to switch out the used api backend for testing purposes.
Or for different plattforms

pkgs/clan-app/ui/src/hooks/ApiClient.tsx

@@ -0,0 +1,33 @@
+import { createContext, JSX, useContext } from "solid-js";
+import { ApiCall, OperationArgs, OperationNames } from "./api";
+
+export interface ApiClient {
+  fetch: Fetcher;
+}
+
+export type Fetcher = <K extends OperationNames>(
+  method: K,
+  args: OperationArgs<K>,
+) => ApiCall<K>;
+
+const ApiClientContext = createContext<ApiClient>();
+
+interface ApiClientProviderProps {
+  client: ApiClient;
+  children: JSX.Element;
+}
+export const ApiClientProvider = (props: ApiClientProviderProps) => {
+  return (
+    <ApiClientContext.Provider value={props.client}>
+      {props.children}
+    </ApiClientContext.Provider>
+  );
+};
+
+export const useApiClient = () => {
+  const client = useContext(ApiClientContext);
+  if (!client) {
+    throw new Error("useApiClient must be used within an ApiClientProvider");
+  }
+  return client;
+};

pkgs/clan-app/ui/src/hooks/api.ts

@@ -49,6 +49,11 @@ export interface ApiCall<K extends OperationNames> {
   cancel: () => Promise<void>;
 }
 
+/**
+ * Do not use this function directly, use `useApiClient` function instead.
+ * This allows mocking the result in tests.
+ * Or switch to different client implementations.
+ */
 export const callApi = <K extends OperationNames>(
   method: K,
   args: OperationArgs<K>,