feat(web): add page titles (#170)

* feat(web): add page titles

* add html title

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 = {

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}
+            />
+        </>
     );
 };
 

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;

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;

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}
+            />
+        </>
     );
 };
 

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;

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>
+);