Epic 2 Foundational UI -- Profile Notifications/No Organizations Views

frontend/compositions/index.tsx

@@ -10,6 +10,8 @@ import PasswordAid from "./password-aid/password-aid"
 import EditProfileInfo from "./profile-edit"
 import ProfileInfo from "./profile-info"
 import ProfileNav from "./profile-nav"
+import ProfileNotifications from "./profile-notifications/profile-notifications"
+import ProfileOrganizations from "./profile-organizations/profile-organizations"
 import SavedResults from "./profile-saved-tables/saved-results"
 import SavedSearches from "./profile-saved-tables/saved-searches"
 import ProfileType from "./profile-type"
@@ -29,6 +31,8 @@ export {
   PasswordAid,
   ProfileInfo,
   ProfileNav,
+  ProfileNotifications,
+  ProfileOrganizations,
   ProfileType,
   RegistrationResponse,
   SavedResults,

frontend/compositions/profile-nav/index.tsx

@@ -1,28 +1,24 @@
 import * as React from "react"
-import { ProfileMenu } from "../../models/profile"
+import { ProfileMenu, profileMenuItems } from "../../models/profile"
 import styles from "./profile-nav.module.css"
 
 interface ProfileNavProps {
-  currentItem: ProfileMenu
-  selectNav: Function
+  activePage: ProfileMenu
+  setActivePage: React.Dispatch<React.SetStateAction<ProfileMenu>>
 }
 
-const menuItems = [
-  { item: ProfileMenu.USER_INFO, text: "User Information" },
-  { item: ProfileMenu.PROFILE_TYPE, text: "Profile Type" },
-  { item: ProfileMenu.SAVED_RESULTS, text: "Saved Results" },
-  { item: ProfileMenu.SAVED_SEARCHES, text: "Saved Searches" }
-]
-
-export default function ProfileNav({ currentItem, selectNav }: ProfileNavProps) {
-  const clsName = (itm: string) => (itm === currentItem ? styles.selectedItem : styles.menuItem)
+export default function ProfileNav({ activePage, setActivePage }: ProfileNavProps) {
+  const clsName = (item: string) => (item === activePage ? styles.selectedItem : styles.menuItem)
 
   return (
     <nav className={styles.leftMenu}>
       <ul>
-        {menuItems.map((mnu) => (
-          <li key={mnu.item} onClick={() => selectNav(mnu.item)} className={clsName(mnu.item)}>
-            {mnu.text}
+        {profileMenuItems.map((menu) => (
+          <li
+            key={menu.item}
+            onClick={() => setActivePage(menu.item)}
+            className={clsName(menu.item)}>
+            {menu.text}
           </li>
         ))}
       </ul>

frontend/compositions/profile-nav/profile-nav.module.css

@@ -1,23 +1,19 @@
 .leftMenu {
-  display: flex;
-
-  flex-direction: row;
-  align-items: flex-start;
   font-weight: bold;
-  text-align: left;
-
+  padding: var(--size20) var(--size32);
   border: 1px solid var(--darkBlue);
-  box-sizing: border-box;
   box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.25);
   border-radius: var(--size10);
+  align-self: flex-start;
+}
 
-  margin-left: var(--size10);
-  margin-right: var(--size24);
-  margin-top: var(--size20);
-  width: var(--size192);
+.leftMenu ul {
+  margin: 0;
+  padding: 0;
 
-  line-height: 2.5;
-  height: var(--size200);
+  display: flex;
+  flex-direction: column;
+  gap: var(--size20);
 }
 
 .leftMenu li {

frontend/compositions/profile-notifications/profile-notifications.module.css

@@ -0,0 +1,21 @@
+.notificationsContainer {
+  flex: 1;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headerText {
+  font-size: var(--size28);
+  font-weight: bold;
+  color: var(--darkBlue);
+}
+
+.headerCTA {
+  /* Get rid of default margins */
+  margin: 0;
+  font-size: var(--size16) !important;
+}

frontend/compositions/profile-notifications/profile-notifications.tsx

@@ -0,0 +1,100 @@
+import { CellProps, Column } from "react-table"
+import { CreateOrganizationBtn, DataTable } from "../../shared-components"
+import styles from "./profile-notifications.module.css"
+import ConfirmOrgDialog from "./sub-comps/confirm-org-dialog"
+
+enum MemberRole {
+  ADMIN = "Administrator",
+  PUBLISHER = "Publisher",
+  MEMBER = "Member",
+  SUBSCRIBER = "Subscriber"
+}
+
+interface InterimInvitation {
+  organization: string
+  role: MemberRole
+  dateInvited: Date
+  status: string
+}
+
+export default function ProfileNotifications() {
+  const { notificationsContainer, headerContainer, headerText, headerCTA } = styles
+
+  // TODO: get user's invitations
+
+  return (
+    <section className={notificationsContainer}>
+      <div className={headerContainer}>
+        <h1 className={headerText}>Notifications</h1>
+        <CreateOrganizationBtn btnClassName={headerCTA} />
+      </div>
+      <DataTable tableName="Notifications" data={notifications} columns={notificationsColumns} />
+    </section>
+  )
+}
+
+const notifications: InterimInvitation[] = [
+  {
+    organization: "Pearson Hardman",
+    role: MemberRole.ADMIN,
+    dateInvited: new Date("8/8/2021"),
+    status: "Invitation"
+  },
+  {
+    organization: "Pearson Hardman Litt",
+    role: MemberRole.ADMIN,
+    dateInvited: new Date("7/30/2021"),
+    status: "Invitation"
+  },
+  {
+    organization: "Zane Specter Litt",
+    role: MemberRole.PUBLISHER,
+    dateInvited: new Date("6/15/2021"),
+    status: "Current Member"
+  },
+  {
+    organization: "Porter Hedges",
+    role: MemberRole.MEMBER,
+    dateInvited: new Date("5/2/2021"),
+    status: "Current Member"
+  }
+]
+
+const notificationsColumns: Column<InterimInvitation>[] = [
+  {
+    Header: "Organization",
+    accessor: "organization",
+    id: "organization"
+  },
+  {
+    Header: "Role",
+    accessor: "role",
+    id: "role"
+  },
+  {
+    Header: "Date Invited",
+    Cell: (props) => (
+      <div>
+        {new Intl.DateTimeFormat("en-US", {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit"
+        }).format(props.cell.value)}
+      </div>
+    ),
+    accessor: "dateInvited",
+    id: "dateInvited"
+  },
+  {
+    Header: "Status",
+    accessor: "status",
+    id: "status"
+  },
+  {
+    Header: "Action",
+    Cell: ({ row }: CellProps<InterimInvitation>) => {
+      const organizationName = row.original.organization
+      return <ConfirmOrgDialog organizationName={organizationName} />
+    }
+  }
+]

frontend/compositions/profile-notifications/sub-comps/confirm-org-dialog.module.css

@@ -0,0 +1,28 @@
+.actionBtn {
+  /* Define row height */
+  margin: var(--size4) 0;
+
+  width: min-content;
+  height: var(--size32);
+}
+
+.btnContainer {
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  gap: var(--size16);
+}
+
+.btn {
+  /* RESET MARGINS from PrimaryButton */
+  margin: 0;
+}
+
+.confirmBtn {
+  font-weight: bold;
+}
+
+.notYetBtn {
+  background-color: var(--red);
+  font-weight: bold;
+}

frontend/compositions/profile-notifications/sub-comps/confirm-org-dialog.tsx

@@ -0,0 +1,48 @@
+import classNames from "classnames"
+import { PrimaryButton, Dialog as D } from "../../../shared-components"
+import styles from "./confirm-org-dialog.module.css"
+import { useState } from "react"
+
+interface ConfirmOrgDialogProps {
+  organizationName: string
+}
+
+export default function ConfirmOrgDialog({ organizationName }: ConfirmOrgDialogProps) {
+  const [open, setOpen] = useState(false)
+  // TODO: determine if user is joining or leaving
+
+  const handleConfirm = () => {
+    // TODO: Join/Leave organization
+    console.log("Joined or Left Organization: ", organizationName)
+    setOpen(false)
+  }
+
+  const handleNotYet = () => {
+    setOpen(false)
+  }
+
+  return (
+    <D.Root open={open} onOpenChange={setOpen}>
+      <D.Trigger asChild>
+        <PrimaryButton className={styles.actionBtn}>Join</PrimaryButton>
+      </D.Trigger>
+      <D.Content>
+        <D.Header>
+          <D.Title>Are you sure you want to join {organizationName}?</D.Title>
+        </D.Header>
+        <D.Footer className={styles.btnContainer}>
+          <PrimaryButton
+            className={classNames(styles.btn, styles.confirmBtn)}
+            onClick={handleConfirm}>
+            Join
+          </PrimaryButton>
+          <PrimaryButton
+            className={classNames(styles.btn, styles.notYetBtn)}
+            onClick={handleNotYet}>
+            Not Yet
+          </PrimaryButton>
+        </D.Footer>
+      </D.Content>
+    </D.Root>
+  )
+}

frontend/compositions/profile-organizations/no-organizations/no-organizations.module.css

@@ -0,0 +1,6 @@
+.headerText {
+  font-size: var(--size24);
+  font-weight: bold;
+  color: var(--darkBlue);
+  margin-bottom: var(--size16);
+}

frontend/compositions/profile-organizations/no-organizations/no-organizations.tsx

@@ -0,0 +1,14 @@
+import { Logo, CreateOrganizationBtn } from "../../../shared-components"
+import styles from "./no-organizations.module.css"
+
+export default function NoOrganizations() {
+  const { headerText } = styles
+
+  return (
+    <>
+      <Logo />
+      <h1 className={headerText}>You&apos;re currently Not Part of Any Organizations</h1>
+      <CreateOrganizationBtn />
+    </>
+  )
+}

frontend/compositions/profile-organizations/profile-organizations.module.css

@@ -0,0 +1,9 @@
+.organizationContainer {
+  flex: 1;
+  text-align: center;
+  padding: 0 var(--size192);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

frontend/compositions/profile-organizations/profile-organizations.tsx

@@ -0,0 +1,20 @@
+import { useAuth } from "../../helpers"
+import NoOrganizations from "./no-organizations/no-organizations"
+import styles from "./profile-organizations.module.css"
+
+export default function ProfileOrganizations() {
+  const { organizationContainer, headerText, organizationBtn } = styles
+  const { user } = useAuth()
+
+  // TODO: Find user's organizations (if any)
+  // API endpoint needed: Given a user, get their partners
+
+  // TODO: Separate UI for:
+  // 2. Existing Organizations
+
+  return (
+    <section className={organizationContainer}>
+      <NoOrganizations />
+    </section>
+  )
+}

frontend/helpers/hooks/useId.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react"
+
+let idCounter = 0
+
+const useId = () => {
+  const [id] = useState(() => `generated-id-${idCounter++}`)
+
+  useEffect(() => {
+    // Reset the counter when the component unmounts
+    return () => {
+      idCounter = 0
+    }
+  }, [])
+
+  return id
+}
+
+export default useId