From ed43345cd70d6b85db168ff743f57af727be4c0d Mon Sep 17 00:00:00 2001
From: Victor Holguin <olivicmic@Tin-Man.hitronhub.home>
Date: Thu, 2 Nov 2023 15:55:44 -0700
Subject: [PATCH] implemented ListDatasetsByUser on voice designer datasets
 view

---
 .../voice_datasets/ListDatasetsByUser.ts      |  7 +++-
 .../fakeyou.com/src/v2/view/PageContainer.tsx |  4 +-
 .../voice_designer/VoiceDesignerMainPage.tsx  | 41 ++++++++++++++-----
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser.ts b/packages/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser.ts
index e031dad0f1..c982d93edf 100644
--- a/packages/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser.ts
+++ b/packages/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser.ts
@@ -3,7 +3,7 @@ import { UserDetailsLight } from "../../_common/UserDetailsLight";
 
 export interface ListDatasetsByUserRequest {}
 
-export interface ListDatasetsByUserResponse {
+export interface Dataset {
     dataset_token: string,
     title: string,
     
@@ -17,6 +17,11 @@ export interface ListDatasetsByUserResponse {
     updated_at: Date,
 }
 
+export interface ListDatasetsByUserResponse {
+    success: boolean,
+    datasets: Dataset[],
+}
+
 export const ListDatasetsByUser = MakeRequest<string, ListDatasetsByUserRequest, ListDatasetsByUserResponse>({
     method: "GET", 
     routingFunction: (userName:  string) => `/v1/voice_designer/dataset/user/${ userName }/list`,
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 6104ababfa..57a41219af 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -645,7 +645,9 @@ class PageContainer extends React.Component<
             </Route>
 
             <Route path="/voice-designer">
-              <VoiceDesignerMainPage />
+              <VoiceDesignerMainPage {...{
+                sessionWrapper: this.props.sessionWrapper
+              }}/>
             </Route>
 
             <Route path="/generate-speech">
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
index f3a00b57d8..68d40c3fdc 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { faPlus, faWaveform } from "@fortawesome/pro-solid-svg-icons";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import Panel from "components/common/Panel";
@@ -8,9 +8,30 @@ import { Route, NavLink, Switch, Redirect } from "react-router-dom";
 import ListItems from "./components/ListItems/ListItems";
 import Modal from "components/common/Modal";
 
-function VoiceDesignerMainPage() {
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { ListDatasetsByUser, Dataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser";
+
+interface Props {
+  sessionWrapper: SessionWrapper;
+}
+
+function VoiceDesignerMainPage({ sessionWrapper }: Props) {
+  const { user } = sessionWrapper.sessionStateResponse || {};
+  const [datasets,datasetsSet] = useState<Dataset[]>([]);
+
+
   usePrefixedDocumentTitle("Voice Designer");
 
+  useEffect(() => {
+
+   if (!datasets.length && user) {
+      ListDatasetsByUser("hanashi",{}).then(res => {
+        if (res.datasets) datasetsSet(res.datasets);
+      });
+   }
+
+  },[user,datasets]);
+
   const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false);
   const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] =
     useState(false);
@@ -42,13 +63,12 @@ function VoiceDesignerMainPage() {
       modelToken: "TM:z7x37sbvb8vc",
     },
   ];
-  const datasetList = [
-    {
-      name: "Donald Trump (45th US President)",
-      modelToken: "dummyToken",
-    },
-  ];
-  // const emptyList = [] as any[];
+  // const datasetList = [
+  //   {
+  //     name: "Donald Trump (45th US President)",
+  //     modelToken: "dummyToken",
+  //   },
+  // ];
 
   function MyVoices() {
     return (
@@ -64,7 +84,8 @@ function VoiceDesignerMainPage() {
     return (
       <ListItems
         type="dataset"
-        data={datasetList}
+        data={datasets}
+        //data={datasetList}
         handleDeleteDataset={openDeleteDatasetModal}
       />
     );