diff --git a/package.json b/package.json index b94a8c18b5..b5493da5ec 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ }, "dependencies": { "@react-spring/types": "^9.7.3", + "universal-cookie": "^6.1.1", "yarn": "^1.22.19" }, "packageManager": "yarn@3.3.1" diff --git a/packages/components/src/api/voice_designer/voice_datasets/DeleteDataset.ts b/packages/components/src/api/voice_designer/voice_datasets/DeleteDataset.ts index b69bd53000..060ac57db2 100644 --- a/packages/components/src/api/voice_designer/voice_datasets/DeleteDataset.ts +++ b/packages/components/src/api/voice_designer/voice_datasets/DeleteDataset.ts @@ -1,15 +1,15 @@ import MakeRequest from "../../MakeRequest"; -export interface DreateVoiceRequest { +export interface DeleteVoiceRequest { set_delete: boolean; as_mod: boolean; } -export interface DreateVoiceResponse { +export interface DeleteVoiceResponse { success: boolean } -export const DeleteVoice = MakeRequest({ +export const DeleteDataset = MakeRequest({ method: "DELETE", routingFunction: (voiceToken: string) => `/v1/voice_designer/dataset/${ voiceToken }/delete`, }); 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({ method: "GET", routingFunction: (userName: string) => `/v1/voice_designer/dataset/user/${ userName }/list`, diff --git a/packages/components/src/session/SessionSubscriptionsWrapper.ts b/packages/components/src/session/SessionSubscriptionsWrapper.ts index bf097bfe1e..a88ef53a9f 100644 --- a/packages/components/src/session/SessionSubscriptionsWrapper.ts +++ b/packages/components/src/session/SessionSubscriptionsWrapper.ts @@ -1,4 +1,9 @@ -import { ActiveSubscription, ListActiveSubscriptions, ListActiveSubscriptionsIsSuccess, ListActiveSubscriptionsSuccessResponse } from "../api/premium/ListActiveSubscriptions"; +import { + ActiveSubscription, + ListActiveSubscriptions, + ListActiveSubscriptionsIsSuccess, + ListActiveSubscriptionsSuccessResponse, +} from "../api/premium/ListActiveSubscriptions"; import { FakeYouFrontendEnvironment } from "../env/FakeYouFrontendEnvironment"; const FAKEYOU_NAMESPACE = "fakeyou"; @@ -72,8 +77,25 @@ export class SessionSubscriptionsWrapper { return maybePlan !== undefined; } - private findActiveSubscription(namespace: string, product_slug: string) : ActiveSubscription | undefined { - const subs = this.listActiveSubscriptionResponse?.active_subscriptions || []; - return subs.find((sub) => sub.namespace === namespace && sub.product_slug === product_slug); + public getActiveProductSlug(): string | undefined { + if (this.hasActiveEliteSubscription()) { + return "fakeyou_elite"; + } else if (this.hasActiveProSubscription()) { + return "fakeyou_pro"; + } else if (this.hasActivePlusSubscription()) { + return "fakeyou_plus"; + } + return undefined; } -} \ No newline at end of file + + private findActiveSubscription( + namespace: string, + product_slug: string + ): ActiveSubscription | undefined { + const subs = + this.listActiveSubscriptionResponse?.active_subscriptions || []; + return subs.find( + (sub) => sub.namespace === namespace && sub.product_slug === product_slug + ); + } +} diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 50bfc19ddb..a2e050ab72 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -3,6 +3,7 @@ import "scss/custom-bootstrap.scss"; import React from "react"; import { ApiConfig } from "@storyteller/components"; +import Cookies from 'universal-cookie'; import { DetectLocale, DetectLocaleIsOk, @@ -58,7 +59,7 @@ import { VoiceConversionModelUploadJob } from "@storyteller/components/src/jobs/ import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels"; import HttpBackend from "i18next-http-backend"; -import { InferenceJobs } from "components/providers"; +import { InferenceJobs, Session as SessionProvider } from "components/providers"; // NB: We're transitioning over to this instance of i18n-next that loads translations over HTTP from Json Files. // The old i18n-next instance (see below) bakes in translations into the compiled javascript blob. @@ -256,6 +257,7 @@ class App extends React.Component { voiceConversionModels: [], maybeSelectedVoiceConversionModel: undefined, }; + } componentWillMount() { @@ -293,13 +295,18 @@ class App extends React.Component { querySession = async () => { const sessionWrapper = await SessionWrapper.lookupSession(); const username = sessionWrapper.getDisplayName(); + const cookies = new Cookies(); + if (username !== undefined) { // Track only logged-in users (for now) PosthogClient.enablePosthog(); PosthogClient.setUsername(username); - window.dataLayer.push({ - 'user_id': username, - }); + cookies.set('logged_in_username', username, { path: '/', expires: new Date(Date.now()+3 * 86400000) }); + window.dataLayer.push({ + 'user_id': username, + }); + } else { + cookies.remove('logged_in_username', { path: '/' }); } this.setState({ sessionWrapper: sessionWrapper, @@ -307,8 +314,18 @@ class App extends React.Component { }; querySessionSubscriptions = async () => { + const cookies = new Cookies(); + const sessionSubscriptionsWrapper = - await SessionSubscriptionsWrapper.lookupActiveSubscriptions(); + await SessionSubscriptionsWrapper.lookupActiveSubscriptions(); + + const plan = sessionSubscriptionsWrapper.getActiveProductSlug(); + if (plan !== undefined) { + cookies.set('logged_in_user_plan', plan, { path: '/', expires: new Date(Date.now()+3 * 86400000) }); + } else { + cookies.remove('logged_in_user_plan', { path: '/' }); + } + this.setState({ sessionSubscriptionsWrapper: sessionSubscriptionsWrapper, }); @@ -789,104 +806,108 @@ class App extends React.Component { */}
- - - - - - + + + + + + + +
diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx index d340bed5cc..02d3ac8e0f 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.tsx +++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx @@ -20,6 +20,7 @@ interface ButtonProps extends ButtonHTMLAttributes { iconFlip?: boolean; download?: boolean | string; disabled?: boolean; + isLoading?: boolean; } export default function Button({ @@ -36,6 +37,7 @@ export default function Button({ iconFlip = false, download, disabled, + isLoading = false, ...rest }: ButtonProps) { let iconMarginClass = !square && label ? (iconFlip ? "ms-2" : "me-2") : ""; @@ -45,13 +47,22 @@ export default function Button({ let LabelComponent = !square ? label : null; + const SpinnerComponent = isLoading ? ( +
+ Loading... +
+ ) : null; + const externalClass = rest.className || ""; const commonProps = { className: `${externalClass} button ${small ? "button-small" : ""} ${ square ? (small ? "button-square-small" : "button-square") : "" } button-${variant} ${full ? "w-100" : ""}`, - disabled: disabled, + disabled: disabled || isLoading, }; delete rest.className; @@ -60,11 +71,13 @@ export default function Button({ <> {LabelComponent} {IconComponent} + {SpinnerComponent} ) : ( <> {IconComponent} {LabelComponent} + {SpinnerComponent} ); diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx index e85ae516d0..dd5fbc94cb 100644 --- a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx +++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx @@ -4,14 +4,18 @@ import { faTrashAlt } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useSpring, a } from "@react-spring/web"; + + interface ModalProps { show: boolean; handleClose: () => void; + onCancel?: (e: React.MouseEvent) => any; + onConfirm?: (e: React.MouseEvent) => any; title: string; content: React.ReactNode; } -const Modal: React.FC = ({ show, handleClose, title, content }) => { +const Modal: React.FC = ({ show, handleClose, onCancel: cancelEvent, onConfirm: confirmEvent, title, content }) => { const modalRef = useRef(null); const fadeIn = useSpring({ @@ -22,6 +26,16 @@ const Modal: React.FC = ({ show, handleClose, title, content }) => { }, }); + const onCancel = (e: React.MouseEvent) => { + if (cancelEvent) cancelEvent(e); + handleClose(); + }; + + const onConfirm = (e: React.MouseEvent) => { + if (confirmEvent) confirmEvent(e); + handleClose(); + }; + useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( @@ -70,9 +84,9 @@ const Modal: React.FC = ({ show, handleClose, title, content }) => { -

- Don’t have an account?   - - Create an account now. - -

+ +
+
+ +
+ + + +
- + {/*

*/} +
+ +
+ +
+ + + + +
+

+ + Forgot your password? + +

+
- - - + + + + ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetChangePage.tsx b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetChangePage.tsx new file mode 100644 index 0000000000..f8e1127982 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetChangePage.tsx @@ -0,0 +1,80 @@ +import React, { useState } from "react"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useHistory } from "react-router-dom"; +import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; +import Container from "components/common/Container"; +import PageHeader from "components/layout/PageHeader"; +import Input from "components/common/Input"; +import { Button } from "components/common"; +import Panel from "components/common/Panel"; +import { faKey } from "@fortawesome/pro-solid-svg-icons"; +import BackButton from "components/common/BackButton"; + +interface Props { + sessionWrapper: SessionWrapper; +} + +function PasswordResetChangePage(props: Props) { + let history = useHistory(); + const [isPasswordChanged, setIsPasswordChanged] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + if (props.sessionWrapper.isLoggedIn()) { + history.push("/"); + } + + usePrefixedDocumentTitle("Reset Password"); + + const handlePasswordChange = async () => { + // Simulate a delay using a timer (dummy timer) + setIsLoading(true); + + setTimeout(() => { + setIsPasswordChanged(true); + setIsLoading(false); + }, 2000); + }; + + return ( + + + + + {isPasswordChanged ? ( +
+

Your password has been successfully changed!

+ +
+ ) : ( +
+
+ + + + +
+
+ )} + + + ); +} + +export { PasswordResetChangePage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetEmailPage.tsx b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetEmailPage.tsx new file mode 100644 index 0000000000..c28aa8d728 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetEmailPage.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useHistory } from "react-router-dom"; +import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; +import Container from "components/common/Container"; +import PageHeader from "components/layout/PageHeader"; +import Input from "components/common/Input"; +import { Button } from "components/common"; +import Panel from "components/common/Panel"; +import { faEnvelope } from "@fortawesome/pro-solid-svg-icons"; + +interface Props { + sessionWrapper: SessionWrapper; +} + +function PasswordResetEmailPage(props: Props) { + let history = useHistory(); + + if (props.sessionWrapper.isLoggedIn()) { + history.push("/"); + } + + usePrefixedDocumentTitle("Reset Password"); + + return ( + + + + +
+
+ + +
+
+ + + ); +} + +export { PasswordResetEmailPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx new file mode 100644 index 0000000000..12a7b756f2 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx @@ -0,0 +1,64 @@ +import React, { useState } from "react"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useHistory } from "react-router-dom"; +import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; +import Container from "components/common/Container"; +import PageHeader from "components/layout/PageHeader"; +import Input from "components/common/Input"; +import { Button } from "components/common"; +import Panel from "components/common/Panel"; +import { faLock } from "@fortawesome/pro-solid-svg-icons"; + +interface Props { + sessionWrapper: SessionWrapper; +} + +function PasswordResetVerificationPage(props: Props) { + let history = useHistory(); + const [isLoading, setIsLoading] = useState(false); + + if (props.sessionWrapper.isLoggedIn()) { + history.push("/"); + } + + usePrefixedDocumentTitle("Code Verification"); + + const handleVerifyCode = async () => { + // Simulate a delay using a timer (dummy timer) + setIsLoading(true); + + setTimeout(() => { + setIsLoading(false); + }, 2000); + }; + + return ( + + + + +
+
+ + +
+
+ + + ); +} + +export { PasswordResetVerificationPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx new file mode 100644 index 0000000000..a4d21ed0b1 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState } from 'react'; +import { useParams } from "react-router-dom"; +import Container from "components/common/Container"; +import PageHeader from "components/layout/PageHeader"; +// import { Stepper } from "./components/Stepper"; +// import { StepperControls } from "./components/StepperControls"; +import { faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons"; +import { Input, Panel, Select } from "components/common"; +import useVoiceRequests from "./useVoiceRequests"; + + +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; + +interface Props { + value?: any; + sessionWrapper: SessionWrapper; +} + +interface RouteParams { + dataset_token?: string; +} + +export default function DatasetEditor({ sessionWrapper, value }: Props) { + const { datasets, datasetByToken } = useVoiceRequests(); + const [title, titleSet] = useState(""); + const [language,languageSet] = useState({ value: "en", label: "English"}); + const [visibility,visibilitySet] = useState(""); + const [ready,readySet] = useState(false); + // const [currentStep, currentStepSet] = useState(0); + const { dataset_token: token } = useParams(); + const pageTitle = token ? `Edit` : "Create Dataset"; + const subText = token ? + "Edit your dataset by uploading more samples to create a new voice" : + "Add voice details and upload audio samples to clone your voice!"; + const titleIcon = token ? faPencil : faWaveform; + const back = { + label: "Back to Voice Designer", + to: token ? "/voice-designer/datasets" : "/voice-designer/voices" + }; + // const steps = ["A","B"]; + + useEffect(() => { + if (token && datasets && datasets.length && !ready) { + const { creator_set_visibility, ietf_language_tag, title: resTitle } = datasetByToken(token); + console.log("β˜”οΈ",ietf_language_tag); + readySet(true); + titleSet(resTitle); + languageSet({ value: ietf_language_tag, label: "asss" }); + visibilitySet(creator_set_visibility); + } + },[datasetByToken,datasets,ready,token]); + + const inputCtrl = (todo: any) => ({ target }: { target: any}) => todo(target.value); + + const selectChange = ({ value }: any) => { // react-select doesn't format events like events, doesn't pass name prop, ew + console.log("πŸ•",value); + // languageSet(value); + } + + const options = [ + { value: "en", label: "English" }, + { value: "es", label: "Spanish" }, + { value: "fr", label: "French" }, + ]; + + const [abc,abcSet] = useState("123"); + + console.log("🚜", visibility, language, title); + return + + +
+ + console.log("🌸",e.target.value) }}> + + + + +
+ + ; +}; \ No newline at end of file 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..a3c77bcd0e 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,15 +1,25 @@ import React, { useState } from "react"; +import { useHistory } from "react-router-dom"; import { faPlus, faWaveform } from "@fortawesome/pro-solid-svg-icons"; -import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; +// import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; import PageHeader from "components/layout/PageHeader"; import Container from "components/common/Container"; import { Route, NavLink, Switch, Redirect } from "react-router-dom"; -import ListItems from "./components/ListItems/ListItems"; +import ListItems from "./components/NewList"; import Modal from "components/common/Modal"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { faMicrophone } from "@fortawesome/pro-solid-svg-icons"; +import useVoiceRequests from "./useVoiceRequests"; + +// interface Props { +// sessionWrapper: SessionWrapper; +// } function VoiceDesignerMainPage() { - usePrefixedDocumentTitle("Voice Designer"); + + const { datasets, deleteDataSet } = useVoiceRequests(); const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false); const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = @@ -31,24 +41,51 @@ function VoiceDesignerMainPage() { setIsDeleteDatasetModalOpen(false); }; - const voicesList = [ + const DataBadge = () => Dataset; + const VoiceBadge = () => ; + + const history = useHistory(); + + const navToEdit = (token: string) => { history.push(`/voice-designer/dataset/${token}/edit`) } + + const rowClick = (todo: any) => ({ target }: { target: any }) => { + let datasetToken = datasets[target.name.split(",")[0].split(":")[1]].dataset_token; + todo(datasetToken); + }; + + const actionDataSets = datasets.map((dataset,i) => { + return { + ...dataset, + badge: DataBadge, + buttons: [{ + label: "Edit", + small: true, + variant: "secondary", + onClick: rowClick(navToEdit) + },{ + label: "Delete", + small: true, + variant: "danger", + onClick: rowClick(deleteDataSet) + }], + name: dataset.title + }; + }); + + + const voicesList = [ { + badge: VoiceBadge, name: "Donald Trump (45th US President)", modelToken: "TM:z7x37sbvb8vc", isCreating: true, }, { + badge: VoiceBadge, name: "Spongebob Squarepants (Season 1)", modelToken: "TM:z7x37sbvb8vc", }, ]; - const datasetList = [ - { - name: "Donald Trump (45th US President)", - modelToken: "dummyToken", - }, - ]; - // const emptyList = [] as any[]; function MyVoices() { return ( @@ -64,7 +101,8 @@ function VoiceDesignerMainPage() { return ( ); diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx new file mode 100644 index 0000000000..b3cef1cfa8 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import Button from "components/common/Button"; +import { faPlus } from "@fortawesome/pro-solid-svg-icons"; + +import "./ListItems/ListItems.scss"; + + +interface ListItemsProps { + data: any[]; + type: "voice" | "dataset"; + handleDeleteVoice?: () => void; + handleDeleteDataset?: () => void; +} + +interface ListItem { + badge?: any; + buttons: any; + index: number; + isCreating?: boolean; + name: string; +} + +const Working = () =>
+

+ Voice is being created... +

+
+ Loading... +
+
; + +const ItemRow = ({ badge: Badge, buttons, index, isCreating, name, ...rest }: ListItem) => { + return
+
+
+ { Badge ? : null } + { name } +
+
+
+ { isCreating ? : +
+ { buttons && buttons.length ? buttons.map((action: any, key: number) => { + return
} +
+
; +}; + +export default function NewList({ data, handleDeleteDataset, type, handleDeleteVoice, }: ListItemsProps) { + + const DataPlaceholder = () =>
+
+ You haven't created any voices. +
+
; + return data.length ?
+ { data.map((item, key) => ) } +
: ; +}; \ No newline at end of file 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 dfa1cbd771..a19ce49952 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 @@ -8,11 +8,11 @@ import React, { useState } from "react"; import { FileUploader } from "react-drag-drop-files"; import { InputVcAudioPlayer } from "v2/view/_common/InputVcAudioPlayer"; import { v4 as uuidv4 } from "uuid"; -import { - UploadAudio, - UploadAudioIsOk, - UploadAudioRequest, -} from "@storyteller/components/src/api/upload/UploadAudio"; +// import { +// UploadAudio, +// UploadAudioIsOk, +// UploadAudioRequest, +// } from "@storyteller/components/src/api/upload/UploadAudio"; import useUploadedFiles from "hooks/useUploadedFiles"; const FILE_TYPES = ["MP3", "WAV", "FLAC", "OGG"]; @@ -34,6 +34,7 @@ function VoiceDesignerUploadComponent(props: Props) { const setAudioLinks = useUploadedFiles((state: any) => state.setAudioLinks); // Auto generated + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [idempotencyToken, setIdempotencyToken] = useState(uuidv4()); const handleChange = (file: any) => { @@ -68,6 +69,7 @@ function VoiceDesignerUploadComponent(props: Props) { ? `${Math.floor(file.size / 1024)} KB` : null; + // eslint-disable-next-line @typescript-eslint/no-unused-vars const uploadBtnClass = isUploadDisabled ? "btn btn-uploaded w-100 disabled" : "btn btn-primary w-100"; @@ -154,7 +156,7 @@ function VoiceDesignerUploadComponent(props: Props) { ); } - +// eslint-disable-next-line @typescript-eslint/no-unused-vars const LoadingIcon: React.FC = () => { return ( <> diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx index 671e35bae0..4d40654b13 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx @@ -3,6 +3,7 @@ import VoiceDesignerUploadComponent from "../VoiceDesignerUploadComponent"; import { v4 as uuidv4 } from "uuid"; function UploadSamples() { + /* eslint-disable @typescript-eslint/no-unused-vars */ const [convertLoading, setConvertLoading] = useState(false); const [canConvert, setCanConvert] = useState(false); const [mediaUploadToken, setMediaUploadToken] = useState( @@ -11,6 +12,8 @@ function UploadSamples() { const [convertIdempotencyToken, setConvertIdempotencyToken] = useState( uuidv4() ); + /* eslint-disable @typescript-eslint/no-unused-vars */ + const [formIsCleared, setFormIsCleared] = useState(false); const changeConvertIdempotencyToken = () => { diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx index f4848c8244..23a072dff9 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx @@ -4,8 +4,8 @@ import { // faMicrophoneLines, // faTags, } from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button } from "components/common"; +// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +// import { Button } from "components/common"; import Input from "components/common/Input"; import useVoiceDetailsStore from "hooks/useVoiceDetailsStore/"; import React from "react"; @@ -27,7 +27,7 @@ export const SearchFieldClass = { }; function VoiceDetails() { - const { name, visibility, setName, setVisibility } = useVoiceDetailsStore(); + const { visibility, setVisibility } = useVoiceDetailsStore(); return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx new file mode 100644 index 0000000000..138ad4af7e --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { ListDatasetsByUser, Dataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser"; +import { DeleteDataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/DeleteDataset"; +import { useSession } from "hooks"; + +export default function useVoiceRequests() { + const [datasets, datasetsSet] = useState([]); + const { user } = useSession(); + + const deleteDataSet = (voiceToken: string) => DeleteDataset(voiceToken,{ + set_delete: true, + as_mod: false + }).then(res => { + console.log("🏧",res); + }); + + const datasetByToken = (datasetToken?: string) => datasets.filter(({ dataset_token },i) => datasetToken === dataset_token)[0]; + + useEffect(() => { + + if (!datasets.length && user && user.username) { + ListDatasetsByUser(user.username,{}).then(res => { + if (res.datasets) datasetsSet(res.datasets); + }); + } + + },[user, datasets]); + + return { datasetByToken, datasets, deleteDataSet }; +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index bb656711c2..bf6cdd2679 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4574,6 +4574,7 @@ __metadata: craco: ^0.0.3 cross-env: ^7.0.3 lerna: ^4.0.0 + universal-cookie: ^6.1.1 yarn: ^1.22.19 languageName: unknown linkType: soft @@ -5103,6 +5104,13 @@ __metadata: languageName: node linkType: hard +"@types/cookie@npm:^0.5.1": + version: 0.5.3 + resolution: "@types/cookie@npm:0.5.3" + checksum: b785618f6b2fdceb6a20a17e1dfe99651b1e5c2c079f486de76dfb21b508f09d91913755e4a6dbdfe628882ea32466bb2e9318b114ce34efa5e624356494fcab + languageName: node + linkType: hard + "@types/debounce@npm:*": version: 1.2.1 resolution: "@types/debounce@npm:1.2.1" @@ -8400,6 +8408,13 @@ __metadata: languageName: node linkType: hard +"cookie@npm:^0.5.0": + version: 0.5.0 + resolution: "cookie@npm:0.5.0" + checksum: 1f4bd2ca5765f8c9689a7e8954183f5332139eb72b6ff783d8947032ec1fdf43109852c178e21a953a30c0dd42257828185be01b49d1eb1a67fd054ca588a180 + languageName: node + linkType: hard + "copy-concurrently@npm:^1.0.0": version: 1.0.5 resolution: "copy-concurrently@npm:1.0.5" @@ -20366,6 +20381,16 @@ __metadata: languageName: node linkType: hard +"universal-cookie@npm:^6.1.1": + version: 6.1.1 + resolution: "universal-cookie@npm:6.1.1" + dependencies: + "@types/cookie": ^0.5.1 + cookie: ^0.5.0 + checksum: 5c4d83f5879c5f133a51dadd080bf7a7a5c3a4b38695bb52ae560564884b84156d3c872abb1ade54a0ee00baf3870a59abc9907a4fa5bcf7a8d2d63af581c8e1 + languageName: node + linkType: hard + "universal-user-agent@npm:^6.0.0": version: 6.0.0 resolution: "universal-user-agent@npm:6.0.0"