From 4b8d5219a2320e6d3d1e1260574bd6042c97b27e Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Tue, 1 Nov 2022 20:28:30 +0300 Subject: Add page titles --- vnext/package-lock.json | 52 ++++++++++++++++++++++++++++++++++++++++++++++-- vnext/package.json | 1 + vnext/src/ui/Chat.js | 4 ++++ vnext/src/ui/Contacts.js | 4 ++++ vnext/src/ui/Feeds.js | 37 +++++++++++++++++++++++++++++----- vnext/src/ui/Post.js | 4 ++++ vnext/src/ui/Settings.js | 4 ++++ vnext/src/ui/Thread.js | 5 +++++ vnext/src/ui/Users.js | 19 ++++++++++++++++-- 9 files changed, 121 insertions(+), 9 deletions(-) (limited to 'vnext') 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 (
+ + PM: {uname} + {uname ? (
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 (
+ + Messages +
{ 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 (); + return ( + <> + + Discover + + + + ); } /** @@ -61,7 +69,14 @@ export function Discussions() { baseUrl: '/api/messages/discussions', pageParam: 'to' }; - return (); + return ( + <> + + Discussions + + + + ); } /** @@ -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 ( <> + + {pageTitle} +
@@ -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 (); + return ( + <> + + #{tag} + + + + ); } /** 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 (
+ + Post + *weather It is very cold today! 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 (
+ + Settings +
Changing your avatar 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 ( <> + + {pageTitle} + { message.mid ? ( 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 ; + return ( + <> + + {params.user} subscriptions + + + + ); } /** @@ -17,7 +25,14 @@ export function Friends() { */ export function Readers() { const params = useParams(); - return ; + return ( + <> + + {params.user} readers + + + + ); } /** -- cgit v1.2.3