Reach parity with last web iteration. (#162)

* feat: add Api and Session contexts

* feat(web): add machinery/new-session

* feat(web): add servers page

* chore(web): AppRouter spacing/ordering

* feat(web): add picker, missing update-roles call for now

* feat(web): add picker saves

* chore: add roleTransactions tests

* feat(web): add auth/login

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

@@ -0,0 +1,38 @@
+import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
+import { GuildSlug } from '@roleypoly/types';
+import React from 'react';
+import { useApiContext } from '../../api-context/ApiContext';
+
+const Login = () => {
+    const { apiUrl, fetch } = useApiContext();
+    // If ?r is in query, then let's render the slug page
+    // If not, redirect.
+    const [guildSlug, setGuildSlug] = React.useState<GuildSlug | null>(null);
+
+    React.useEffect(() => {
+        const url = new URL(window.location.href);
+        const redirectServerID = url.searchParams.get('r');
+        if (!redirectServerID) {
+            window.location.href = `${apiUrl}/login-bounce`;
+            return;
+        }
+
+        const fetchGuildSlug = async (id: string) => {
+            const response = await fetch(`/get-slug/${id}`);
+            if (response.status === 200) {
+                const slug = await response.json();
+                setGuildSlug(slug);
+            }
+        };
+
+        fetchGuildSlug(redirectServerID);
+    }, [apiUrl, fetch]);
+
+    if (guildSlug === null) {
+        return <div>Loading...</div>;
+    }
+
+    return <AuthLogin guildSlug={guildSlug} onSendSecretCode={() => {}} />;
+};
+
+export default Login;

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

@@ -0,0 +1,24 @@
+import { useApiContext } from '../../api-context/ApiContext';
+import { useSessionContext } from '../../session-context/SessionContext';
+
+const SessionDebug = () => {
+    const session = useSessionContext();
+    const api = useApiContext();
+
+    return (
+        <pre>
+            {JSON.stringify(
+                {
+                    apiUrl: api.apiUrl,
+                    isAuthenticated: session.isAuthenticated,
+                    user: session.session?.user || null,
+                    guilds: session.session?.guilds || null,
+                },
+                null,
+                '  '
+            )}
+        </pre>
+    );
+};
+
+export default SessionDebug;

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

@@ -0,0 +1,51 @@
+import { navigate } from '@reach/router';
+import * as React from 'react';
+import { useApiContext } from '../../api-context/ApiContext';
+
+const SetApi = () => {
+    const apiContext = useApiContext();
+    const [apiField, setApiField] = React.useState(apiContext.apiUrl);
+
+    const setApi = () => {
+        // Clear storage to get rid of old API data
+        localStorage.clear();
+        sessionStorage.clear();
+
+        apiContext.setApiUrl(apiField);
+
+        navigate('/');
+    };
+
+    const quickSettingClick = (url: string) => () => {
+        setApiField(url);
+    };
+
+    return (
+        <div>
+            <div>
+                <input
+                    type="text"
+                    value={apiField}
+                    onChange={(ev) => {
+                        setApiField(ev.target.value);
+                    }}
+                />
+                <button onClick={setApi}>Set &amp; Go</button>
+            </div>
+            <div>
+                Quick Settings:
+                <button onClick={quickSettingClick('https://api-prod.roleypoly.com')}>
+                    Production (api-prod)
+                </button>
+                <button onClick={quickSettingClick('https://api-stage.roleypoly.com')}>
+                    Staging (api-stage)
+                </button>
+                <button onClick={quickSettingClick('http://localhost:6609')}>
+                    Local (:6609)
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default SetApi;

packages/web/src/pages/landing.tsx

@@ -1,7 +1,15 @@
+import { Redirect } from '@reach/router';
 import { LandingTemplate } from '@roleypoly/design-system/templates/landing';
 import * as React from 'react';
+import { useSessionContext } from '../session-context/SessionContext';
 
 const Landing = () => {
+    const { isAuthenticated } = useSessionContext();
+
+    if (isAuthenticated) {
+        return <Redirect to="/servers" />;
+    }
+
     return <LandingTemplate />;
 };
 

packages/web/src/pages/machinery/new-session.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+const NewSession = () => {
+    React.useEffect(() => {
+        const url = new URL(window.location.href);
+        const id = url.searchParams.get('session_id');
+        if (id) {
+            window.location.href = '/';
+            localStorage.setItem('rp_session_key', id);
+        }
+    });
+
+    return <div>Redirecting you...</div>;
+};
+
+export default NewSession;

packages/web/src/pages/picker.tsx

@@ -0,0 +1,77 @@
+import { Redirect } from '@reach/router';
+import { RolePickerTemplate } from '@roleypoly/design-system/templates/role-picker';
+import { PresentableGuild, RoleUpdate, UserGuildPermissions } from '@roleypoly/types';
+import * as React from 'react';
+import { useSessionContext } from '../session-context/SessionContext';
+import { makeRoleTransactions } from '../utils/roleTransactions';
+
+type PickerProps = {
+    serverID: string;
+};
+
+const Picker = (props: PickerProps) => {
+    const { session, authedFetch, isAuthenticated } = useSessionContext();
+
+    const [pickerData, setPickerData] = React.useState<PresentableGuild | null>(null);
+    const [pending, setPending] = React.useState(false);
+
+    React.useEffect(() => {
+        const fetchPickerData = async () => {
+            const response = await authedFetch(`/get-picker-data/${props.serverID}`);
+            const data = await response.json();
+
+            setPickerData(data);
+        };
+
+        fetchPickerData();
+    }, [props.serverID, authedFetch]);
+
+    if (!isAuthenticated) {
+        return <Redirect to={`/auth/login?r=${props.serverID}`} replace />;
+    }
+
+    if (pickerData === null) {
+        return <div>Loading...</div>;
+    }
+
+    const onSubmit = async (submittedRoles: string[]) => {
+        if (pending === true) {
+            return;
+        }
+
+        setPending(true);
+        const updatePayload: RoleUpdate = {
+            knownState: pickerData.member.roles,
+            transactions: makeRoleTransactions(pickerData.member.roles, submittedRoles),
+        };
+
+        const response = await authedFetch(`/update-roles/${props.serverID}`, {
+            method: 'PATCH',
+            body: JSON.stringify(updatePayload),
+        });
+        if (response.status === 200) {
+            setPickerData({
+                ...pickerData,
+                member: { ...pickerData.member, roles: (await response.json()).roles },
+            });
+        }
+
+        setPending(false);
+    };
+
+    return (
+        <RolePickerTemplate
+            activeGuildId={props.serverID}
+            user={session?.user}
+            guilds={session?.guilds || []}
+            guild={pickerData.guild}
+            guildData={pickerData.data}
+            member={pickerData.member}
+            roles={pickerData.roles}
+            editable={pickerData.guild.permissionLevel > UserGuildPermissions.User}
+            onSubmit={onSubmit}
+        />
+    );
+};
+
+export default Picker;

packages/web/src/pages/servers.tsx

@@ -0,0 +1,15 @@
+import { Redirect } from '@reach/router';
+import { ServersTemplate } from '@roleypoly/design-system/templates/servers';
+import * as React from 'react';
+import { useSessionContext } from '../session-context/SessionContext';
+
+const ServersPage = () => {
+    const { isAuthenticated, session } = useSessionContext();
+    if (!isAuthenticated || !session) {
+        return <Redirect to="/" />;
+    }
+
+    return <ServersTemplate guilds={session.guilds || []} user={session.user} />;
+};
+
+export default ServersPage;