diff --git a/src/modules/global-search/screens/SearchAll.tsx b/src/modules/global-search/screens/SearchAll.tsx index 11293c4d..39bd5fb5 100644 --- a/src/modules/global-search/screens/SearchAll.tsx +++ b/src/modules/global-search/screens/SearchAll.tsx @@ -33,8 +33,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts'; import { Sources } from '@/modules/source/services/Sources.ts'; import { SourceDisplayNameInfo, SourceIdInfo } from '@/modules/source/Source.types.ts'; import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts'; -import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; -import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; +import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts'; type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean; error: any }; type SourceToLoadingStateMap = Map; @@ -192,8 +191,6 @@ export const SearchAll: React.FC = () => { const { pathname, state } = useLocation<{ mangaTitle?: string }>(); const isMigrateMode = pathname.startsWith('/migrate/source'); - useAppTitle(t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: state?.mangaTitle })); - const [query] = useQueryParam('query', StringParam); const searchString = useDebounce(query, TRIGGER_SEARCH_THRESHOLD); @@ -234,20 +231,17 @@ export const SearchAll: React.FC = () => { [setSourceToLoadingStateMap], ); - useAppAction( - useMemo( - () => ( - <> - - - - ), - [shownLangs, setShownLangs, sourceLanguages], - ), + useAppTitleAndAction( + t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: state?.mangaTitle }), + <> + + + , + [shownLangs, setShownLangs, sourceLanguages], ); if (loading) { diff --git a/src/modules/library/screens/LibraryDuplicates.tsx b/src/modules/library/screens/LibraryDuplicates.tsx index c4ea8970..31783a79 100644 --- a/src/modules/library/screens/LibraryDuplicates.tsx +++ b/src/modules/library/screens/LibraryDuplicates.tsx @@ -34,8 +34,7 @@ import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx'; import { LibraryDuplicatesWorkerInput, TMangaDuplicate, TMangaDuplicates } from '@/modules/library/Library.types.ts'; import { GridLayout } from '@/modules/core/Core.types.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; -import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; -import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; +import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts'; export const LibraryDuplicates = () => { const { t } = useTranslation(); @@ -46,8 +45,8 @@ export const LibraryDuplicates = () => { false, ); - useAppTitle(t('library.settings.advanced.duplicates.label.title')); - useAppAction( + useAppTitleAndAction( + t('library.settings.advanced.duplicates.label.title'), <> @@ -69,6 +68,7 @@ export const LibraryDuplicates = () => { )} , + [t, gridLayout, checkAlternativeTitles], ); const { data, loading, error, refetch } = requestManager.useGetMangas< diff --git a/src/modules/manga/screens/Manga.tsx b/src/modules/manga/screens/Manga.tsx index 5765bbcf..807ddade 100644 --- a/src/modules/manga/screens/Manga.tsx +++ b/src/modules/manga/screens/Manga.tsx @@ -26,8 +26,7 @@ import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPl import { GetMangaScreenQuery } from '@/lib/graphql/generated/graphql.ts'; import { GET_MANGA_SCREEN } from '@/lib/graphql/queries/MangaQuery.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; -import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; -import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; +import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts'; export const Manga: React.FC = () => { const { t } = useTranslation(); @@ -59,8 +58,8 @@ export const Manga: React.FC = () => { } }, [manga]); - useAppTitle(manga?.title ?? t('manga.title_one')); - useAppAction( + useAppTitleAndAction( + manga?.title ?? t('manga.title_one'), { )} {manga && } , + [t, error, isValidating, refreshing, manga, refresh], ); if (error && !manga) { diff --git a/src/modules/migration/screens/Migrate.tsx b/src/modules/migration/screens/Migrate.tsx index 85eaba64..aad3c73c 100644 --- a/src/modules/migration/screens/Migrate.tsx +++ b/src/modules/migration/screens/Migrate.tsx @@ -22,8 +22,7 @@ import { SOURCE_BASE_FIELDS } from '@/lib/graphql/fragments/SourceFragments.ts'; import { BaseMangaGrid } from '@/modules/manga/components/BaseMangaGrid.tsx'; import { GridLayout } from '@/modules/core/Core.types.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; -import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; -import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; +import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts'; export const Migrate = () => { const { t } = useTranslation(); @@ -68,8 +67,11 @@ export const Migrate = () => { notifyOnNetworkStatusChange: true, }); - useAppTitle(name ?? sourceId ?? t('migrate.title')); - useAppAction(); + useAppTitleAndAction( + name ?? sourceId ?? t('migrate.title'), + , + [gridLayout], + ); useEffect(() => { if (isSourceLoading || isKnownSource) { diff --git a/src/modules/navigation-bar/NavigationBar.types.ts b/src/modules/navigation-bar/NavigationBar.types.ts index 8fb321b2..1323b6ab 100644 --- a/src/modules/navigation-bar/NavigationBar.types.ts +++ b/src/modules/navigation-bar/NavigationBar.types.ts @@ -8,6 +8,7 @@ import { OverridableComponent } from '@mui/material/OverridableComponent'; import { SvgIconTypeMap } from '@mui/material/SvgIcon'; +import { ReactNode } from 'react'; import { TranslationKey } from '@/Base.types.ts'; import { StaticAppRoute } from '@/modules/core/AppRoute.constants.ts'; @@ -40,8 +41,8 @@ export type NavbarContextType = { setAppBarHeight: React.Dispatch>; // AppBar action buttons - action: any; - setAction: React.Dispatch>; + action: ReactNode; + setAction: React.Dispatch>; // Allow default navbar to be overrided override: INavbarOverride; diff --git a/src/modules/navigation-bar/hooks/useAppTitleAndAction.ts b/src/modules/navigation-bar/hooks/useAppTitleAndAction.ts new file mode 100644 index 00000000..60ef45e1 --- /dev/null +++ b/src/modules/navigation-bar/hooks/useAppTitleAndAction.ts @@ -0,0 +1,20 @@ +/* + * Copyright (C) Contributors to the Suwayomi project + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts'; +import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; +import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; + +export const useAppTitleAndAction = ( + title: NavbarContextType['title'], + action: NavbarContextType['action'], + actionDependencies?: any[], +) => { + useAppTitle(title); + useAppAction(action, actionDependencies); +}; diff --git a/src/modules/source/screens/SourceMangas.tsx b/src/modules/source/screens/SourceMangas.tsx index 27886b72..fdc12197 100644 --- a/src/modules/source/screens/SourceMangas.tsx +++ b/src/modules/source/screens/SourceMangas.tsx @@ -52,8 +52,7 @@ import { GridLayout } from '@/modules/core/Core.types.ts'; import { AppRoutes } from '@/modules/core/AppRoute.constants.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; import { Sources } from '@/modules/source/services/Sources.ts'; -import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; -import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; +import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts'; import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; const DEFAULT_SOURCE: SourceIdInfo = { id: '-1' }; @@ -400,8 +399,8 @@ export function SourceMangas() { requestManager.clearBrowseCacheFor(sourceId); }, [clearCache]); - useAppTitle(source?.displayName ?? t('source.title_one')); - useAppAction( + useAppTitleAndAction( + source?.displayName ?? t('source.title_one'), <> @@ -418,6 +417,7 @@ export function SourceMangas() { )} , + [source], ); const EmptyViewComponent = mangas.length ? EmptyView : EmptyViewAbsoluteCentered; diff --git a/src/modules/updates/screens/Updates.tsx b/src/modules/updates/screens/Updates.tsx index 7bb18a79..b85b1320 100644 --- a/src/modules/updates/screens/Updates.tsx +++ b/src/modules/updates/screens/Updates.tsx @@ -24,8 +24,7 @@ import { ChapterUpdateCard } from '@/modules/updates/components/ChapterUpdateCar import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; import { Chapters } from '@/modules/chapter/services/Chapters.ts'; import { GROUPED_VIRTUOSO_Z_INDEX } from '@/modules/core/AppRoute.constants.ts'; -import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts'; -import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts'; +import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts'; export const Updates: React.FC = () => { const { t } = useTranslation(); @@ -73,8 +72,7 @@ export const Updates: React.FC = () => { }); const lastUpdateTimestamp = lastUpdateTimestampData?.lastUpdateTimestamp.timestamp; - useAppTitle(t('updates.title')); - useAppAction(); + useAppTitleAndAction(t('updates.title'), ); const loadMore = useCallback(() => { if (!hasNextPage) {