From dd508d834b20e3e92ecfa1db2fc65509d15e2395 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 24 Apr 2024 16:55:59 +0900
Subject: [PATCH] Pass apiClient via context

---
 optuna_dashboard/ts/apiClientProvider.tsx |  32 ++++
 optuna_dashboard/ts/components/App.tsx    | 196 +++++++++++-----------
 2 files changed, 133 insertions(+), 95 deletions(-)
 create mode 100644 optuna_dashboard/ts/apiClientProvider.tsx

diff --git a/optuna_dashboard/ts/apiClientProvider.tsx b/optuna_dashboard/ts/apiClientProvider.tsx
new file mode 100644
index 00000000..2383b1c6
--- /dev/null
+++ b/optuna_dashboard/ts/apiClientProvider.tsx
@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from "react"
+import { APIClient } from "./apiClient"
+
+type APIClientContextType = {
+  apiClient: APIClient
+}
+
+export const APIClientContext = createContext<APIClientContextType | undefined>(
+  undefined
+)
+
+export const useAPIClient = (): APIClientContextType => {
+  const context = useContext(APIClientContext)
+  if (context === undefined) {
+    throw new Error("useAPIClient must be used within a APIClientProvider.")
+  }
+  return context
+}
+
+export function APIClientProvider({
+  apiClient,
+  children,
+}: {
+  apiClient: APIClient
+  children: React.ReactNode
+}) {
+  return (
+    <APIClientContext.Provider value={{ apiClient }}>
+      {children}
+    </APIClientContext.Provider>
+  )
+}
diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx
index c915f7c7..1204ae8f 100644
--- a/optuna_dashboard/ts/components/App.tsx
+++ b/optuna_dashboard/ts/components/App.tsx
@@ -13,10 +13,14 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
 import { RecoilRoot } from "recoil"
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { APIClientProvider } from "../apiClientProvider"
+import { AxiosClient } from "../axiosClient"
 import { CompareStudies } from "./CompareStudies"
 import { StudyDetail } from "./StudyDetail"
 import { StudyList } from "./StudyList"
 
+const axiosAPIClient = new AxiosClient()
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -50,100 +54,102 @@ export const App: FC = () => {
   }
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <RecoilRoot>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <Box
-            component="div"
-            sx={{
-              backgroundColor: colorMode === "dark" ? "#121212" : "#ffffff",
-              width: "100%",
-              minHeight: "100vh",
-            }}
-          >
-            <SnackbarProvider maxSnack={3}>
-              <Router>
-                <Routes>
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId/analytics"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"analytics"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId/trials"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"trialList"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId/trialTable"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"trialTable"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId/note"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"note"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId/graph"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"graph"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"top"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/studies/:studyId/preference-history"}
-                    element={
-                      <StudyDetail
-                        toggleColorMode={toggleColorMode}
-                        page={"preferenceHistory"}
-                      />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/compare-studies"}
-                    element={
-                      <CompareStudies toggleColorMode={toggleColorMode} />
-                    }
-                  />
-                  <Route
-                    path={URL_PREFIX + "/"}
-                    element={<StudyList toggleColorMode={toggleColorMode} />}
-                  />
-                </Routes>
-              </Router>
-            </SnackbarProvider>
-          </Box>
-        </ThemeProvider>
-      </RecoilRoot>
-    </QueryClientProvider>
+    <APIClientProvider apiClient={axiosAPIClient}>
+      <QueryClientProvider client={queryClient}>
+        <RecoilRoot>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Box
+              component="div"
+              sx={{
+                backgroundColor: colorMode === "dark" ? "#121212" : "#ffffff",
+                width: "100%",
+                minHeight: "100vh",
+              }}
+            >
+              <SnackbarProvider maxSnack={3}>
+                <Router>
+                  <Routes>
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId/analytics"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"analytics"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId/trials"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"trialList"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId/trialTable"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"trialTable"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId/note"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"note"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId/graph"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"graph"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"top"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/studies/:studyId/preference-history"}
+                      element={
+                        <StudyDetail
+                          toggleColorMode={toggleColorMode}
+                          page={"preferenceHistory"}
+                        />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/compare-studies"}
+                      element={
+                        <CompareStudies toggleColorMode={toggleColorMode} />
+                      }
+                    />
+                    <Route
+                      path={URL_PREFIX + "/"}
+                      element={<StudyList toggleColorMode={toggleColorMode} />}
+                    />
+                  </Routes>
+                </Router>
+              </SnackbarProvider>
+            </Box>
+          </ThemeProvider>
+        </RecoilRoot>
+      </QueryClientProvider>
+    </APIClientProvider>
   )
 }