From 26f8b618a548f8f437d55314353ef309ddd80859 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 11 Feb 2023 18:19:23 +0800
Subject: [PATCH] At this point, better write my own matchPath right?

---
 src/pages/public.jsx  | 8 ++++----
 src/utils/useTitle.js | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/public.jsx b/src/pages/public.jsx
index 3d37da65..cc2be36f 100644
--- a/src/pages/public.jsx
+++ b/src/pages/public.jsx
@@ -12,8 +12,8 @@ function Public({ local }) {
   const isLocal = !!local;
   const params = useParams();
   const { masto, instance } = api({ instance: params.instance });
-  const title = `${instance} (${isLocal ? 'local' : 'federated'})`;
-  useTitle(title, `:instance?/p/l?`);
+  const title = `${isLocal ? 'Local' : 'Federated'} timeline (${instance})`;
+  useTitle(title, isLocal ? `/:instance?/p/l` : `/:instance?/p`);
   const latestItem = useRef();
 
   const publicIterator = useRef();
@@ -59,8 +59,8 @@ function Public({ local }) {
       title={title}
       titleComponent={
         <h1 class="header-account">
-          <b>{instance}</b>
-          <div>{isLocal ? 'local' : 'federated'}</div>
+          <b>{isLocal ? 'Local timeline' : 'Federated timeline'}</b>
+          <div>{instance}</div>
         </h1>
       }
       id="public"
diff --git a/src/utils/useTitle.js b/src/utils/useTitle.js
index 80dd592a..38989fb6 100644
--- a/src/utils/useTitle.js
+++ b/src/utils/useTitle.js
@@ -12,8 +12,8 @@ export default function useTitle(title, path) {
   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, ''));
+  if (/:?\w+\?/.test(path)) {
+    paths.push(path.replace(/(:\w+)\?/g, '$1'));
     paths.push(path.replace(/\/?:\w+\?/g, ''));
   }
   let matched = false;
@@ -22,6 +22,7 @@ export default function useTitle(title, path) {
   } else {
     matched = matchPath(path, currentLocation);
   }
+  console.debug({ paths, matched, currentLocation });
   useEffect(() => {
     if (path && !matched) return;
     document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;