Add UserContext

mojo9492 · gorhack · commit 0f41431ab126 · 2021-06-08T14:19:20.000-07:00
Fix EventDetails formatting
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -10,28 +10,31 @@ import { PrimaryNavigation } from "./Navigation/PrimaryNavigation";
 import { Footer } from "./Navigation/Footer";
 import { About } from "./About";
 import { UserSettings } from "./Users/UserSettings";
+import { UserContextProvider } from "./Users/UserContext";
 
 const App: React.FC = () => {
     return (
         <StompSocketProvider>
-            <BrowserRouter>
-                <div className="App">
-                    <div className="App-Container">
-                        <PrimaryNavigation />
-                        <main className="App-Content">
-                            <Switch>
-                                <Route path="/createEvent" component={CreateEvent} />
-                                <Route path="/editEvent/:eventId" component={CreateEvent} />
-                                <Route path="/event/:eventId" component={EventPage} />
-                                <Route path="/about" component={About} />
-                                <Route path="/settings" component={UserSettings} />
-                                <Route path="/" component={Home} />
-                            </Switch>
-                        </main>
-                        <Footer />
+            <UserContextProvider>
+                <BrowserRouter>
+                    <div className="App">
+                        <div className="App-Container">
+                            <PrimaryNavigation />
+                            <main className="App-Content">
+                                <Switch>
+                                    <Route path="/createEvent" component={CreateEvent} />
+                                    <Route path="/editEvent/:eventId" component={CreateEvent} />
+                                    <Route path="/event/:eventId" component={EventPage} />
+                                    <Route path="/about" component={About} />
+                                    <Route path="/settings" component={UserSettings} />
+                                    <Route path="/" component={Home} />
+                                </Switch>
+                            </main>
+                            <Footer />
+                        </div>
                     </div>
-                </div>
-            </BrowserRouter>
+                </BrowserRouter>
+            </UserContextProvider>
         </StompSocketProvider>
     );
 };
diff --git a/client/src/Home.tsx b/client/src/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { EventsSection } from "./Event/EventsSection";
 import { useStompSocketContext } from "./StompSocketContext";
@@ -7,29 +7,28 @@ import { IMessage } from "@stomp/stompjs";
 import { SocketSubscriptionTopics, TsrEvent } from "./Event/EventApi";
 import { PrimaryButton } from "./Buttons/Buttons";
 import "./Home.css";
-import { emptyTsrUser, getUserInfo, TsrUser } from "./Users/UserApi";
+import UserContext from "./Users/UserContext";
 
 export const Home: React.FC = () => {
     const { socketService } = useStompSocketContext();
-    const [tsrUser, setTsrUser] = useState<TsrUser>(emptyTsrUser);
+    const tsrUser = useContext(UserContext);
     const history = useHistory();
 
     useEffect(() => {
-        (async () => {
-            await getUserInfo()
-                .then((result) => {
-                    setTsrUser(result);
-                })
-                .catch((error) => {
-                    console.error(`unable to get current user ${error.message}`);
-                });
-        })();
-    }, [setTsrUser]);
+        if (tsrUser === undefined) {
+            return;
+        }
+    }, [tsrUser]);
 
     useEffect(() => {
+        if (tsrUser === undefined) {
+            return;
+        }
+
         if (socketService.status !== SocketStatus.CONNECTED || tsrUser.userId.length === 0) {
             return;
         }
+
         tsrUser.settings.organizations.forEach((org) => {
             socketService.subscribe({
                 topic: `${SocketSubscriptionTopics.EVENT_CREATED}${org.organizationId}`,
@@ -59,6 +58,10 @@ export const Home: React.FC = () => {
         };
     }, [socketService, tsrUser]);
 
+    if (tsrUser === undefined) {
+        return <></>;
+    }
+
     return (
         <>
             <div className="Home-Header flex-row-wrap">
diff --git a/client/src/Navigation/PrimaryNavigation.tsx b/client/src/Navigation/PrimaryNavigation.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement, ReactFragment, useEffect, useState } from "react";
-import { emptyTsrUser, getUserInfo, TsrUser } from "../Users/UserApi";
+import React, { ReactElement, ReactFragment, useContext, useEffect } from "react";
 import "./PrimaryNavigation.css";
 import { DrawerMenu } from "./DrawerMenu";
 import TrackedName from "../Icons/TrackedName.svg";
+import UserContext from "../Users/UserContext";
 
 interface PrimaryNavigationProps {
     children?: ReactFragment;
@@ -11,19 +11,17 @@ interface PrimaryNavigationProps {
 export const PrimaryNavigation: React.FC<PrimaryNavigationProps> = ({
     children,
 }: PrimaryNavigationProps): ReactElement => {
-    const [tsrUser, setTsrUser] = useState<TsrUser>(emptyTsrUser);
+    const tsrUser = useContext(UserContext);
 
     useEffect(() => {
-        (async () => {
-            await getUserInfo()
-                .then((result) => {
-                    setTsrUser(result);
-                })
-                .catch((error) => {
-                    console.error(`unable to get user info ${error.message}`);
-                });
-        })();
-    }, [setTsrUser]);
+        if (tsrUser === undefined) {
+            return;
+        }
+    }, [tsrUser]);
+
+    if (tsrUser === undefined) {
+        return <></>;
+    }
 
     return (
         <nav className="PrimaryNavigation">
diff --git a/client/src/Users/UserApi.ts b/client/src/Users/UserApi.ts
@@ -32,7 +32,6 @@ export interface TsrUserSettings {
 }
 
 export type UserRole = "ADMIN" | "USER";
-
 export interface TsrUser {
     userId: string;
     username: string;
diff --git a/client/src/Users/UserContext.tsx b/client/src/Users/UserContext.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+import { getUserInfo, TsrUser } from "./UserApi";
+
+const UserContext = React.createContext<TsrUser | undefined>(undefined);
+
+export const UserContextProvider: React.FC = (props) => {
+    const [user, setUser] = useState<TsrUser | undefined>(undefined);
+
+    useEffect(() => {
+        (async () => {
+            await getUserInfo()
+                .then((result) => {
+                    setUser(result);
+                })
+                .catch((error) => {
+                    console.error(`unable to get current user ${error.message}`);
+                });
+        })();
+    }, [setUser]);
+
+    return <UserContext.Provider value={user}>{props.children}</UserContext.Provider>;
+};
+
+export default UserContext;
diff --git a/client/src/Users/UserSettings.tsx b/client/src/Users/UserSettings.tsx
@@ -1,5 +1,12 @@
-import React, { ReactElement, useCallback, useEffect, useReducer, useState } from "react";
-import { emptyTsrUser, getUserInfo, setUserSettings, TsrUser, TsrUserSettings } from "./UserApi";
+import React, {
+    ReactElement,
+    useCallback,
+    useContext,
+    useEffect,
+    useReducer,
+    useState,
+} from "react";
+import { setUserSettings, TsrUserSettings } from "./UserApi";
 import { Option } from "../api";
 import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
 import {
@@ -14,6 +21,7 @@ import "./UserSettings.css";
 import { LabeledInput } from "../Inputs/LabeledInput";
 import sortedUniqBy from "lodash/sortedUniqBy";
 import { useHistory } from "react-router-dom";
+import UserContext from "./UserContext";
 
 interface FormData extends FieldValues {
     email: string;
@@ -23,6 +31,7 @@ interface FormData extends FieldValues {
 
 export const UserSettings: React.FC = (): ReactElement => {
     const history = useHistory();
+    const tsrUser = useContext(UserContext);
 
     const orgCacheReducer = (state: Organization[], action: OrgCacheReducerAction) => {
         if (action.type === OrganizationActionTypes.LOAD) {
@@ -36,7 +45,6 @@ export const UserSettings: React.FC = (): ReactElement => {
     };
     const [organizationsCache, organizationCacheDispatch] = useReducer(orgCacheReducer, []);
 
-    const [user, setUser] = useState<TsrUser>(emptyTsrUser);
     const [orgValues, setOrgValues] = useState<Option[]>([]);
     const {
         control,
@@ -70,21 +78,19 @@ export const UserSettings: React.FC = (): ReactElement => {
     );
 
     useEffect((): void => {
-        (async () => {
-            await getUserInfo()
-                .then((result) => {
-                    setUser(result);
-                    organizationCacheDispatch({
-                        type: OrganizationActionTypes.LOAD,
-                        organizations: result.settings.organizations,
-                    });
-                    setFormValues(result.settings);
-                })
-                .catch((error) => {
-                    console.error(`unable to get current user ${error.message}`);
-                });
-        })();
-    }, [setUser, setFormValues]);
+        if (tsrUser === undefined) {
+            return;
+        }
+        organizationCacheDispatch({
+            type: OrganizationActionTypes.LOAD,
+            organizations: tsrUser.settings.organizations,
+        });
+        setFormValues(tsrUser.settings);
+    }, [tsrUser, setFormValues]);
+
+    if (tsrUser === undefined) {
+        return <></>;
+    }
 
     const onSubmit: SubmitHandler<FormData> = async (data): Promise<void> => {
         const { phone, email } = data;
@@ -116,13 +122,13 @@ export const UserSettings: React.FC = (): ReactElement => {
     };
     const onCancel = (e: React.MouseEvent<HTMLButtonElement>): void => {
         e.preventDefault();
-        setFormValues(user.settings);
+        setFormValues(tsrUser.settings);
     };
 
     return (
         <>
             <LinkButton onClick={() => history.push("/")}>{"< back to events"}</LinkButton>
-            <h1 className="UserSettings-Header">{`${user.username} settings`}</h1>
+            <h1 className="UserSettings-Header">{`${tsrUser.username} settings`}</h1>
             <div className="UserSettings-Content">
                 <form
                     className="Form-Content"
diff --git a/client/src/__tests__/Home.test.tsx b/client/src/__tests__/Home.test.tsx
@@ -18,6 +18,7 @@ import { TsrUser } from "../Users/UserApi";
 import { PageDTO } from "../api";
 import { StompSocketProvider } from "../StompSocketContext";
 import { SocketService } from "../SocketService";
+import { UserContextProvider } from "../Users/UserContext";
 
 describe("home page of the application", () => {
     let mockGetActiveEventsByUserId: typeof EventApi.getActiveEventsByUserId;
@@ -152,11 +153,13 @@ describe("home page of the application", () => {
 
         const result = render(
             <StompSocketProvider {...socketProps}>
-                <Router history={history}>
-                    <Route path="/">
-                        <Home />
-                    </Route>
-                </Router>
+                <UserContextProvider>
+                    <Router history={history}>
+                        <Route path="/">
+                            <Home />
+                        </Route>
+                    </Router>
+                </UserContextProvider>
             </StompSocketProvider>,
         );
         await act(async () => {
diff --git a/client/src/__tests__/Navigation/DrawerMenu.test.tsx b/client/src/__tests__/Navigation/DrawerMenu.test.tsx
@@ -5,6 +5,7 @@ import { DrawerMenu } from "../../Navigation/DrawerMenu";
 import { findByAriaLabel } from "../TestHelpers";
 import { createMemoryHistory, MemoryHistory } from "history";
 import { Router } from "react-router";
+import { UserContextProvider } from "../../Users/UserContext";
 
 describe("Drawer menu", () => {
     const CLOSE_MENU_BUTTON_NAME = "open menu";
@@ -79,9 +80,11 @@ describe("Drawer menu", () => {
         history.push("/somewhere");
 
         return render(
-            <Router history={history}>
-                <DrawerMenu />
-            </Router>,
+            <UserContextProvider>
+                <Router history={history}>
+                    <DrawerMenu />
+                </Router>
+            </UserContextProvider>,
         );
     };
 });
diff --git a/client/src/__tests__/Navigation/PrimaryNavigation.test.tsx b/client/src/__tests__/Navigation/PrimaryNavigation.test.tsx
@@ -4,6 +4,7 @@ import * as UserApi from "../../Users/UserApi";
 import { act, render, RenderResult, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import { PrimaryNavigation } from "../../Navigation/PrimaryNavigation";
+import { UserContextProvider } from "../../Users/UserContext";
 
 describe("Primary nav", () => {
     let mockGetUserInfo: typeof UserApi.getUserInfo;
@@ -29,7 +30,9 @@ describe("Primary nav", () => {
     const renderPrimaryNavigation = async (): Promise<RenderResult> => {
         return render(
             <MemoryRouter>
-                <PrimaryNavigation />
+                <UserContextProvider>
+                    <PrimaryNavigation />
+                </UserContextProvider>
             </MemoryRouter>,
         );
     };
diff --git a/client/src/__tests__/Users/UserSettings.test.tsx b/client/src/__tests__/Users/UserSettings.test.tsx
@@ -19,6 +19,7 @@ import selectEvent from "react-select-event";
 import { fireEvent } from "@testing-library/dom";
 import { createMemoryHistory, MemoryHistory } from "history";
 import { Route, Router } from "react-router";
+import { UserContextProvider } from "../../Users/UserContext";
 
 const EMAIL_ADDRESS = "test@example.com";
 const PHONE_NUMBER_LABEL = "phone number";
@@ -273,11 +274,13 @@ describe("User settings", () => {
         td.when(mockGetUserInfo()).thenDo(() => Promise.resolve(userPromise));
         td.when(mockGetOrganizationContains("")).thenDo(() => Promise.resolve(organizationPromise));
         const result = render(
-            <Router history={history}>
-                <Route path={"/settings"}>
-                    <UserSettings />
-                </Route>
-            </Router>,
+            <UserContextProvider>
+                <Router history={history}>
+                    <Route path={"/settings"}>
+                        <UserSettings />
+                    </Route>
+                </Router>
+            </UserContextProvider>,
         );
 
         await act(async () => {

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,6 @@ export interface TsrUserSettings {`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`export type UserRole = "ADMIN" \| "USER";`
`35`		`-`
`36`	`35`	`export interface TsrUser {`
`37`	`36`	`userId: string;`
`38`	`37`	`username: string;`