@churchapps/apphelper 0.0.14 → 0.1.1

package/src/components/{material → wrapper}/AppList.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { UserHelper } from "../../helpers/UserHelper";
-import { NavItem } from "./NavItem";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
-import { LoginUserChurchInterface } from "../../interfaces";
-
-export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; router?: any; }
-
-export const AppList: React.FC<Props> = props => {
-  const jwt = ApiHelper.getConfig("MembershipApi").jwt;
-  const churchId = UserHelper.currentUserChurch.church.id;
-  return (
-    <>
-      <NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "CHUMS"} external={true} label="Chums" icon="logout" router={props.router} />
-      <NavItem url={`${CommonEnvironmentHelper.B1Root.replace("{key}", props.currentUserChurch.church.subDomain)}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "B1.church"} external={true} label="B1.Church" icon="logout" router={props.router} />
-      <NavItem url={`${CommonEnvironmentHelper.LessonsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "Lessons.church"} external={true} label="Lessons.church" icon="logout" router={props.router} />
-    </>
-  );
-}
+import React from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { LoginUserChurchInterface } from "../../interfaces";
+
+export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; router?: any; }
+
+export const AppList: React.FC<Props> = props => {
+  const jwt = ApiHelper.getConfig("MembershipApi").jwt;
+  const churchId = UserHelper.currentUserChurch.church.id;
+  return (
+    <>
+      <NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "CHUMS"} external={true} label="Chums" icon="logout" router={props.router} />
+      <NavItem url={`${CommonEnvironmentHelper.B1Root.replace("{key}", props.currentUserChurch.church.subDomain)}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "B1.church"} external={true} label="B1.Church" icon="logout" router={props.router} />
+      <NavItem url={`${CommonEnvironmentHelper.LessonsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "Lessons.church"} external={true} label="Lessons.church" icon="logout" router={props.router} />
+    </>
+  );
+}

package/src/components/{material → wrapper}/ChurchList.tsx

@@ -1,22 +1,22 @@
-import React from "react";
-import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
-import { UserHelper } from "../../helpers/UserHelper";
-import { NavItem } from "./NavItem";
-
-export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface }
-
-export const ChurchList: React.FC<Props> = props => {
-
-  if (props.userChurches.length < 2) return <></>;
-  else {
-    let result: JSX.Element[] = [];
-    const userChurches = props.userChurches.filter(uc => uc.apis.length > 0)
-    userChurches.forEach(uc => {
-      const userChurch = uc;
-      const churchName = uc.church.name;
-      result.push(<NavItem key={userChurch.church.id} selected={(uc.church.id === props.currentUserChurch.church.id) && true} onClick={() => UserHelper.selectChurch(props.context, userChurch.church.id, null)} label={churchName} icon="church" />);
-    });
-
-    return <>{result}</>;
-  }
-};
+import React from "react";
+import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+
+export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface }
+
+export const ChurchList: React.FC<Props> = props => {
+
+  if (props.userChurches.length < 2) return <></>;
+  else {
+    let result: JSX.Element[] = [];
+    const userChurches = props.userChurches.filter(uc => uc.apis.length > 0)
+    userChurches.forEach(uc => {
+      const userChurch = uc;
+      const churchName = uc.church.name;
+      result.push(<NavItem key={userChurch.church.id} selected={(uc.church.id === props.currentUserChurch.church.id) && true} onClick={() => UserHelper.selectChurch(props.context, userChurch.church.id, null)} label={churchName} icon="church" />);
+    });
+
+    return <>{result}</>;
+  }
+};

package/src/components/wrapper/Drawers.tsx

@@ -0,0 +1,60 @@
+import { AppBar, Drawer, styled } from "@mui/material";
+
+export const OpenDrawer = styled(Drawer)(
+  ({ theme }) => ({
+    "& .MuiDrawer-paper": {
+      position: "relative",
+      backgroundColor: theme.palette.primary.main,
+      color: "#FFFFFF",
+      whiteSpace: "nowrap",
+      width: "100vw",
+      zIndex: 9999,
+      [theme.breakpoints.up("md")]: { width: 220 },
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      boxSizing: "border-box"
+    },
+    "& .MuiListItemButton-root, & .MuiListItemIcon-root": { color: "#FFFFFF" }
+  })
+);
+
+export const ClosedDrawer = styled(OpenDrawer)(
+  ({ theme }) => ({
+    overflowX: "hidden",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    zIndex: 1,
+    width: theme.spacing(7),
+    [theme.breakpoints.up("sm")]: { width: theme.spacing(7) },
+    "& .MuiListSubheader-root": {
+      opacity: 0
+    }
+  })
+);
+
+export const ClosedDrawerAppBar = styled(AppBar)(
+  ({ theme }) => ({
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    "& .MuiIcon-root": { color: "#FFFFFF" }
+  })
+);
+
+export const OpenDrawerAppBar = styled(ClosedDrawerAppBar)(
+  ({ theme }) => ({
+    marginLeft: 220,
+    width: `calc(100% - ${220}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  })
+);
+

package/src/components/{material → wrapper}/NavItem.tsx

@@ -1,41 +1,41 @@
-import React from "react";
-import { Icon, ListItemButton, ListItemIcon, ListItemText, styled, Tooltip } from "@mui/material";
-import { NavLink, useLocation } from "react-router-dom";
-
-interface Props {
-  url?: string;
-  target?: string;
-  label: string;
-  icon: string;
-  onClick?: () => void;
-  router?: any;
-  external?: boolean;
-  selected?: boolean;
-}
-
-const StyledNavLink = styled(NavLink)({
-  textDecoration: "none",
-  "&:hover": { textDecoration: "none" },
-  "& .MuiListItemIcon-root": { minWidth: 40 }
-});
-
-export const NavItem: React.FC<Props> = (props) => {
-  let isReact = false;
-  try {
-    const a = typeof useLocation();
-    if (a !== null) isReact = true;
-  } catch { }
-
-  const getIcon = () => <Icon>{props.icon}</Icon>
-
-  const getLinkContents = () => (<ListItemButton>
-    <Tooltip title={props.label || ""} arrow placement="right">
-      <ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
-    </Tooltip>
-    <ListItemText primary={props.label} />
-  </ListItemButton>)
-
-  if (props.router) return (<a href={props.url} target={props.target} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.router.push(props.url) }} className={(props.selected) ? "selected" : ""}>{getLinkContents()}</a>)
-  else if (props.external || !isReact) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
-  else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={props.onClick ? (e) => { e.preventDefault(); props.onClick() } : null}>{getLinkContents()}</StyledNavLink>)
-};
+import React from "react";
+import { Icon, ListItemButton, ListItemIcon, ListItemText, styled, Tooltip } from "@mui/material";
+import { NavLink, useLocation } from "react-router-dom";
+
+interface Props {
+  url?: string;
+  target?: string;
+  label: string;
+  icon: string;
+  onClick?: () => void;
+  router?: any;
+  external?: boolean;
+  selected?: boolean;
+}
+
+const StyledNavLink = styled(NavLink)({
+  textDecoration: "none",
+  "&:hover": { textDecoration: "none" },
+  "& .MuiListItemIcon-root": { minWidth: 40 }
+});
+
+export const NavItem: React.FC<Props> = (props) => {
+  let isReact = false;
+  try {
+    const a = typeof useLocation();
+    if (a !== null) isReact = true;
+  } catch { }
+
+  const getIcon = () => <Icon>{props.icon}</Icon>
+
+  const getLinkContents = () => (<ListItemButton>
+    <Tooltip title={props.label || ""} arrow placement="right">
+      <ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
+    </Tooltip>
+    <ListItemText primary={props.label} />
+  </ListItemButton>)
+
+  if (props.router) return (<a href={props.url} target={props.target} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.router.push(props.url) }} className={(props.selected) ? "selected" : ""}>{getLinkContents()}</a>)
+  else if (props.external || !isReact) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
+  else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={props.onClick ? (e) => { e.preventDefault(); props.onClick() } : null}>{getLinkContents()}</StyledNavLink>)
+};

package/src/components/{material → wrapper}/NewPrivateMessage.tsx

@@ -1,103 +1,103 @@
-import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
-import React from "react";
-import { ApiHelper, PersonHelper } from "../../helpers";
-import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "../../interfaces";
-import { AddNote } from "../notes/AddNote";
-import { SmallButton } from "../SmallButton";
-
-interface Props {
-  context: UserContextInterface;
-  onSelectMessage: (pm: PrivateMessageInterface) => void
-  onBack: () => void
-}
-
-export const NewPrivateMessage: React.FC<Props> = (props) => {
-
-  const [searchText, setSearchText] = React.useState("");
-  const [searchResults, setSearchResults] = React.useState([]);
-  const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
-
-  const handleSubmit = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = escape(searchText.trim());
-    ApiHelper.get("/people/search?term=" + term, "MembershipApi").then(data => setSearchResults(data));
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(e.currentTarget.value);
-  }
-
-  /*
-    const handleKeyDown = (e: React.KeyboardEvent<any>) => {
-      //if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); }
-    }
-  */
-
-  const handlePersonSelected = async (person: PersonInterface) => {
-    const existing: PrivateMessageInterface = await ApiHelper.get("/privateMessages/existing/" + person.id, "MessagingApi");
-    if (existing.id) {
-      existing.person = person;
-      props.onSelectMessage(existing);
-    }
-    else setSelectedPerson(person);
-  }
-
-  const getPeople = () => {
-    let result = [];
-    for (let i = 0; i < searchResults.length; i++) {
-      const p = searchResults[i];
-      result.push(<TableRow key={p.id}>
-        <TableCell><img src={PersonHelper.getPhotoUrl(p)} alt="avatar" /></TableCell>
-        <TableCell><a href="about:blank" onClick={(e) => { e.preventDefault(); handlePersonSelected(p) }}>{p.name.display}</a></TableCell>
-      </TableRow>);
-    }
-    return result;
-  }
-
-  const handleNoteAdded = () => {
-    handlePersonSelected(selectedPerson);
-  }
-
-  const createConversation = async () => {
-    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " Private Message", visibility: "hidden" }
-    const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
-
-    const pm: PrivateMessageInterface = {
-      fromPersonId: props.context.person.id,
-      toPersonId: selectedPerson.id,
-      conversationId: result[0].id
-    }
-    const privateMessages: PrivateMessageInterface[] = await ApiHelper.post("/privateMessages", [pm], "MessagingApi");
-    return privateMessages[0].conversationId;
-  }
-
-  if (!selectedPerson) return (
-    <div style={{ paddingLeft: 10, paddingRight: 10 }}>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-      </span>
-      <b>New Private Message</b>
-      <div>Search for a person</div>
-
-      <TextField fullWidth label="Name" id="searchText" data-cy="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
-      />
-      <br />
-      <Table id="smallPeopleTable" size="small">
-        <TableBody>{getPeople()}</TableBody>
-      </Table>
-    </div>
-  );
-  else {
-    return (
-      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
-        <span style={{ float: "right" }}>
-          <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-        </span>
-        <b>New Private Message</b>
-        <div>To: {selectedPerson.name.display}</div>
-        <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
-      </div>
-    )
-  }
-}
+import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
+import React from "react";
+import { ApiHelper, PersonHelper } from "../../helpers";
+import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { AddNote } from "../notes/AddNote";
+import { SmallButton } from "../SmallButton";
+
+interface Props {
+  context: UserContextInterface;
+  onSelectMessage: (pm: PrivateMessageInterface) => void
+  onBack: () => void
+}
+
+export const NewPrivateMessage: React.FC<Props> = (props) => {
+
+  const [searchText, setSearchText] = React.useState("");
+  const [searchResults, setSearchResults] = React.useState([]);
+  const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
+
+  const handleSubmit = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = escape(searchText.trim());
+    ApiHelper.get("/people/search?term=" + term, "MembershipApi").then(data => setSearchResults(data));
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.currentTarget.value);
+  }
+
+  /*
+    const handleKeyDown = (e: React.KeyboardEvent<any>) => {
+      //if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); }
+    }
+  */
+
+  const handlePersonSelected = async (person: PersonInterface) => {
+    const existing: PrivateMessageInterface = await ApiHelper.get("/privateMessages/existing/" + person.id, "MessagingApi");
+    if (existing.id) {
+      existing.person = person;
+      props.onSelectMessage(existing);
+    }
+    else setSelectedPerson(person);
+  }
+
+  const getPeople = () => {
+    let result = [];
+    for (let i = 0; i < searchResults.length; i++) {
+      const p = searchResults[i];
+      result.push(<TableRow key={p.id}>
+        <TableCell><img src={PersonHelper.getPhotoUrl(p)} alt="avatar" /></TableCell>
+        <TableCell><a href="about:blank" onClick={(e) => { e.preventDefault(); handlePersonSelected(p) }}>{p.name.display}</a></TableCell>
+      </TableRow>);
+    }
+    return result;
+  }
+
+  const handleNoteAdded = () => {
+    handlePersonSelected(selectedPerson);
+  }
+
+  const createConversation = async () => {
+    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " Private Message", visibility: "hidden" }
+    const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
+
+    const pm: PrivateMessageInterface = {
+      fromPersonId: props.context.person.id,
+      toPersonId: selectedPerson.id,
+      conversationId: result[0].id
+    }
+    const privateMessages: PrivateMessageInterface[] = await ApiHelper.post("/privateMessages", [pm], "MessagingApi");
+    return privateMessages[0].conversationId;
+  }
+
+  if (!selectedPerson) return (
+    <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+      </span>
+      <b>New Private Message</b>
+      <div>Search for a person</div>
+
+      <TextField fullWidth label="Name" id="searchText" data-cy="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
+      />
+      <br />
+      <Table id="smallPeopleTable" size="small">
+        <TableBody>{getPeople()}</TableBody>
+      </Table>
+    </div>
+  );
+  else {
+    return (
+      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+        <span style={{ float: "right" }}>
+          <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+        </span>
+        <b>New Private Message</b>
+        <div>To: {selectedPerson.name.display}</div>
+        <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
+      </div>
+    )
+  }
+}

package/src/components/wrapper/NotificationMenu.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Menu, Icon, Button, Box, Tabs, Tab } from "@mui/material";
+import { UserContextInterface } from "../../interfaces";
+import { PrivateMessages } from "./PrivateMessages";
+import { TabPanel } from "../TabPanel";
+import { Notifications } from "./Notifications";
+import { Badge } from "@mui/base";
+
+interface Props {
+  counts: { notificationCount: number, pmCount: number };
+  context: UserContextInterface;
+  router?: any;
+  onUpdate: () => void;
+}
+
+export const NotificationMenu: React.FC<Props> = (props) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setAnchorEl(e.currentTarget);
+  };
+
+  const handleClose = () => {
+    props.onUpdate();
+    setAnchorEl(null);
+  };
+
+
+  const paperProps = {
+    elevation: 0,
+    sx: {
+      overflow: "visible",
+      filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+      mt: 1.5,
+      "& .MuiAvatar-root": { width: 32, height: 32, ml: -0.5, mr: 1 },
+      minWidth: 450
+    }
+  };
+
+  const handleItemClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    console.log(e);
+  }
+
+  const [tabIndex, setTabIndex] = React.useState(0);
+
+  function handleChange(el: any, newValue: any) {
+    setTabIndex(newValue);
+  }
+
+  const getTabs = () => (
+    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Tabs variant="fullWidth" value={tabIndex} onChange={handleChange}>
+        <Tab label="Messages" icon={(props.counts.pmCount>0) ? <Icon style={{color:"#FF0000"}}>notifications</Icon> : <></>} iconPosition="end" />
+        <Tab label="Notifications" icon={(props.counts.notificationCount>0) ? <Icon style={{color:"#FF0000"}}>notifications</Icon> : <></>} iconPosition="end"  />
+      </Tabs>
+      <TabPanel value={tabIndex} index={0}>
+        <PrivateMessages context={props.context} />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={1}>
+        <Notifications context={props.context} />
+      </TabPanel>
+    </Box>
+  );
+
+  const totalCount = props.counts.notificationCount + props.counts.pmCount;
+  console.log("totalCount", totalCount, props.counts);
+
+  //const buttonStyle = (totalCount > 0) ? { color: "#FF3333" } : {  };
+  let icon = <Icon>notifications</Icon>;
+  if (totalCount>0) icon = <Badge style={{backgroundColor:"#FF0000", padding:"0px 5px 0px 5px", borderRadius:5}} badgeContent={totalCount} color="error">{icon}</Badge>
+
+
+  return (
+    <>
+      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }}>
+        {icon}
+      </Button>
+      <Menu anchorEl={anchorEl} id="account-menu" open={open} onClose={handleClose} onClick={(e) => { handleItemClick(e) }} PaperProps={paperProps} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
+        {getTabs()}
+      </Menu>
+    </>
+  );
+};

package/src/components/wrapper/Notifications.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { Box, Icon, Stack } from "@mui/material";
+import { NotificationInterface, UserContextInterface } from "../../interfaces";
+import { ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+
+interface Props {
+  context: UserContextInterface;
+}
+
+export const Notifications: React.FC<Props> = (props) => {
+
+  const [notifications, setNotifications] = useState<NotificationInterface[]>([]);
+
+  const loadData = async () => {
+    const n: NotificationInterface[] = await ApiHelper.get("/notifications/my", "MessagingApi");
+    setNotifications(n);
+  }
+
+  React.useEffect(() => { loadData(); }, []); //eslint-disable-line
+
+  const getMainLinks = () => {
+    let result: JSX.Element[] = [];
+    notifications.forEach(notification => {
+      let datePosted = new Date(notification.timeSent);
+      const displayDuration = DateHelper.getDisplayDuration(datePosted);
+
+      result.push(
+        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); }}>
+          <Box sx={{ width: "100%" }} className="note-contents">
+            <Stack direction="row" justifyContent="space-between">
+              <div style={{width:"100%"}}>
+                <span className="text-grey" style={{float:"right"}}>{displayDuration}</span>
+                <p><Icon>notifications</Icon> {notification.message}</p>
+              </div>
+            </Stack>
+          </Box>
+        </div>
+      );
+    })
+    return result;
+  }
+
+
+  return (
+    <>
+      {getMainLinks()}
+    </>
+  );
+};

package/src/components/{material → wrapper}/PrivateMessageDetails.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import { SmallButton } from "../SmallButton";
-import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
-import { Notes } from "../notes/Notes";
-
-interface Props {
-  context: UserContextInterface;
-  privateMessage: PrivateMessageInterface;
-  onBack: () => void
-}
-
-export const PrivateMessageDetails: React.FC<Props> = (props) => (
-  <>
-    <div style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-      </span>
-      Chat with {props.privateMessage.person.name.display}
-    </div>
-    <Notes context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} />
-  </>
-);
-
+import React from "react";
+import { SmallButton } from "../SmallButton";
+import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { Notes } from "../notes/Notes";
+
+interface Props {
+  context: UserContextInterface;
+  privateMessage: PrivateMessageInterface;
+  onBack: () => void
+}
+
+export const PrivateMessageDetails: React.FC<Props> = (props) => (
+  <>
+    <div style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+      </span>
+      Chat with {props.privateMessage.person.name.display}
+    </div>
+    <Notes maxHeight={"50vh"} context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} />
+  </>
+);
+