Merge pull request #236 from zimmerman-team/fix/DX-1798

feat: get chart owner
zimmerman-team · Sep 12, 2024 · fccfc6e · fccfc6e
2 parents 8927e28 + b0ef886
commit fccfc6e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: UserProfile,
+  },
   dataThemes: {
     DatasetGetList: DatasetGetList,
     DatasetGet: persist(DatasetGet),