From e4d4d49d200a1e2d7f22948970b7a1a8519f5e7e Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 16 Nov 2023 16:31:16 -0500 Subject: [PATCH 1/6] Fix hostname-based environment config --- packages/components/src/api/GetApiHost.ts | 2 -- .../components/src/env/FakeYouFrontendEnvironment.ts | 11 ++++------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/components/src/api/GetApiHost.ts b/packages/components/src/api/GetApiHost.ts index aaf6b3a2ba..f49b5d2b6f 100644 --- a/packages/components/src/api/GetApiHost.ts +++ b/packages/components/src/api/GetApiHost.ts @@ -22,8 +22,6 @@ export default function GetApiHost() { return hostConfig("api.fakeyou.com"); case "devproxy.storyteller.ai": return hostConfig("api.storyteller.ai"); - case "dev.fakeyou.com": - return hostConfig("api.dev.fakeyou.com"); // NB: for dev machines with nginx proxies case "dev.fakeyou.com": return hostConfig("api.dev.fakeyou.com:12345",false); // false disables SSL default: diff --git a/packages/components/src/env/FakeYouFrontendEnvironment.ts b/packages/components/src/env/FakeYouFrontendEnvironment.ts index fc315730fb..1e98f34bf8 100644 --- a/packages/components/src/env/FakeYouFrontendEnvironment.ts +++ b/packages/components/src/env/FakeYouFrontendEnvironment.ts @@ -10,19 +10,16 @@ export class FakeYouFrontendEnvironment { environment: Environment; private constructor() { - switch (document.location.host) { + const domainWithoutPort = document.location.host.split(":")[0]; + + switch (domainWithoutPort) { case "fakeyou.com": this.environment = Environment.Production; break; case "staging.fakeyou.com": this.environment = Environment.Staging; break; - case "localhost:7000": - this.environment = Environment.Development; - break; - case "localhost:7001": - this.environment = Environment.Development; - break; + case "localhost": case "dev.fakeyou.com": this.environment = Environment.Development; break; From b7e54c50e42fc5daec39127f7d4fe117074b9ec6 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 17 Nov 2023 11:33:53 +0700 Subject: [PATCH 2/6] voice designer results that link to media page --- ...ssionVoiceDesignerInferenceResultsList.tsx | 341 ++++++++++++++++++ .../VoiceDesignerUseVoicePage.tsx | 4 +- 2 files changed, 343 insertions(+), 2 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/_common/SessionVoiceDesignerInferenceResultsList.tsx diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionVoiceDesignerInferenceResultsList.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionVoiceDesignerInferenceResultsList.tsx new file mode 100644 index 0000000000..239baf34cb --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/_common/SessionVoiceDesignerInferenceResultsList.tsx @@ -0,0 +1,341 @@ +import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import { TtsInferenceJob } from "../../../App"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { JobState } from "@storyteller/components/src/jobs/JobStates"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faClock, + faLink, + faHeadphonesSimple, +} from "@fortawesome/free-solid-svg-icons"; + +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import { Analytics } from "../../../common/Analytics"; +import { SessionTtsAudioPlayer } from "./SessionTtsAudioPlayer"; +import { WebUrl } from "../../../common/WebUrl"; +import { + GetPendingTtsJobCount, + GetPendingTtsJobCountIsOk, + GetPendingTtsJobCountSuccessResponse, +} from "@storyteller/components/src/api/tts/GetPendingTtsJobCount"; +import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob"; +import { useLocalize } from "hooks"; + +interface Props { + inferenceJobs: Array; + ttsInferenceJobs: Array; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; +} + +// TODO: This is duplicated in SessionTtsInferenceResultsList ! +// Default to querying every 15 seconds, but make it configurable serverside +const DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS = 15000; + +function SessionVoiceDesignerInferenceResultsList(props: Props) { + const { t } = useLocalize("SessionTtsInferenceResultList"); + + const [pendingTtsJobs, setPendingTtsJobs] = + useState({ + success: true, + pending_job_count: 0, + cache_time: new Date(0), // NB: Epoch is used for vector clock's initial state + refresh_interval_millis: DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS, + }); + + useEffect(() => { + const fetch = async () => { + const response = await GetPendingTtsJobCount(); + if (GetPendingTtsJobCountIsOk(response)) { + if ( + response.cache_time.getTime() > pendingTtsJobs.cache_time.getTime() + ) { + setPendingTtsJobs(response); + } + } + }; + // TODO: We're having an outage and need to lower this. + //const interval = setInterval(async () => fetch(), 15000); + const refreshInterval = Math.max( + DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS, + pendingTtsJobs.refresh_interval_millis + ); + const interval = setInterval(async () => fetch(), refreshInterval); + fetch(); + return () => clearInterval(interval); + }, [pendingTtsJobs]); + + let results: Array = []; + + // TODO(bt,2023-04-08): Clean this utter garbage duplication up. + + // ============================= GENERIC INFERENCE ============================= + + props.inferenceJobs.forEach((job) => { + if (!job.maybeResultToken) { + let cssStyle = "alert alert-secondary mb-0"; + let stateDescription = "Pending..."; + + switch (job.jobState) { + case JobState.PENDING: + case JobState.UNKNOWN: + stateDescription = + job.maybeExtraStatusDescription == null + ? t("resultsProgressPending") + : job.maybeExtraStatusDescription; + break; + case JobState.STARTED: + cssStyle = "alert alert-success mb-0"; + stateDescription = + job.maybeExtraStatusDescription == null + ? t("resultsProgressStarted") + : job.maybeExtraStatusDescription; + break; + case JobState.ATTEMPT_FAILED: + cssStyle = "alert alert-danger mb-0"; + stateDescription = `${t("resultsProgressFail", { + 0: job.attemptCount || "0", + })}}`; + break; + case JobState.COMPLETE_FAILURE: + case JobState.DEAD: + cssStyle = "alert alert-danger mb-0"; + // TODO(bt,2023-01-23): Translate when I can test it + stateDescription = t("resultsProgressDead"); + break; + case JobState.COMPLETE_SUCCESS: + cssStyle = "message is-success mb-0"; + // Not sure why we're here instead of other branch! + stateDescription = t("resultsProgressSuccess"); + break; + } + + results.push( +
+
+
+
{stateDescription}
+
+
+
+ ); + } else { + let audioLink = new BucketConfig().getGcsUrl( + job.maybeResultPublicBucketMediaPath + ); + let ttsPermalink = `/media/${job.maybeResultToken}`; + + let wavesurfers = ; + + results.push( +
+ {/*
+

{job.title}

+ +
*/} +
+
+
+
{job.maybeModelTitle}
+

{job.maybeRawInferenceText}

+
+ + {/* */} + + {wavesurfers} + +
+ { + Analytics.ttsClickResultLink(); + }} + className="fw-semibold" + > + + {t("resultsAudioShareDownload")} + +
+
+
+
+ ); + } + }); + + // TODO(bt,2023-04-08): Clean this utter garbage duplication up. + + // ============================= LEGACY TTS ============================= + + props.ttsInferenceJobs.forEach((job) => { + if (!job.maybeResultToken) { + let cssStyle = "alert alert-secondary mb-0"; + let stateDescription = "Pending..."; + + switch (job.jobState) { + case JobState.PENDING: + case JobState.UNKNOWN: + stateDescription = + job.maybeExtraStatusDescription == null + ? t("resultsProgressPending") + : job.maybeExtraStatusDescription; + break; + case JobState.STARTED: + cssStyle = "alert alert-success mb-0"; + stateDescription = + job.maybeExtraStatusDescription == null + ? t("resultsProgressStarted") + : job.maybeExtraStatusDescription; + break; + case JobState.ATTEMPT_FAILED: + cssStyle = "alert alert-danger mb-0"; + stateDescription = `${t("resultsProgressFail", { + 0: job.attemptCount || "0", + })}}`; + break; + case JobState.COMPLETE_FAILURE: + case JobState.DEAD: + cssStyle = "alert alert-danger mb-0"; + // TODO(bt,2023-01-23): Translate when I can test it + stateDescription = t("resultsProgressDead"); + break; + case JobState.COMPLETE_SUCCESS: + cssStyle = "message is-success mb-0"; + // Not sure why we're here instead of other branch! + stateDescription = t("resultsProgressSuccess"); + break; + } + + results.push( +
+
+
+
{stateDescription}
+
+
+
+ ); + } else { + let audioLink = new BucketConfig().getGcsUrl( + job.maybePublicBucketWavAudioPath + ); + let ttsPermalink = `/tts/result/${job.maybeResultToken}`; + + let wavesurfers = ; + + results.push( +
+ {/*
+

{job.title}

+ +
*/} +
+
+
+
{job.title}
+

{job.rawInferenceText}

+
+ + {/* */} + + {wavesurfers} + +
+ { + Analytics.ttsClickResultLink(); + }} + className="fw-semibold" + > + + {t("resultsAudioShareDownload")} + +
+
+
+
+ ); + } + }); + + // ============================= END LEGACY TTS ============================= + + let noResultsSection = ( +
+
+ +
{t("resultsBlankText")}
+

{t("resultsBlankSubText")}

+
+
+ ); + + if (results.length === 0) { + return <>{noResultsSection}; + } + + let upgradeNotice = <>; + + // Ask non-premium users to upgrade + if ( + results.length !== 0 && + !props.sessionSubscriptionsWrapper.hasPaidFeatures() + ) { + upgradeNotice = ( +
+
+ + {t("resultsUpgradeNotice")}{" "} + { + Analytics.ttsTooSlowUpgradePremium(); + }} + className="alert-link fw-semibold" + > + {t("resultsUpgradeLinkText")} + {" "} + ({t("resultsTtsQueued")}{" "} + ~{pendingTtsJobs.pending_job_count}) +
+
+ ); + } + + // Users have requested reverse chronological results + results.reverse(); + + return ( +
+
+
+ {upgradeNotice} +
{results}
+
+
+
+ ); +} + +export { SessionVoiceDesignerInferenceResultsList }; diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx index 9d8bec8723..f66555a637 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx @@ -19,7 +19,7 @@ import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapp import Container from "components/common/Container/Container"; import TextArea from "components/common/TextArea"; import { Button } from "components/common"; -import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList"; +import { SessionVoiceDesignerInferenceResultsList } from "v2/view/_common/SessionVoiceDesignerInferenceResultsList"; import { FrontendInferenceJobType, InferenceJob, @@ -230,7 +230,7 @@ export default function VoiceDesignerUseVoicePage( Session TTS Results
- Date: Fri, 17 Nov 2023 10:30:29 +0530 Subject: [PATCH 3/6] disable voice creation when file uploading --- .../src/hooks/useUploadedFiles/useUploadedFiles.tsx | 1 + .../view/pages/voice_designer/VoiceDesignerFormPage.tsx | 9 +++++++-- .../pages/voice_designer/components/StepperControls.tsx | 4 +++- .../components/VoiceDesignerUploadComponent.tsx | 9 +++++++-- .../voice_designer/components/steps/UploadSamples.tsx | 4 ++-- 5 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/fakeyou.com/src/hooks/useUploadedFiles/useUploadedFiles.tsx b/packages/fakeyou.com/src/hooks/useUploadedFiles/useUploadedFiles.tsx index 3289abe16a..8851d3aedc 100644 --- a/packages/fakeyou.com/src/hooks/useUploadedFiles/useUploadedFiles.tsx +++ b/packages/fakeyou.com/src/hooks/useUploadedFiles/useUploadedFiles.tsx @@ -10,6 +10,7 @@ const useUploadedFiles = create((set) => ({ setFiles: (files: any[]) => set({ files }), audioLinks: [], setAudioLinks: (audioLinks: string[]) => set({ audioLinks }), + deleteEverything:() => set({ files: [], audioLinks: [] }), })); export default useUploadedFiles; diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx index 5df88eb907..fd45cb8440 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx @@ -21,6 +21,7 @@ import { v4 as uuidv4 } from "uuid"; import { useFile } from "hooks"; import useVoiceRequests from "./useVoiceRequests"; +import useUploadedFiles from "hooks/useUploadedFiles"; interface RouteParams { dataset_token?: string; @@ -33,7 +34,7 @@ function VoiceDesignerFormPage() { const [visibility, visibilitySet] = useState(""); const [title, titleSet] = useState(""); const [fetched,fetchedSet] = useState(false); - + const deleteEverything = useUploadedFiles((state: any) => state.deleteEverything); const audioProps = useFile({}); // contains upload inout state and controls, see docs const datasetInputs = [ @@ -70,6 +71,7 @@ function VoiceDesignerFormPage() { const initialStep = history.location.pathname.includes("/upload") ? 1 : 0; const [currentStep, setCurrentStep] = useState(initialStep); + const [audioSamplesReady, setAudioSamplesReady] = useState(false); const steps = isEditMode ? ["Edit Details", "Edit Samples"] @@ -81,7 +83,7 @@ function VoiceDesignerFormPage() { return ; case 1: return ( - + ); default: return null; @@ -111,6 +113,7 @@ function VoiceDesignerFormPage() { console.log("😎",res); if (res && res.success && res.token) { + deleteEverything(); history.push(`/voice-designer/dataset/${ res.token }/upload`); } }); @@ -140,6 +143,7 @@ function VoiceDesignerFormPage() { voice_dataset_token: dataset_token || "", }) .then((res: any) => { + deleteEverything(); if (res && res.success) { history.push("/voice-designer"); } @@ -189,6 +193,7 @@ function VoiceDesignerFormPage() { onBack={handleBack} onNext={handleNext} onCreate={handleCreateVoice} + createDisabled={!audioSamplesReady} /> diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx index ac7f97bc17..30de935985 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx @@ -4,6 +4,7 @@ interface StepperControlsProps { onBack: () => void; onNext: () => void; onCreate: () => void; + createDisabled: boolean; steps: string[]; currentStep: number; } @@ -14,6 +15,7 @@ const StepperControls: React.FC = ({ steps, currentStep, onCreate, + createDisabled }) => { return (
@@ -30,7 +32,7 @@ const StepperControls: React.FC = ({ )} {currentStep === 1 && ( - )} diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/VoiceDesignerUploadComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/VoiceDesignerUploadComponent.tsx index bffe393ecb..2d5a2e175c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/VoiceDesignerUploadComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/VoiceDesignerUploadComponent.tsx @@ -27,10 +27,11 @@ interface Props { formIsCleared: boolean; setFormIsCleared: (cleared: boolean) => void; setCanConvert: (canConvert: boolean) => void; + setAudioSamplesReady: (ready: boolean) => void; changeConvertIdempotencyToken: () => void; } -function VoiceDesignerUploadComponent({ changeConvertIdempotencyToken, datasetToken, setCanConvert, setFormIsCleared }: Props) { +function VoiceDesignerUploadComponent({ changeConvertIdempotencyToken, datasetToken, setCanConvert, setFormIsCleared, setAudioSamplesReady }: Props) { const [isUploadDisabled, setIsUploadDisabled] = useState(false); const files = useUploadedFiles((state: any) => state.files); @@ -38,6 +39,7 @@ function VoiceDesignerUploadComponent({ changeConvertIdempotencyToken, datasetTo const audioLinks = useUploadedFiles((state: any) => state.audioLinks); const setAudioLinks = useUploadedFiles((state: any) => state.setAudioLinks); + // Auto generated // eslint-disable-next-line @typescript-eslint/no-unused-vars // const [idempotencyToken, setIdempotencyToken] = useState(uuidv4()); @@ -53,7 +55,9 @@ function VoiceDesignerUploadComponent({ changeConvertIdempotencyToken, datasetTo file: file, uuid_idempotency_token: uuidv4(), }) - .then(res => {}); + .then(res => { + setAudioSamplesReady(true); + }); setFormIsCleared(false); setCanConvert(false); @@ -100,6 +104,7 @@ function VoiceDesignerUploadComponent({ changeConvertIdempotencyToken, datasetTo
{/* Usage refer to https://github.com/KarimMokhtar/react-drag-drop-files */}
- +
From b697c537c04372483a152a20d514d3f3658d5f6c Mon Sep 17 00:00:00 2001 From: kasisnu <5044120+kasisnu@users.noreply.github.com> Date: Fri, 17 Nov 2023 10:59:36 +0530 Subject: [PATCH 4/6] nav buttons --- .../src/components/layout/SideNav/SideNav.tsx | 7 ++-- .../fakeyou.com/src/v2/view/nav/FooterNav.tsx | 5 +++ .../fakeyou.com/src/v2/view/nav/TopNav.tsx | 10 ++++++ .../src/v2/view/pages/landing/LandingPage.tsx | 34 +++++++++++++++++++ 4 files changed, 52 insertions(+), 4 deletions(-) diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index aec522ed57..bb9f7134fd 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -9,6 +9,7 @@ import { faSignOutAlt, faFaceViewfinder, faCloudUpload, + faWandMagicSparkles, } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Button from "components/common/Button/Button"; @@ -39,7 +40,7 @@ export default function SideNav(props: SideNavProps) { let history = useHistory(); const [windowWidth, setWindowWidth] = useState(window.innerWidth); const fakeYouFrontendEnv = FakeYouFrontendEnvironment.getInstance(); - + // eslint-disable-next-line @typescript-eslint/no-unused-vars const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment() const handleNavLinkClick = () => { const wrapper = document.getElementById("wrapper"); @@ -270,7 +271,6 @@ export default function SideNav(props: SideNavProps) { {t("speechVc")} - {isDevelopmentEnv && (
  • {"Voice Designer"}
    • - )}
  • {t("videoTitle")}
  • diff --git a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx index ac4309b6b4..8ae4922ebc 100644 --- a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx +++ b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx @@ -10,6 +10,7 @@ import { faDiscord, faTwitter, faTiktok, + } from "@fortawesome/free-brands-svg-icons"; import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks"; import { @@ -213,6 +214,10 @@ function FooterNav(props: Props) { {t("productVc")}
    • +
  • + Voice Designer +
    • +
  • {t("productFaceAnimator")}
    • diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx index f69bb2c789..6312fd0fc9 100644 --- a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx +++ b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx @@ -12,6 +12,7 @@ import { faSignOutAlt, faBook, faStar, + faWandMagicSparkles } from "@fortawesome/free-solid-svg-icons"; import { faDiscord } from "@fortawesome/free-brands-svg-icons"; import { Logout } from "@storyteller/components/src/api/session/Logout"; @@ -244,6 +245,15 @@ function TopNav(props: Props) { {t("productVc")} +
  • + + + Voice Designer + +
    • +
    + +
    +
    +
    + + + {t("productNewTag")} + + +

    + Voice Designer +

    +
    + +
    + Make yourself sound like anyone +
    +
    + + + +
    + + Voice Designer + +
    Date: Fri, 17 Nov 2023 13:22:28 +0700 Subject: [PATCH 5/6] delete modal update --- .../voice_designer/VoiceDesignerMainPage.tsx | 84 +++++++++---------- 1 file changed, 41 insertions(+), 43 deletions(-) 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 8ff4e01003..7e454496f3 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 @@ -15,30 +15,45 @@ import useVoiceRequests from "./useVoiceRequests"; function VoiceDesignerMainPage() { const { pathname } = useLocation(); const { t } = useLocalize("FaceAnimator"); - const { datasets, voices } = useVoiceRequests({ requestDatasets: true, requestVoices: true }); - const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false); - const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = - useState(false); + const { datasets, voices } = useVoiceRequests({ + requestDatasets: true, + requestVoices: true, + }); + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const view = ["/voice-designer/datasets", "/voice-designer/voices"].indexOf( pathname ); + const [deleteItem, setDeleteItem] = useState(""); + const [deleteType, setDeleteType] = useState(""); + const [deleteText, setDeleteText] = useState({ + title: "", + text: "", + }); - // const openDeleteVoiceModal = () => { - // setIsDeleteVoiceModalOpen(true); - // }; + const openDeleteModal = (token: string, type: string) => { + setDeleteItem(token); + setDeleteType(type); + setDeleteText({ + title: `Delete ${type}`, + text: `Are you sure you want to delete this ${type}?`, + }); + setIsDeleteModalOpen(true); + }; - const closeDeleteVoiceModal = () => { - setIsDeleteVoiceModalOpen(false); + const handleDelete = () => { + if (deleteType === "voice") { + voices.delete(deleteItem); + } else if (deleteType === "dataset") datasets.delete(deleteItem); + }; + + const closeDeleteModal = () => { + setIsDeleteModalOpen(false); }; // const openDeleteDatasetModal = () => { // setIsDeleteDatasetModalOpen(true); // }; - const closeDeleteDatasetModal = () => { - setIsDeleteDatasetModalOpen(false); - }; - const history = useHistory(); const navToEdit = (token: string, type: string) => { @@ -52,15 +67,16 @@ function VoiceDesignerMainPage() { const voiceClick = (todo: any, type: string) => ({ target }: { target: any }) => { - let voiceToken = voices.list[target.name.split(",")[0].split(":")[1]].voice_token; + let voiceToken = + voices.list[target.name.split(",")[0].split(":")[1]].voice_token; todo(voiceToken, type); }; - const datasetClick = (todo: any, type: string) => ({ target }: { target: any }) => { - let datasetToken = datasets.list[target.name.split(",")[0].split(":")[1]].dataset_token; + let datasetToken = + datasets.list[target.name.split(",")[0].split(":")[1]].dataset_token; todo(datasetToken, type); }; @@ -79,7 +95,7 @@ function VoiceDesignerMainPage() { label: "Delete", small: true, variant: "danger", - onClick: datasetClick(datasets.delete, "dataset"), + onClick: datasetClick(openDeleteModal, "dataset"), }, ], name: dataset.title, @@ -101,7 +117,7 @@ function VoiceDesignerMainPage() { label: "Delete", small: true, variant: "danger", - onClick: voiceClick(voices.delete, "voice"), + onClick: voiceClick(openDeleteModal, "voice"), }, { label: "Use Voice", @@ -131,7 +147,7 @@ function VoiceDesignerMainPage() { panel={false} imageUrl="/images/header/voice-designer.png" /> - +