Create custom hook to change document title

src/hooks/useDocumentTitle.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+const useDocumentTitle = title => {
+  const [documentTitle] = useState(title);
+
+  useEffect(() => {
+    document.title = documentTitle;
+  }, [documentTitle]);
+};
+
+export { useDocumentTitle };

src/screens/Calendar/index.js

@@ -1,4 +1,7 @@
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
+
 function Calendar() {
+  useDocumentTitle('Calendário');
   return <h1>Calendário Acadêmico</h1>;
 }
 

src/screens/Home/index.js

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useUser } from '../../context/user';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import useLayoutType from '../../hooks/useLayoutType';
 import View from './View';
 
 function Home() {
+  useDocumentTitle('Página Inicial');
   const layoutType = useLayoutType();
   const { fetchClassrooms, fetchAssignments } = useUser();
   const [classrooms, setClassrooms] = useState(null);

src/screens/Information/index.js

@@ -1,4 +1,7 @@
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
+
 function Information() {
+  useDocumentTitle('Informações');
   return <h1>Informações</h1>;
 }
 

src/screens/Login/index.js

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import { useAuthState } from '../../context/auth';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import useLayoutType from '../../hooks/useLayoutType';
 
 import View from './View';
 
 function Login() {
+  useDocumentTitle('Entrar');
   const { login, isPending, isError, error } = useAuthState();
   const layoutType = useLayoutType();
   const [email, setEmail] = useState('');

src/screens/UnauthenticatedHome/index.js

@@ -1,9 +1,11 @@
 import { Link } from '@mui/material';
 import { Container } from '@mui/system';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 
 import styles from './styles';
 
 function UnauthenticatedHome() {
+  useDocumentTitle('Seja bem-vindo');
   const { container } = styles.desktop;
 
   return (