Request user details on Welcome page load

Previously the page would require state params to be passed from the landing page, otherwise it would redirect back to it. The OAuth flow now returns the user to the Welcome screen after login, so it should make its own request for user info.

web/src/pages/landing/Landing.test.tsx

@@ -74,9 +74,7 @@ test("button click requests user data", async () => {
     expect(getSpy).toHaveBeenCalledWith(serverMeEndpoint, {
       withCredentials: true,
     });
-    expect(history.replace).toHaveBeenCalledWith("/welcome", {
-      user: testUser,
-    });
+    expect(history.replace).toHaveBeenCalledWith("/welcome");
   });
 });
 

web/src/pages/landing/Landing.tsx

@@ -20,7 +20,7 @@ function Landing() {
         if (result.error) {
           return Promise.reject(result.error);
         }
-        history.replace("/welcome", { user: result.data });
+        history.replace("/welcome");
       })
       .catch((e: AxiosError) => {
         if (e.response?.status === 401) {

web/src/pages/welcome/Welcome.test.tsx

@@ -1,26 +1,74 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { createMemoryHistory } from "history";
+import { setLogger } from "react-query";
 import { Router } from "react-router-dom";
+import { setupServer } from "msw/node";
+import { ResponseComposition, rest, RestContext, RestRequest } from "msw";
+import { createMemoryHistory } from "history";
 
 import Welcome from "./Welcome";
 import TestWrapper from "../../testing/test-wrapper";
+import { User } from "../../data/user";
+
+const testUser: User = { organizationUuid: "foo", displayName: "bar" };
+const serverMeEndpoint = "https://localhost:8001/v1/me";
+
+const server = setupServer();
+
+beforeAll(() => {
+  server.listen();
+  setLogger({
+    log: () => {},
+    warn: () => {},
+    error: () => {},
+  });
+});
+
+afterEach(() => server.resetHandlers());
+
+afterAll(() => {
+  server.close();
+});
 
-test("redirects when user is missing", () => {
+test("redirects when user request errors", async () => {
   const history = createMemoryHistory();
+  history.replace = jest.fn();
+
+  Object.defineProperty(window, "location", {
+    writable: true,
+    value: { assign: jest.fn() },
+  });
+
+  server.use(
+    rest.get(
+      serverMeEndpoint,
+      (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
+        return res(ctx.status(500), ctx.json("error"));
+      }
+    )
+  );
+
   render(
     <Router history={history}>
       <Welcome />
     </Router>,
     { wrapper: TestWrapper }
   );
-  expect(history.location.pathname).toBe("/");
+
+  await waitFor(() => {
+    expect(history.replace).toHaveBeenCalledWith("/");
+  });
 });
 
-test("renders user passed by state", async () => {
+test("renders user from request", async () => {
   const history = createMemoryHistory();
-  history.location.state = {
-    user: { organizationUuid: "foo", displayName: "bar" },
-  };
+
+  server.use(
+    rest.get(
+      serverMeEndpoint,
+      (req: RestRequest, res: ResponseComposition, ctx: RestContext) =>
+        res(ctx.json(testUser))
+    )
+  );
 
   render(
     <Router history={history}>

web/src/pages/welcome/Welcome.tsx

@@ -1,31 +1,41 @@
-import { Box, Heading, Text, VStack } from "@chakra-ui/react";
+import { Box, Heading, Spinner, Text, VStack } from "@chakra-ui/react";
+import { AxiosError } from "axios";
 import { useHistory } from "react-router-dom";
 
 import "./Welcome.css";
+import { useUser } from "../../hooks/use-user";
+import { QueryObserverResult } from "react-query";
 import { User } from "../../data/user";
 
 function Welcome() {
   const history = useHistory();
-  const state = history.location.state as WelcomeState;
+  const user = useUser();
 
-  if (!state?.user) {
-    history.replace("/");
-    return <></>;
+  if (!user.data) {
+    user.refetch().then((result: QueryObserverResult<User, AxiosError>) => {
+      if (result.error) {
+        history.replace("/");
+      }
+    });
+  }
+
+  if (user.isLoading || !user.data) {
+    return (
+      <VStack spacing="24px">
+        <Spinner data-testid="spinner" marginTop={"50px"} />
+      </VStack>
+    );
   }
 
   return (
     <VStack spacing="24px">
       <Heading>Welcome</Heading>
       <Box alignContent="left" width="50%">
-        <Text>Org id: {state.user.organizationUuid}</Text>
-        <Text>Display name: {state.user.displayName}</Text>
+        <Text>Org id: {user.data.organizationUuid}</Text>
+        <Text>Display name: {user.data.displayName}</Text>
       </Box>
     </VStack>
   );
 }
 
-interface WelcomeState {
-  user: User;
-}
-
 export default Welcome;