X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FUser.js;h=144e4c01d86418c46bd16cc53f567556399420b8;hb=5a0be9cded90d70dd16a56d30b4804dbd830aa0f;hp=8dfdba45311aa410a0fbd0a858f3278bf4182912;hpb=920f11ddfeb2175e4e1556886773dcd044c6085b;p=alttp.git

diff --git a/resources/js/components/pages/User.js b/resources/js/components/pages/User.js
index 8dfdba4..144e4c0 100644
--- a/resources/js/components/pages/User.js
+++ b/resources/js/components/pages/User.js
@@ -1,7 +1,9 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
 
+import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
 import ErrorMessage from '../common/ErrorMessage';
 import Loading from '../common/Loading';
@@ -18,8 +20,9 @@ const User = () => {
 
 	useEffect(() => {
 		setLoading(true);
+		const ctrl = new AbortController();
 		axios
-			.get(`/api/users/${id}`)
+			.get(`/api/users/${id}`, { signal: ctrl.signal })
 			.then(response => {
 				setError(null);
 				setLoading(false);
@@ -30,6 +33,9 @@ const User = () => {
 				setLoading(false);
 				setUser(null);
 			});
+		return () => {
+			ctrl.abort();
+		};
 	}, [id]);
 
 	useEffect(() => {
@@ -59,6 +65,10 @@ const User = () => {
 	}
 
 	return <ErrorBoundary>
+		<Helmet>
+			<title>{user.nickname || user.username}</title>
+		</Helmet>
+		<CanonicalLinks base={`/users/${user.id}`} />
 		<Profile user={user} />
 	</ErrorBoundary>;
 };