feat(web): show recent guilds in masthead

packages/design-system/molecules/guild-nav/GuildNav.tsx

@@ -9,6 +9,7 @@ import { GuildNavItem } from './GuildNav.styled';
 
 type Props = {
     guilds: GuildSlug[];
+    recentGuilds: string[];
 };
 
 const tooltipId = 'guildnav';
@@ -27,23 +28,53 @@ const Badges = (props: { guild: GuildSlug }) => {
     }, [props.guild.permissionLevel]);
 };
 
-export const GuildNav = (props: Props) => (
-    <div>
-        <Scrollbars
-            universal
-            autoHide
-            // autoHeight
-            style={{ height: 'calc(100vh - 45px - 1.4em)', overflowX: 'hidden' }}
-        >
-            {sortBy(props.guilds, 'name', (a: string, b: string) =>
-                a.toLowerCase() > b.toLowerCase() ? 1 : -1
-            ).map((guild) => (
-                <GuildNavItem href={`/s/${guild.id}`} key={guild.id}>
-                    <NavSlug guild={guild || null} key={guild.id} />
-                    <Badges guild={guild} />
-                </GuildNavItem>
-            ))}
-            <ReactTooltip id={tooltipId} />
-        </Scrollbars>
-    </div>
+const NavList = (props: { guilds: Props['guilds'] }) => (
+    <>
+        {props.guilds.map((guild) => (
+            <GuildNavItem href={`/s/${guild.id}`} key={guild.id}>
+                <NavSlug guild={guild || null} key={guild.id} />
+                <Badges guild={guild} />
+            </GuildNavItem>
+        ))}
+    </>
 );
+
+export const GuildNav = (props: Props) => {
+    const recentGuildSlugs: GuildSlug[] = props.recentGuilds
+        .reduce<(GuildSlug | undefined)[]>(
+            (acc, id) => [...acc, props.guilds.find((guild) => guild.id === id)],
+            []
+        )
+        .filter((slug) => slug !== undefined);
+
+    console.log({
+        recentGuilds: props.recentGuilds,
+        slugs: props.guilds,
+        recentSlugs: recentGuildSlugs,
+    });
+
+    const sortedSlugs = sortBy(props.guilds, 'name', (a: string, b: string) =>
+        a.toLowerCase() > b.toLowerCase() ? 1 : -1
+    );
+
+    return (
+        <div>
+            <Scrollbars
+                universal
+                autoHide
+                // autoHeight
+                style={{ height: 'calc(100vh - 45px - 1.4em)', overflowX: 'hidden' }}
+            >
+                {recentGuildSlugs && (
+                    <>
+                        <div>Recents</div>
+                        <NavList guilds={recentGuildSlugs} />
+                        <div>All Guilds</div>
+                    </>
+                )}
+                <NavList guilds={sortedSlugs} />
+                <ReactTooltip id={tooltipId} />
+            </Scrollbars>
+        </div>
+    );
+};

packages/design-system/organisms/masthead/Authed.tsx

@@ -69,7 +69,7 @@ export const Authed = (props: Props) => {
                         {() => (
                             <GuildNav
                                 guilds={props.guilds}
-                                recentGuilds={props.recentGuilds}
+                                recentGuilds={props.recentGuilds || []}
                             />
                         )}
                     </Popover>

packages/design-system/templates/role-picker/RolePicker.tsx

@@ -8,9 +8,15 @@ import * as React from 'react';
 export type RolePickerTemplateProps = RolePickerProps & Omit<AppShellProps, 'children'>;
 
 export const RolePickerTemplate = (props: RolePickerTemplateProps) => {
-    const { user, guilds, activeGuildId, ...pickerProps } = props;
+    const { user, guilds, activeGuildId, recentGuilds, ...pickerProps } = props;
     return (
-        <AppShell activeGuildId={activeGuildId} user={user} guilds={guilds} small>
+        <AppShell
+            activeGuildId={activeGuildId}
+            user={user}
+            guilds={guilds}
+            recentGuilds={recentGuilds}
+            small
+        >
             <RolePicker {...pickerProps} />
         </AppShell>
     );

packages/design-system/templates/servers/Servers.tsx

@@ -1,11 +1,8 @@
 import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
 import { ServersListing } from '@roleypoly/design-system/organisms/servers-listing/ServersListing';
-import { GuildSlug } from '@roleypoly/types';
 import * as React from 'react';
 
-type ServerTemplateProps = Omit<AppShellProps, 'children'> & {
-    guilds: GuildSlug[];
-};
+type ServerTemplateProps = Omit<AppShellProps, 'children'>;
 
 export const ServersTemplate = (props: ServerTemplateProps) => (
     <AppShell {...props} disableGuildPicker>

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;