Adds user service to get people's names and things

src/components/AuthenticatedApp-snapshot.test.jsx

@@ -4,9 +4,10 @@ import AuthenticatedApp from "./AuthenticatedApp";
 import { AuthContext } from "../context/AuthContext";
 
 test("AuthenticatedApp Snapshot", () => {
-
 	const appRender = renderer.create(
-		<AuthContext.Provider value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn() }}>
+		<AuthContext.Provider
+			value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn(), user: {display_name: "Ted"} }}
+		>
 			<AuthenticatedApp />
 		</AuthContext.Provider>
 	);

src/components/AuthenticatedApp.jsx

@@ -2,11 +2,11 @@ import React from "react";
 import { useAuth } from "../context/AuthContext";
 
 function AuthenticatedApp() {
-	const { logout } = useAuth();
+	const { logout, user } = useAuth();
 
 	return (
 		<div>
-			<p>Howdy partner.</p>
+			<p>Howdy partner. Your name looks like it&apos;s { user.display_name }.</p>
 			<button type="button" onClick={logout}>
 				Logout
 			</button>

src/components/UnauthenticatedApp-snapshot.test.jsx

@@ -4,9 +4,10 @@ import UnauthenticatedApp from "./UnauthenticatedApp";
 import { AuthContext } from "../context/AuthContext";
 
 test("UnauthenticatedApp Snapshot", () => {
-
 	const appRender = renderer.create(
-		<AuthContext.Provider value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn() }}>
+		<AuthContext.Provider
+			value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn() }}
+		>
 			<UnauthenticatedApp />
 		</AuthContext.Provider>
 	);

src/components/__snapshots__/AuthenticatedApp-snapshot.test.jsx.snap

@@ -3,7 +3,9 @@
 exports[`AuthenticatedApp Snapshot 1`] = `
 <div>
   <p>
-    Howdy partner.
+    Howdy partner. Your name looks like it's 
+    Ted
+    .
   </p>
   <button
     onClick={[MockFunction]}

src/context/AuthContext.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { register, login } from "../services/auth-service";
+import { getUserInfo } from "../services/user-service";
 
 const localStorageKey = "__auth_token__";
 const AuthContext = React.createContext();
@@ -8,11 +9,13 @@ const AuthProvider = (props) => {
 	const [user, setUser] = useState(null);
 
 	const setUserWithToken = (token) => {
-		if (user !== null && user.token === token) {
+		if (user !== null) {
 			// Already set don't re-set.
 			return;
 		}
-		setUser({ token: token });
+		getUserInfo(token).then((user) => {
+			setUser(user);
+		});
 	};
 
 	const tok = window.localStorage.getItem(localStorageKey);

src/services/user-service.js

@@ -0,0 +1,18 @@
+import { API_ROOT } from "./config";
+
+export const getUserInfo = (token) => {
+	const url = API_ROOT + "me";
+
+	return fetch(url, {
+		method: "GET",
+		headers: {
+			Authorization: "Bearer " + token,
+			Accept: "application/json",
+		},
+	}).then((response) => {
+		if (!response.ok) {
+			throw Error(response.statusText);
+		}
+		return response.json();
+	});
+};