At this point, better write my own matchPath right?

This commit is contained in:
Lim Chee Aun 2023-02-11 18:19:23 +08:00
parent 9401fc38e1
commit 26f8b618a5
2 changed files with 7 additions and 6 deletions

View file

@ -12,8 +12,8 @@ function Public({ local }) {
const isLocal = !!local; const isLocal = !!local;
const params = useParams(); const params = useParams();
const { masto, instance } = api({ instance: params.instance }); const { masto, instance } = api({ instance: params.instance });
const title = `${instance} (${isLocal ? 'local' : 'federated'})`; const title = `${isLocal ? 'Local' : 'Federated'} timeline (${instance})`;
useTitle(title, `:instance?/p/l?`); useTitle(title, isLocal ? `/:instance?/p/l` : `/:instance?/p`);
const latestItem = useRef(); const latestItem = useRef();
const publicIterator = useRef(); const publicIterator = useRef();
@ -59,8 +59,8 @@ function Public({ local }) {
title={title} title={title}
titleComponent={ titleComponent={
<h1 class="header-account"> <h1 class="header-account">
<b>{instance}</b> <b>{isLocal ? 'Local timeline' : 'Federated timeline'}</b>
<div>{isLocal ? 'local' : 'federated'}</div> <div>{instance}</div>
</h1> </h1>
} }
id="public" id="public"

View file

@ -12,8 +12,8 @@ export default function useTitle(title, path) {
let paths = []; let paths = [];
// Workaround for matchPath not working for optional path segments // Workaround for matchPath not working for optional path segments
// https://github.com/remix-run/react-router/discussions/9862 // https://github.com/remix-run/react-router/discussions/9862
if (/:\w+\?/.test(path)) { if (/:?\w+\?/.test(path)) {
paths.push(path.replace(/\?/g, '')); paths.push(path.replace(/(:\w+)\?/g, '$1'));
paths.push(path.replace(/\/?:\w+\?/g, '')); paths.push(path.replace(/\/?:\w+\?/g, ''));
} }
let matched = false; let matched = false;
@ -22,6 +22,7 @@ export default function useTitle(title, path) {
} else { } else {
matched = matchPath(path, currentLocation); matched = matchPath(path, currentLocation);
} }
console.debug({ paths, matched, currentLocation });
useEffect(() => { useEffect(() => {
if (path && !matched) return; if (path && !matched) return;
document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME; document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;