feat: add a title on the comparison page

frontend/src/features/comparisons/Comparison.tsx

@@ -6,12 +6,12 @@ import React, {
   useState,
 } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { TFunction, useTranslation } from 'react-i18next';
 import { Location } from 'history';
 
 import { CircularProgress, Grid, Card } from '@mui/material';
 
-import { useNotifications } from 'src/hooks';
+import { useDocumentTitle, useNotifications } from 'src/hooks';
 import {
   UsersService,
   ComparisonRequest,
@@ -23,7 +23,12 @@ import EntitySelector, {
 } from 'src/features/entity_selector/EntitySelector';
 import { SuggestionHistory } from 'src/features/suggestions/suggestionHistory';
 import { autoSuggestionPool } from 'src/features/suggestions/suggestionPool';
-import { UID_YT_NAMESPACE } from 'src/utils/constants';
+import {
+  DEFAULT_DOCUMENT_TITLE,
+  getEntityMetadataName,
+  getPollName,
+  UID_YT_NAMESPACE,
+} from 'src/utils/constants';
 import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
 import ComparisonEntityContexts from './ComparisonEntityContexts';
 import ComparisonHelper from './ComparisonHelper';
@@ -59,6 +64,19 @@ const getUidsFromLocation = (location: Location) => {
   };
 };
 
+const createPageTitle = (
+  t: TFunction,
+  pollName: string,
+  nameA?: string,
+  nameB?: string
+): string | null => {
+  if (!nameA || !nameB) {
+    return null;
+  }
+
+  return `${nameA} -VS- ${nameB} | Tournesol: ${getPollName(t, pollName)}`;
+};
+
 interface Props {
   afterSubmitCallback?: (
     uidA: string,
@@ -108,6 +126,22 @@ const Comparison = ({
     rating: null,
   });
 
+  const [pageTitle, setPageTitle] = useState(DEFAULT_DOCUMENT_TITLE);
+  useDocumentTitle(pageTitle);
+
+  useEffect(() => {
+    if (selectorA.rating?.entity && selectorB.rating?.entity) {
+      const nameA = getEntityMetadataName(pollName, selectorA.rating?.entity);
+      const nameB = getEntityMetadataName(pollName, selectorB.rating?.entity);
+      const title = createPageTitle(t, pollName, nameA, nameB);
+      if (title) {
+        setPageTitle(title);
+      }
+    } else {
+      setPageTitle(DEFAULT_DOCUMENT_TITLE);
+    }
+  }, [pollName, selectorA.rating?.entity, selectorB.rating?.entity, t]);
+
   const onChange = useCallback(
     (vidKey: 'vidA' | 'vidB') => (newValue: SelectorValue) => {
       // `window.location` is used here, to avoid memoizing the location

frontend/src/hooks/useDocumentTitle.tsx

@@ -1,15 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { DEFAULT_DOCUMENT_TITLE } from 'src/utils/constants';
 
 export const useDocumentTitle = (pageTitle: string) => {
-  const [previousTitle] = useState(document.title);
-
   useEffect(() => {
     document.title = pageTitle;
   }, [pageTitle]);
 
   useEffect(() => {
     return () => {
-      document.title = previousTitle;
+      document.title = DEFAULT_DOCUMENT_TITLE;
     };
-  }, [previousTitle]);
+  }, []);
 };

frontend/src/pages/entities/EntityAnalysisPage.tsx

@@ -14,6 +14,7 @@ import {
   VideoService,
 } from 'src/services/openapi';
 import {
+  DEFAULT_DOCUMENT_TITLE,
   getEntityMetadataName,
   getPollName,
   PRESIDENTIELLE_2022_POLL_NAME,
@@ -102,7 +103,7 @@ const EntityAnalysisPage = () => {
   const [entity, setEntity] = useState<Recommendation>();
   const [isLoading, setIsLoading] = useState(true);
   const [apiError, setApiError] = useState<ApiError>();
-  const [pageTitle, setPageTitle] = useState('Tournesol');
+  const [pageTitle, setPageTitle] = useState(DEFAULT_DOCUMENT_TITLE);
 
   useDocumentTitle(pageTitle);
 

frontend/src/utils/constants.tsx

@@ -16,6 +16,8 @@ import {
 } from './polls/videos';
 import { SelectablePoll, RouteID } from './types';
 
+export const DEFAULT_DOCUMENT_TITLE = 'Tournesol';
+
 export const YOUTUBE_POLL_NAME = 'videos';
 export const PRESIDENTIELLE_2022_POLL_NAME = 'presidentielle2022';
 const PRESIDENTIELLE_2022_ENABLED =