Add page titles

7 files changed, 70 insertions, 7 deletions

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' />
+        </>
+    );
 }
 
 /**