From fc1cfe43cddb98fd4f55e59b01ac9a4c4f07ecec Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 12 Sep 2024 12:11:04 +0100
Subject: [PATCH 1/2] feat: get chart owner

---
 .../Dialogs/EmbedChartDialog/index.tsx         | 18 +++++++++++++-----
 .../state/api/action-reducers/user/index.ts    |  6 ++++++
 src/app/state/api/interfaces/index.ts          |  3 +++
 src/app/state/store/index.ts                   |  5 ++++-
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/app/state/api/action-reducers/user/index.ts

diff --git a/src/app/components/Dialogs/EmbedChartDialog/index.tsx b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
index 5119ac1f0..e697ac6c1 100644
--- a/src/app/components/Dialogs/EmbedChartDialog/index.tsx
+++ b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
@@ -7,10 +7,9 @@ import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "@material-ui/core/Snackbar";
 import get from "lodash/get";
 import { useLoadDatasetDetails } from "app/modules/report-module/components/chart-wrapper/useLoadDatasetDetailsAPI";
-import { useAuth0 } from "@auth0/auth0-react";
 import ChartContainer from "./chartContainer";
 import { copyToClipboard } from "app/utils/copyToClipboard";
-import { useStoreState } from "app/state/store/hooks";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import LinkOptions from "./linkOptions";
 import BasicSwitch from "app/components/Switch/BasicSwitch";
 import EmbedOptions from "./embedOptions";
@@ -24,8 +23,13 @@ export default function EmbedChartDialog(props: {
 }) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const token = useStoreState((state) => state.AuthToken.value);
+  const fetchUserProfile = useStoreActions(
+    (state) => state.user.UserProfile.fetch
+  );
+  const userProfile = useStoreState(
+    (state) => state.user.UserProfile.crudData
+  ) as { username: string };
   const classes = useStyles();
-  const { user } = useAuth0();
   const { datasetDetails } = useLoadDatasetDetails(
     props.datasetId!,
     token ?? undefined
@@ -38,7 +42,6 @@ export default function EmbedChartDialog(props: {
     React.useState<string>("embed-code");
 
   const {
-    loading,
     notFound,
     chartErrorMessage,
     dataError,
@@ -49,6 +52,11 @@ export default function EmbedChartDialog(props: {
     setNotFound,
   } = useRenderChartFromAPI(token, props.chartId);
 
+  React.useEffect(() => {
+    if (datasetDetails.owner) {
+      fetchUserProfile({ getId: datasetDetails.owner });
+    }
+  }, [datasetDetails]);
   let newVisualOptions = visualOptions;
 
   const displayModes = [
@@ -226,7 +234,7 @@ export default function EmbedChartDialog(props: {
             >
               <p>
                 <span>Author:</span>
-                <span>{user?.given_name || "NOT SPECIFIED"}</span>
+                <span>{userProfile.username}</span>
               </p>
               <div
                 css={`
diff --git a/src/app/state/api/action-reducers/user/index.ts b/src/app/state/api/action-reducers/user/index.ts
new file mode 100644
index 000000000..7beee7ac2
--- /dev/null
+++ b/src/app/state/api/action-reducers/user/index.ts
@@ -0,0 +1,6 @@
+import { APIModel } from "../..";
+import { ApiCallModel } from "../../interfaces";
+
+export const UserProfile: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/users/profile`),
+};
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index 5e87d23db..3684cfbb4 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -102,6 +102,9 @@ export interface StoreModel {
     DatasetCount: ApiCallModel;
     DatasetGet: ApiCallModel;
   };
+  user: {
+    UserProfile: ApiCallModel;
+  };
   assets: {
     AssetGetList: ApiCallModel;
     AssetsCount: ApiCallModel;
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 15d36bde0..c4b06bf2d 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -46,6 +46,7 @@ import {
   ReportsCount,
 } from "app/state/api/action-reducers/reports";
 import { AssetGetList, AssetsCount } from "../api/action-reducers/assets";
+import { UserProfile } from "../api/action-reducers/user";
 
 const storeContent: StoreModel = {
   // global search
@@ -55,7 +56,9 @@ const storeContent: StoreModel = {
   DataSourceState: persist(DataSourceState),
   DataSourceSnackbarVisibility: persist(DataSourceSnackbarVisibilityState),
   AuthToken: persist(AuthTokenState),
-
+  user: {
+    UserProfile: persist(UserProfile),
+  },
   dataThemes: {
     DatasetGetList: DatasetGetList,
     DatasetGet: persist(DatasetGet),

From b0ef88639574a72f1adc52a250df59f7cc8b1a57 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Thu, 12 Sep 2024 18:26:04 +0100
Subject: [PATCH 2/2] fix: review fixes

---
 src/app/components/Dialogs/EmbedChartDialog/index.tsx | 2 +-
 src/app/state/store/index.ts                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Dialogs/EmbedChartDialog/index.tsx b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
index e697ac6c1..724166138 100644
--- a/src/app/components/Dialogs/EmbedChartDialog/index.tsx
+++ b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
@@ -234,7 +234,7 @@ export default function EmbedChartDialog(props: {
             >
               <p>
                 <span>Author:</span>
-                <span>{userProfile.username}</span>
+                <span>{userProfile?.username}</span>
               </p>
               <div
                 css={`
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index c4b06bf2d..a7081f6c7 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -57,7 +57,7 @@ const storeContent: StoreModel = {
   DataSourceSnackbarVisibility: persist(DataSourceSnackbarVisibilityState),
   AuthToken: persist(AuthTokenState),
   user: {
-    UserProfile: persist(UserProfile),
+    UserProfile: UserProfile,
   },
   dataThemes: {
     DatasetGetList: DatasetGetList,