Browse Source

fix: 🐛

imwald
codytseng 10 months ago
parent
commit
55862da1d3
  1. 11
      src/PageManager.tsx
  2. 4
      src/components/BottomNavigationBar/AccountButton.tsx
  3. 6
      src/layouts/PrimaryPageLayout/index.tsx

11
src/PageManager.tsx

@ -27,6 +27,7 @@ export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP
type TPrimaryPageContext = { type TPrimaryPageContext = {
navigate: (page: TPrimaryPageName) => void navigate: (page: TPrimaryPageName) => void
current: TPrimaryPageName | null current: TPrimaryPageName | null
display: boolean
} }
type TSecondaryPageContext = { type TSecondaryPageContext = {
@ -200,7 +201,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
setPrimaryPages((prev) => [...prev, { name: page, element: PRIMARY_PAGE_MAP[page] }]) setPrimaryPages((prev) => [...prev, { name: page, element: PRIMARY_PAGE_MAP[page] }])
} }
setCurrentPrimaryPage(page) setCurrentPrimaryPage(page)
PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop()
if (isSmallScreen) { if (isSmallScreen) {
clearSecondaryPages() clearSecondaryPages()
} }
@ -249,7 +249,8 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
<PrimaryPageContext.Provider <PrimaryPageContext.Provider
value={{ value={{
navigate: navigatePrimaryPage, navigate: navigatePrimaryPage,
current: secondaryStack.length === 0 ? currentPrimaryPage : null current: currentPrimaryPage,
display: secondaryStack.length === 0
}} }}
> >
<SecondaryPageContext.Provider <SecondaryPageContext.Provider
@ -295,7 +296,8 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
<PrimaryPageContext.Provider <PrimaryPageContext.Provider
value={{ value={{
navigate: navigatePrimaryPage, navigate: navigatePrimaryPage,
current: currentPrimaryPage current: currentPrimaryPage,
display: false
}} }}
> >
<SecondaryPageContext.Provider <SecondaryPageContext.Provider
@ -326,7 +328,8 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
<PrimaryPageContext.Provider <PrimaryPageContext.Provider
value={{ value={{
navigate: navigatePrimaryPage, navigate: navigatePrimaryPage,
current: currentPrimaryPage current: currentPrimaryPage,
display: true
}} }}
> >
<SecondaryPageContext.Provider <SecondaryPageContext.Provider

4
src/components/BottomNavigationBar/AccountButton.tsx

@ -1,11 +1,11 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Skeleton } from '@/components/ui/skeleton'
import { generateImageByPubkey } from '@/lib/pubkey' import { generateImageByPubkey } from '@/lib/pubkey'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { usePrimaryPage } from '@/PageManager' import { usePrimaryPage } from '@/PageManager'
import { useNostr } from '@/providers/NostrProvider' import { useNostr } from '@/providers/NostrProvider'
import { UserRound } from 'lucide-react' import { UserRound } from 'lucide-react'
import { useMemo } from 'react' import { useMemo } from 'react'
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
import { Skeleton } from '../ui/skeleton'
import BottomNavigationBarItem from './BottomNavigationBarItem' import BottomNavigationBarItem from './BottomNavigationBarItem'
export default function AccountButton() { export default function AccountButton() {

6
src/layouts/PrimaryPageLayout/index.tsx

@ -26,7 +26,7 @@ const PrimaryPageLayout = forwardRef(
const smallScreenScrollAreaRef = useRef<HTMLDivElement>(null) const smallScreenScrollAreaRef = useRef<HTMLDivElement>(null)
const smallScreenLastScrollTopRef = useRef(0) const smallScreenLastScrollTopRef = useRef(0)
const { isSmallScreen } = useScreenSize() const { isSmallScreen } = useScreenSize()
const { current } = usePrimaryPage() const { current, display } = usePrimaryPage()
useImperativeHandle( useImperativeHandle(
ref, ref,
@ -44,7 +44,7 @@ const PrimaryPageLayout = forwardRef(
useEffect(() => { useEffect(() => {
if (isSmallScreen) { if (isSmallScreen) {
if (smallScreenScrollAreaRef.current?.checkVisibility()) { if (smallScreenScrollAreaRef.current?.checkVisibility()) {
window.scrollTo({ top: smallScreenLastScrollTopRef.current }) window.scrollTo({ top: smallScreenLastScrollTopRef.current, behavior: 'instant' })
} }
const handleScroll = () => { const handleScroll = () => {
if (smallScreenScrollAreaRef.current?.checkVisibility()) { if (smallScreenScrollAreaRef.current?.checkVisibility()) {
@ -56,7 +56,7 @@ const PrimaryPageLayout = forwardRef(
window.removeEventListener('scroll', handleScroll) window.removeEventListener('scroll', handleScroll)
} }
} }
}, [current, isSmallScreen]) }, [current, isSmallScreen, display])
if (isSmallScreen) { if (isSmallScreen) {
return ( return (

Loading…
Cancel
Save