From bba2b801d7002aecc2c0dad35d10d5dd9992c668 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 30 Jul 2024 13:48:02 -0700 Subject: [PATCH] added modal click outside to close, consolidated modal context into modal provider --- .../layout/AccountModal/AccountModal.tsx | 142 ++++++++++++------ .../AccountModalProvider.tsx | 41 ----- .../providers/AccountModalProvider/index.tsx | 1 - .../providers/ModalProvider/ModalLayer.scss | 1 + .../providers/ModalProvider/ModalLayer.tsx | 31 +++- .../providers/ModalProvider/ModalProvider.tsx | 37 +++-- .../providers/ModalProvider/index.tsx | 2 +- .../src/components/providers/index.tsx | 5 +- .../src/context/AccountModalContext.tsx | 16 -- .../fakeyou.com/src/context/ModalContext.tsx | 26 ---- .../fakeyou.com/src/context/index.tsx | 10 +- .../src/hooks/useModal/useModal.tsx | 6 +- 12 files changed, 156 insertions(+), 162 deletions(-) delete mode 100644 src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx delete mode 100644 src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/index.tsx delete mode 100644 src/website/packages/fakeyou.com/src/context/AccountModalContext.tsx delete mode 100644 src/website/packages/fakeyou.com/src/context/ModalContext.tsx diff --git a/src/website/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx b/src/website/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx index dabdb4b5f9..8830fdcdde 100644 --- a/src/website/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx +++ b/src/website/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx @@ -6,80 +6,134 @@ import useLogin from "./useLogin"; import useSignup from "./useSignup"; import LoginView from "./LoginView"; import SignupView from "./SignupView"; -import { ModalView } from "context/AccountModalContext"; import { Analytics } from "common/Analytics"; import "./AccountModal.scss"; interface AniProps { - animating: boolean, - isLeaving: boolean, - render: any, - style: any + animating: boolean; + isLeaving: boolean; + render: any; + style: any; } -const AniMod = ({ animating, isLeaving, render: Render, style, ...rest }: AniProps) => +export enum AccountModalView { + Closed, + Signup, + Login, +} + +const AniMod = ({ + animating, + isLeaving, + render: Render, + style, + ...rest +}: AniProps) => ( + - ; + +); -const Loader = ({ viewLogin }: { viewLogin: boolean }) =>
-

{ - viewLogin ? "Logging you in" : "Creating your account" - }

- -
; +const Loader = ({ viewLogin }: { viewLogin: boolean }) => ( +
+

{viewLogin ? "Logging you in" : "Creating your account"}

+ +
+); -export default function LoginModal({ handleClose, view, viewSwitch }: { handleClose: any, view: ModalView, viewSwitch: () => void }) { - const viewLogin = view === ModalView.Login; - const [status,statusSet] = useState(FetchStatus.paused); +export default function LoginModal({ + handleClose, + view, + viewSwitch, +}: { + handleClose: any; + view: AccountModalView; + viewSwitch: () => void; +}) { + const viewLogin = view === AccountModalView.Login; + const [status, statusSet] = useState(FetchStatus.paused); // const [viewLogin,viewLoginSet] = useState(false); - const [animating,animatingSet] = useState(false); - const { errorType, setProps: loginProps, login } = useLogin({ + const [animating, animatingSet] = useState(false); + const { + errorType, + setProps: loginProps, + login, + } = useLogin({ onSuccess: () => { Analytics.accountLoginSuccess(); - handleClose(); + handleClose(); }, status, - statusSet + statusSet, }); const { setProps: signupProps, signup } = useSignup({ onSuccess: () => { Analytics.accountSignupAttempt(); - handleClose(); + handleClose(); }, status, - statusSet + statusSet, }); - const index = status === FetchStatus.in_progress ? 2 : viewLogin ? 1: 0; + const index = status === FetchStatus.in_progress ? 2 : viewLogin ? 1 : 0; const amt = 5; const transitions = useTransition(index, { config: { mass: 1, tension: 80, friction: 10 }, - from: { opacity: 0, transform: `translateX(${ viewLogin ? amt : -amt }rem)` }, + from: { opacity: 0, transform: `translateX(${viewLogin ? amt : -amt}rem)` }, enter: { opacity: 1, transform: `translateX(0)` }, - leave: { opacity: 0, transform: `translateX(${ viewLogin ? -amt : amt }rem)` }, + leave: { + opacity: 0, + transform: `translateX(${viewLogin ? -amt : amt}rem)`, + }, onRest: () => animatingSet(false), - onStart: () => animatingSet(true) - }); + onStart: () => animatingSet(true), + }); - return
- { - transitions((style: any, i: number, state: any) => { + return ( +
+ {transitions((style: any, i: number, state: any) => { let isLeaving = state.phase === "leave"; - let sharedProps = { animating, handleClose, isLeaving, style, viewLogin, viewSwitch }; + let sharedProps = { + animating, + handleClose, + isLeaving, + style, + viewLogin, + viewSwitch, + }; - switch(i) { - case 0: return ; - case 1: return ; - case 2: return ; + switch (i) { + case 0: + return ( + + ); + case 1: + return ( + + ); + case 2: + return ; } - - }) - } - -
; -}; \ No newline at end of file + })} +
+ ); +} diff --git a/src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx b/src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx deleted file mode 100644 index 3fdaa2d270..0000000000 --- a/src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { useState } from 'react'; -import { AccountModalContext } from 'context'; -import { useSession } from "hooks"; -import { Modal } from "components/common"; -import AccountModal from "components/layout/AccountModal"; -import { ModalView } from "context/AccountModalContext"; - -interface Props { - children?: any; -} - -export default function AccountModalProvider({ children }: Props) { - const { user } = useSession(); - const [view,viewSet] = useState(ModalView.Closed); - const open = () => viewSet(ModalView.Signup); - const close = () => { viewSet(ModalView.Closed); console.log("🍏",);}; - const viewSwitch = () => view === ModalView.Signup ? viewSet(ModalView.Login) : viewSet(ModalView.Signup); - const sessionCheck = () => { - if (user) { - return true; - } else { - open(); - return false; - } - }; - - return - {children} - { - 0, - showButtons: false, - // title: "You need to login", - }}/> - } - ; -}; diff --git a/src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/index.tsx b/src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/index.tsx deleted file mode 100644 index 688ab5c241..0000000000 --- a/src/website/packages/fakeyou.com/src/components/providers/AccountModalProvider/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./AccountModalProvider"; \ No newline at end of file diff --git a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.scss b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.scss index ff56ea7f93..4ec97dcc2b 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.scss +++ b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.scss @@ -19,6 +19,7 @@ .fy-modal-body { width: 100%; height: fit-content; + overflow: hidden; background-color: $panel; border-color: lighten($panel, 8%) !important; border: 1px solid; diff --git a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx index 0d8a2e5d2f..94616d8758 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx +++ b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx @@ -5,8 +5,9 @@ import "./ModalLayer.scss"; interface Props { content?: React.ElementType | null; contentProps?: any; - handleClose: () => void; + close: () => void; killModal: boolean; + lockTint?: boolean; modalOpen: boolean; onModalCloseEnd: (x: any) => void; } @@ -14,10 +15,12 @@ interface Props { export default function ModalLayer({ content: Content, contentProps, - handleClose, + close, + lockTint, modalOpen, onModalCloseEnd, }: Props) { + const mainClassName = "fy-modal-layer"; const tintTransition = useTransition(modalOpen, { config: { easing: modalOpen ? easings.easeOutQuad : easings.easeInQuad, @@ -30,11 +33,27 @@ export default function ModalLayer({ }); return tintTransition( - (tinter, shade) => - shade && ( - + (tintStyle, modalIsOpen) => + modalIsOpen && ( + { + if ( + !lockTint && + target instanceof HTMLElement && + target.className === mainClassName + ) { + close(); + } + }, + }} + >
- {Content && } + {Content && ( + + )}
) diff --git a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx index 86e90f9570..08b83db539 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx +++ b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx @@ -1,5 +1,4 @@ -import React, { useEffect, useState } from "react"; -import { ModalContext } from "context"; +import React, { createContext, useEffect, useState } from "react"; import ModalLayer from "./ModalLayer"; import { isMobile } from "react-device-detect"; @@ -10,9 +9,24 @@ interface ModalProviderProps { export interface ModalConfig { component: React.ElementType; + lockTint?: boolean; props?: any; } +export interface ModalContextShared { + close: () => void; + modalOpen: boolean; + modalState: ModalConfig | null; + open: (cfg: ModalConfig) => void; +} + +export const ModalContext = createContext({ + close: () => {}, + open: () => {}, + modalOpen: false, + modalState: null, +}); + // how this works // // When modalState is set via open(), modalOpen is set to true to via useEffect @@ -27,6 +41,7 @@ export default function ModalProvider({ children }: ModalProviderProps) { const [modalState, modalStateSet] = useState(null); const [modalOpen, modalOpenSet] = useState(false); const [killModal, killModalSet] = useState(false); + const open = (cfg: ModalConfig) => modalStateSet(cfg); const close = () => { modalOpenSet(false); @@ -40,19 +55,17 @@ export default function ModalProvider({ children }: ModalProviderProps) { }; useEffect(() => { - if (!killModal && modalState && !modalOpen) { - modalOpenSet(true); - } - }, [killModal, modalOpen, modalState]); - - // Prevent body scrolling when modal is open on mobile - 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"); } - }, [modalOpen]); + + if (!killModal && modalState && !modalOpen) { + modalOpenSet(true); + } + }, [killModal, modalOpen, modalState]); return ( diff --git a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx index 28b7ac1f9e..f7c233eaec 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx +++ b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx @@ -1 +1 @@ -export { default } from "./ModalProvider"; \ No newline at end of file +export { default, ModalContext } from "./ModalProvider"; diff --git a/src/website/packages/fakeyou.com/src/components/providers/index.tsx b/src/website/packages/fakeyou.com/src/components/providers/index.tsx index fd36cd1e91..9cfeb02dfc 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/index.tsx +++ b/src/website/packages/fakeyou.com/src/components/providers/index.tsx @@ -1,18 +1,17 @@ -import AccountModalProvider from "./AccountModalProvider"; import CoreServicesProvider from "./CoreServicesProvider"; import InferenceJobsProvider, { InferenceJobsContext, } from "./InferenceJobsProvider"; -import ModalProvider from "./ModalProvider/ModalProvider"; +import ModalProvider, { ModalContext } from "./ModalProvider/ModalProvider"; import NotificationProvider from "./NotificationProvider"; import SessionProvider from "./SessionProvider"; export { - AccountModalProvider, CoreServicesProvider, InferenceJobsContext, InferenceJobsProvider, ModalProvider, + ModalContext, NotificationProvider, SessionProvider, }; diff --git a/src/website/packages/fakeyou.com/src/context/AccountModalContext.tsx b/src/website/packages/fakeyou.com/src/context/AccountModalContext.tsx deleted file mode 100644 index 1ee46454cc..0000000000 --- a/src/website/packages/fakeyou.com/src/context/AccountModalContext.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createContext } from 'react'; - -export enum ModalView { - Closed, - Signup, - Login -} - -interface AccountModalContext { close: () => void, open: () => void, sessionCheck: () => boolean, view: ModalView, } - -export default createContext({ - close: () => {}, - open: () => {}, - sessionCheck: () => false, - view: ModalView.Closed, -}); \ No newline at end of file diff --git a/src/website/packages/fakeyou.com/src/context/ModalContext.tsx b/src/website/packages/fakeyou.com/src/context/ModalContext.tsx deleted file mode 100644 index 2560fb3a44..0000000000 --- a/src/website/packages/fakeyou.com/src/context/ModalContext.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { createContext } from "react"; - -export enum ModalView { - Closed, - Signup, - Login, -} - -interface ModalConfig { - component: React.ElementType; - props?: any; -} - -interface AccountModalContext { - close: () => void; - modalOpen: boolean; - modalState: ModalConfig | null; - open: (comp: any) => void; -} - -export default createContext({ - close: () => {}, - open: () => {}, - modalOpen: false, - modalState: null, -}); diff --git a/src/website/packages/fakeyou.com/src/context/index.tsx b/src/website/packages/fakeyou.com/src/context/index.tsx index 0b8b7d5f36..9395462bb8 100644 --- a/src/website/packages/fakeyou.com/src/context/index.tsx +++ b/src/website/packages/fakeyou.com/src/context/index.tsx @@ -1,13 +1,5 @@ -import AccountModalContext from "./AccountModalContext"; -import ModalContext from "./ModalContext"; import NotificationContext from "./NotificationContext"; import SessionContext from "./SessionContext"; import DomainConfigContext from "./DomainConfigContext"; -export { - AccountModalContext, - ModalContext, - NotificationContext, - SessionContext, - DomainConfigContext, -}; +export { NotificationContext, SessionContext, DomainConfigContext }; diff --git a/src/website/packages/fakeyou.com/src/hooks/useModal/useModal.tsx b/src/website/packages/fakeyou.com/src/hooks/useModal/useModal.tsx index 4794f28a7c..0e9fe8e45a 100644 --- a/src/website/packages/fakeyou.com/src/hooks/useModal/useModal.tsx +++ b/src/website/packages/fakeyou.com/src/hooks/useModal/useModal.tsx @@ -1,6 +1,6 @@ -import { useContext } from 'react'; -import { ModalContext } from 'context'; +import { useContext } from "react"; +import { ModalContext } from "components/providers"; export default function useInferenceJobs() { return useContext(ModalContext); -}; \ No newline at end of file +}