feat(web): show recent guilds in masthead

packages/web/src/contexts/app-shell/AppShellContext.tsx

@@ -3,11 +3,17 @@ import * as React from 'react';
 import { useRecentGuilds } from '../recent-guilds/RecentGuildsContext';
 import { useSessionContext } from '../session/SessionContext';
 
-type AppShellPropsT = {
-    user: AppShellProps['user'];
-    guilds: AppShellProps['guilds'];
-    recentGuilds: AppShellProps['recentGuilds'];
-};
+type AppShellPropsT =
+    | {
+          user: Required<AppShellProps['user']>;
+          guilds: Required<AppShellProps['guilds']>;
+          recentGuilds: Required<AppShellProps['recentGuilds']>;
+      }
+    | {
+          user: undefined;
+          guilds: undefined;
+          recentGuilds: [];
+      };
 
 export const AppShellPropsContext = React.createContext<AppShellPropsT>({
     user: undefined,

packages/web/src/pages/landing.tsx

@@ -1,16 +1,18 @@
 import { Redirect } from '@reach/router';
 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';
 
 const Landing = () => {
     const { isAuthenticated } = useSessionContext();
+    const appShellProps = useAppShellProps();
 
     if (isAuthenticated) {
         return <Redirect to="/servers" />;
     }
 
-    return <LandingTemplate />;
+    return <LandingTemplate {...appShellProps} />;
 };
 
 export default Landing;

packages/web/src/pages/picker.tsx

@@ -3,6 +3,7 @@ import { RolePickerTemplate } from '@roleypoly/design-system/templates/role-pick
 import { ServerSetupTemplate } from '@roleypoly/design-system/templates/server-setup';
 import { PresentableGuild, RoleUpdate, UserGuildPermissions } from '@roleypoly/types';
 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 { makeRoleTransactions } from '../utils/roleTransactions';
@@ -14,6 +15,7 @@ type PickerProps = {
 const Picker = (props: PickerProps) => {
     const { session, authedFetch, isAuthenticated } = useSessionContext();
     const { pushRecentGuild } = useRecentGuilds();
+    const appShellProps = useAppShellProps();
 
     const [pickerData, setPickerData] = React.useState<PresentableGuild | null | false>(
         null
@@ -58,9 +60,8 @@ const Picker = (props: PickerProps) => {
             return (
                 <ServerSetupTemplate
                     activeGuildId={props.serverID}
-                    user={session.user}
-                    guilds={session.guilds || []}
                     guildSlug={guildSlug}
+                    {...appShellProps}
                 />
             );
         }
@@ -96,8 +97,7 @@ const Picker = (props: PickerProps) => {
     return (
         <RolePickerTemplate
             activeGuildId={props.serverID}
-            user={session?.user}
-            guilds={session?.guilds || []}
+            {...appShellProps}
             guild={pickerData.guild}
             guildData={pickerData.data}
             member={pickerData.member}

packages/web/src/pages/servers.tsx

@@ -1,15 +1,17 @@
 import { Redirect } from '@reach/router';
 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';
 
 const ServersPage = () => {
     const { isAuthenticated, session } = useSessionContext();
+    const appShellProps = useAppShellProps();
     if (!isAuthenticated || !session) {
         return <Redirect to="/" />;
     }
 
-    return <ServersTemplate guilds={session.guilds || []} user={session.user} />;
+    return <ServersTemplate {...appShellProps} />;
 };
 
 export default ServersPage;