From 09031db348d4f2ecce5f498e4a1a403f565f370e Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 5 Aug 2024 13:59:27 -0700 Subject: [PATCH] login/signup prompt revisions --- .../layout/AccountModal/SignupView.tsx | 1 - .../SessionProvider/SessionProvider.tsx | 2 +- .../src/hooks/useChanger/useChanger.tsx | 102 ++++++++++------ .../fakeyou.com/src/hooks/useModalState.tsx | 109 +++++++++--------- .../v2/view/pages/style-video/StyleVideo.tsx | 12 +- 5 files changed, 127 insertions(+), 99 deletions(-) diff --git a/src/website/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx b/src/website/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx index caffa92a45..1118a9f321 100644 --- a/src/website/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx +++ b/src/website/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx @@ -46,7 +46,6 @@ export default function LoginView({ className: "login-modal-login-link", onClick: () => { if (!animating) { - console.log("๐Ÿ’“"); viewSwitch(); } }, diff --git a/src/website/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx b/src/website/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx index 1803ec6945..5e954c5455 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx +++ b/src/website/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx @@ -83,7 +83,7 @@ export default function SessionProvider({ const { logged_in: loggedIn, user } = sessionResponse; const { close, killModal, modalOpen, modalState, onModalCloseEnd, open } = - useModalState({ debug: "SessionProvider" }); + useModalState({}); const loggedInOrModal = (accountModalMessages: AccountModalMessages) => { if (user) { diff --git a/src/website/packages/fakeyou.com/src/hooks/useChanger/useChanger.tsx b/src/website/packages/fakeyou.com/src/hooks/useChanger/useChanger.tsx index 7dcdd62d74..97925d9a79 100644 --- a/src/website/packages/fakeyou.com/src/hooks/useChanger/useChanger.tsx +++ b/src/website/packages/fakeyou.com/src/hooks/useChanger/useChanger.tsx @@ -1,43 +1,69 @@ import { useState } from "react"; -import { InputValidation, InputStateLibrary, ValidatorCallbacks } from "common/InputValidation"; +import { + InputValidation, + InputStateLibrary, + ValidatorCallbacks, +} from "common/InputValidation"; interface InputInput { - errorText?: { [key: string]: string }, - validator?: (value: ValidatorCallbacks) => ValidatorOutput, - value: any, + errorText?: { [key: string]: string }; + validator?: (value: ValidatorCallbacks) => ValidatorOutput; + value: any; } interface Props { - [key:string]: InputInput + [key: string]: InputInput; } -interface ValidatorOutput { additional?: any, value: any, reason: string, validation: any } +interface ValidatorOutput { + additional?: any; + value: any; + reason: string; + validation: any; +} -const noValidation = ({ inputValue }: ValidatorCallbacks) => ({ value: inputValue, reason: "", validation: InputValidation.Neutral }); +const noValidation = ({ inputValue }: ValidatorCallbacks) => ({ + value: inputValue, + reason: "", + validation: InputValidation.Neutral, +}); export default function useChanger(input: Props) { - const baseValidation = Object.keys(input).reduce((obj,key) => ({ ...obj, [key]: { - reason: "", - validation: InputValidation.Neutral, - value: input[key].value - } }),{}) - const [state,stateSet] = useState(baseValidation); - - const changer = (name: string) => ({ target }: { target: { value: any } }) => { - const validator = input[name]?.validator || noValidation; - const { additional, value, reason, validation, } : ValidatorOutput = validator({ inputValue: target.value, name, state }); - const updateValidations = ( initial: InputStateLibrary ) => ({ - ...initial, - ...additional, - [name]: { reason, validation, value } - }); - console.log(`๐Ÿ“‹ useChanger onChange, name: ${ name }`,{ reason, validation, value }); - stateSet(updateValidations); - // setter(newValue); - }; + const baseValidation = Object.keys(input).reduce( + (obj, key) => ({ + ...obj, + [key]: { + reason: "", + validation: InputValidation.Neutral, + value: input[key].value, + }, + }), + {} + ); + const [state, stateSet] = useState(baseValidation); - const allAreValid = () => !Object.values(state).find((item,i) => - ((item.validation === InputValidation.Neutral) || (item.validation === InputValidation.Invalid)) ); + const changer = + (name: string) => + ({ target }: { target: { value: any } }) => { + const validator = input[name]?.validator || noValidation; + const { additional, value, reason, validation }: ValidatorOutput = + validator({ inputValue: target.value, name, state }); + const updateValidations = (initial: InputStateLibrary) => ({ + ...initial, + ...additional, + [name]: { reason, validation, value }, + }); + + stateSet(updateValidations); + // setter(newValue); + }; + + const allAreValid = () => + !Object.values(state).find( + (item, i) => + item.validation === InputValidation.Neutral || + item.validation === InputValidation.Invalid + ); const setProps = (name: string) => { const config = input[name]; @@ -47,16 +73,24 @@ export default function useChanger(input: Props) { name, value: current.value, invalidReason: config.errorText ? config.errorText[current.reason] : "", - onChange: changer(name) - } + onChange: changer(name), + }; } }; - const update = ({ name, reason, validation }: { name: string, reason: string, validation: number }) => + const update = ({ + name, + reason, + validation, + }: { + name: string; + reason: string; + validation: number; + }) => stateSet((lib: InputStateLibrary) => ({ ...lib, - [name]: { ...state[name], reason, validation } + [name]: { ...state[name], reason, validation }, })); - return { allAreValid, setProps, state, update }; -}; \ No newline at end of file + return { allAreValid, setProps, state, update }; +} diff --git a/src/website/packages/fakeyou.com/src/hooks/useModalState.tsx b/src/website/packages/fakeyou.com/src/hooks/useModalState.tsx index 7ef0402a85..a3d839d9ea 100644 --- a/src/website/packages/fakeyou.com/src/hooks/useModalState.tsx +++ b/src/website/packages/fakeyou.com/src/hooks/useModalState.tsx @@ -4,68 +4,69 @@ import { isMobile } from "react-device-detect"; export type ModalWidth = "wide" | "narrow"; export interface ModalConfig { - component: React.ElementType; - lockTint?: boolean; - props?: any; - width?: ModalWidth; + component: React.ElementType; + lockTint?: boolean; + props?: any; + width?: ModalWidth; } export default function useModalState({ debug = "" }) { - const [modalState, modalStateSet] = useState(null); - const [modalOpen, modalOpenSet] = useState(false); - const [killModal, killModalSet] = useState(false); + const [modalState, modalStateSet] = useState(null); + const [modalOpen, modalOpenSet] = useState(false); + const [killModal, killModalSet] = useState(false); - if (debug) { - console.log(`๐Ÿ’ฌ useModalState at ${debug}`, { - modalState, - modalOpen, - killModal, - }); - } + if (debug) { + console.log(`๐Ÿ’ฌ useModalState at ${debug}`, { + modalState, + modalOpen, + killModal, + }); + } - const open = (cfg: ModalConfig) => { - modalStateSet(cfg); - if (debug) console.log(`๐Ÿšช useModalState open() at ${debug}`, { cfg }); - }; + const open = (cfg: ModalConfig) => { + if (debug) { + console.log(`๐Ÿšช useModalState open() at ${debug}`, { cfg }); + } + modalStateSet(cfg); + }; - const close = () => { - killModalSet(true); - modalOpenSet(false); - if (debug) console.log(`๐Ÿ”ฅ useModalState close() at ${debug}`); - }; + const close = () => { + if (debug) { + console.log(`๐Ÿ”ฅ useModalState close() at ${debug}`); + } + killModalSet(true); + modalOpenSet(false); + }; - const onModalCloseEnd = () => { - console.log("๐Ÿฉต", killModal); - if (killModal && modalState) { - console.log("๐Ÿ’š", killModal); - killModalSet(false); - modalStateSet(null); - } - }; + const onModalCloseEnd = () => { + if (killModal && modalState) { + killModalSet(false); + modalStateSet(null); + } + }; - useEffect(() => { - // Prevent body scrolling when modal is open on mobile - if (modalOpen && isMobile) { - document.body.classList.add("overflow-hidden"); - } else { - document.body.classList.remove("overflow-hidden"); - } + useEffect(() => { + // Prevent body scrolling when modal is open on mobile + if (modalOpen && isMobile) { + document.body.classList.add("overflow-hidden"); + } else { + document.body.classList.remove("overflow-hidden"); + } - if (!killModal && modalState && !modalOpen) { - console.log("๐Ÿงข"); - modalOpenSet(true); - } - }, [killModal, modalOpen, modalOpenSet, modalState]); + if (!killModal && modalState && !modalOpen) { + modalOpenSet(true); + } + }, [killModal, modalOpen, modalOpenSet, modalState]); - return { - close, - killModal, - killModalSet, - modalOpen, - modalOpenSet, - modalState, - modalStateSet, - onModalCloseEnd, - open, - }; + return { + close, + killModal, + killModalSet, + modalOpen, + modalOpenSet, + modalState, + modalStateSet, + onModalCloseEnd, + open, + }; } diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx index a936c17028..3c9c2060fa 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx @@ -29,7 +29,7 @@ import { isMobile } from "react-device-detect"; export default function StyleVideo() { const { mediaToken: pageMediaToken } = useParams<{ mediaToken: string }>(); - const { loggedInOrModal, sessionFetched } = useSession(); + const { styleVideoAccessCheck, sessionFetched } = useSession(); const [mediaToken, mediaTokenSet] = useState(pageMediaToken || ""); const [IPAToken, IPATokenSet] = useState(""); const [prompt, promptSet] = useState(""); @@ -57,13 +57,7 @@ export default function StyleVideo() { usePrefixedDocumentTitle("Style Video"); const onClick = () => { - if ( - loggedInOrModal({ - loginMessage: "Login to finish your video", - signupMessage: "Signup to finish your video", - }) && - mediaToken - ) { + if (mediaToken) { EnqueueVST("", { creator_set_visibility: "private", enable_lipsync: enableLipsync, @@ -197,7 +191,7 @@ export default function StyleVideo() { ); } - return ( + return styleVideoAccessCheck( <> {vstInfo}