Fix titles

This commit is contained in:
Lim Chee Aun 2023-02-11 17:57:26 +08:00
parent f756f23d6e
commit 863ac2663c
4 changed files with 22 additions and 1 deletions

View file

@ -5,9 +5,11 @@ import Link from '../components/link';
import Loader from '../components/loader';
import Menu from '../components/menu';
import { api } from '../utils/api';
import useTitle from '../utils/useTitle';
function FollowedHashtags() {
const { masto, instance } = api();
useTitle(`Followed Hashtags`, `/ft`);
const [uiState, setUiState] = useState('default');
const [followedHashtags, setFollowedHashtags] = useState([]);

View file

@ -5,9 +5,11 @@ import Link from '../components/link';
import Loader from '../components/loader';
import Menu from '../components/menu';
import { api } from '../utils/api';
import useTitle from '../utils/useTitle';
function Lists() {
const { masto } = api();
useTitle(`Lists`, `/l`);
const [uiState, setUiState] = useState('default');
const [lists, setLists] = useState([]);

View file

@ -11,6 +11,7 @@ import Menu from '../components/menu';
import NameText from '../components/name-text';
import Status from '../components/status';
import { api } from '../utils/api';
import useTitle from '../utils/useTitle';
function Search() {
const { masto, instance, authenticated } = api();
@ -18,6 +19,8 @@ function Search() {
const [searchParams, setSearchParams] = useSearchParams();
const searchFieldRef = useRef();
const q = searchParams.get('q');
useTitle(q ? `Search: ${q}` : 'Search', `/search`);
const [statusResults, setStatusResults] = useState([]);
const [accountResults, setAccountResults] = useState([]);
const [hashtagResults, setHashtagResults] = useState([]);

View file

@ -8,8 +8,22 @@ const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
export default function useTitle(title, path) {
const snapStates = useSnapshot(states);
const { currentLocation } = snapStates;
let paths = [];
// Workaround for matchPath not working for optional path segments
// https://github.com/remix-run/react-router/discussions/9862
if (/:\w+\?/.test(path)) {
paths.push(path.replace(/\?/g, ''));
paths.push(path.replace(/\/?:\w+\?/g, ''));
}
let matched = false;
if (paths.length) {
matched = paths.some((p) => matchPath(p, currentLocation));
} else {
matched = matchPath(path, currentLocation);
}
useEffect(() => {
if (path && !matchPath(path, snapStates.currentLocation)) return;
if (path && !matched) return;
document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
}, [title, snapStates.currentLocation]);
}