From bba1c3ea643ef7d2de256ec6a141cafdc87ab20c Mon Sep 17 00:00:00 2001 From: kasisnu <5044120+kasisnu@users.noreply.github.com> Date: Thu, 2 Nov 2023 22:35:37 +0530 Subject: [PATCH 1/7] set cookie with plan/user id --- package.json | 1 + .../session/SessionSubscriptionsWrapper.ts | 32 ++++++++++++++++--- packages/fakeyou.com/src/App.tsx | 25 ++++++++++++--- yarn.lock | 25 +++++++++++++++ 4 files changed, 74 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 0438a61c5d..28355deef9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,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/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..4b0560aea5 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, @@ -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, }); diff --git a/yarn.lock b/yarn.lock index 38cea68bf5..fe035b10fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4572,6 +4572,7 @@ __metadata: "@react-spring/types": ^9.7.3 craco: ^0.0.3 lerna: ^4.0.0 + universal-cookie: ^6.1.1 yarn: ^1.22.19 languageName: unknown linkType: soft @@ -5101,6 +5102,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" @@ -8398,6 +8406,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" @@ -20352,6 +20367,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" From ed43345cd70d6b85db168ff743f57af727be4c0d Mon Sep 17 00:00:00 2001 From: Victor Holguin Date: Thu, 2 Nov 2023 15:55:44 -0700 Subject: [PATCH 2/7] 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({ 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< - + 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([]); + + 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 ( ); From 4b9cb9d81afc8848c9d84728e58351384104ad06 Mon Sep 17 00:00:00 2001 From: kasisnu <5044120+kasisnu@users.noreply.github.com> Date: Fri, 3 Nov 2023 13:13:59 +0530 Subject: [PATCH 3/7] small lint fix --- .../pages/generate_speech/GenerateSpeechPage.tsx | 2 +- .../components/VoiceDesignerUploadComponent.tsx | 14 ++++++++------ .../components/steps/UploadSamples.tsx | 3 +++ .../components/steps/VoiceDetails.tsx | 6 +++--- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/generate_speech/GenerateSpeechPage.tsx b/packages/fakeyou.com/src/v2/view/pages/generate_speech/GenerateSpeechPage.tsx index b6114f1dc0..ef26969299 100644 --- a/packages/fakeyou.com/src/v2/view/pages/generate_speech/GenerateSpeechPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/generate_speech/GenerateSpeechPage.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { faMicrophone, faVolume } from "@fortawesome/pro-solid-svg-icons"; +import { faVolume } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import { PageHeaderWithImage } from "v2/view/_common/PageHeaderWithImage"; 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 (
From e8e3d5f060fd15a5d8e4fbf519dc95a84518b8df Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 3 Nov 2023 15:02:22 +0700 Subject: [PATCH 4/7] reset password flow --- .../src/components/common/Button/Button.tsx | 15 ++- .../layout/PageHeader/PageHeader.tsx | 12 +- .../fakeyou.com/src/v2/view/PageContainer.tsx | 29 ++++- .../src/v2/view/pages/login/LoginPage.tsx | 107 +++++++++--------- .../PasswordResetChangePage.tsx | 80 +++++++++++++ .../password_reset/PasswordResetEmailPage.tsx | 52 +++++++++ .../PasswordResetVerificationPage.tsx | 67 +++++++++++ 7 files changed, 302 insertions(+), 60 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetChangePage.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetEmailPage.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx 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/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index 3d151eed07..bf3b9e9e65 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -56,7 +56,11 @@ export default function PageHeader({
)}
-
+

{/* {icon} */} @@ -76,7 +80,11 @@ export default function PageHeader({

)}
-
+
{imageUrl && ( + + + + + + + + + + + + @@ -645,9 +666,11 @@ class PageContainer extends React.Component< - + diff --git a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx b/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx index 621be86326..1135cc46e3 100644 --- a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import { WebUrl } from "../../../../common/WebUrl"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { Link, useHistory } from "react-router-dom"; import { @@ -13,6 +12,9 @@ import { faUser, faKey } from "@fortawesome/free-solid-svg-icons"; import { Analytics } from "../../../../common/Analytics"; import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient"; +import Container from "components/common/Container"; +import Panel from "components/common/Panel"; +import PageHeader from "components/layout/PageHeader"; interface Props { sessionWrapper: SessionWrapper; @@ -88,62 +90,59 @@ function LoginPage(props: Props) { } return ( -
-
-
-

Login

-
- {errorWarning} + + + + {errorWarning} -
-
-
- -
- - - - -
- {/*

*/} -
- -
- -
- - - - -
- {/*

*/} -
- - -

- 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..a8ba95892e --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx @@ -0,0 +1,67 @@ +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 }; +function setIsLoading(arg0: boolean) { + throw new Error("Function not implemented."); +} From 6bb1ddb58b49fd1e28aa034c76a4c495791a14ec Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 3 Nov 2023 15:02:57 +0700 Subject: [PATCH 5/7] fix --- .../pages/password_reset/PasswordResetVerificationPage.tsx | 3 --- 1 file changed, 3 deletions(-) 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 index a8ba95892e..12a7b756f2 100644 --- a/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx @@ -62,6 +62,3 @@ function PasswordResetVerificationPage(props: Props) { } export { PasswordResetVerificationPage }; -function setIsLoading(arg0: boolean) { - throw new Error("Function not implemented."); -} From b9103fb73727d3b8e52adba34b7aed420fa25a1d Mon Sep 17 00:00:00 2001 From: Victor Holguin Date: Fri, 3 Nov 2023 16:02:44 -0700 Subject: [PATCH 6/7] reworked voice designer ListItems component to allow iterating and applying onclick functions and other needed features, allowing for DeleteDataset endpoint implementation, via the useVoiceRequest hook --- .../voice_datasets/DeleteDataset.ts | 6 +- .../src/components/common/Modal/Modal.tsx | 20 ++++- .../voice_designer/VoiceDesignerMainPage.tsx | 72 +++++++++++------- .../voice_designer/components/NewList.tsx | 74 +++++++++++++++++++ .../pages/voice_designer/useVoiceRequests.tsx | 32 ++++++++ 5 files changed, 171 insertions(+), 33 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx 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/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 }) => {
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 68d40c3fdc..4432e7cc6b 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,36 +1,26 @@ -import React, { useEffect, useState } from "react"; +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 { ListDatasetsByUser, Dataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser"; +import { faMicrophone } from "@fortawesome/pro-solid-svg-icons"; + +import useVoiceRequests from "./useVoiceRequests"; interface Props { sessionWrapper: SessionWrapper; } function VoiceDesignerMainPage({ sessionWrapper }: Props) { - const { user } = sessionWrapper.sessionStateResponse || {}; - const [datasets,datasetsSet] = useState([]); - - usePrefixedDocumentTitle("Voice Designer"); - - useEffect(() => { - - if (!datasets.length && user) { - ListDatasetsByUser("hanashi",{}).then(res => { - if (res.datasets) datasetsSet(res.datasets); - }); - } - - },[user,datasets]); + const { datasets, deleteDataSet } = useVoiceRequests({ sessionWrapper }); const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false); const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = @@ -52,23 +42,51 @@ function VoiceDesignerMainPage({ sessionWrapper }: Props) { setIsDeleteDatasetModalOpen(false); }; - const voicesList = [ + const DataBadge = () => Dataset; + const VoiceBadge = () => ; + + const history = useHistory(); + + const navToEdit = (token: string) => { history.push(`/voice-designer/voice/${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", - // }, - // ]; function MyVoices() { return ( @@ -84,7 +102,7 @@ function VoiceDesignerMainPage({ sessionWrapper }: Props) { 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/useVoiceRequests.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx new file mode 100644 index 0000000000..0c49137b12 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx @@ -0,0 +1,32 @@ +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"; + +interface Props { + sessionWrapper: SessionWrapper; +} + +export default function useVoiceRequests({ sessionWrapper }: Props) { + const { user } = sessionWrapper.sessionStateResponse || {}; + const [datasets, datasetsSet] = useState([]); + + const deleteDataSet = (voiceToken: string) => DeleteDataset(voiceToken,{ + set_delete: true, + as_mod: false + }).then(res => { + console.log("🏧",res); + }); + + useEffect(() => { + + if (!datasets.length && user && user.username) { + ListDatasetsByUser(user.username,{}).then(res => { + if (res.datasets) datasetsSet(res.datasets); + }); + } + + },[user, datasets]); + + return { datasets, deleteDataSet }; +}; \ No newline at end of file From eb0a5ba01637ca351f00e4927d83822fbbf27fc6 Mon Sep 17 00:00:00 2001 From: Victor Holguin Date: Mon, 6 Nov 2023 22:18:35 -0800 Subject: [PATCH 7/7] added session context along with useSession hook to access it, along with more progress on voice designer api implementation --- packages/fakeyou.com/src/App.tsx | 202 +++++++++--------- .../src/components/common/index.tsx | 6 + .../layout/PageHeader/PageHeader.tsx | 11 +- .../providers/InferenceJobs/InferenceJobs.tsx | 5 +- .../components/providers/Session/Session.tsx | 13 ++ .../src/components/providers/Session/index.ts | 1 + .../src/components/providers/index.ts | 3 +- .../src/context/SessionContext.tsx | 7 + packages/fakeyou.com/src/context/index.ts | 3 +- packages/fakeyou.com/src/hooks/index.tsx | 3 +- .../fakeyou.com/src/hooks/useSession/index.ts | 1 + .../src/hooks/useSession/useSession.tsx | 7 + .../fakeyou.com/src/v2/view/PageContainer.tsx | 10 +- .../pages/voice_designer/DatasetEditor.tsx | 83 +++++++ .../voice_designer/VoiceDesignerMainPage.tsx | 15 +- .../pages/voice_designer/useVoiceRequests.tsx | 15 +- 16 files changed, 259 insertions(+), 126 deletions(-) create mode 100644 packages/fakeyou.com/src/components/providers/Session/Session.tsx create mode 100644 packages/fakeyou.com/src/components/providers/Session/index.ts create mode 100644 packages/fakeyou.com/src/context/SessionContext.tsx create mode 100644 packages/fakeyou.com/src/hooks/useSession/index.ts create mode 100644 packages/fakeyou.com/src/hooks/useSession/useSession.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 50bfc19ddb..797878f828 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -58,7 +58,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. @@ -789,104 +789,108 @@ class App extends React.Component { */}
- - - - - - + + + + + + + +
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 381ca1e40a..0e2c59f1fb 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -8,9 +8,12 @@ import FileDetails from "./FileDetails"; import FileWrapper from "./FileWrapper"; import FileLabel from "./FileLabel"; import ImageInput from "./ImageInput"; +import Input from "./Input"; import NumberSlider from "./NumberSlider"; +import Panel from "./Panel"; import Radio from "./Radio"; import SegmentButtons from "./SegmentButtons"; +import Select from "./Select"; import Slider from "./Slider"; import Spinner from "./Spinner"; @@ -25,9 +28,12 @@ export { FileWrapper, FileLabel, ImageInput, + Input, NumberSlider, + Panel, Radio, SegmentButtons, + Select, Slider, Spinner }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index 3d151eed07..050bb6336c 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -5,7 +5,13 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import Button from "components/common/Button"; import BackButton from "components/common/BackButton"; +interface BackConfig { + label: string; + to: string; +}; + interface PageHeaderProps { + back?: BackConfig; titleIcon?: IconDefinition; title: string | React.ReactNode; subText: string | React.ReactNode; @@ -25,6 +31,7 @@ interface PageHeaderProps { } export default function PageHeader({ + back, titleIcon, title, subText, @@ -50,9 +57,9 @@ export default function PageHeader({ return (
- {showBackButton && ( + {( back || showBackButton) && (
- +
)}
diff --git a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx index b99bfc9ca7..af5c3a3665 100644 --- a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx +++ b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx @@ -6,9 +6,10 @@ import { InferenceJobsContext } from 'context'; interface Props { children?: any; byCategory?: any; + sessionWrapper?: any; } -export default function InferenceJobs({ children, byCategory }: Props) { +export default function InferenceJobs({ children, byCategory, sessionWrapper }: Props) { const processStatus = (job: InferenceJob) => { switch (job.jobState) { case JobState.PENDING: @@ -21,7 +22,7 @@ export default function InferenceJobs({ children, byCategory }: Props) { default: return -1; } }; - return + return { children } }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/Session/Session.tsx b/packages/fakeyou.com/src/components/providers/Session/Session.tsx new file mode 100644 index 0000000000..518dd6dce4 --- /dev/null +++ b/packages/fakeyou.com/src/components/providers/Session/Session.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { SessionContext } from 'context'; + +interface Props { + children?: any; + sessionWrapper?: any; +} + +export default function Session({ children, sessionWrapper }: Props) { + return + { children } + +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/Session/index.ts b/packages/fakeyou.com/src/components/providers/Session/index.ts new file mode 100644 index 0000000000..69cdd4d58f --- /dev/null +++ b/packages/fakeyou.com/src/components/providers/Session/index.ts @@ -0,0 +1 @@ +export { default } from './Session'; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/index.ts b/packages/fakeyou.com/src/components/providers/index.ts index c38ad0d803..c8c22f1f64 100644 --- a/packages/fakeyou.com/src/components/providers/index.ts +++ b/packages/fakeyou.com/src/components/providers/index.ts @@ -1,3 +1,4 @@ import InferenceJobs from "./InferenceJobs"; +import Session from "./Session"; -export { InferenceJobs }; \ No newline at end of file +export { InferenceJobs, Session }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/context/SessionContext.tsx b/packages/fakeyou.com/src/context/SessionContext.tsx new file mode 100644 index 0000000000..4629d82486 --- /dev/null +++ b/packages/fakeyou.com/src/context/SessionContext.tsx @@ -0,0 +1,7 @@ +import { createContext } from "react"; + +interface SessionContextType { + sessionWrapper?: any +} + +export default createContext({}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/context/index.ts b/packages/fakeyou.com/src/context/index.ts index 679d217f2e..104d13cde7 100644 --- a/packages/fakeyou.com/src/context/index.ts +++ b/packages/fakeyou.com/src/context/index.ts @@ -1,3 +1,4 @@ import InferenceJobsContext from "./InferenceJobsContext"; +import SessionContext from "./SessionContext"; -export { InferenceJobsContext }; \ No newline at end of file +export { InferenceJobsContext, SessionContext }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx index c9e01ef0f9..0f7bd1a174 100644 --- a/packages/fakeyou.com/src/hooks/index.tsx +++ b/packages/fakeyou.com/src/hooks/index.tsx @@ -4,6 +4,7 @@ import useId from './useId'; import useIdempotency from './useIdempotency'; import useInferenceJobs from './useInferenceJobs'; import useLocalize from './useLocalize'; +import useSession from './useSession'; import useVideo from './useVideo'; -export { useFile, useHover, useId, useIdempotency, useInferenceJobs, useLocalize, useVideo }; +export { useFile, useHover, useId, useIdempotency, useInferenceJobs, useLocalize, useSession, useVideo }; diff --git a/packages/fakeyou.com/src/hooks/useSession/index.ts b/packages/fakeyou.com/src/hooks/useSession/index.ts new file mode 100644 index 0000000000..83d5c10a6e --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSession/index.ts @@ -0,0 +1 @@ +export { default } from './useSession'; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useSession/useSession.tsx b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx new file mode 100644 index 0000000000..e932575587 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx @@ -0,0 +1,7 @@ +import { useContext } from 'react'; +import { SessionContext } from 'context'; + +export default function useInferenceJobs() { + const { sessionWrapper } = useContext(SessionContext); + return sessionWrapper?.sessionStateResponse || {}; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 57a41219af..42f105cb09 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -82,6 +82,7 @@ import { VoiceConversionModelListItem } from "@storyteller/components/src/api/vo import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage"; import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage"; import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage"; +import DatasetEditor from "./pages/voice_designer/DatasetEditor"; import { GenerateSpeechPage } from "./pages/generate_speech/GenerateSpeechPage"; import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage"; import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage"; @@ -630,7 +631,10 @@ class PageContainer extends React.Component< {/* Route for handling dataset token for uploading samples */} @@ -645,9 +649,7 @@ class PageContainer extends React.Component< - + 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 4432e7cc6b..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 @@ -9,18 +9,17 @@ import { Route, NavLink, Switch, Redirect } from "react-router-dom"; 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 { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { faMicrophone } from "@fortawesome/pro-solid-svg-icons"; - import useVoiceRequests from "./useVoiceRequests"; -interface Props { - sessionWrapper: SessionWrapper; -} +// interface Props { +// sessionWrapper: SessionWrapper; +// } -function VoiceDesignerMainPage({ sessionWrapper }: Props) { +function VoiceDesignerMainPage() { - const { datasets, deleteDataSet } = useVoiceRequests({ sessionWrapper }); + const { datasets, deleteDataSet } = useVoiceRequests(); const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false); const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = @@ -47,7 +46,7 @@ function VoiceDesignerMainPage({ sessionWrapper }: Props) { const history = useHistory(); - const navToEdit = (token: string) => { history.push(`/voice-designer/voice/${token}/edit`) } + 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; 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 index 0c49137b12..138ad4af7e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx @@ -1,15 +1,12 @@ import { useEffect, useState } from 'react'; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +// 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"; -interface Props { - sessionWrapper: SessionWrapper; -} - -export default function useVoiceRequests({ sessionWrapper }: Props) { - const { user } = sessionWrapper.sessionStateResponse || {}; +export default function useVoiceRequests() { const [datasets, datasetsSet] = useState([]); + const { user } = useSession(); const deleteDataSet = (voiceToken: string) => DeleteDataset(voiceToken,{ set_delete: true, @@ -18,6 +15,8 @@ export default function useVoiceRequests({ sessionWrapper }: Props) { console.log("🏧",res); }); + const datasetByToken = (datasetToken?: string) => datasets.filter(({ dataset_token },i) => datasetToken === dataset_token)[0]; + useEffect(() => { if (!datasets.length && user && user.username) { @@ -28,5 +27,5 @@ export default function useVoiceRequests({ sessionWrapper }: Props) { },[user, datasets]); - return { datasets, deleteDataSet }; + return { datasetByToken, datasets, deleteDataSet }; }; \ No newline at end of file