standardise document titles

web/src/views/AccountSettingsView.tsx

@@ -15,7 +15,7 @@ import api from '@/api'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 import { useCallback, useEffect, useState } from 'react'
-import { useConnection, useSession } from '@/hooks'
+import { useConnection, useDocument, useSession } from '@/hooks'
 
 interface AccountUpdateFormData extends Pick<api.Account, 'email' | 'password'> {}
 
@@ -36,6 +36,7 @@ function useAccountUpdateForm() {
 }
 
 export default function AccountSettingsView() {
+  const doc = useDocument()
   const form = useAccountUpdateForm()
   const navigate = useNavigate()
   const { options } = useConnection()
@@ -98,6 +99,10 @@ export default function AccountSettingsView() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    doc.setTitle('My account')
+  }, [doc])
+
   return account && (
     <Main>
       <form onSubmit={form.handleSubmit(updateAccount)}>

web/src/views/ErrorView.tsx

@@ -1,10 +1,17 @@
 import Main from '@/components/Main'
 import Notice from '@/components/Notice'
+import { useDocument } from '@/hooks'
+import { useEffect } from 'react'
 import { useRouteError } from 'react-router-dom'
 
 export default function ErrorView() {
+  const doc = useDocument()
   const { error } = useRouteError() as { error: Error }
 
+  useEffect(() => {
+    doc.setTitle('Error')
+  }, [doc])
+
   if (error) return (
     <Main>
       <h1>Error</h1>

web/src/views/HerdEditView.tsx

@@ -11,9 +11,9 @@ import Placeholder from '@/components/Placeholder'
 import ResetButton from '@/components/button/ResetButton'
 import SaveButton from '@/components/button/SaveButton'
 import api from '@/api'
-import { useConnection } from '@/hooks'
 import { useForm } from 'react-hook-form'
 import { useCallback, useEffect, useState } from 'react'
+import { useConnection, useDocument } from '@/hooks'
 import { useNavigate, useParams } from 'react-router-dom'
 
 interface HerdUpdateFormData extends Pick<api.Herd, 'name'> {}
@@ -31,6 +31,7 @@ function useHerdUpdateForm() {
 }
 
 export default function HerdEditView() {
+  const doc = useDocument()
   const { id } = useParams()
   const navigate = useNavigate()
   const { options } = useConnection()
@@ -109,6 +110,12 @@ export default function HerdEditView() {
     reset()
   }, [reset])
 
+  useEffect(() => {
+    if (data?.herd) doc.setTitle(`Editing - ${data.herd.name}`)
+    else if (loading) doc.setTitle('Loading herd...')
+    else doc.clearTitle()
+  }, [data, doc, loading])
+
   return (
     <Main>
       <form onSubmit={updateHerdForm.handleSubmit(submit)}>

web/src/views/HerdListView.tsx

@@ -16,9 +16,9 @@ import SearchForm from '@/components/SearchForm'
 import api from '@/api'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
-import { useRouteSearch } from '@/hooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useConnection, useSession } from '@/hooks'
+import { useDocument, useRouteSearch } from '@/hooks'
 
 interface HerdCreateFormData extends Pick<api.Herd, 'name'> {}
 
@@ -36,6 +36,7 @@ function useHerdCreateForm() {
 
 export default function ListHerds() {
   const { account } = useSession()
+  const doc = useDocument()
   const form = useHerdCreateForm()
   const navigate = useNavigate()
   const { options } = useConnection()
@@ -83,6 +84,10 @@ export default function ListHerds() {
     reload()
   }, [reload])
 
+  useEffect(() => {
+    doc.setTitle('Herds')
+  }, [doc])
+
   return (
     <Main>
       <header>

web/src/views/HerdView.tsx

@@ -24,7 +24,7 @@ import { useForm } from 'react-hook-form'
 import { CheckCircleIcon, CloudIcon, TrashIcon, XCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { useCallback, useEffect, useState } from 'react'
-import { useConnection, useRouteSearch, useSession } from '@/hooks'
+import { useConnection, useDocument, useRouteSearch, useSession } from '@/hooks'
 import { useNavigate, useParams } from 'react-router-dom'
 
 interface TaskCreateFormData extends Pick<api.Task, 'description'> {}
@@ -58,6 +58,7 @@ function useTaskUpdateForm() {
 export default function HerdView() {
   const { account } = useSession()
   const createForm = useTaskCreateForm()
+  const doc = useDocument()
   const { id } = useParams()
   const navigate = useNavigate()
   const { options } = useConnection()
@@ -219,6 +220,12 @@ export default function HerdView() {
     reload()
   }, [reload])
 
+  useEffect(() => {
+    if (data?.herd) doc.setTitle(data.herd.name)
+    else if (loading) doc.setTitle('Loading herd...')
+    else doc.clearTitle()
+  }, [data, doc, loading])
+
   return (
     <Main>
       <header>