OrganizationSettings layout

Author: mojo9492

client/src/Organization/OrganizationSettings.tsx

@@ -1,8 +1,16 @@
 import React, { useContext, useEffect } from "react";
 import UserContext from "../Users/UserContext";
+import { Organization } from "./OrganizationApi";
+
+interface OrganizationSettingsProps {
+    org: Organization;
+}
 
 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 +27,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>
     );
 };