daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-04 09:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

login/signup prompt revisions

Browse Source
This commit is contained in:
Victor committed 2024-08-05 13:59:27 -07:00
1 parent e5d920af94
commit 09031db348
5 files changed
+127 -99
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/website/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx
-1
View File
@@ -46,7 +46,6 @@ export default function LoginView({
className: "login-modal-login-link",
onClick: () => {
if (!animating) {
console.log("💓");
viewSwitch();
}
},
src/website/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx
+1 -1
View File
@@ -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) {
src/website/packages/fakeyou.com/src/hooks/useChanger/useChanger.tsx
+68 -34
View File
@@ -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<InputStateLibrary>(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<InputStateLibrary>(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 };
};
return { allAreValid, setProps, state, update };
}
src/website/packages/fakeyou.com/src/hooks/useModalState.tsx
+55 -54
View File
@@ -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<ModalConfig | null>(null);
const [modalOpen, modalOpenSet] = useState(false);
const [killModal, killModalSet] = useState(false);
const [modalState, modalStateSet] = useState<ModalConfig | null>(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,
};
}
src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
+3 -9
View File
@@ -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(
<>
<Container className="mt-3" type="panel">
<Panel className="d-block d-lg-none mb-3">{vstInfo}</Panel>