From dd1a56ba4aeb2ff2d7f277230fee685cab9b23e3 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Fri, 26 Apr 2024 16:18:52 +0900
Subject: [PATCH] Move APIClientProvider from App

---
 optuna_dashboard/ts/components/App.tsx | 196 ++++++++++++-------------
 optuna_dashboard/ts/index.tsx          |   8 +-
 2 files changed, 102 insertions(+), 102 deletions(-)

diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx
index 1204ae8f..c915f7c7 100644
--- a/optuna_dashboard/ts/components/App.tsx
+++ b/optuna_dashboard/ts/components/App.tsx
@@ -13,14 +13,10 @@ 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: {
@@ -54,102 +50,100 @@ export const App: FC = () => {
   }
 
   return (
-    <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>
+    <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>
   )
 }
diff --git a/optuna_dashboard/ts/index.tsx b/optuna_dashboard/ts/index.tsx
index fd63f378..9fe11370 100644
--- a/optuna_dashboard/ts/index.tsx
+++ b/optuna_dashboard/ts/index.tsx
@@ -1,9 +1,15 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
+import { APIClientProvider } from "./apiClientProvider"
+import { AxiosClient } from "./axiosClient"
 import { App } from "./components/App"
 
+const axiosAPIClient = new AxiosClient()
+
 ReactDOM.createRoot(document.getElementById("dashboard") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <APIClientProvider apiClient={axiosAPIClient}>
+      <App />
+    </APIClientProvider>
   </React.StrictMode>
 )