From 9c86c8f4fc62f4eb6b9e5de89a6029a80a9e2b39 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 Jan 2023 11:44:58 +0100
Subject: [PATCH] feat(ui) - cards - add selected to the dashboard

---
 .../components/DashboardView/DashboardView.tsx       |  2 +-
 .../MetricsLibraryModal/MetricsLibraryModal.tsx      | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 5ac13ef9f..3579baae3 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
-import { Loader, Tooltip, Popover } from 'UI';
+import { Loader } from 'UI';
 import { withSiteId } from 'App/routes';
 import withModal from 'App/components/Modal/withModal';
 import DashboardWidgetGrid from '../DashboardWidgetGrid';
diff --git a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
index 155c3c123..5755211c1 100644
--- a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
@@ -16,8 +16,8 @@ function MetricsLibraryModal(props: Props) {
   const [selectedList, setSelectedList] = useState([]);
 
   useEffect(() => {
-    metricStore.updateKey('listView', true)
-  }, [])
+    metricStore.updateKey('listView', true);
+  }, []);
 
   const onSelectionChange = (list: any) => {
     setSelectedList(list);
@@ -26,7 +26,7 @@ function MetricsLibraryModal(props: Props) {
   return (
     <>
       <Modal.Header title="Cards Library" />
-      <Modal.Content className='p-4 pb-20'>
+      <Modal.Content className="p-4 pb-20">
         <div className="border">
           <MetricsList siteId={siteId} onSelectionChange={onSelectionChange} />
         </div>
@@ -47,7 +47,11 @@ function SelectedContent({ dashboardId, selected }: any) {
   const dashboard = useMemo(() => dashboardStore.getDashboard(dashboardId), [dashboardId]);
 
   const addSelectedToDashboard = () => {
-    dashboardStore.addWidgetToDashboard(dashboard, selected).then(hideModal);
+    if (!dashboard || !dashboard.dashboardId) return;
+    dashboardStore.addWidgetToDashboard(dashboard, selected).then(() => {
+      hideModal();
+      dashboardStore.fetch(dashboard.dashboardId);
+    });
   };
 
   return (