Merge pull request #1944 from atmonshi/page-titles

add page titles

pages/404.js

@@ -6,7 +6,7 @@ export default function Custom404() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.pageNotFound)}>
       <Row>
         <Column>
           <Flexbox alignItems="center" justifyContent="center" flex={1} style={{ minHeight: 600 }}>

pages/dashboard/index.js

@@ -1,9 +1,12 @@
 import AppLayout from 'components/layout/AppLayout';
 import Dashboard from 'components/pages/dashboard/Dashboard';
+import useMessages from 'hooks/useMessages';
 
 export default function DashboardPage() {
+  const { formatMessage, labels } = useMessages();
+
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.dashboard)}>
       <Dashboard />
     </AppLayout>
   );

pages/realtime/[id]/index.js

@@ -1,17 +1,23 @@
 import { useRouter } from 'next/router';
 import AppLayout from 'components/layout/AppLayout';
 import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
+import useMessages from 'hooks/useMessages';
+import useApi from 'hooks/useApi';
 
 export default function RealtimeDetailsPage() {
   const router = useRouter();
   const { id: websiteId } = router.query;
+  const { formatMessage, labels } = useMessages();
+  const { get, useQuery } = useApi();
+  const { data: website } = useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`));
+  const title = formatMessage(labels.realtime) + ' | ' + website?.name;
 
   if (!websiteId) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={title}>
       <RealtimeDashboard key={websiteId} websiteId={websiteId} />
     </AppLayout>
   );

pages/realtime/index.js

@@ -1,9 +1,11 @@
 import AppLayout from 'components/layout/AppLayout';
 import RealtimeHome from 'components/pages/realtime/RealtimeHome';
+import useMessages from 'hooks/useMessages';
 
 export default function RealtimePage() {
+  const { formatMessage, labels } = useMessages();
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.realtime)}>
       <RealtimeHome />
     </AppLayout>
   );

pages/settings/profile/index.js

@@ -1,10 +1,12 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
+import useMessages from 'hooks/useMessages';
 
 export default function ProfilePage() {
+  const { formatMessage, labels } = useMessages();
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.profile)}>
       <SettingsLayout>
         <ProfileSettings />
       </SettingsLayout>

pages/settings/teams/[id]/index.js

@@ -2,17 +2,19 @@ import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamSettings from 'components/pages/settings/teams/TeamSettings';
 import { useRouter } from 'next/router';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamDetailPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
 
   if (!id || disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.teams)}>
       <SettingsLayout>
         <TeamSettings teamId={id} />
       </SettingsLayout>

pages/settings/teams/index.js

@@ -1,14 +1,16 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamsList from 'components/pages/settings/teams/TeamsList';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamsPage({ disabled }) {
+  const { formatMessage, labels } = useMessages();
   if (disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.teams)}>
       <SettingsLayout>
         <TeamsList />
       </SettingsLayout>

pages/settings/users/[id]/index.js

@@ -2,17 +2,19 @@ import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import UserSettings from 'components/pages/settings/users/UserSettings';
 import { useRouter } from 'next/router';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamDetailPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
 
   if (!id || disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.users)}>
       <SettingsLayout>
         <UserSettings userId={id} />
       </SettingsLayout>

pages/settings/users/index.js

@@ -1,14 +1,16 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import UsersList from 'components/pages/settings/users/UsersList';
+import useMessages from 'hooks/useMessages';
 
 export default function UsersPage({ disabled }) {
+  const { formatMessage, labels } = useMessages();
   if (disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.users)}>
       <SettingsLayout>
         <UsersList />
       </SettingsLayout>

pages/settings/websites/[id]/index.js

@@ -2,17 +2,19 @@ import AppLayout from 'components/layout/AppLayout';
 import { useRouter } from 'next/router';
 import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
 import SettingsLayout from 'components/layout/SettingsLayout';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteSettingsPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
 
   if (!id || disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.websites)}>
       <SettingsLayout>
         <WebsiteSettings websiteId={id} />
       </SettingsLayout>

pages/settings/websites/index.js

@@ -1,14 +1,16 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import WebsitesList from 'components/pages/settings/websites/WebsitesList';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsitesPage({ disabled }) {
+  const { formatMessage, labels } = useMessages();
   if (disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.websites)}>
       <SettingsLayout>
         <WebsitesList />
       </SettingsLayout>

pages/websites/[id]/index.js

@@ -1,8 +1,10 @@
 import { useRouter } from 'next/router';
 import AppLayout from 'components/layout/AppLayout';
 import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
+import useMessages from 'hooks/useMessages';
 
 export default function DetailsPage() {
+  const { formatMessage, labels } = useMessages();
   const router = useRouter();
   const { id } = router.query;
 
@@ -11,7 +13,7 @@ export default function DetailsPage() {
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.websites)}>
       <WebsiteDetails websiteId={id} />
     </AppLayout>
   );