Update page title

brendanv · Aug 19, 2024 · 3509aae · 3509aae
1 parent b569cd3
commit 3509aae
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 1 deletion.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Lynx</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/components/pages/AddLink.tsx b/frontend/src/components/pages/AddLink.tsx
@@ -16,13 +16,15 @@ import Header from "@/components/Header";
 import FeedLink from "@/types/FeedLink";
 import { Link } from "react-router-dom";
 import URLS from "@/lib/urls";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 const URLParserForm = () => {
   const [url, setUrl] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [createdLink, setCreatedLink] = useState<FeedLink | null>(null);
   const { pb } = usePocketBase();
+  usePageTitle("Add Link");
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();

diff --git a/frontend/src/components/pages/ApiKeys.tsx b/frontend/src/components/pages/ApiKeys.tsx
@@ -40,6 +40,7 @@ import {
   SortingState,
   getSortedRowModel,
 } from "@tanstack/react-table";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 type ApiKey = {
   id: string;
@@ -58,6 +59,7 @@ const ApiKeys: React.FC = () => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [newApiKey, setNewApiKey] = useState<string | null>(null);
   const [isNewKeyDialogOpen, setIsNewKeyDialogOpen] = useState(false);
+  usePageTitle("API Keys")
 
   useEffect(() => {
     fetchApiKeys();

diff --git a/frontend/src/components/pages/Cookies.tsx b/frontend/src/components/pages/Cookies.tsx
@@ -39,6 +39,7 @@ import {
   SortingState,
   getSortedRowModel,
 } from "@tanstack/react-table";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 type Cookie = {
   id: string;
@@ -55,6 +56,7 @@ const Cookies: React.FC = () => {
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
+  usePageTitle("Cookies")
 
   useEffect(() => {
     fetchCookies();

diff --git a/frontend/src/components/pages/Feeds.tsx b/frontend/src/components/pages/Feeds.tsx
@@ -38,6 +38,7 @@ import {
   SortingState,
   getSortedRowModel,
 } from "@tanstack/react-table";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 type Feed = {
   id: string;
@@ -56,6 +57,7 @@ const Feeds: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
+  usePageTitle("Feeds")
 
   useEffect(() => {
     fetchFeeds();

diff --git a/frontend/src/components/pages/Home.tsx b/frontend/src/components/pages/Home.tsx
@@ -5,8 +5,10 @@ import LinkCard, { LinkCardSkeleton } from "@/components/LinkCard";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import SearchBar, { SearchParams } from "@/components/SearchBar";
 import Paginator from "@/components/Paginator";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 const Home: React.FC = () => {
+  usePageTitle("My Feed")
   const [page, setPage] = useState(1);
   const [searchParams, setSearchParams] = useState<SearchParams>({
     searchText: "",

diff --git a/frontend/src/components/pages/LinkViewer.tsx b/frontend/src/components/pages/LinkViewer.tsx
@@ -6,6 +6,7 @@ import { CalendarIcon, ClockIcon, LinkIcon, UserIcon } from "lucide-react";
 import Tag from "@/types/Tag";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Skeleton } from "@/components/ui/skeleton";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 const LinkViewer = () => {
   const { id } = useParams();
@@ -20,6 +21,7 @@ const LinkViewer = () => {
   }
 
   const { result, loading, error } = useLinkViewerQuery(id, true);
+  usePageTitle(result?.title || "View Link")
 
   if (result) {
     return (

diff --git a/frontend/src/components/pages/Login.tsx b/frontend/src/components/pages/Login.tsx
@@ -16,6 +16,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { usePageTitle } from "@/hooks/usePageTitle";
 
 const Login = () => {
   const [username, setUsername] = useState("");
@@ -24,6 +25,7 @@ const Login = () => {
   const navigate = useNavigate();
   const { pb } = usePocketBase();
   const { theme } = useTheme();
+  usePageTitle("Login")
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();

diff --git a/frontend/src/hooks/usePageTitle.ts b/frontend/src/hooks/usePageTitle.ts
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export const usePageTitle = (title: string) => {
+  useEffect(() => {
+    const previousTitle = document.title;
+    document.title = `${title} | Lynx`;
+
+    return () => {
+      document.title = previousTitle;
+    };
+  }, [title]);
+};