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