feat(web): functionally add recents to servers list

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';
@@ -40,21 +40,9 @@ const NavList = (props: { guilds: Props['guilds'] }) => (
 );
 
 export const GuildNav = (props: Props) => {
-    const recentGuildSlugs: GuildSlug[] = props.recentGuilds
+    const { sortedGuildSlugs, recentGuildSlugs } = getRecentAndSortedGuilds(
-        .reduce<(GuildSlug | undefined)[]>(
+        props.guilds,
-            (acc, id) => [...acc, props.guilds.find((guild) => guild.id === id)],
+        props.recentGuilds
-            []
-        )
-        .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 (
@@ -72,7 +60,7 @@ export const GuildNav = (props: Props) => {
                         <div>All Guilds</div>
                     </>
                 )}
-                <NavList guilds={sortedSlugs} />
+                <NavList guilds={sortedGuildSlugs} />
                 <ReactTooltip id={tooltipId} />
             </Scrollbars>
         </div>

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';
 
 type ServersListingProps = {
     guilds: GuildSlug[];
+    recentGuilds: string[];
 };
 
-export const ServersListing = (props: ServersListingProps) => (
+const CardList = (props: { guilds: GuildSlug[] }) => (
-    <ContentContainer>
+    <>
-        {props.guilds &&
+        {props.guilds.map((guild, idx) => (
-            sortBy(props.guilds, 'name', (a: string, b: string) =>
+            <CardContainer key={idx}>
-                a.toLowerCase() > b.toLowerCase() ? 1 : -1
+                <a href={`/s/${guild.id}`}>
-            ).map((guild, idx) => (
+                    <CompletelyStylelessLink>
-                <CardContainer key={idx}>
+                        <ServerListingCard guild={guild} />
-                    <a href={`/s/${guild.id}`}>
+                    </CompletelyStylelessLink>
-                        <CompletelyStylelessLink>
+                </a>
-                            <ServerListingCard guild={guild} />
+            </CardContainer>
-                        </CompletelyStylelessLink>
+        ))}
-                    </a>
+    </>
-                </CardContainer>
-            ))}
-    </ContentContainer>
 );
+
+export const ServersListing = (props: ServersListingProps) => {
+    const { recentGuildSlugs, sortedGuildSlugs } = getRecentAndSortedGuilds(
+        props.guilds,
+        props.recentGuilds
+    );
+
+    return (
+        <ContentContainer>
+            {recentGuildSlugs && (
+                <>
+                    <div>Recent Guilds</div>
+                    <CardList guilds={recentGuildSlugs} />
+                    <div>All Guilds</div>
+                </>
+            )}
+            <CardList guilds={sortedGuildSlugs} />
+        </ContentContainer>
+    );
+};

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

@@ -6,6 +6,9 @@ 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>
 );

packages/misc-utils/guildListing.ts

@@ -0,0 +1,26 @@
+import { sortBy } from '@roleypoly/misc-utils/sortBy';
+import { GuildSlug } from '@roleypoly/types';
+
+type RecentAndSortedT = {
+    recentGuildSlugs: GuildSlug[];
+    sortedGuildSlugs: GuildSlug[];
+};
+
+export const getRecentAndSortedGuilds = (
+    guilds: GuildSlug[],
+    recentGuilds: string[]
+): RecentAndSortedT => {
+    return {
+        recentGuildSlugs: recentGuilds.reduce<GuildSlug[]>((acc, id) => {
+            const guild = guilds.find((guild) => guild.id === id);
+            if (guild) {
+                acc.push(guild);
+            }
+
+            return acc;
+        }, []),
+        sortedGuildSlugs: sortBy(guilds, 'name', (a: string, b: string) =>
+            a.toLowerCase() > b.toLowerCase() ? 1 : -1
+        ),
+    };
+};