Add page titles

9 files changed, 121 insertions, 9 deletions

diff --git a/vnext/package-lock.json b/vnext/package-lock.json
index e32c2794..836066b5 100644
--- a/vnext/package-lock.json
+++ b/vnext/package-lock.json
@@ -28,6 +28,7 @@
         "react-content-loader": "^6.2.0",
         "react-cookie": "^4.1.1",
         "react-dom": "18.2.0",
+        "react-helmet": "^6.1.0",
         "react-hook-form": "^7.38.0",
         "react-hot-toast": "^2.4.0",
         "react-router-dom": "^6.4.2",
@@ -14547,7 +14548,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14961,6 +14961,25 @@
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
       "dev": true
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.38.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
@@ -15039,6 +15058,14 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-test-renderer": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
@@ -28291,7 +28318,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -28588,6 +28614,22 @@
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
       "dev": true
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-hook-form": {
       "version": "7.38.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
@@ -28634,6 +28676,12 @@
         "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "requires": {}
+    },
     "react-test-renderer": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
diff --git a/vnext/package.json b/vnext/package.json
index 931a219e..d8b7bdc8 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -93,6 +93,7 @@
     "react-content-loader": "^6.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.38.0",
     "react-hot-toast": "^2.4.0",
     "react-router-dom": "^6.4.2",
diff --git a/vnext/src/ui/Chat.js b/vnext/src/ui/Chat.js
index cdf3de1b..6bcff837 100644
--- a/vnext/src/ui/Chat.js
+++ b/vnext/src/ui/Chat.js
@@ -10,6 +10,7 @@ import { getChat, pm } from '../api';
 
 import './Chat.css';
 import { useVisitor } from './VisitorContext';
+import { Helmet } from 'react-helmet';
 
 /**
  * @typedef {Object} ChatProps
@@ -66,6 +67,9 @@ export default function Chat(props) {
     const uname = params.user;
     return (
         <div className="msg-cont">
+            <Helmet>
+                <title>PM: {uname}</title>
+            </Helmet>
             <UserInfo uname={uname} />
             {uname ? (
                 <div className="chatroom">
diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js
index 0005da9a..1e3e3072 100644
--- a/vnext/src/ui/Contacts.js
+++ b/vnext/src/ui/Contacts.js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { getChats } from '../api';
 
@@ -19,6 +20,9 @@ export default function Contacts(props) {
     }, []);
     return (
         <div className="msg-cont">
+            <Helmet>
+                <title>Messages</title>
+            </Helmet>
             <div style={chatListStyle}>
                 {
                     pms.length ? pms.map((chat) =>
diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index 75f1800d..c0698204 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -11,6 +11,7 @@ import UserInfo from './UserInfo';
 
 import { getMessages } from '../api';
 import { useVisitor } from './VisitorContext';
+import { Helmet } from 'react-helmet';
 
 /**
  * @typedef {object} Query
@@ -27,7 +28,7 @@ import { useVisitor } from './VisitorContext';
 
 function RequireAuth({ children }) {
   let location = useLocation();
-  let [ visitor ] = useVisitor();
+  let [visitor] = useVisitor();
   if (!visitor.hash) {
     // Redirect them to the /login page, but save the current location they were
     // trying to go to when they were redirected. This allows us to send them
@@ -50,7 +51,14 @@ export function Discover() {
     search: search,
     pageParam: search.search ? 'page' : 'before_mid'
   };
-  return (<Feed query={query} />);
+  return (
+    <>
+      <Helmet>
+        <title>Discover</title>
+      </Helmet>
+      <Feed query={query} />
+    </>
+  );
 }
 
 /**
@@ -61,7 +69,14 @@ export function Discussions() {
     baseUrl: '/api/messages/discussions',
     pageParam: 'to'
   };
-  return (<Feed query={query} />);
+  return (
+    <>
+      <Helmet>
+        <title>Discussions</title>
+      </Helmet>
+      <Feed query={query} />
+    </>
+  );
 }
 
 /**
@@ -79,8 +94,13 @@ export function Blog() {
     search: search,
     pageParam: search.search ? 'page' : 'before_mid'
   };
+  const blogTitle = `${user} blog`;
+  const pageTitle = search.tag ? `${blogTitle}: #${search.tag}` : blogTitle;
   return (
     <>
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
       <div className="msg-cont">
         <UserInfo uname={user} />
       </div>
@@ -90,7 +110,7 @@ export function Blog() {
 }
 
 /**
- * @param {PageProps} props
+ * 
  */
 export function Tag() {
   const params = useParams();
@@ -102,7 +122,14 @@ export function Tag() {
     },
     pageParam: 'before_mid'
   };
-  return (<Feed query={query} />);
+  return (
+    <>
+      <Helmet>
+        <title>#{tag}</title>
+      </Helmet>
+      <Feed query={query} />
+    </>
+  );
 }
 
 /**
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
index 51c25a19..9795092c 100644
--- a/vnext/src/ui/Post.js
+++ b/vnext/src/ui/Post.js
@@ -8,6 +8,7 @@ import MessageInput from './MessageInput';
 
 import { post, update } from '../api';
 import { useVisitor } from './VisitorContext';
+import { Helmet } from 'react-helmet';
 
 /**
  *
@@ -37,6 +38,9 @@ export default function Post() {
   };
   return (
     <div className="msg-cont">
+      <Helmet>
+        <title>Post</title>
+      </Helmet>
       <MessageInput rows={7} text={params.body || draft || ''} data={{}} onSend={postMessage}>
         *weather It is very cold today!
       </MessageInput>
diff --git a/vnext/src/ui/Settings.js b/vnext/src/ui/Settings.js
index 3ae33567..6575fb87 100644
--- a/vnext/src/ui/Settings.js
+++ b/vnext/src/ui/Settings.js
@@ -7,6 +7,7 @@ import Icon from './Icon';
 import UploadButton from './UploadButton';
 import Avatar from './Avatar';
 import { useVisitor } from './VisitorContext';
+import { Helmet } from 'react-helmet';
 
 /**
  * @param {{ onChange: Function }} props
@@ -102,6 +103,9 @@ export default function Settings({ onChange }) {
     };
     return (
         <div className="msg-cont">
+            <Helmet>
+                <title>Settings</title>
+            </Helmet>
             <fieldset>
                 <legend><Icon name="ei-user" size="m" />Changing your avatar</legend>
                 <ChangeAvatarForm onChange={onChange} />
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index b2d17824..48cdf27c 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -8,6 +8,7 @@ import Spinner from './Spinner';
 
 import { getMessages, comment, update } from '../api';
 import { useVisitor } from './VisitorContext';
+import { Helmet } from 'react-helmet';
 /**
  * @type { import('../api').Message }
  */
@@ -94,8 +95,12 @@ export default function Thread(props) {
   }, [props.connection, message.mid, onReply]);
 
   const loaders = Math.min(message.replies || 0, 10);
+  const pageTitle = `${message.user.uname} ${message && message.tags || 'thread'}`;
   return (
     <>
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
       {
         message.mid ? (
           <Message data={message}>
diff --git a/vnext/src/ui/Users.js b/vnext/src/ui/Users.js
index 900cfaf0..b0e19dfa 100644
--- a/vnext/src/ui/Users.js
+++ b/vnext/src/ui/Users.js
@@ -3,13 +3,21 @@ import { useParams } from 'react-router-dom';
 
 import UserInfo from './UserInfo';
 import Avatar from './Avatar';
+import { Helmet } from 'react-helmet';
 
 /**
  * Friends feed
  */
 export function Friends() {
     const params = useParams();
-    return <Users uname={params.user} prop='read' />;
+    return (
+        <>
+            <Helmet>
+                <title>{params.user} subscriptions</title>
+            </Helmet>
+            <Users uname={params.user} prop='read' />
+        </>
+    );
 }
 
 /**
@@ -17,7 +25,14 @@ export function Friends() {
  */
 export function Readers() {
     const params = useParams();
-    return <Users uname={params.user} prop='readers' />;
+    return (
+        <>
+            <Helmet>
+                <title>{params.user} readers</title>
+            </Helmet>
+            <Users uname={params.user} prop='readers' />
+        </>
+    );
 }
 
 /**