♻️ Refactor titles to useTitle hook

bluesky-social · Feb 6, 2024 · 73af95f · 73af95f
1 parent 2f7540d
commit 73af95f
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 123 deletions.
diff --git a/app/communication-template/[id]/edit/page.tsx b/app/communication-template/[id]/edit/page.tsx
@@ -1,13 +1,10 @@
 'use client'
 
+import { useTitle } from 'react-use'
 import { CommunicationTemplateForm } from 'components/communication-template/form'
-import { useEffect } from 'react'
 
 export default function CommunicationTemplateEditPage({ params: { id } }) {
-  // Change page title dynamically
-  useEffect(() => {
-    document.title = `Edit Communication Templates #${id}`
-  }, [id])
+  useTitle(`Edit Communication Templates #${id}`)
 
   return (
     <div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto">

diff --git a/app/communication-template/create/page.tsx b/app/communication-template/create/page.tsx
@@ -1,13 +1,10 @@
 'use client'
 
+import { useTitle } from 'react-use'
 import { CommunicationTemplateForm } from 'components/communication-template/form'
-import { useEffect } from 'react'
 
 export default function CommunicationTemplateCreatePage() {
-  // Change page title dynamically
-  useEffect(() => {
-    document.title = `Create Communication Templates`
-  }, [])
+  useTitle(`Create Communication Templates`)
 
   return (
     <div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto">

diff --git a/app/communication-template/page.tsx b/app/communication-template/page.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import format from 'date-fns/format'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import Link from 'next/link'
 import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/20/solid'
+import { useTitle } from 'react-use'
 
 import { LabelChip } from '@/common/labels'
 import { Loading, LoadingFailed } from '@/common/Loader'
@@ -17,10 +18,7 @@ export default function CommunicationTemplatePage() {
     string | undefined
   >()
 
-  // Change page title dynamically
-  useEffect(() => {
-    document.title = `Communication Templates`
-  }, [])
+  useTitle(`Communication Templates`)
 
   if (isLoading) {
     return <Loading message="Loading templates" />

diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useQuery } from '@tanstack/react-query'
+import { useTitle } from 'react-use'
 import client from '@/lib/client'
 import { Loading, LoadingFailed } from '@/common/Loader'
 import { EventView } from '@/mod-event/View'
-import { useEffect } from 'react'
 import { MOD_EVENT_TITLES } from '@/mod-event/constants'
 
 export default function EventViewPage({ params }: { params: { id: string } }) {
@@ -19,17 +19,13 @@ export default function EventViewPage({ params }: { params: { id: string } }) {
     },
   })
 
-  // Change page title dynamically
-  // Use a human-readable event name once event details are fetched
-  useEffect(() => {
-    if (event) {
-      const eventTitle =
-        MOD_EVENT_TITLES[event.event.$type as string] || 'Moderation'
-      document.title = `${eventTitle} Event #${id}`
-    } else {
-      document.title = `Moderation Event #${id}`
-    }
-  }, [id, event])
+  let pageTitle = `Moderation Event #${id}`
+  if (event) {
+    const eventTitle =
+      MOD_EVENT_TITLES[event.event.$type as string] || 'Moderation'
+    pageTitle = `${eventTitle} Event #${id}`
+  }
+  useTitle(pageTitle)
 
   if (error) {
     return <LoadingFailed error={error} />

diff --git a/app/events/page-content.tsx b/app/events/page-content.tsx
@@ -1,9 +1,9 @@
+import { useTitle } from 'react-use'
 import { ModEventList } from '@/mod-event/EventList'
 import { emitEvent } from '@/mod-event/helpers/emitEvent'
 import { ComAtprotoAdminEmitModerationEvent } from '@atproto/api'
 import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
 
 export default function EventListPageContent() {
   const searchParams = useSearchParams()
@@ -20,9 +20,7 @@ export default function EventListPageContent() {
     router.push((pathname ?? '') + '?' + newParams.toString())
   }
 
-  useEffect(() => {
-    document.title = `Moderation Events`
-  }, [])
+  useTitle(`Moderation Events`)
 
   return (
     <div>

diff --git a/app/reports/page-content.tsx b/app/reports/page-content.tsx
@@ -22,6 +22,7 @@ import { AuthContext } from '@/shell/AuthContext'
 import { ButtonGroup } from '@/common/buttons'
 import { useFluentReportSearch } from '@/reports/useFluentReportSearch'
 import { SubjectTable } from 'components/subject/table'
+import { useTitle } from 'react-use'
 
 const TABS = [
   {
@@ -48,6 +49,42 @@ const TABS = [
   { key: 'all', name: 'All', href: '/reports' },
 ]
 
+const buildPageTitle = ({
+  currentTab,
+  takendown,
+  includeMuted,
+  appealed,
+}: {
+  currentTab: string
+  takendown: boolean
+  includeMuted: boolean
+  appealed: boolean
+}) => {
+  const titleFromTab =
+    currentTab === 'all'
+      ? `All subjects`
+      : `${currentTab[0].toUpperCase()}${currentTab.slice(1)}`
+  const additionalFragments: string[] = []
+
+  if (takendown) {
+    additionalFragments.push('Taken Down')
+  }
+
+  if (includeMuted) {
+    additionalFragments.push('Include Muted')
+  }
+
+  if (appealed) {
+    additionalFragments.push('Appealed')
+  }
+
+  const additionalTitle = additionalFragments.length
+    ? ` (${additionalFragments.join(', ')})`
+    : ''
+  const title = `Queue - ${titleFromTab}${additionalTitle}`
+  return title
+}
+
 const ResolvedFilters = () => {
   const router = useRouter()
   const pathname = usePathname()
@@ -197,31 +234,13 @@ export const ReportsPageContent = () => {
     ),
   )
 
-  useEffect(() => {
-    const titleFromTab =
-      currentTab === 'all'
-        ? `All subjects`
-        : `${currentTab[0].toUpperCase()}${currentTab.slice(1)}`
-    const additionalFragments: string[] = []
-
-    if (takendown) {
-      additionalFragments.push('Taken Down')
-    }
-
-    if (includeMuted) {
-      additionalFragments.push('Include Muted')
-    }
-
-    if (appealed) {
-      additionalFragments.push('Appealed')
-    }
-
-    const additionalTitle = additionalFragments.length
-      ? ` (${additionalFragments.join(', ')})`
-      : ''
-    const title = `Queue - ${titleFromTab}${additionalTitle}`
-    document.title = title
-  }, [currentTab, takendown, includeMuted, appealed])
+  const pageTitle = buildPageTitle({
+    currentTab,
+    takendown,
+    includeMuted,
+    appealed,
+  })
+  useTitle(pageTitle)
 
   return (
     <>

diff --git a/app/repositories/[id]/[...record]/page.tsx b/app/repositories/[id]/[...record]/page.tsx
@@ -15,6 +15,36 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
 import { emitEvent } from '@/mod-event/helpers/emitEvent'
 import { useEffect } from 'react'
+import { useTitle } from 'react-use'
+
+const buildPageTitle = ({
+  handle,
+  collection,
+  rkey,
+}: {
+  handle?: string
+  collection?: string
+  rkey?: string
+}) => {
+  let title = `Record Details`
+
+  if (collection) {
+    const titleFromCollection = collection.split('.').pop()
+    if (titleFromCollection) {
+      title =
+        titleFromCollection[0].toUpperCase() + titleFromCollection.slice(1)
+    }
+  }
+
+  if (handle) {
+    title += ` - ${handle}`
+  }
+
+  if (rkey) {
+    title += ` - ${rkey}`
+  }
+  return title
+}
 
 export default function Record({
   params,
@@ -116,30 +146,12 @@ export default function Record({
     }
   }, [data, reportUri])
 
-  // Change title dynamically
-  // Show the collection name
-  // Once we retrieve the profile/repo details, show the handle
-  useEffect(() => {
-    let title = `Record Details`
-
-    if (collection) {
-      const titleFromCollection = collection.split('.').pop()
-      if (titleFromCollection) {
-        title =
-          titleFromCollection[0].toUpperCase() + titleFromCollection.slice(1)
-      }
-    }
-
-    if (data?.record?.repo) {
-      title += ` - ${data.record.repo.handle}`
-    }
-
-    if (rkey) {
-      title += ` - ${rkey}`
-    }
-
-    document.title = title
-  }, [data, collection])
+  const pageTitle = buildPageTitle({
+    handle: data?.record?.repo.handle,
+    rkey,
+    collection,
+  })
+  useTitle(pageTitle)
 
   if (error) {
     return <LoadingFailed error={error} />

diff --git a/app/repositories/[id]/page-content.tsx b/app/repositories/[id]/page-content.tsx
@@ -6,8 +6,29 @@ import { ComAtprotoAdminEmitModerationEvent } from '@atproto/api'
 import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { emitEvent } from '@/mod-event/helpers/emitEvent'
-import { useEffect } from 'react'
+import { useTitle } from 'react-use'
 
+const buildPageTitle = ({
+  handle,
+  tab,
+}: {
+  handle: string
+  tab: string | null
+}) => {
+  let title = `Repository Details`
+  const titleFragments: string[] = [title]
+  const titleFromTab = tab ? tab[0].toUpperCase() + tab.slice(1) : ''
+
+  if (titleFromTab) {
+    titleFragments.unshift(titleFromTab)
+  }
+
+  if (handle) {
+    titleFragments.unshift(handle)
+  }
+
+  return titleFragments.join(' - ')
+}
 export function RepositoryViewPageContent({ id }: { id: string }) {
   const {
     error,
@@ -30,28 +51,11 @@ export function RepositoryViewPageContent({ id }: { id: string }) {
   }
   const tab = searchParams.get('tab')
 
-  // Change title dynamically
-  // Once we retrieve the profile/repo details, show the handle
-  // Show the current tab name from account view
-  useEffect(() => {
-    let title = `Repository Details`
-    const titleFragments: string[] = [title]
-    const titleFromTab = tab ? tab[0].toUpperCase() + tab.slice(1) : ''
-
-    if (titleFromTab) {
-      titleFragments.unshift(titleFromTab)
-    }
-
-    if (profile) {
-      titleFragments.unshift(profile.handle)
-    } else if (repo) {
-      titleFragments.unshift(repo.handle)
-    } else {
-      titleFragments.unshift(id)
-    }
-
-    document.title = titleFragments.join(' - ')
-  }, [id, repo, profile, tab])
+  const pageTitle = buildPageTitle({
+    handle: profile?.handle || repo?.handle || id,
+    tab,
+  })
+  useTitle(pageTitle)
 
   return (
     <>

diff --git a/app/repositories/page-content.tsx b/app/repositories/page-content.tsx
@@ -4,6 +4,7 @@ import { useSearchParams } from 'next/navigation'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import client from '@/lib/client'
 import { useEffect } from 'react'
+import { useTitle } from 'react-use'
 
 export default function RepositoriesListPage() {
   const params = useSearchParams()
@@ -24,16 +25,12 @@ export default function RepositoriesListPage() {
     getNextPageParam: (lastPage) => lastPage.cursor,
   })
 
-  // Change title dynamically, if there's a search term, include that
-  useEffect(() => {
-    let title = `Repositories`
+  let pageTitle = `Repositories`
+  if (term) {
+    pageTitle += ` - ${term}`
+  }
 
-    if (term) {
-      title += ` - ${term}`
-    }
-
-    document.title = title
-  }, [term])
+  useTitle(pageTitle)
 
   const repos = data?.pages.flatMap((page) => page.repos) ?? []
   return (