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

packages/web/src/pages/picker.tsx

@@ -1,5 +1,6 @@
 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';
@@ -12,7 +13,9 @@ type PickerProps = {
 const Picker = (props: PickerProps) => {
     const { session, authedFetch, isAuthenticated } = useSessionContext();
 
-    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,6 +23,11 @@ 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);
         };
 
@@ -34,6 +42,26 @@ 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}
+                    user={session.user}
+                    guilds={session.guilds || []}
+                    guildSlug={guildSlug}
+                />
+            );
+        }
+
+        throw new Error('placeholder: session state is odd, 404');
+    }
+
     const onSubmit = async (submittedRoles: string[]) => {
         if (pending === true) {
             return;