From 56c098a3164e06cd4f0d036b30efadf3fae1dcba Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Thu, 7 Jan 2021 09:44:24 -0700
Subject: [PATCH] admin(ui): add document titles

---
 .../components/admin/AdminContentBlock.tsx    | 54 +++++++++++--------
 .../components/admin/api/ApiKeysContainer.tsx |  2 +-
 .../admin/databases/DatabasesContainer.tsx    |  2 +-
 .../admin/locations/LocationsContainer.tsx    |  2 +-
 .../admin/mounts/MountsContainer.tsx          |  2 +-
 .../components/admin/nests/NestsContainer.tsx |  2 +-
 .../components/admin/nodes/NodesContainer.tsx |  2 +-
 .../admin/overview/OverviewContainer.tsx      |  2 +-
 .../components/admin/roles/RolesContainer.tsx |  2 +-
 .../admin/servers/ServersContainer.tsx        |  2 +-
 .../admin/settings/SettingsContainer.tsx      |  2 +-
 .../components/admin/users/UsersContainer.tsx |  2 +-
 12 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/resources/scripts/components/admin/AdminContentBlock.tsx b/resources/scripts/components/admin/AdminContentBlock.tsx
index 6be209af1..5793014e4 100644
--- a/resources/scripts/components/admin/AdminContentBlock.tsx
+++ b/resources/scripts/components/admin/AdminContentBlock.tsx
@@ -1,29 +1,39 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 // import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 import FlashMessageRender from '@/components/FlashMessageRender';
 
-const PageContentBlock: React.FC<{ showFlashKey?: string; className?: string }> = ({ children, showFlashKey }) => (
-    // <CSSTransition timeout={150} classNames={'fade'} appear in>
-    <>
-        {showFlashKey &&
-        <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
+const AdminContentBlock: React.FC<{ title?: string; showFlashKey?: string; className?: string }> = ({ children, title, showFlashKey }) => {
+    useEffect(() => {
+        if (!title) {
+            return;
         }
-        {children}
 
-        {/* <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
-            &copy; 2015 - 2021&nbsp;
-            <a
-                rel={'noopener nofollow noreferrer'}
-                href={'https://pterodactyl.io'}
-                target={'_blank'}
-                css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
-            >
-                Pterodactyl Software
-            </a>
-        </p> */}
-    </>
-    // </CSSTransition>
-);
+        document.title = `Admin | ${title}`;
+    }, [ title ]);
 
-export default PageContentBlock;
+    return (
+        // <CSSTransition timeout={150} classNames={'fade'} appear in>
+        <>
+            {showFlashKey &&
+            <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
+            }
+            {children}
+
+            {/* <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
+                &copy; 2015 - 2021&nbsp;
+                <a
+                    rel={'noopener nofollow noreferrer'}
+                    href={'https://pterodactyl.io'}
+                    target={'_blank'}
+                    css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
+                >
+                    Pterodactyl Software
+                </a>
+            </p> */}
+        </>
+        // </CSSTransition>
+    );
+};
+
+export default AdminContentBlock;
diff --git a/resources/scripts/components/admin/api/ApiKeysContainer.tsx b/resources/scripts/components/admin/api/ApiKeysContainer.tsx
index 8cb0a4d2c..a4496c26d 100644
--- a/resources/scripts/components/admin/api/ApiKeysContainer.tsx
+++ b/resources/scripts/components/admin/api/ApiKeysContainer.tsx
@@ -5,7 +5,7 @@ import NewApiKeyButton from '@/components/admin/api/NewApiKeyButton';
 
 export default () => {
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'API Keys'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>API Keys</h2>
diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx
index ec452f685..0410da1e0 100644
--- a/resources/scripts/components/admin/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/admin/databases/DatabasesContainer.tsx
@@ -61,7 +61,7 @@ const DatabasesContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Databases'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Database Hosts</h2>
diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx
index b8cfea574..dcd3ed758 100644
--- a/resources/scripts/components/admin/locations/LocationsContainer.tsx
+++ b/resources/scripts/components/admin/locations/LocationsContainer.tsx
@@ -61,7 +61,7 @@ const LocationsContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Locations'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>
diff --git a/resources/scripts/components/admin/mounts/MountsContainer.tsx b/resources/scripts/components/admin/mounts/MountsContainer.tsx
index a90ab976f..7a0319a33 100644
--- a/resources/scripts/components/admin/mounts/MountsContainer.tsx
+++ b/resources/scripts/components/admin/mounts/MountsContainer.tsx
@@ -61,7 +61,7 @@ const MountsContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Mounts'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>
diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx
index a5da70391..56201656a 100644
--- a/resources/scripts/components/admin/nests/NestsContainer.tsx
+++ b/resources/scripts/components/admin/nests/NestsContainer.tsx
@@ -61,7 +61,7 @@ const NestsContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Nests'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2>
diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx
index 5964c0735..baafede68 100644
--- a/resources/scripts/components/admin/nodes/NodesContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodesContainer.tsx
@@ -62,7 +62,7 @@ const NodesContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Nodes'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>
diff --git a/resources/scripts/components/admin/overview/OverviewContainer.tsx b/resources/scripts/components/admin/overview/OverviewContainer.tsx
index f8725aa40..7db8f0e9b 100644
--- a/resources/scripts/components/admin/overview/OverviewContainer.tsx
+++ b/resources/scripts/components/admin/overview/OverviewContainer.tsx
@@ -32,7 +32,7 @@ export default () => {
     }, []);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Overview'}>
             <div css={tw`flex flex-col mb-8`}>
                 <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2>
                 <p css={tw`text-base text-neutral-400`}>A quick glance at your system.</p>
diff --git a/resources/scripts/components/admin/roles/RolesContainer.tsx b/resources/scripts/components/admin/roles/RolesContainer.tsx
index 73cd52b7a..fb7cc4380 100644
--- a/resources/scripts/components/admin/roles/RolesContainer.tsx
+++ b/resources/scripts/components/admin/roles/RolesContainer.tsx
@@ -62,7 +62,7 @@ export default () => {
     };
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Roles'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Roles</h2>
diff --git a/resources/scripts/components/admin/servers/ServersContainer.tsx b/resources/scripts/components/admin/servers/ServersContainer.tsx
index 20f1d4800..3ea269374 100644
--- a/resources/scripts/components/admin/servers/ServersContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServersContainer.tsx
@@ -61,7 +61,7 @@ const UsersContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Servers'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Servers</h2>
diff --git a/resources/scripts/components/admin/settings/SettingsContainer.tsx b/resources/scripts/components/admin/settings/SettingsContainer.tsx
index f0eda8eb1..62990a3e5 100644
--- a/resources/scripts/components/admin/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/admin/settings/SettingsContainer.tsx
@@ -4,7 +4,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
 
 export default () => {
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Settings'}>
             <div>
                 <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2>
                 <p css={tw`text-base text-neutral-400`}>Configure and manage settings for Pterodactyl.</p>
diff --git a/resources/scripts/components/admin/users/UsersContainer.tsx b/resources/scripts/components/admin/users/UsersContainer.tsx
index 2b412ff84..3b9a590b5 100644
--- a/resources/scripts/components/admin/users/UsersContainer.tsx
+++ b/resources/scripts/components/admin/users/UsersContainer.tsx
@@ -61,7 +61,7 @@ const UsersContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Users'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Users</h2>