From e6946abf03b38b37f0745f1a4201b3a6d6d52be8 Mon Sep 17 00:00:00 2001
From: Juan Escalada <97265671+jescalada@users.noreply.github.com>
Date: Tue, 2 Apr 2024 00:22:36 +0900
Subject: [PATCH] Fix initial experiment state namespace bug (#57)

---
 .../pages/Experiment/useExperimentState.tsx   |  9 +++++++--
 .../components/MetricsBar/MetricsBar.tsx      | 19 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/src/pages/Experiment/useExperimentState.tsx b/src/src/pages/Experiment/useExperimentState.tsx
index b5632de9..768a792d 100644
--- a/src/src/pages/Experiment/useExperimentState.tsx
+++ b/src/src/pages/Experiment/useExperimentState.tsx
@@ -5,7 +5,7 @@ import { IExperimentData } from 'modules/core/api/experimentsApi';
 
 import experimentEngine from './ExperimentStore';
 
-function useExperimentState(experimentId: string) {
+function useExperimentState(experimentId?: string) {
   const { current: engine } = React.useRef(experimentEngine);
   const experimentState: IResourceState<IExperimentData> =
     engine.experimentState((state) => state);
@@ -21,7 +21,12 @@ function useExperimentState(experimentId: string) {
   }, []);
 
   React.useEffect(() => {
-    engine.fetchExperimentData(experimentId as any);
+    if (experimentId) {
+      engine.fetchExperimentData(experimentId as any);
+    } else {
+      // Fetch the default experiment in the namespace
+      engine.fetchExperimentsData();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [experimentId]);
 
diff --git a/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx b/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx
index cbfbdd44..e9c6f099 100644
--- a/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx
+++ b/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx
@@ -13,6 +13,10 @@ import ConfirmModal from 'components/ConfirmModal/ConfirmModal';
 
 import { DOCUMENTATIONS } from 'config/references';
 
+import { IResourceState } from 'modules/core/utils/createResource';
+import { IExperimentData } from 'modules/core/api/experimentsApi';
+
+import createExperimentEngine from 'pages/Dashboard/components/ExploreSection/ExperimentsCard/ExperimentsStore';
 import ExperimentBar from 'pages/Experiment/components/ExperimentBar';
 import useExperimentState from 'pages/Experiment/useExperimentState';
 
@@ -41,9 +45,22 @@ function MetricsBar({
 
   const route = useRouteMatch<any>();
 
+  const { current: experimentsEngine } = React.useRef(createExperimentEngine);
+
+  const experimentsStore: IResourceState<IExperimentData[]> =
+    experimentsEngine.experimentsState((state) => state);
+
+  React.useEffect(() => {
+    experimentsEngine.fetchExperiments();
+    return () => {
+      experimentsEngine.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Fetch all experiments along with default
   const { experimentState, experimentsState, getExperimentsData } =
-    useExperimentState('0');
+    useExperimentState(experimentsStore.data?.[0]?.id);
 
   const { data: experimentData, loading: isExperimentLoading } =
     experimentState;