From dc7291c62b0eab3305d3a63273bcc53f9eb26a88 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Thu, 7 Aug 2025 12:44:43 +0200
Subject: [PATCH] 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 | 33 ++++++++++++++++++++++++
 pkgs/clan-app/ui/src/hooks/api.ts        |  5 ++++
 2 files changed, 38 insertions(+)
 create mode 100644 pkgs/clan-app/ui/src/hooks/ApiClient.tsx

diff --git a/pkgs/clan-app/ui/src/hooks/ApiClient.tsx b/pkgs/clan-app/ui/src/hooks/ApiClient.tsx
new file mode 100644
index 000000000..ade8eaf00
--- /dev/null
+++ b/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;
+};
diff --git a/pkgs/clan-app/ui/src/hooks/api.ts b/pkgs/clan-app/ui/src/hooks/api.ts
index b44813a48..1d93671fc 100644
--- a/pkgs/clan-app/ui/src/hooks/api.ts
+++ b/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>,