Merge pull request #9 from hellsgor/feat/document-title

Feat / Add document title updating

Author: hellsgor

src/pages/genre/ui/genre-page/GenrePage.tsx

@@ -3,22 +3,32 @@ import s from './GenrePage.module.scss';
 import { useParams } from 'react-router';
 
 import { getRuGenreName } from '@/entities/genre';
-import { capitalizeFirstLetter, useMediaQuery } from '@/shared/lib';
+import {
+  capitalizeFirstLetter,
+  useDocumentTitle,
+  useMediaQuery,
+} from '@/shared/lib';
 import { BackTitleBar, Section } from '@/shared/ui';
 import { GenreMoviesList } from '../genre-movies-list/GenreMoviesList';
 
 export function GenrePage() {
   const mq = useMediaQuery('md');
   const { genre } = useParams();
 
+  const normalizedGenre = genre
+    ? capitalizeFirstLetter(getRuGenreName(genre))
+    : '';
+
+  useDocumentTitle(normalizedGenre);
+
   return (
     <Section
       indents={[mq ? '24px' : '32px', mq ? '40px' : '160px']}
       className={s.genrePage}
     >
       <div className={s.genrePage__wrapper}>
         <BackTitleBar>
-          <h1>{genre ? capitalizeFirstLetter(getRuGenreName(genre)) : ''}</h1>
+          <h1>{normalizedGenre}</h1>
         </BackTitleBar>
         <GenreMoviesList />
       </div>

src/pages/genres/ui/genres-page/GenresPage.tsx

@@ -2,12 +2,14 @@ import s from './GenresPage.module.scss';
 
 import { Loader, PageError, Section } from '@/shared/ui';
 import { GenreCard, useGetGenresQuery } from '@/entities/genre';
-import { useMediaQuery } from '@/shared/lib';
+import { useDocumentTitle, useMediaQuery } from '@/shared/lib';
 
 export function GenresPage() {
   const mq = useMediaQuery('md');
   const { data, isLoading, isError } = useGetGenresQuery();
 
+  useDocumentTitle('Жанры');
+
   return (
     <Section
       indents={[mq ? '24px' : '32px', mq ? '40px' : '160px']}

src/pages/main/ui/main-page/MainPage.tsx

@@ -1,7 +1,10 @@
 import { Top10Movies } from '@/widgets/top10-movies';
 import { RandomMovie } from '../random-movie/RandomMovie';
+import { useDocumentTitle } from '@/shared/lib';
 
 export function MainPage() {
+  useDocumentTitle();
+
   return (
     <>
       <RandomMovie />

src/pages/movie/ui/movie-page/MoviePage.tsx

@@ -1,5 +1,5 @@
 import { movieApi, MovieInfo, useGetByIdQuery } from '@/entities/movie';
-import { useAppSelector, useMediaQuery } from '@/shared/lib';
+import { useAppSelector, useDocumentTitle, useMediaQuery } from '@/shared/lib';
 import { Loader, PageError, Section } from '@/shared/ui';
 import { useMovieSlug } from '../../lib/hooks/useMovieSlug';
 import { MovieDetail } from '@/widgets/movie-detail';
@@ -26,6 +26,8 @@ export function MoviePage() {
   const finalIsFetching = !randomMovieFromCache && isFetching;
   const finalIsError = !randomMovieFromCache && isError;
 
+  useDocumentTitle(finalMovie?.title);
+
   return (
     <Section
       indents={['0', !mq ? '120px' : '32px']}

src/pages/no-match/ui/no-match-page/NoMatchPage.tsx

@@ -1,5 +1,7 @@
+import { useDocumentTitle } from '@/shared/lib';
 import { PageError } from '@/shared/ui';
 
 export function NoMatchPage() {
+  useDocumentTitle('Oooops!');
   return <PageError errorCode="e001" backdropText="404" />;
 }

src/shared/config/constants.ts

@@ -1,2 +1,4 @@
 export const MIN_INPUT_LENGTH = 2;
 export const MIN_PASSWORD_LENGTH = 8;
+
+export const APP_TITLE = 'Маруся App';

src/shared/config/index.ts

@@ -2,5 +2,5 @@ export { ENV_CONFIG } from './env';
 export { ERRORS } from './errors';
 export { BREAKPOINTS } from './breakpoints';
 export { REGEXP } from './regexp';
-export { MIN_INPUT_LENGTH, MIN_PASSWORD_LENGTH } from './constants';
+export { MIN_INPUT_LENGTH, MIN_PASSWORD_LENGTH, APP_TITLE } from './constants';
 export { SWIPER_NORMALIZE } from './swiper-normalize';

src/shared/lib/hooks/index.ts

@@ -8,3 +8,4 @@ export { useMergeRefs } from './useMergeRefs';
 export { useClickOutside } from './useClickOutside';
 export { useIsScrolled } from './useIsScrolled';
 export { useBodyScrollLock } from './useBodyScrollLock';
+export { useDocumentTitle } from './useDocumentTitle.ts';

src/shared/lib/hooks/useDocumentTitle.ts

@@ -0,0 +1,12 @@
+import { APP_TITLE } from '@/shared/config';
+import { useEffect } from 'react';
+
+export function useDocumentTitle(title?: string) {
+  useEffect(() => {
+    document.title = title ? `${title} | ${APP_TITLE}` : APP_TITLE;
+
+    return () => {
+      document.title = APP_TITLE;
+    };
+  }, [title]);
+}

src/shared/lib/index.ts

@@ -8,6 +8,7 @@ export {
   useClickOutside,
   useIsScrolled,
   useBodyScrollLock,
+  useDocumentTitle,
 } from './hooks';
 export {
   capitalizeFirstLetter,