From c6ae893403c687943481129fd762100bd73c9a4b Mon Sep 17 00:00:00 2001 From: Untone Date: Tue, 25 Jun 2024 22:10:00 +0300 Subject: [PATCH] modal-fix, media-query-fix --- src/components/Nav/AuthModal/EmailConfirm.tsx | 7 +++- src/components/Nav/AuthModal/index.tsx | 22 ++++++++--- src/components/Nav/AuthModal/types.ts | 17 -------- src/components/Nav/Header/Header.tsx | 5 +-- src/components/Nav/Modal/Modal.tsx | 39 +++++-------------- .../_shared/ShareModal/ShareModal.tsx | 2 +- src/context/inbox.tsx | 4 ++ src/context/ui.tsx | 24 +++++------- src/utils/media-query.ts | 7 +++- 9 files changed, 54 insertions(+), 73 deletions(-) delete mode 100644 src/components/Nav/AuthModal/types.ts diff --git a/src/components/Nav/AuthModal/EmailConfirm.tsx b/src/components/Nav/AuthModal/EmailConfirm.tsx index c6511498..1766d3ef 100644 --- a/src/components/Nav/AuthModal/EmailConfirm.tsx +++ b/src/components/Nav/AuthModal/EmailConfirm.tsx @@ -10,10 +10,15 @@ import { email, setEmail } from './sharedLogic' import { useSearchParams } from '@solidjs/router' import styles from './AuthModal.module.scss' +export type ConfirmEmailSearchParams = { + access_token?: string + token?: string +} + export const EmailConfirm = () => { const { t } = useLocalize() const { hideModal } = useUI() - const [, changeSearchParams] = useSearchParams() + const [, changeSearchParams] = useSearchParams() const { session, authError } = useSession() const [emailConfirmed, setEmailConfirmed] = createSignal(false) diff --git a/src/components/Nav/AuthModal/index.tsx b/src/components/Nav/AuthModal/index.tsx index c69a8f9c..71079db2 100644 --- a/src/components/Nav/AuthModal/index.tsx +++ b/src/components/Nav/AuthModal/index.tsx @@ -2,8 +2,7 @@ import { clsx } from 'clsx' import { Component, Show, createEffect, createMemo } from 'solid-js' import { Dynamic } from 'solid-js/web' -import { useUI } from '~/context/ui' -import type { AuthModalMode } from '~/context/ui' +import { AuthModalSource, useUI } from '~/context/ui' import { useLocalize } from '../../../context/localize' import { isMobile } from '../../../utils/media-query' import { ChangePasswordForm } from './ChangePasswordForm' @@ -15,11 +14,24 @@ import { SendResetLinkForm } from './SendResetLinkForm' import { useSearchParams } from '@solidjs/router' import styles from './AuthModal.module.scss' -import { AuthModalSearchParams } from './types' + +export type AuthModalMode = + | 'login' + | 'register' + | 'confirm-email' + | 'send-confirm-email' + | 'send-reset-link' + | 'change-password' + +export type AuthModalSearchParams = { + mode: AuthModalMode + source?: AuthModalSource + token?: string +} const AUTH_MODAL_MODES: Record = { - login: LoginForm, - register: RegisterForm, + 'login': LoginForm, + 'register': RegisterForm, 'send-reset-link': SendResetLinkForm, 'confirm-email': EmailConfirm, 'send-confirm-email': SendEmailConfirm, diff --git a/src/components/Nav/AuthModal/types.ts b/src/components/Nav/AuthModal/types.ts deleted file mode 100644 index 98aaaed0..00000000 --- a/src/components/Nav/AuthModal/types.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { AuthModalMode, AuthModalSource } from '~/context/ui' - -export type AuthModalSearchParams = { - mode: AuthModalMode - source?: AuthModalSource - token?: string -} - -export type ConfirmEmailSearchParams = { - access_token?: string - token?: string -} - -export type CreateChatSearchParams = { - id: number -} -export type { AuthModalSource } diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index c056bf49..df05fa2a 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -155,8 +155,7 @@ export const Header = (props: Props) => { const loc = useLocation() const handleToggleMenuByLink = (event: MouseEvent, route: string) => { event.preventDefault() - console.debug(route) - console.debug(loc.pathname) + console.debug(loc.pathname, route) if (!fixed()) return if (loc.pathname.startsWith(route) || loc.pathname.startsWith(`/${route}`)) { toggleFixed() @@ -176,7 +175,7 @@ export const Header = (props: Props) => { diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx index c8025372..c235426e 100644 --- a/src/components/Nav/Modal/Modal.tsx +++ b/src/components/Nav/Modal/Modal.tsx @@ -1,12 +1,10 @@ import { clsx } from 'clsx' import type { JSX } from 'solid-js' -import { Show, createEffect, createMemo, createSignal } from 'solid-js' +import { Show } from 'solid-js' import { useUI } from '~/context/ui' +import { isPortrait } from '~/utils/media-query' import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler' import { Icon } from '../../_shared/Icon' - -import { useNavigate } from '@solidjs/router' -import { mediaMatches } from '~/utils/media-query' import styles from './Modal.module.scss' interface Props { @@ -16,44 +14,25 @@ interface Props { onClose?: () => void noPadding?: boolean maxHeight?: boolean - allowClose?: boolean + hideClose?: boolean isResponsive?: boolean } export const Modal = (props: Props) => { const { modal, hideModal } = useUI() - const [visible, setVisible] = createSignal(false) - const allowClose = createMemo(() => props.allowClose !== false) - const [isMobileView, setIsMobileView] = createSignal(false) - const navigate = useNavigate() + const handleHide = () => { - if (modal()) { - if (allowClose()) { - props.onClose?.() - } else { - navigate('/') - } - } + console.debug('[Modal.handleHide]', modal()) + modal() && props.onClose?.() hideModal() } useEscKeyDownHandler(handleHide) - - createEffect(() => { - setVisible(modal() === props.name) - }) - - createEffect(() => { - if (props.isResponsive) { - setIsMobileView(!mediaMatches.sm) - } - }) - return ( - +
@@ -68,7 +47,7 @@ export const Modal = (props: Props) => { onClick={(event) => event.stopPropagation()} >
{props.children}
- +
diff --git a/src/components/_shared/ShareModal/ShareModal.tsx b/src/components/_shared/ShareModal/ShareModal.tsx index be9b36fc..6a59b5cf 100644 --- a/src/components/_shared/ShareModal/ShareModal.tsx +++ b/src/components/_shared/ShareModal/ShareModal.tsx @@ -14,7 +14,7 @@ export const ShareModal = (props: Props) => { const { t } = useLocalize() const { hideModal } = useUI() return ( - +

{t('Share publication')}

void } +export type CreateChatSearchParams = { + inbox: number +} + const InboxContext = createContext({} as InboxContextType) export function useInbox() { diff --git a/src/context/ui.tsx b/src/context/ui.tsx index 4e8a82b6..b756d7c6 100644 --- a/src/context/ui.tsx +++ b/src/context/ui.tsx @@ -70,14 +70,6 @@ export const SnackbarProvider = (props: { children: JSX.Element }) => { return {props.children} } -export type AuthModalMode = - | 'login' - | 'register' - | 'confirm-email' - | 'send-confirm-email' - | 'send-reset-link' - | 'change-password' - export type AuthModalSource = | 'discussions' | 'vote' @@ -135,7 +127,7 @@ type ConfirmMessage = { } type UIContextType = { - modal: Accessor + modal: Accessor showModal: (m: ModalType, source?: AuthModalSource) => void hideModal: () => void confirmMessage: Accessor @@ -151,7 +143,7 @@ export function useUI() { export const UIProvider = (props: { children: JSX.Element }) => { const [, setSearchParams] = useSearchParams>() - const [modal, setModal] = createSignal('') + const [modal, setModal] = createSignal(null) const [confirmMessage, setConfirmMessage] = createSignal({} as ConfirmMessage) let resolveFn: (value: boolean) => void @@ -172,6 +164,7 @@ export const UIProvider = (props: { children: JSX.Element }) => { } const showModal = (modalType: ModalType, modalSource?: AuthModalSource) => { + console.log('[context.ui] showModal()', modalType) if (modalSource) { setSearchParams({ source: modalSource }) } @@ -179,8 +172,9 @@ export const UIProvider = (props: { children: JSX.Element }) => { } const hideModal = () => { - setSearchParams({}, { replace: true }) - setModal('') + console.log('[context.ui] hideModal()', modal()) + setTimeout(() => setModal(null), 1) // NOTE: modal rerender fix + setSearchParams({source: undefined, m: undefined, mode: undefined}) } const [searchParams] = useSearchParams() @@ -190,12 +184,14 @@ export const UIProvider = (props: { children: JSX.Element }) => { [modal, () => searchParams?.m || ''], ([m1, m2]) => { const m = m1 || m2 || '' - setModal((_) => m as ModalType) + console.log('[context.ui] search params change', m) if (m) { showModal(m as ModalType) + } else { + setModal(null) } }, - { defer: true }, + {}, ), ) diff --git a/src/utils/media-query.ts b/src/utils/media-query.ts index 8efa04ee..ff424cd9 100644 --- a/src/utils/media-query.ts +++ b/src/utils/media-query.ts @@ -8,6 +8,9 @@ export const breakpoints = { xl: '1200px', xxl: '1400px', } -export const isMobile = createMediaQuery('(max-width: 767px)') -export const isDesktop = createMediaQuery('(min-width: 1200px)') +export const isPortrait = createMediaQuery(`(max-width: ${breakpoints.sm})`) +export const isMobile = createMediaQuery(`(max-width: ${breakpoints.md})`) +export const isTablet = createMediaQuery(`(min-width: ${breakpoints.sm}, max-width: ${breakpoints.lg})`) +export const isDesktop = createMediaQuery(`(min-width: ${breakpoints.md}, max-width: ${breakpoints.xl})`) +export const isBig = createMediaQuery(`(min-width: ${breakpoints.xl})`) export const mediaMatches = createBreakpoints(breakpoints)