From a02ea7c684882acae070ddb6a1207c7bd41f9221 Mon Sep 17 00:00:00 2001 From: Pas <74743263+Pasithea0@users.noreply.github.com> Date: Sat, 29 Mar 2025 12:20:04 -0600 Subject: [PATCH] update popup modal logic --- src/components/overlays/Modal.tsx | 78 +++++++++- src/pages/HomePage.tsx | 228 ++++++++++++---------------- src/pages/onboarding/Onboarding.tsx | 128 +++++++--------- src/pages/parts/home/PopupModal.tsx | 80 ---------- 4 files changed, 230 insertions(+), 284 deletions(-) delete mode 100644 src/pages/parts/home/PopupModal.tsx diff --git a/src/components/overlays/Modal.tsx b/src/components/overlays/Modal.tsx index 08abdbba..9fa406c6 100644 --- a/src/components/overlays/Modal.tsx +++ b/src/components/overlays/Modal.tsx @@ -1,7 +1,12 @@ -import { ReactNode, useCallback } from "react"; +import classNames from "classnames"; +import { ReactNode, useCallback, useEffect } from "react"; import { Helmet } from "react-helmet-async"; +import { IconPatch } from "@/components/buttons/IconPatch"; +import { Icons } from "@/components/Icon"; import { OverlayPortal } from "@/components/overlays/OverlayDisplay"; +import { Flare } from "@/components/utils/Flare"; +import { Heading2 } from "@/components/utils/Text"; import { useQueryParam } from "@/hooks/useQueryParams"; export function useModal(id: string) { @@ -40,3 +45,74 @@ export function Modal(props: { id: string; children?: ReactNode }) { ); } + +export function FancyModal(props: { + id: string; + children?: ReactNode; + title?: string; + size?: "md" | "xl"; + oneTime?: boolean; +}) { + const modal = useModal(props.id); + + useEffect(() => { + if (props.oneTime) { + const isDismissed = localStorage.getItem(`modal-${props.id}-dismissed`); + if (!isDismissed) { + modal.show(); + } + } + }, [modal, props.id, props.oneTime]); + + const handleClose = () => { + if (props.oneTime) { + localStorage.setItem(`modal-${props.id}-dismissed`, "true"); + } + modal.hide(); + }; + + return ( + + + + +
+ +
+ + +
+ {props.title && ( + + {props.title} + + )} + +
+
+ {props.children} +
+ +
+ +
+ + ); +} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index c00eb7fa..957e5a21 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -50,6 +50,7 @@ export function HomePage() { const s = useSearch(search); const [showBookmarks, setShowBookmarks] = useState(false); const [showWatching, setShowWatching] = useState(false); + // const modal = useModal("notice"); const handleClick = (path: To) => { window.scrollTo(0, 0); @@ -58,48 +59,12 @@ export function HomePage() { const enableDiscover = usePreferencesStore((state) => state.enableDiscover); - /* - // Safari Notice - const [showModal, setShowModal] = useState(() => { - const isSafari = - typeof navigator !== "undefined" && - /Safari/.test(navigator.userAgent) && - !/Chrome/.test(navigator.userAgent); - - const isMac = - typeof navigator !== "undefined" && /Mac/.test(navigator.platform); - - const isIOS = - typeof navigator !== "undefined" && - /iPhone|iPad|iPod/.test(navigator.userAgent); - - return isSafari && (isMac || isIOS); - }); - */ - - /* One time notice - const [showModal, setShowModal] = useState(false); - - useEffect(() => { - const isDismissed = localStorage.getItem("popupDismissed"); - if (!isDismissed) { - setShowModal(true); - } - }, []); - - const handleCloseModal = () => { - setShowModal(false); - localStorage.setItem("popupDismissed", "true"); - }; - */ - // const { loggedIn } = useAuth(); // Adjust padding for popup show button based on logged in state return ( - {/* Popup show button - setShowModal(true)} + {/* modal.show()} className={` text-white tabbable rounded-full z-50 fixed top-5 ${ loggedIn ? "right-[7.5rem] lg:right-[12.5rem] lg:text-2xl" @@ -110,8 +75,7 @@ export function HomePage() { READ - - */} + */}