From 1824ae4d2d4701850a1e60b8a470adb833d8ed0a Mon Sep 17 00:00:00 2001
From: mojo9492 <mojo9492@outlook.com>
Date: Thu, 3 Jun 2021 16:07:15 -0700
Subject: [PATCH 1/3] Add UserContext

---
 client/src/Event/EventDetails.tsx    | 144 ++++++++++++++-------------
 client/src/Navigation/DrawerMenu.tsx |  24 ++++-
 client/src/Users/UserApi.ts          |   1 +
 3 files changed, 97 insertions(+), 72 deletions(-)

diff --git a/client/src/Event/EventDetails.tsx b/client/src/Event/EventDetails.tsx
index ba35f98d..8957f6e7 100644
--- a/client/src/Event/EventDetails.tsx
+++ b/client/src/Event/EventDetails.tsx
@@ -12,80 +12,82 @@ interface EventDetailsProps {
     tsrEvent: TsrEvent;
 }
 
-export const EventDetails = React.memo(({ tsrEvent }: EventDetailsProps): ReactElement => {
-    const startEndDate = (startDate: Moment, endDate: Moment): ReactElement => {
-        if (startDate.isSame(endDate)) {
-            return <DetailRow label="Date" description={longDateFormat(startDate)} />;
-        } else {
-            return (
-                <>
-                    <DetailRow label="Start Date" description={longDateFormat(startDate)} />
-                    <DetailRow label="End Date" description={longDateFormat(endDate)} />
-                </>
-            );
-        }
-    };
+export const EventDetails = React.memo(
+    ({ tsrEvent }: EventDetailsProps): ReactElement => {
+        const startEndDate = (startDate: Moment, endDate: Moment): ReactElement => {
+            if (startDate.isSame(endDate)) {
+                return <DetailRow label="Date" description={longDateFormat(startDate)} />;
+            } else {
+                return (
+                    <>
+                        <DetailRow label="Start Date" description={longDateFormat(startDate)} />
+                        <DetailRow label="End Date" description={longDateFormat(endDate)} />
+                    </>
+                );
+            }
+        };
 
-    const longDateFormat = (date: Moment): string =>
-        `${date.local().format(LONG_DATE_TIME_FORMAT)} (${userTimeZone()})`;
+        const longDateFormat = (date: Moment): string =>
+            `${date.local().format(LONG_DATE_TIME_FORMAT)} (${userTimeZone()})`;
 
-    const dateLastModifiedFormat = (dateLastModified: Moment): string => {
-        const diffMoment = moment.duration(currentTimeUtc().diff(dateLastModified));
-        let numOfTime = 0;
-        let unitOfTime = "";
-        if (diffMoment.days() >= 7) {
-            return dateLastModified.format(SHORT_DATE_FORMAT);
-        } else if (diffMoment.days() > 0) {
-            numOfTime = diffMoment.days();
-            unitOfTime = "day";
-        } else if (diffMoment.hours() > 0) {
-            numOfTime = diffMoment.hours();
-            unitOfTime = "hour";
-        } else if (diffMoment.minutes() > 5) {
-            numOfTime = diffMoment.minutes();
-            unitOfTime = "minute";
-        } else {
-            return "just now...";
-        }
-        if (numOfTime > 1) {
-            unitOfTime = `${unitOfTime}s`;
-        }
-        return `${numOfTime} ${unitOfTime} ago`;
-    };
+        const dateLastModifiedFormat = (dateLastModified: Moment): string => {
+            const diffMoment = moment.duration(currentTimeUtc().diff(dateLastModified));
+            let numOfTime = 0;
+            let unitOfTime = "";
+            if (diffMoment.days() >= 7) {
+                return dateLastModified.format(SHORT_DATE_FORMAT);
+            } else if (diffMoment.days() > 0) {
+                numOfTime = diffMoment.days();
+                unitOfTime = "day";
+            } else if (diffMoment.hours() > 0) {
+                numOfTime = diffMoment.hours();
+                unitOfTime = "hour";
+            } else if (diffMoment.minutes() > 5) {
+                numOfTime = diffMoment.minutes();
+                unitOfTime = "minute";
+            } else {
+                return "just now...";
+            }
+            if (numOfTime > 1) {
+                unitOfTime = `${unitOfTime}s`;
+            }
+            return `${numOfTime} ${unitOfTime} ago`;
+        };
 
-    const mapOrganizations = () => {
-        const orgArray = tsrEvent.organizations.map((org) => org.organizationDisplayName);
-        return orgArray.join("; ");
-    };
+        const mapOrganizations = () => {
+            const orgArray = tsrEvent.organizations.map((org) => org.organizationDisplayName);
+            return orgArray.join("; ");
+        };
 
-    return (
-        <>
-            <DetailRow
-                label="Event Type"
-                description={
-                    tsrEvent.eventType
-                        ? tsrEvent.eventType.displayName.charAt(0).toUpperCase() +
-                          tsrEvent.eventType.displayName.slice(1)
-                        : "No Event Type"
-                }
-            />
-            {startEndDate(moment.utc(tsrEvent.startDate), moment.utc(tsrEvent.endDate))}
-            <DetailRow label="Organization" description={mapOrganizations()} />
-            <DetailRow
-                label="Event Created By"
-                description={`${tsrEvent.audit.createdByDisplayName}, (${moment
-                    .utc(tsrEvent.audit.createdDate)
-                    .local()
-                    .format(SHORT_DATE_FORMAT)})`}
-            />
-            <DetailRow
-                label="Last Modified By"
-                description={`${tsrEvent.audit.lastModifiedByDisplayName}, ${dateLastModifiedFormat(
-                    moment(tsrEvent.audit.lastModifiedDate),
-                )}`}
-            />
-        </>
-    );
-});
+        return (
+            <>
+                <DetailRow
+                    label="Event Type"
+                    description={
+                        tsrEvent.eventType
+                            ? tsrEvent.eventType.displayName.charAt(0).toUpperCase() +
+                              tsrEvent.eventType.displayName.slice(1)
+                            : "No Event Type"
+                    }
+                />
+                {startEndDate(moment.utc(tsrEvent.startDate), moment.utc(tsrEvent.endDate))}
+                <DetailRow label="Organization" description={mapOrganizations()} />
+                <DetailRow
+                    label="Event Created By"
+                    description={`${tsrEvent.audit.createdByDisplayName}, (${moment
+                        .utc(tsrEvent.audit.createdDate)
+                        .local()
+                        .format(SHORT_DATE_FORMAT)})`}
+                />
+                <DetailRow
+                    label="Last Modified By"
+                    description={`${
+                        tsrEvent.audit.lastModifiedByDisplayName
+                    }, ${dateLastModifiedFormat(moment(tsrEvent.audit.lastModifiedDate))}`}
+                />
+            </>
+        );
+    },
+);
 
 EventDetails.displayName = "EventDetails";
diff --git a/client/src/Navigation/DrawerMenu.tsx b/client/src/Navigation/DrawerMenu.tsx
index c35ff286..24e9142d 100644
--- a/client/src/Navigation/DrawerMenu.tsx
+++ b/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={`${org.organizationId}`}
+                                            >
+                                                {org.organizationDisplayName}
+                                            </NavLink>
+                                        );
+                                    })}
+                                </div>
+                            </>
+                        ) : (
+                            <></>
+                        )}
+
                         <div className="DrawerMenu-section">
                             <p aria-label="settings section">Settings</p>
                             <NavLink
diff --git a/client/src/Users/UserApi.ts b/client/src/Users/UserApi.ts
index 9fc7bce6..48d78ce8 100644
--- a/client/src/Users/UserApi.ts
+++ b/client/src/Users/UserApi.ts
@@ -40,6 +40,7 @@ export interface TsrUser {
 }
 
 export const emptyTsrUser: TsrUser = {
+    // TODO shouldn't need
     userId: "",
     username: "",
     role: "USER",

From 34c572d47dc942cb012581a160aea70f45653b14 Mon Sep 17 00:00:00 2001
From: mojo9492 <mojo9492@outlook.com>
Date: Fri, 4 Jun 2021 13:07:37 -0700
Subject: [PATCH 2/3] Add App route to OrganizationSettings component

Add links in DrawerMenu to subscribed Orgs
---
 client/src/App.tsx                            |   5 +
 client/src/Event/EventDetails.tsx             | 144 +++++++++---------
 client/src/Navigation/DrawerMenu.tsx          |   2 +-
 .../src/Organization/OrganizationSettings.tsx |  30 ++++
 4 files changed, 107 insertions(+), 74 deletions(-)
 create mode 100644 client/src/Organization/OrganizationSettings.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 309c1e68..5e4176bb 100644
--- a/client/src/App.tsx
+++ b/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>
diff --git a/client/src/Event/EventDetails.tsx b/client/src/Event/EventDetails.tsx
index 8957f6e7..ba35f98d 100644
--- a/client/src/Event/EventDetails.tsx
+++ b/client/src/Event/EventDetails.tsx
@@ -12,82 +12,80 @@ interface EventDetailsProps {
     tsrEvent: TsrEvent;
 }
 
-export const EventDetails = React.memo(
-    ({ tsrEvent }: EventDetailsProps): ReactElement => {
-        const startEndDate = (startDate: Moment, endDate: Moment): ReactElement => {
-            if (startDate.isSame(endDate)) {
-                return <DetailRow label="Date" description={longDateFormat(startDate)} />;
-            } else {
-                return (
-                    <>
-                        <DetailRow label="Start Date" description={longDateFormat(startDate)} />
-                        <DetailRow label="End Date" description={longDateFormat(endDate)} />
-                    </>
-                );
-            }
-        };
+export const EventDetails = React.memo(({ tsrEvent }: EventDetailsProps): ReactElement => {
+    const startEndDate = (startDate: Moment, endDate: Moment): ReactElement => {
+        if (startDate.isSame(endDate)) {
+            return <DetailRow label="Date" description={longDateFormat(startDate)} />;
+        } else {
+            return (
+                <>
+                    <DetailRow label="Start Date" description={longDateFormat(startDate)} />
+                    <DetailRow label="End Date" description={longDateFormat(endDate)} />
+                </>
+            );
+        }
+    };
 
-        const longDateFormat = (date: Moment): string =>
-            `${date.local().format(LONG_DATE_TIME_FORMAT)} (${userTimeZone()})`;
+    const longDateFormat = (date: Moment): string =>
+        `${date.local().format(LONG_DATE_TIME_FORMAT)} (${userTimeZone()})`;
 
-        const dateLastModifiedFormat = (dateLastModified: Moment): string => {
-            const diffMoment = moment.duration(currentTimeUtc().diff(dateLastModified));
-            let numOfTime = 0;
-            let unitOfTime = "";
-            if (diffMoment.days() >= 7) {
-                return dateLastModified.format(SHORT_DATE_FORMAT);
-            } else if (diffMoment.days() > 0) {
-                numOfTime = diffMoment.days();
-                unitOfTime = "day";
-            } else if (diffMoment.hours() > 0) {
-                numOfTime = diffMoment.hours();
-                unitOfTime = "hour";
-            } else if (diffMoment.minutes() > 5) {
-                numOfTime = diffMoment.minutes();
-                unitOfTime = "minute";
-            } else {
-                return "just now...";
-            }
-            if (numOfTime > 1) {
-                unitOfTime = `${unitOfTime}s`;
-            }
-            return `${numOfTime} ${unitOfTime} ago`;
-        };
+    const dateLastModifiedFormat = (dateLastModified: Moment): string => {
+        const diffMoment = moment.duration(currentTimeUtc().diff(dateLastModified));
+        let numOfTime = 0;
+        let unitOfTime = "";
+        if (diffMoment.days() >= 7) {
+            return dateLastModified.format(SHORT_DATE_FORMAT);
+        } else if (diffMoment.days() > 0) {
+            numOfTime = diffMoment.days();
+            unitOfTime = "day";
+        } else if (diffMoment.hours() > 0) {
+            numOfTime = diffMoment.hours();
+            unitOfTime = "hour";
+        } else if (diffMoment.minutes() > 5) {
+            numOfTime = diffMoment.minutes();
+            unitOfTime = "minute";
+        } else {
+            return "just now...";
+        }
+        if (numOfTime > 1) {
+            unitOfTime = `${unitOfTime}s`;
+        }
+        return `${numOfTime} ${unitOfTime} ago`;
+    };
 
-        const mapOrganizations = () => {
-            const orgArray = tsrEvent.organizations.map((org) => org.organizationDisplayName);
-            return orgArray.join("; ");
-        };
+    const mapOrganizations = () => {
+        const orgArray = tsrEvent.organizations.map((org) => org.organizationDisplayName);
+        return orgArray.join("; ");
+    };
 
-        return (
-            <>
-                <DetailRow
-                    label="Event Type"
-                    description={
-                        tsrEvent.eventType
-                            ? tsrEvent.eventType.displayName.charAt(0).toUpperCase() +
-                              tsrEvent.eventType.displayName.slice(1)
-                            : "No Event Type"
-                    }
-                />
-                {startEndDate(moment.utc(tsrEvent.startDate), moment.utc(tsrEvent.endDate))}
-                <DetailRow label="Organization" description={mapOrganizations()} />
-                <DetailRow
-                    label="Event Created By"
-                    description={`${tsrEvent.audit.createdByDisplayName}, (${moment
-                        .utc(tsrEvent.audit.createdDate)
-                        .local()
-                        .format(SHORT_DATE_FORMAT)})`}
-                />
-                <DetailRow
-                    label="Last Modified By"
-                    description={`${
-                        tsrEvent.audit.lastModifiedByDisplayName
-                    }, ${dateLastModifiedFormat(moment(tsrEvent.audit.lastModifiedDate))}`}
-                />
-            </>
-        );
-    },
-);
+    return (
+        <>
+            <DetailRow
+                label="Event Type"
+                description={
+                    tsrEvent.eventType
+                        ? tsrEvent.eventType.displayName.charAt(0).toUpperCase() +
+                          tsrEvent.eventType.displayName.slice(1)
+                        : "No Event Type"
+                }
+            />
+            {startEndDate(moment.utc(tsrEvent.startDate), moment.utc(tsrEvent.endDate))}
+            <DetailRow label="Organization" description={mapOrganizations()} />
+            <DetailRow
+                label="Event Created By"
+                description={`${tsrEvent.audit.createdByDisplayName}, (${moment
+                    .utc(tsrEvent.audit.createdDate)
+                    .local()
+                    .format(SHORT_DATE_FORMAT)})`}
+            />
+            <DetailRow
+                label="Last Modified By"
+                description={`${tsrEvent.audit.lastModifiedByDisplayName}, ${dateLastModifiedFormat(
+                    moment(tsrEvent.audit.lastModifiedDate),
+                )}`}
+            />
+        </>
+    );
+});
 
 EventDetails.displayName = "EventDetails";
diff --git a/client/src/Navigation/DrawerMenu.tsx b/client/src/Navigation/DrawerMenu.tsx
index 24e9142d..f81b31d3 100644
--- a/client/src/Navigation/DrawerMenu.tsx
+++ b/client/src/Navigation/DrawerMenu.tsx
@@ -53,7 +53,7 @@ export const DrawerMenu: React.FC = (): ReactElement => {
                                         return (
                                             <NavLink
                                                 key={`${tsrUser.username}-${org.organizationDisplayName}`}
-                                                to={`${org.organizationId}`}
+                                                to={`organization/${org.organizationId}`}
                                             >
                                                 {org.organizationDisplayName}
                                             </NavLink>
diff --git a/client/src/Organization/OrganizationSettings.tsx b/client/src/Organization/OrganizationSettings.tsx
new file mode 100644
index 00000000..e2c46df0
--- /dev/null
+++ b/client/src/Organization/OrganizationSettings.tsx
@@ -0,0 +1,30 @@
+import React, { useContext, useEffect } from "react";
+import UserContext from "../Users/UserContext";
+
+const OrganizationSettings: React.FC = () => {
+    const tsrUser = useContext(UserContext);
+
+    useEffect(() => {
+        if (tsrUser === undefined) {
+            return;
+        }
+    }, [tsrUser]);
+
+    if (tsrUser === undefined) {
+        return <></>;
+    }
+
+    if (tsrUser.settings.organizations === undefined) {
+        console.log("no orgs");
+    }
+
+    return (
+        <>
+            <h1 className="UserSettings-Header">{`${tsrUser.username} organization settings`}</h1>
+            <p>Role: {tsrUser.role}</p>
+            <p>{tsrUser.settings.organizations}</p>
+        </>
+    );
+};
+
+export default OrganizationSettings;

From ec50878559ccc1a9da7d78beaf3a306d76f7045b Mon Sep 17 00:00:00 2001
From: mojo9492 <mojo9492@outlook.com>
Date: Sun, 13 Jun 2021 12:48:16 -0700
Subject: [PATCH 3/3] OrganizationSettings layout

---
 .../src/Organization/OrganizationSettings.tsx | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/src/Organization/OrganizationSettings.tsx b/client/src/Organization/OrganizationSettings.tsx
index e2c46df0..e1962e93 100644
--- a/client/src/Organization/OrganizationSettings.tsx
+++ b/client/src/Organization/OrganizationSettings.tsx
@@ -3,6 +3,9 @@ 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) {
@@ -19,11 +22,18 @@ const OrganizationSettings: React.FC = () => {
     }
 
     return (
-        <>
-            <h1 className="UserSettings-Header">{`${tsrUser.username} organization settings`}</h1>
-            <p>Role: {tsrUser.role}</p>
-            <p>{tsrUser.settings.organizations}</p>
-        </>
+        <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>
     );
 };