From db748db129336b685ba843731e9c16153bf3ce21 Mon Sep 17 00:00:00 2001 From: Alexander Harding <2166114+aeharding@users.noreply.github.com> Date: Fri, 25 Oct 2024 23:02:54 -0500 Subject: [PATCH 1/2] Fix community page title cut off when viewing moderated community --- .../community/titleSearch/TitleSearch.tsx | 10 ++-- src/features/shared/AppTitle.tsx | 53 ++++++++++++++----- src/routes/pages/shared/CommunityPage.tsx | 11 +++- 3 files changed, 55 insertions(+), 19 deletions(-) diff --git a/src/features/community/titleSearch/TitleSearch.tsx b/src/features/community/titleSearch/TitleSearch.tsx index d84e37b449..c4bdbdab1c 100644 --- a/src/features/community/titleSearch/TitleSearch.tsx +++ b/src/features/community/titleSearch/TitleSearch.tsx @@ -5,7 +5,7 @@ import { TitleSearchContext } from "./TitleSearchProvider"; import { styled } from "@linaria/react"; import { isIosTheme } from "../../../helpers/device"; import { findCurrentPage } from "../../../helpers/ionic"; -import AppTitle from "../../shared/AppTitle"; +import AppTitle, { AppTitleHandle } from "../../shared/AppTitle"; const TitleContents = styled.span` display: inline-flex; @@ -65,9 +65,11 @@ export function openTitleSearch() { interface TitleSearchProps { name: string; children: React.ReactNode; + + ref: React.RefObject; } -export default function TitleSearch({ name, children }: TitleSearchProps) { +export default function TitleSearch({ name, children, ref }: TitleSearchProps) { const { setSearch, searching, setSearching, onSubmit } = useContext(TitleSearchContext); const searchRef = useRef(null); @@ -93,7 +95,7 @@ export default function TitleSearch({ name, children }: TitleSearchProps) { if (searching) { return ( <> - + - + {name} diff --git a/src/features/shared/AppTitle.tsx b/src/features/shared/AppTitle.tsx index d5d2b81860..14d0d72d60 100644 --- a/src/features/shared/AppTitle.tsx +++ b/src/features/shared/AppTitle.tsx @@ -1,40 +1,65 @@ import { IonTitle } from "@ionic/react"; -import { ComponentProps, useEffect, useRef, useState } from "react"; +import { + ComponentProps, + useCallback, + useEffect, + useImperativeHandle, + useRef, + useState, +} from "react"; import { isIosTheme } from "../../helpers/device"; +export interface AppTitleHandle { + updateLayout: () => void; +} + interface AppTitleProps extends ComponentProps { /** * Padding applied to titles of normal headers with up to * two icon buttons on right side of title */ fullPadding?: number; + + appRef: React.RefObject; } export default isIosTheme() ? IosAppTitle : IonTitle; -function IosAppTitle({ fullPadding, ...props }: AppTitleProps) { - const ref = useRef(null); +function IosAppTitle({ fullPadding, appRef, ...props }: AppTitleProps) { + const titleRef = useRef(null); const [smaller, setSmaller] = useState(false); - useEffect(() => { - queueMicrotask(() => { - const buttons = ref.current - ?.closest("ion-header") - ?.querySelector('ion-buttons[slot="end"]')?.children.length; + const updateLayout = useCallback(() => { + const buttons = titleRef.current + ?.closest("ion-header") + ?.querySelector('ion-buttons[slot="end"]')?.children.length; - if (!buttons) { - setSmaller(false); - return; - } + if (!buttons) { + setSmaller(false); + return; + } - setSmaller(buttons >= 3); + setSmaller(buttons >= 3); + }, []); + + useEffect(() => { + queueMicrotask(() => { + updateLayout(); }); }); + useImperativeHandle( + appRef, + () => ({ + updateLayout, + }), + [updateLayout], + ); + return ( ); diff --git a/src/routes/pages/shared/CommunityPage.tsx b/src/routes/pages/shared/CommunityPage.tsx index 59e21b2b2e..c6466038df 100644 --- a/src/routes/pages/shared/CommunityPage.tsx +++ b/src/routes/pages/shared/CommunityPage.tsx @@ -13,6 +13,7 @@ import { createContext, memo, useCallback, + useEffect, useMemo, useRef, useState, @@ -48,6 +49,7 @@ import PostAppearanceProvider, { import { CenteredSpinner } from "../../../features/shared/CenteredSpinner"; import useFeedUpdate from "../../../features/feed/useFeedUpdate"; import DocumentTitle from "../../../features/shared/DocumentTitle"; +import { AppTitleHandle } from "../../../features/shared/AppTitle"; const StyledFeedContent = styled(FeedContent)` .ios & { @@ -149,6 +151,8 @@ const CommunityPageContent = memo(function CommunityPageContent({ const router = useOptimizedIonRouter(); const getRandomCommunity = useGetRandomCommunity(); + const appTitleRef = useRef(null); + const searchOpen = searchQuery || _searchOpen; const client = useClient(); @@ -204,6 +208,11 @@ const CommunityPageContent = memo(function CommunityPageContent({ const feedSearchContextValue = useMemo(() => ({ setScrolledPastSearch }), []); + // Force update when loaded, because mod button may appear (and title may need to shrink) + useEffect(() => { + appTitleRef.current?.updateLayout(); + }, [communityView]); + const header = useMemo( () => !searchOpen ? ( @@ -283,7 +292,7 @@ const CommunityPageContent = memo(function CommunityPageContent({ {communityView.community.title} )} - + Date: Fri, 25 Oct 2024 23:07:31 -0500 Subject: [PATCH 2/2] Fix types --- src/features/community/titleSearch/TitleSearch.tsx | 2 +- src/features/shared/AppTitle.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/community/titleSearch/TitleSearch.tsx b/src/features/community/titleSearch/TitleSearch.tsx index c4bdbdab1c..057a5b136e 100644 --- a/src/features/community/titleSearch/TitleSearch.tsx +++ b/src/features/community/titleSearch/TitleSearch.tsx @@ -66,7 +66,7 @@ interface TitleSearchProps { name: string; children: React.ReactNode; - ref: React.RefObject; + ref?: React.RefObject; } export default function TitleSearch({ name, children, ref }: TitleSearchProps) { diff --git a/src/features/shared/AppTitle.tsx b/src/features/shared/AppTitle.tsx index 14d0d72d60..b98d747e99 100644 --- a/src/features/shared/AppTitle.tsx +++ b/src/features/shared/AppTitle.tsx @@ -20,7 +20,7 @@ interface AppTitleProps extends ComponentProps { */ fullPadding?: number; - appRef: React.RefObject; + appRef?: React.RefObject; } export default isIosTheme() ? IosAppTitle : IonTitle;