From 637be8bfa1f106eeab4cd6d980085f9545f11d1a Mon Sep 17 00:00:00 2001
From: Katalina <kayteh@users.noreply.github.com>
Date: Sat, 13 Mar 2021 21:17:00 -0500
Subject: [PATCH] feat(web): add page titles (#170)

* feat(web): add page titles

* add html title
---
 packages/web/public/index.html                |  2 +-
 packages/web/src/pages/auth/login.tsx         | 14 +++++++----
 packages/web/src/pages/landing.tsx            |  8 ++++++-
 .../web/src/pages/machinery/new-session.tsx   |  8 ++++++-
 packages/web/src/pages/picker.tsx             | 24 +++++++++++--------
 packages/web/src/pages/servers.tsx            |  8 ++++++-
 packages/web/src/utils/metaTitle.tsx          |  7 ++++++
 7 files changed, 52 insertions(+), 19 deletions(-)
 create mode 100644 packages/web/src/utils/metaTitle.tsx

diff --git a/packages/web/public/index.html b/packages/web/public/index.html
index e6a01fa..afe9bfa 100644
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -25,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-        <title>React App</title>
+        <title>Roleypoly - Tame your Discord roles.</title>
         <script>
             (function (d) {
                 var config = {
diff --git a/packages/web/src/pages/auth/login.tsx b/packages/web/src/pages/auth/login.tsx
index 0980dda..e10c73e 100644
--- a/packages/web/src/pages/auth/login.tsx
+++ b/packages/web/src/pages/auth/login.tsx
@@ -2,6 +2,7 @@ import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
 import { GuildSlug } from '@roleypoly/types';
 import React from 'react';
 import { useApiContext } from '../../contexts/api/ApiContext';
+import { Title } from '../../utils/metaTitle';
 
 const Login = () => {
     const { apiUrl, fetch } = useApiContext();
@@ -39,11 +40,14 @@ const Login = () => {
     }
 
     return (
-        <AuthLogin
-            guildSlug={guildSlug}
-            onSendSecretCode={() => {}}
-            discordOAuthLink={oauthLink}
-        />
+        <>
+            <Title title={'Login to Roleypoly'} />
+            <AuthLogin
+                guildSlug={guildSlug}
+                onSendSecretCode={() => {}}
+                discordOAuthLink={oauthLink}
+            />
+        </>
     );
 };
 
diff --git a/packages/web/src/pages/landing.tsx b/packages/web/src/pages/landing.tsx
index eb8603d..c2a5c83 100644
--- a/packages/web/src/pages/landing.tsx
+++ b/packages/web/src/pages/landing.tsx
@@ -3,6 +3,7 @@ import { LandingTemplate } from '@roleypoly/design-system/templates/landing';
 import * as React from 'react';
 import { useAppShellProps } from '../contexts/app-shell/AppShellContext';
 import { useSessionContext } from '../contexts/session/SessionContext';
+import { Title } from '../utils/metaTitle';
 
 const Landing = () => {
     const { isAuthenticated } = useSessionContext();
@@ -12,7 +13,12 @@ const Landing = () => {
         return <Redirect to="/servers" />;
     }
 
-    return <LandingTemplate {...appShellProps} />;
+    return (
+        <>
+            <Title title={`Roleypoly - Tame your Discord roles.`} />
+            <LandingTemplate {...appShellProps} />
+        </>
+    );
 };
 
 export default Landing;
diff --git a/packages/web/src/pages/machinery/new-session.tsx b/packages/web/src/pages/machinery/new-session.tsx
index 9d426c2..e749fcf 100644
--- a/packages/web/src/pages/machinery/new-session.tsx
+++ b/packages/web/src/pages/machinery/new-session.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Title } from '../../utils/metaTitle';
 
 const NewSession = () => {
     React.useEffect(() => {
@@ -12,7 +13,12 @@ const NewSession = () => {
         }
     });
 
-    return <div>Redirecting you...</div>;
+    return (
+        <>
+            <Title title="Logging you into Roleypoly..." />
+            <div>Redirecting you...</div>
+        </>
+    );
 };
 
 export default NewSession;
diff --git a/packages/web/src/pages/picker.tsx b/packages/web/src/pages/picker.tsx
index 680a0e9..d32d6c6 100644
--- a/packages/web/src/pages/picker.tsx
+++ b/packages/web/src/pages/picker.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { useAppShellProps } from '../contexts/app-shell/AppShellContext';
 import { useRecentGuilds } from '../contexts/recent-guilds/RecentGuildsContext';
 import { useSessionContext } from '../contexts/session/SessionContext';
+import { Title } from '../utils/metaTitle';
 import { makeRoleTransactions } from '../utils/roleTransactions';
 
 type PickerProps = {
@@ -95,16 +96,19 @@ const Picker = (props: PickerProps) => {
     };
 
     return (
-        <RolePickerTemplate
-            activeGuildId={props.serverID}
-            {...appShellProps}
-            guild={pickerData.guild}
-            guildData={pickerData.data}
-            member={pickerData.member}
-            roles={pickerData.roles}
-            editable={pickerData.guild.permissionLevel > UserGuildPermissions.User}
-            onSubmit={onSubmit}
-        />
+        <>
+            <Title title={`${pickerData.guild.name} - Roleypoly`} />
+            <RolePickerTemplate
+                activeGuildId={props.serverID}
+                {...appShellProps}
+                guild={pickerData.guild}
+                guildData={pickerData.data}
+                member={pickerData.member}
+                roles={pickerData.roles}
+                editable={pickerData.guild.permissionLevel > UserGuildPermissions.User}
+                onSubmit={onSubmit}
+            />
+        </>
     );
 };
 
diff --git a/packages/web/src/pages/servers.tsx b/packages/web/src/pages/servers.tsx
index 1d2a444..e9c42c6 100644
--- a/packages/web/src/pages/servers.tsx
+++ b/packages/web/src/pages/servers.tsx
@@ -3,6 +3,7 @@ import { ServersTemplate } from '@roleypoly/design-system/templates/servers';
 import * as React from 'react';
 import { useAppShellProps } from '../contexts/app-shell/AppShellContext';
 import { useSessionContext } from '../contexts/session/SessionContext';
+import { Title } from '../utils/metaTitle';
 
 const ServersPage = () => {
     const { isAuthenticated, session } = useSessionContext();
@@ -11,7 +12,12 @@ const ServersPage = () => {
         return <Redirect to="/" />;
     }
 
-    return <ServersTemplate {...appShellProps} />;
+    return (
+        <>
+            <Title title={'Your Guilds - Roleypoly'} />
+            <ServersTemplate {...appShellProps} />
+        </>
+    );
 };
 
 export default ServersPage;
diff --git a/packages/web/src/utils/metaTitle.tsx b/packages/web/src/utils/metaTitle.tsx
new file mode 100644
index 0000000..2e4002b
--- /dev/null
+++ b/packages/web/src/utils/metaTitle.tsx
@@ -0,0 +1,7 @@
+import Head from 'react-helmet';
+
+export const Title = (props: { title: string }) => (
+    <Head>
+        <title>{props.title}</title>
+    </Head>
+);