From bff5de0c8eadcb952a326fcadcdfeb75807f707d Mon Sep 17 00:00:00 2001 From: Untone Date: Fri, 5 Jul 2024 16:34:19 +0300 Subject: [PATCH] lang-fix --- .../Editor/EditorFloatingMenu/Menu/Menu.tsx | 2 +- .../AuthModalHeader/AuthModalHeader.tsx | 2 +- .../AuthModal/PasswordField/PasswordField.tsx | 4 +- .../SocialProviders/SocialProviders.tsx | 6 +- src/components/Nav/Header/Header.tsx | 192 ++++++++++-------- src/components/Nav/Header/HeaderLink.tsx | 36 ++++ .../Views/AllAuthors/AllAuthors.tsx | 8 +- src/context/localize.tsx | 6 +- src/routes/{[...slug].tsx => [slug].tsx} | 0 src/utils/i18next.ts | 24 ++- 10 files changed, 177 insertions(+), 103 deletions(-) create mode 100644 src/components/Nav/Header/HeaderLink.tsx rename src/routes/{[...slug].tsx => [slug].tsx} (100%) diff --git a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx index 8a9ce1f4..4a4791c5 100644 --- a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx +++ b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx @@ -1,4 +1,4 @@ -import { useLocalize } from '../../../../context/localize' +import { useLocalize } from '~/context/localize' import { Icon } from '../../../_shared/Icon' import { Popover } from '../../../_shared/Popover' diff --git a/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx b/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx index 38b5ea58..c056b106 100644 --- a/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx +++ b/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx @@ -1,6 +1,6 @@ import { useSearchParams } from '@solidjs/router' import { Show } from 'solid-js' -import { useLocalize } from '../../../../context/localize' +import { useLocalize } from '~/context/localize' import styles from './AuthModalHeader.module.scss' type Props = { diff --git a/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx b/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx index 32d80e4f..16eb65ed 100644 --- a/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx +++ b/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx @@ -1,9 +1,7 @@ import { clsx } from 'clsx' import { Show, createEffect, createSignal, on } from 'solid-js' - -import { useLocalize } from '../../../../context/localize' +import { useLocalize } from '~/context/localize' import { Icon } from '../../../_shared/Icon' - import styles from './PasswordField.module.scss' type Props = { diff --git a/src/components/Nav/AuthModal/SocialProviders/SocialProviders.tsx b/src/components/Nav/AuthModal/SocialProviders/SocialProviders.tsx index 2aefd0c7..5f832b83 100644 --- a/src/components/Nav/AuthModal/SocialProviders/SocialProviders.tsx +++ b/src/components/Nav/AuthModal/SocialProviders/SocialProviders.tsx @@ -1,9 +1,7 @@ import { For } from 'solid-js' - -import { useLocalize } from '../../../../context/localize' -import { useSession } from '../../../../context/session' +import { useLocalize } from '~/context/localize' +import { useSession } from '~/context/session' import { Icon } from '../../../_shared/Icon' - import styles from './SocialProviders.module.scss' export const PROVIDERS = ['facebook', 'google', 'github'] // 'vk' | 'telegram' diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index db203d6c..adc78513 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -1,16 +1,16 @@ import { A, useLocation, useNavigate, useSearchParams } from '@solidjs/router' import { clsx } from 'clsx' -import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from 'solid-js' -import { Icon } from '~/components/_shared/Icon' -import { Newsletter } from '~/components/_shared/Newsletter' +import { For, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js' import { useLocalize } from '~/context/localize' import { useSession } from '~/context/session' import { useTopics } from '~/context/topics' import { useUI } from '~/context/ui' -import type { Topic } from '~/graphql/schema/core.gen' -import { getRandomTopicsFromArray } from '~/utils/getRandomTopicsFromArray' -import { getDescription } from '~/utils/meta' +import type { Topic } from '../../../graphql/schema/core.gen' +import { getRandomTopicsFromArray } from '../../../utils/getRandomTopicsFromArray' +import { getDescription } from '../../../utils/meta' import { SharePopup, getShareUrl } from '../../Article/SharePopup' +import { Icon } from '../../_shared/Icon' +import { Newsletter } from '../../_shared/Newsletter' import { AuthModal } from '../AuthModal' import { ConfirmModal } from '../ConfirmModal' import { HeaderAuth } from '../HeaderAuth' @@ -18,6 +18,7 @@ import { Modal } from '../Modal' import { SearchModal } from '../SearchModal/SearchModal' import { Snackbar } from '../Snackbar' import styles from './Header.module.scss' +import { Link } from './HeaderLink' type Props = { title?: string @@ -32,27 +33,29 @@ type HeaderSearchParams = { source?: string } -const handleSwitchLanguage = (value: string) => { - location.href = `${location.href}${location.href.includes('?') ? '&' : '?'}lng=${value}` +const handleSwitchLanguage = (event: { target: { value: string } }) => { + location.href = `${location.href}${location.href.includes('?') ? '&' : '?'}lng=${event.target.value}` } export const Header = (props: Props) => { const { t, lang } = useLocalize() const { modal } = useUI() - const navigate = useNavigate() - const [searchParams] = useSearchParams() const { requireAuthentication } = useSession() - const { sortedTopics } = useTopics() - const topics = createMemo(() => sortedTopics()) + const [searchParams, ] = useSearchParams() + const { sortedTopics: topics } = useTopics() const [randomTopics, setRandomTopics] = createSignal([]) const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false) const [getIsScrolled, setIsScrolled] = createSignal(false) const [fixed, setFixed] = createSignal(false) const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false) const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false) - const [isTopMenuVisible, setIsTopMenuVisible] = createSignal(false) + const [isKnowledgeBaseVisible, setIsKnowledgeBaseVisible] = createSignal(false) + const [isTopicsVisible, setIsTopicsVisible] = createSignal(false) + const [isZineVisible, setIsZineVisible] = createSignal(false) + const [isFeedVisible, setIsFeedVisible] = createSignal(false) const { session } = useSession() - + const loc = useLocation() + const navigate = useNavigate() const toggleFixed = () => setFixed(!fixed()) const tag = (topic: Topic) => @@ -62,29 +65,24 @@ export const Header = (props: Props) => { createEffect(() => { if (topics()?.length) { - const rt: Topic[] = getRandomTopicsFromArray(topics()) - setRandomTopics(rt) + setRandomTopics(getRandomTopicsFromArray(topics())) } }) createEffect(() => { const mainContent = document.querySelector('.main-content') - if ((window && fixed()) || modal() !== null) { + if (fixed() || modal() !== null) { windowScrollTop = window.scrollY - if (mainContent) { - mainContent.style.marginTop = `-${windowScrollTop}px` - } + if (mainContent) mainContent.style.marginTop = `-${windowScrollTop}px` } document.body.classList.toggle('fixed', fixed() || modal() !== null) document.body.classList.toggle(styles.fixed, fixed() && !modal()) if (!(fixed() || modal())) { - if (mainContent) { - mainContent.style.marginTop = '' - } window.scrollTo(0, windowScrollTop) + if(mainContent) mainContent.style.marginTop = '' } }) @@ -103,19 +101,19 @@ export const Header = (props: Props) => { }) }) - const scrollToComments = (event: MouseEvent | undefined, value: boolean) => { - event?.preventDefault() + const scrollToComments = (event: MouseEvent & { currentTarget: HTMLDivElement; target: Element }, value: boolean) => { + event.preventDefault() props.scrollToComments?.(value) } - const handleBookmarkButtonClick = (ev: MouseEvent | undefined) => { + const handleBookmarkButtonClick = (ev: { preventDefault: () => void }) => { requireAuthentication(() => { // TODO: implement bookmark clicked - ev?.preventDefault() + ev.preventDefault() }, 'bookmark') } - const handleCreateButtonClick = (ev: MouseEvent | undefined) => { + const handleCreateButtonClick = (ev?: { preventDefault: () => void }) => { requireAuthentication(() => { ev?.preventDefault() @@ -123,9 +121,12 @@ export const Header = (props: Props) => { }, 'create') } - const toggleSubnavigation = (isShow: boolean, signal?: (v: boolean) => void) => { + const toggleSubnavigation = (isShow: boolean, signal?: (b: boolean) => void) => { clearTimer() - setIsTopMenuVisible(false) + setIsKnowledgeBaseVisible(false) + setIsTopicsVisible(false) + setIsZineVisible(false) + setIsFeedVisible(false) if (signal) { signal(isShow) @@ -138,17 +139,21 @@ export const Header = (props: Props) => { clearTimeout(timer) } - const hideSubnavigation = (time = 500) => { + const hideSubnavigation = (_ev?: MouseEvent, time = 500) => { timer = setTimeout(() => { toggleSubnavigation(false) }, time) } - const loc = useLocation() + const handleToggleMenuByLink = (event: MouseEvent, route: string) => { + console.debug('toggling menu link', fixed(), route) event.preventDefault() + if (loc.pathname === route) { + toggleFixed() + } + navigate(route) } - return (
{ @@ -185,7 +190,7 @@ export const Header = (props: Props) => {
- + {t('Discours')}
@@ -195,34 +200,58 @@ export const Header = (props: Props) => {
    - - {(route: string) => ( -
  • - handleToggleMenuByLink(event, `/${route}`)} - onMouseOver={() => toggleSubnavigation(true, setIsTopMenuVisible)} - onMouseOut={() => hideSubnavigation()} - > - {t(route || 'journal')} - -
    • - )} -     + toggleSubnavigation(true, setIsZineVisible)} + onMouseOut={hideSubnavigation} + href="/" + active={isZineVisible()} + body={t('journal')} + onClick={(event: MouseEvent) => handleToggleMenuByLink(event, '')} + /> + toggleSubnavigation(true, setIsFeedVisible)} + onMouseOut={hideSubnavigation} + href="/feed" + active={isFeedVisible()} + body={t('feed')} + onClick={(event: MouseEvent) => handleToggleMenuByLink(event, 'feed')} + /> + toggleSubnavigation(true, setIsTopicsVisible)} + onMouseOut={hideSubnavigation} + href="/topic" + active={isTopicsVisible()} + body={t('topics')} + onClick={(event: MouseEvent) => handleToggleMenuByLink(event, 'topic')} + /> + hideSubnavigation(event, 0)} + onMouseOut={(event?: MouseEvent) => hideSubnavigation(event, 0)} + href="/author" + body={t('authors')} + onClick={(event: MouseEvent) => handleToggleMenuByLink(event, 'author')} + /> + toggleSubnavigation(true, setIsKnowledgeBaseVisible)} + onMouseOut={() => hideSubnavigation} + href="/guide" + body={t('Knowledge base')} + active={isKnowledgeBaseVisible()} + onClick={(event: MouseEvent) => handleToggleMenuByLink(event, 'guide')} + />

{t('Participating')}

@@ -272,7 +301,7 @@ export const Header = (props: Props) => {

{t('Language')}

- {t('Dogma')} - {t('Discussion rules')} - {t('Our principles')} + {t('Dogma')} + + {t('Principles')}

{

hideSubnavigation()} + onMouseOut={hideSubnavigation} >
hideSubnavigation()} + onMouseOut={hideSubnavigation} >