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,7 +28,24 @@ const Badges = (props: { guild: GuildSlug }) => {
     }, [props.guild.permissionLevel]);
 };
 
-export const GuildNav = (props: Props) => (
+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
@@ -35,15 +53,16 @@ export const GuildNav = (props: Props) => (
                 // autoHeight
                 style={{ height: 'calc(100vh - 45px - 1.4em)', overflowX: 'hidden' }}
             >
-            {sortBy(props.guilds, 'name', (a: string, b: string) =>
+                {recentGuildSlugs && (
-                a.toLowerCase() > b.toLowerCase() ? 1 : -1
+                    <>
-            ).map((guild) => (
+                        <div>Recents</div>
-                <GuildNavItem href={`/s/${guild.id}`} key={guild.id}>
+                        <NavList guilds={recentGuildSlugs} />
-                    <NavSlug guild={guild || null} key={guild.id} />
+                        <div>All Guilds</div>
-                    <Badges guild={guild} />
+                    </>
-                </GuildNavItem>
+                )}
-            ))}
+                <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,20 +1,18 @@
 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) => (
+const CardList = (props: { guilds: GuildSlug[] }) => (
-    <ContentContainer>
+    <>
-        {props.guilds &&
+        {props.guilds.map((guild, idx) => (
-            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>
@@ -23,5 +21,25 @@ export const ServersListing = (props: ServersListingProps) => (
                 </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'> & {
+type ServerTemplateProps = Omit<AppShellProps, 'children'>;
-    guilds: GuildSlug[];
-};
 
 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
+        ),
+    };
+};

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

@@ -0,0 +1,41 @@
+import { AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import * as React from 'react';
+import { useRecentGuilds } from '../recent-guilds/RecentGuildsContext';
+import { useSessionContext } from '../session/SessionContext';
+
+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,
+    guilds: undefined,
+    recentGuilds: [],
+});
+
+export const useAppShellProps = () => React.useContext(AppShellPropsContext);
+
+export const AppShellPropsProvider = (props: { children: React.ReactNode }) => {
+    const { session } = useSessionContext();
+    const { recentGuilds } = useRecentGuilds();
+
+    const appShellProps: AppShellPropsT = {
+        user: session?.user,
+        guilds: session?.guilds,
+        recentGuilds,
+    };
+
+    return (
+        <AppShellPropsContext.Provider value={appShellProps}>
+            {props.children}
+        </AppShellPropsContext.Provider>
+    );
+};

packages/web/src/contexts/recent-guilds/RecentGuildsContext.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+type RecentGuildsT = {
+    recentGuilds: string[];
+    pushRecentGuild: (id: string) => void;
+};
+
+export const RecentGuilds = React.createContext<RecentGuildsT>({
+    recentGuilds: [],
+    pushRecentGuild: () => {},
+});
+
+export const useRecentGuilds = () => React.useContext(RecentGuilds);
+
+const saveState = (state: string[]) => {
+    localStorage.setItem('rp_recent_guilds', JSON.stringify(state));
+};
+
+const pullState = (): string[] => {
+    const rawState = localStorage.getItem('rp_recent_guilds');
+    if (!rawState) {
+        return [];
+    }
+
+    try {
+        return JSON.parse(rawState);
+    } catch (e) {
+        console.warn('RecentGuilds failed to re-hydrate saved state', e);
+        return [];
+    }
+};
+
+export const RecentGuildsProvider = (props: { children: React.ReactNode }) => {
+    const [recentGuilds, setRecentGuilds] = React.useState<string[]>(pullState());
+
+    const recentGuildsData: RecentGuildsT = {
+        recentGuilds,
+        pushRecentGuild: (id: string) => {
+            const nextState = [
+                id,
+                ...recentGuilds.slice(0, 19).filter((guild) => guild !== id),
+            ];
+
+            if (recentGuilds[0] !== id) {
+                setRecentGuilds(nextState);
+            }
+        },
+    };
+
+    React.useEffect(() => {
+        saveState(recentGuilds);
+    }, [recentGuilds]);
+
+    return (
+        <RecentGuilds.Provider value={recentGuildsData}>
+            {props.children}
+        </RecentGuilds.Provider>
+    );
+};

packages/web/src/contexts/session/SessionContext.tsx

@@ -1,6 +1,6 @@
 import { SessionData } from '@roleypoly/types';
 import * as React from 'react';
-import { useApiContext } from '../api-context/ApiContext';
+import { useApiContext } from '../api/ApiContext';
 
 type SessionContextT = {
     session?: Omit<Partial<SessionData>, 'tokens'>;

packages/web/src/index.tsx

@@ -1,16 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ApiContextProvider } from './api-context/ApiContext';
 import { AppRouter } from './app-router/AppRouter';
-import { SessionContextProvider } from './session-context/SessionContext';
+import { ApiContextProvider } from './contexts/api/ApiContext';
+import { AppShellPropsProvider } from './contexts/app-shell/AppShellContext';
+import { RecentGuildsProvider } from './contexts/recent-guilds/RecentGuildsContext';
+import { SessionContextProvider } from './contexts/session/SessionContext';
+
+const ProviderProvider = (props: {
+    providerChain: typeof ApiContextProvider[];
+    children: React.ReactNode;
+}) => {
+    return props.providerChain.reduceRight(
+        (acc, Provider) => <Provider>{acc}</Provider>,
+        <>{props.children}</>
+    );
+};
 
 ReactDOM.render(
     <React.StrictMode>
-        <ApiContextProvider>
+        <ProviderProvider
-            <SessionContextProvider>
+            providerChain={[
+                ApiContextProvider,
+                SessionContextProvider,
+                RecentGuildsProvider,
+                AppShellPropsProvider,
+            ]}
+        >
             <AppRouter />
-            </SessionContextProvider>
+        </ProviderProvider>
-        </ApiContextProvider>
     </React.StrictMode>,
     document.getElementById('root')
 );

packages/web/src/pages/auth/login.tsx

@@ -1,7 +1,7 @@
 import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
 import { GuildSlug } from '@roleypoly/types';
 import React from 'react';
-import { useApiContext } from '../../api-context/ApiContext';
+import { useApiContext } from '../../contexts/api/ApiContext';
 
 const Login = () => {
     const { apiUrl, fetch } = useApiContext();

packages/web/src/pages/dev-tools/session-debug.tsx

@@ -1,5 +1,5 @@
-import { useApiContext } from '../../api-context/ApiContext';
+import { useApiContext } from '../../contexts/api/ApiContext';
-import { useSessionContext } from '../../session-context/SessionContext';
+import { useSessionContext } from '../../contexts/session/SessionContext';
 
 const SessionDebug = () => {
     const session = useSessionContext();

packages/web/src/pages/dev-tools/set-api.tsx

@@ -1,6 +1,6 @@
 import { navigate } from '@reach/router';
 import * as React from 'react';
-import { useApiContext } from '../../api-context/ApiContext';
+import { useApiContext } from '../../contexts/api/ApiContext';
 
 const SetApi = () => {
     const apiContext = useApiContext();

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 { useSessionContext } from '../session-context/SessionContext';
+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

@@ -1,8 +1,11 @@
 import { Redirect } from '@reach/router';
 import { RolePickerTemplate } from '@roleypoly/design-system/templates/role-picker';
+import { ServerSetupTemplate } from '@roleypoly/design-system/templates/server-setup';
 import { PresentableGuild, RoleUpdate, UserGuildPermissions } from '@roleypoly/types';
 import * as React from 'react';
-import { useSessionContext } from '../session-context/SessionContext';
+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';
 
 type PickerProps = {
@@ -11,8 +14,12 @@ type PickerProps = {
 
 const Picker = (props: PickerProps) => {
     const { session, authedFetch, isAuthenticated } = useSessionContext();
+    const { pushRecentGuild } = useRecentGuilds();
+    const appShellProps = useAppShellProps();
 
-    const [pickerData, setPickerData] = React.useState<PresentableGuild | null>(null);
+    const [pickerData, setPickerData] = React.useState<PresentableGuild | null | false>(
+        null
+    );
     const [pending, setPending] = React.useState(false);
 
     React.useEffect(() => {
@@ -20,11 +27,20 @@ const Picker = (props: PickerProps) => {
             const response = await authedFetch(`/get-picker-data/${props.serverID}`);
             const data = await response.json();
 
+            if (response.status !== 200) {
+                setPickerData(false);
+                return;
+            }
+
             setPickerData(data);
         };
 
         fetchPickerData();
-    }, [props.serverID, authedFetch]);
+    }, [props.serverID, authedFetch, pushRecentGuild]);
+
+    React.useCallback((serverID) => pushRecentGuild(serverID), [pushRecentGuild])(
+        props.serverID
+    );
 
     if (!isAuthenticated) {
         return <Redirect to={`/auth/login?r=${props.serverID}`} replace />;
@@ -34,6 +50,25 @@ const Picker = (props: PickerProps) => {
         return <div>Loading...</div>;
     }
 
+    if (pickerData === false) {
+        if (session && session.user && session.guilds) {
+            const guildSlug = session.guilds.find((guild) => guild.id === props.serverID);
+            if (!guildSlug) {
+                throw new Error('placeholder: guild not found in user slugs, 404');
+            }
+
+            return (
+                <ServerSetupTemplate
+                    activeGuildId={props.serverID}
+                    guildSlug={guildSlug}
+                    {...appShellProps}
+                />
+            );
+        }
+
+        throw new Error('placeholder: session state is odd, 404');
+    }
+
     const onSubmit = async (submittedRoles: string[]) => {
         if (pending === true) {
             return;
@@ -62,8 +97,7 @@ const Picker = (props: PickerProps) => {
     return (
         <RolePickerTemplate
             activeGuildId={props.serverID}
-            user={session?.user}
+            {...appShellProps}
-            guilds={session?.guilds || []}
             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 { useSessionContext } from '../session-context/SessionContext';
+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;