rename some vars

web/src/app/app/dashboards/page.tsx

@@ -1,5 +1,5 @@
 import { DashboardListContainer } from './_DashboardListContainer';
 
-export default function DashboardPage(props: any) {
+export default function DashboardPage() {
   return <DashboardListContainer />;
 }

web/src/context/Dashboards/DashboardIndividualProvider/DashboardIndividualProvider.tsx

@@ -17,8 +17,6 @@ export const useBusterDashboards = () => {
 
   const [dashboards, setDashboard] = useState<Record<string, BusterDashboardResponse>>({});
 
-  const dashboardShare = useShareDashboard();
-
   const dashboardSubscribe = useDashboardSubscribe({ setDashboard });
 
   const dashboardUpdateConfig = useDashboardUpdateConfig({ dashboards, setDashboard });
@@ -29,6 +27,10 @@ export const useBusterDashboards = () => {
     onUpdateDashboard: dashboardUpdateConfig.onUpdateDashboard
   });
 
+  const dashboardShare = useShareDashboard({
+    initializeDashboard: dashboardSubscribe.initializeDashboard
+  });
+
   const getDashboardMemoized = useMemoizedFn((id: string) => dashboards[id]);
 
   return {

web/src/context/Dashboards/DashboardIndividualProvider/useDashboardShare.ts

@@ -1,8 +1,13 @@
+import { BusterDashboardResponse } from '@/api/asset_interfaces';
 import { DashboardUpdate } from '@/api/buster_socket/dashboards';
 import { useBusterWebSocket } from '@/context/BusterWebSocket';
 import { useMemoizedFn } from 'ahooks';
 
-export const useShareDashboard = () => {
+export const useShareDashboard = ({
+  initializeDashboard
+}: {
+  initializeDashboard: (d: BusterDashboardResponse) => void;
+}) => {
   const busterSocket = useBusterWebSocket();
 
   const onShareDashboard = useMemoizedFn(
@@ -19,9 +24,15 @@ export const useShareDashboard = () => {
         | 'remove_teams'
       >
     ) => {
-      return busterSocket.emit({
+      return busterSocket.emitAndOnce({
-        route: '/dashboards/update',
+        emitEvent: {
-        payload: props
+          route: '/dashboards/update',
+          payload: props
+        },
+        responseEvent: {
+          route: '/dashboards/update:updateDashboard',
+          callback: initializeDashboard
+        }
       });
     }
   );

web/src/context/Dashboards/DashboardIndividualProvider/useDashboardSubscribe.ts

@@ -18,7 +18,7 @@ export const useDashboardSubscribe = ({
   const getAssetPassword = useBusterAssetsContextSelector((state) => state.getAssetPassword);
   const dashboardsSubscribed = useRef<Record<string, boolean>>({});
 
-  const _onGetDashboardState = useMemoizedFn((d: BusterDashboardResponse) => {
+  const initializeDashboard = useMemoizedFn((d: BusterDashboardResponse) => {
     const metrics = d.metrics;
 
     for (const metric of metrics) {
@@ -63,18 +63,19 @@ export const useDashboardSubscribe = ({
 
   useMount(() => {
     setTimeout(() => {
-      _onGetDashboardState(MOCK_DASHBOARD_RESPONSE);
+      initializeDashboard(MOCK_DASHBOARD_RESPONSE);
     }, 500);
 
     busterSocket.on({
       route: '/dashboards/get:getDashboardState',
-      callback: _onGetDashboardState
+      callback: initializeDashboard
     });
   });
 
   return {
     subscribeToDashboard,
     unSubscribeToDashboard,
-    refreshDashboard
+    refreshDashboard,
+    initializeDashboard
   };
 };

web/src/context/Dashboards/DashboardIndividualProvider/useDashboardUpdateConfig.ts

@@ -18,41 +18,33 @@ export const useDashboardUpdateConfig = ({
   const busterSocket = useBusterWebSocket();
 
   const _updateDashboardResponseToServer = useMemoizedFn(
-    (
-      newDashboard: BusterDashboardResponse & {
-        status?: VerificationStatus;
-      }
-    ) => {
-      const oldDashboard = dashboards[newDashboard.dashboard.id];
-      if (isEqual(oldDashboard, newDashboard)) {
-        return;
-      }
-
-      busterSocket.emit({
-        route: '/dashboards/update',
-        payload: {
-          id: newDashboard.dashboard.id,
-          description: newDashboard.dashboard.description,
-          title: newDashboard.dashboard.title,
-          config: newDashboard.dashboard.config
-        }
-      });
-    }
-  );
-
-  const onUpdateDashboardRequest = useMemoizedFn(
     (newDashboard: Partial<BusterDashboardResponse>, dashboardId: string) => {
       const newDashboardState: BusterDashboardResponse = {
         ...dashboards[dashboardId],
         ...newDashboard
       };
+
+      const oldDashboard = dashboards[dashboardId];
+      if (isEqual(oldDashboard, newDashboard)) {
+        return;
+      }
+
       setDashboard((prevDashboards) => {
         return {
           ...prevDashboards,
           [dashboardId]: newDashboardState
         };
       });
-      _updateDashboardResponseToServer(newDashboardState);
+
+      busterSocket.emit({
+        route: '/dashboards/update',
+        payload: {
+          id: dashboardId,
+          description: newDashboardState.dashboard.description,
+          title: newDashboardState.dashboard.title,
+          config: newDashboardState.dashboard.config
+        }
+      });
     }
   );
 
@@ -68,7 +60,7 @@ export const useDashboardUpdateConfig = ({
         }
       };
 
-      onUpdateDashboardRequest(newDashboardState, id);
+      _updateDashboardResponseToServer(newDashboardState, id);
     }
   );
 
@@ -84,14 +76,14 @@ export const useDashboardUpdateConfig = ({
           }
         }
       };
-      onUpdateDashboardRequest(newDashboardState, dashboardId);
+      _updateDashboardResponseToServer(newDashboardState, dashboardId);
     }
   );
 
   const onVerifiedDashboard = useMemoizedFn(
     async ({ dashboardId, status }: { dashboardId: string; status: VerificationStatus }) => {
-      await _updateDashboardResponseToServer({
+      return onUpdateDashboard({
-        ...dashboards[dashboardId],
+        id: dashboardId,
         status
       });
     }