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/contexts/api/ApiContext.spec.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { ApiContextProvider, useApiContext } from './ApiContext';
+
+const fetchMock = (global.fetch = jest
+    .fn()
+    .mockImplementation(() => ({ json: async () => ({}) })));
+
+const TestComponent = () => {
+    const context = useApiContext();
+
+    React.useEffect(() => {
+        void context.fetch('/not-a-route');
+    });
+
+    return <>{context.apiUrl}</>;
+};
+
+const WrappedTestComponent = () => (
+    <ApiContextProvider>
+        <TestComponent />
+    </ApiContextProvider>
+);
+
+it('correctly does fetch url requests', () => {
+    render(<WrappedTestComponent />);
+
+    expect(fetchMock).toBeCalledWith('http://localhost:6609/not-a-route');
+});
+
+it('sets up api context when localStorage is set', () => {
+    localStorage.setItem('api_url', 'https://abcde.roleypoly.test');
+    render(<WrappedTestComponent />);
+
+    expect(fetchMock).toBeCalledWith('https://abcde.roleypoly.test/not-a-route');
+    expect(screen.getByText('https://abcde.roleypoly.test').innerHTML).toStrictEqual(
+        'https://abcde.roleypoly.test'
+    );
+});
+
+it.each([
+    ['https://next.roleypoly.com/servers', 'https://api-prod.roleypoly.com'],
+    ['https://roleypoly.com/servers', 'https://api-prod.roleypoly.com'],
+    ['https://notroleypolybutclose.com/servers', 'https://api-prod.roleypoly.com'],
+    ['https://myhash.roleypoly.pages.dev/servers', 'https://api-stage.roleypoly.com'],
+    ['http://localhost:6601/servers', 'http://localhost:6609'],
+    ['http://127.0.0.1:6601/servers', 'http://localhost:6609'],
+])('sets up api context based on window.location.href = %s', (inputUrl, outputUrl) => {
+    // @ts-ignore
+    delete window.location;
+    window.location = new URL(inputUrl) as any;
+
+    render(<WrappedTestComponent />);
+
+    expect(fetchMock).toBeCalledWith(`${outputUrl}/not-a-route`);
+    expect(screen.getByText(outputUrl).innerHTML).toStrictEqual(outputUrl);
+});
+
+const originalWindowLocation = window.location;
+
+afterEach(() => {
+    localStorage.clear();
+    fetchMock.mockClear();
+    window.location = originalWindowLocation;
+});

packages/web/src/contexts/api/ApiContext.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { getDefaultApiUrl } from './getDefaultApiUrl';
+
+type ApiContextData = {
+    apiUrl: string;
+    setApiUrl: (url: string) => void;
+    fetch: (path: string, ...rest: any) => Promise<Response>;
+};
+
+export const ApiContext = React.createContext<ApiContextData>({
+    apiUrl: getDefaultApiUrl(window.location.hostname),
+    setApiUrl: () => {},
+    fetch: async () => {
+        return new Response();
+    },
+});
+
+export const useApiContext = () => React.useContext(ApiContext);
+
+export const ApiContextProvider = (props: { children: React.ReactNode }) => {
+    const [apiUrl, setApiUrl] = React.useState(
+        getDefaultApiUrl(window.location.hostname)
+    );
+
+    const apiContextData: ApiContextData = {
+        apiUrl,
+        setApiUrl,
+        fetch: async (path: string, ...rest: any): Promise<Response> => {
+            return fetch(`${apiUrl}${path}`, ...rest);
+        },
+    };
+
+    React.useEffect(() => {
+        const storedApiUrl = localStorage.getItem('api_url');
+        if (storedApiUrl) {
+            setApiUrl(storedApiUrl);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        localStorage.setItem('api_url', apiUrl);
+    }, [apiUrl]);
+
+    return (
+        <ApiContext.Provider value={apiContextData}>{props.children}</ApiContext.Provider>
+    );
+};

packages/web/src/contexts/api/getDefaultApiUrl.spec.ts

@@ -0,0 +1,15 @@
+import { getDefaultApiUrl } from './getDefaultApiUrl';
+
+it.each([
+    ['https://next.roleypoly.com/servers', 'https://api-prod.roleypoly.com'],
+    ['https://stage.roleypoly.com/servers', 'https://api-stage.roleypoly.com'],
+    ['https://roleypoly.com/servers', 'https://api-prod.roleypoly.com'],
+    ['https://notroleypolybutclose.com/servers', 'https://api-prod.roleypoly.com'],
+    ['https://myhash.roleypoly.pages.dev/servers', 'https://api-stage.roleypoly.com'],
+    ['http://localhost:6601/servers', 'http://localhost:6609'],
+    ['http://127.0.0.1:6601/servers', 'http://localhost:6609'],
+])('matches %s to %s', (inputUrl, outputUrl) => {
+    const urlHostname = new URL(inputUrl).hostname;
+
+    expect(getDefaultApiUrl(urlHostname)).toStrictEqual(outputUrl);
+});

packages/web/src/contexts/api/getDefaultApiUrl.ts

@@ -0,0 +1,16 @@
+import * as memoizeOne from 'memoize-one';
+
+export const getDefaultApiUrl = memoizeOne.default((host: string) => {
+    if (/^roleypoly\.com$/.test(host)) {
+        return 'https://api-prod.roleypoly.com';
+    } else if (
+        /roleypoly\.pages\.dev$/.test(host) ||
+        /^stage\.roleypoly\.com$/.test(host)
+    ) {
+        return 'https://api-stage.roleypoly.com';
+    } else if (/\blocalhost|127\.0\.0\.1\b/.test(host)) {
+        return 'http://localhost:6609';
+    } else {
+        return 'https://api-prod.roleypoly.com';
+    }
+});