Resourcer feature

client/src/App.tsx

@@ -11,6 +11,7 @@ import { Footer } from "./Navigation/Footer";
 import { About } from "./About";
 import { UserSettings } from "./Users/UserSettings";
 import { UserContextProvider } from "./Users/UserContext";
+import OrganizationSettings from "./Organization/OrganizationSettings";
 
 const App: React.FC = () => {
     return (
@@ -26,6 +27,10 @@ const App: React.FC = () => {
                                     <Route path="/editEvent/:eventId" component={CreateEvent} />
                                     <Route path="/event/:eventId" component={EventPage} />
                                     <Route path="/about" component={About} />
+                                    <Route
+                                        path="/organization/:organizationId"
+                                        component={OrganizationSettings}
+                                    />
                                     <Route path="/settings" component={UserSettings} />
                                     <Route path="/" component={Home} />
                                 </Switch>

client/src/Navigation/DrawerMenu.tsx

@@ -1,12 +1,14 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useContext, useState } from "react";
 import { DrawerIcon } from "../Icons/DrawerIcon";
 import "./DrawerMenu.css";
 import { LinkButton } from "../Buttons/Buttons";
 import { DrawerCloseIcon } from "./DrawerCloseIcon";
 import { NavLink } from "react-router-dom";
 import LogoBold from "../Icons/TrackedIconBold.svg";
+import UserContext from "../Users/UserContext";
 
 export const DrawerMenu: React.FC = (): ReactElement => {
+    const tsrUser = useContext(UserContext);
     const [drawerOpen, setDrawerOpen] = useState<true | false>(false);
     const openDrawer = () => setDrawerOpen(true);
     const closeDrawer = () => setDrawerOpen(false);
@@ -43,6 +45,26 @@ export const DrawerMenu: React.FC = (): ReactElement => {
                                 <DrawerCloseIcon className={"DrawerMenu-CloseIcon"} />
                             </LinkButton>
                         </div>
+                        {tsrUser ? (
+                            <>
+                                <div className="DrawerMenu-section">
+                                    <p aria-label={"organizations section"}>Organizations</p>
+                                    {tsrUser.settings.organizations.map((org) => {
+                                        return (
+                                            <NavLink
+                                                key={`${tsrUser.username}-${org.organizationDisplayName}`}
+                                                to={`organization/${org.organizationId}`}
+                                            >
+                                                {org.organizationDisplayName}
+                                            </NavLink>
+                                        );
+                                    })}
+                                </div>
+                            </>
+                        ) : (
+                            <></>
+                        )}
+
                         <div className="DrawerMenu-section">
                             <p aria-label="settings section">Settings</p>
                             <NavLink

client/src/Organization/OrganizationSettings.tsx

@@ -0,0 +1,40 @@
+import React, { useContext, useEffect } from "react";
+import UserContext from "../Users/UserContext";
+
+const OrganizationSettings: React.FC = () => {
+    const tsrUser = useContext(UserContext);
+    const url = window.location.href;
+    const orgPath = url.length - 1;
+    const orgId = url[orgPath];
+
+    useEffect(() => {
+        if (tsrUser === undefined) {
+            return;
+        }
+    }, [tsrUser]);
+
+    if (tsrUser === undefined) {
+        return <></>;
+    }
+
+    if (tsrUser.settings.organizations === undefined) {
+        console.log("no orgs");
+    }
+
+    return (
+        <div className="Event-Details-Container">
+            <h1 className="UserSettings-Header">{`${tsrUser.username} organization: ${orgId} settings`}</h1>
+            <div className="space-3" />
+            <form>
+                <h2>Role</h2>
+                <select defaultValue={undefined}>
+                    <option>---</option>
+                    <option value={`${tsrUser.userId}:${url}`}>Resourcer</option>
+                </select>
+                <div className="space-3" />
+            </form>
+        </div>
+    );
+};
+
+export default OrganizationSettings;

client/src/Users/UserApi.ts

@@ -40,6 +40,7 @@ export interface TsrUser {
 }
 
 export const emptyTsrUser: TsrUser = {
+    // TODO shouldn't need
     userId: "",
     username: "",
     role: "USER",