Feat/recent guilds (#89) (#167)

* feat(web): add server-setup page for when bot isn't in the server picked

* chore: move contexts into their own folder

* feat(web): add recent guilds context, and app shell helper context

* feat(web): show recent guilds in masthead

* feat(web): functionally add recents to servers list

* fix(web): correct styling for servers listing recents/all headers

* fix(web): correct some type issues with appShellProps

* fix(web): don't show ServerListing recents when recents is empty

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

@@ -1,5 +1,5 @@
 import { NavSlug } from '@roleypoly/design-system/molecules/nav-slug';
-import { sortBy } from '@roleypoly/misc-utils/sortBy';
+import { getRecentAndSortedGuilds } from '@roleypoly/misc-utils/guildListing';
 import { GuildSlug, UserGuildPermissions } from '@roleypoly/types';
 import * as React from 'react';
 import Scrollbars from 'react-custom-scrollbars';
@@ -9,6 +9,7 @@ import { GuildNavItem } from './GuildNav.styled';
 
 type Props = {
     guilds: GuildSlug[];
+    recentGuilds: string[];
 };
 
 const tooltipId = 'guildnav';
@@ -27,23 +28,41 @@ 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 { sortedGuildSlugs, recentGuildSlugs } = getRecentAndSortedGuilds(
+        props.guilds,
+        props.recentGuilds
+    );
+
+    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={sortedGuildSlugs} />
+                <ReactTooltip id={tooltipId} />
+            </Scrollbars>
+        </div>
+    );
+};

packages/design-system/organisms/app-shell/AppShell.tsx

@@ -13,6 +13,7 @@ export type AppShellProps = {
     small?: boolean;
     activeGuildId?: string | null;
     guilds?: GuildSlug[];
+    recentGuilds?: string[];
     disableGuildPicker?: boolean;
 };
 
@@ -26,6 +27,7 @@ export const AppShell = (props: AppShellProps) => (
                 guilds={props.guilds || []}
                 activeGuildId={props.activeGuildId || null}
                 user={props.user}
+                recentGuilds={props.recentGuilds || []}
             />
         ) : (
             <Masthead.Guest />

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

@@ -22,6 +22,7 @@ type Props = {
     activeGuildId: string | null;
     guilds: GuildSlug[];
     disableGuildPicker?: boolean;
+    recentGuilds: string[];
 };
 
 export const Authed = (props: Props) => {
@@ -65,7 +66,12 @@ export const Authed = (props: Props) => {
                         preferredWidth={560}
                         onExit={() => setServerPopoverState(false)}
                     >
-                        {() => <GuildNav guilds={props.guilds} />}
+                        {() => (
+                            <GuildNav
+                                guilds={props.guilds}
+                                recentGuilds={props.recentGuilds || []}
+                            />
+                        )}
                     </Popover>
                 </MastheadLeft>
                 <MastheadRight>

packages/design-system/organisms/servers-listing/ServersListing.styled.ts

@@ -21,3 +21,7 @@ export const CardContainer = styled.div`
         max-width: 30%;
     `)}
 `;
+
+export const SectionHead = styled.div`
+    flex: 1 1 100%;
+`;

packages/design-system/organisms/servers-listing/ServersListing.tsx

@@ -1,27 +1,45 @@
 import { CompletelyStylelessLink } from '@roleypoly/design-system/atoms/typography';
 import { ServerListingCard } from '@roleypoly/design-system/molecules/server-listing-card';
-import { sortBy } from '@roleypoly/misc-utils/sortBy';
+import { getRecentAndSortedGuilds } from '@roleypoly/misc-utils/guildListing';
 import { GuildSlug } from '@roleypoly/types';
 import * as React from 'react';
-import { CardContainer, ContentContainer } from './ServersListing.styled';
+import { CardContainer, ContentContainer, SectionHead } from './ServersListing.styled';
 
 type ServersListingProps = {
     guilds: GuildSlug[];
+    recentGuilds: string[];
 };
 
-export const ServersListing = (props: ServersListingProps) => (
-    <ContentContainer>
-        {props.guilds &&
-            sortBy(props.guilds, 'name', (a: string, b: string) =>
-                a.toLowerCase() > b.toLowerCase() ? 1 : -1
-            ).map((guild, idx) => (
-                <CardContainer key={idx}>
-                    <a href={`/s/${guild.id}`}>
-                        <CompletelyStylelessLink>
-                            <ServerListingCard guild={guild} />
-                        </CompletelyStylelessLink>
-                    </a>
-                </CardContainer>
-            ))}
-    </ContentContainer>
+const CardList = (props: { guilds: GuildSlug[] }) => (
+    <>
+        {props.guilds.map((guild, idx) => (
+            <CardContainer key={idx}>
+                <a href={`/s/${guild.id}`}>
+                    <CompletelyStylelessLink>
+                        <ServerListingCard guild={guild} />
+                    </CompletelyStylelessLink>
+                </a>
+            </CardContainer>
+        ))}
+    </>
 );
+
+export const ServersListing = (props: ServersListingProps) => {
+    const { recentGuildSlugs, sortedGuildSlugs } = getRecentAndSortedGuilds(
+        props.guilds,
+        props.recentGuilds
+    );
+
+    return (
+        <ContentContainer>
+            {recentGuildSlugs.length !== 0 && (
+                <>
+                    <SectionHead>Recent Guilds</SectionHead>
+                    <CardList guilds={recentGuildSlugs} />
+                    <SectionHead>All Guilds</SectionHead>
+                </>
+            )}
+            <CardList guilds={sortedGuildSlugs} />
+        </ContentContainer>
+    );
+};

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,14 +1,14 @@
 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>
-        <ServersListing guilds={props.guilds}></ServersListing>
+        <ServersListing
+            guilds={props.guilds || []}
+            recentGuilds={props.recentGuilds || []}
+        ></ServersListing>
     </AppShell>
 );