@churchapps/apphelper 0.1.6 → 0.1.7

package/src/components/wrapper/NotificationMenu.tsx

@@ -1,85 +1,96 @@
-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>
-    </>
-  );
-};
+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 [refreshKey, setRefreshKey] = React.useState(0);
+  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) {
+    console.log("SETTING TAB INDEX", newValue)
+    setTabIndex(newValue);
+  }
+
+  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>
+  if (totalCount>0) icon = <>{icon}<Badge style={{backgroundColor:"#FF0000", padding:"0px 5px 0px 5px", borderRadius:5}} badgeContent={totalCount} color="error" /></>
+
+  React.useEffect(() => {
+    console.log("THE COUNTS CHANGED")
+    setRefreshKey(Math.random());
+  }, [props.counts]);
+
+  React.useEffect(() => {
+    console.log("RELOADED NotificationMenu")
+  }, []);
+
+  /*
+  <TabPanel value={tabIndex} index={0}>
+            <PrivateMessages context={props.context} refreshKey={refreshKey} />
+          </TabPanel>
+          <TabPanel value={tabIndex} index={1}>
+            <Notifications context={props.context} />
+          </TabPanel>
+  */
+  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 } }}>
+        <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>
+          {tabIndex === 0 && <PrivateMessages context={props.context} refreshKey={refreshKey} onUpdate={props.onUpdate} />}
+          {tabIndex === 1 && <Notifications context={props.context} onUpdate={props.onUpdate} />}
+        </Box>
+      </Menu>
+    </>
+  );
+};

package/src/components/wrapper/Notifications.tsx

@@ -1,50 +1,53 @@
-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()}
-    </>
-  );
-};
+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;
+  onUpdate: () => void;
+}
+
+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);
+    props.onUpdate();
+  }
+
+  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;
+  }
+
+  React.useEffect(() => { console.log("RELOADED NOTIFICATIONS") }, []);
+
+  return (
+    <>
+      {getMainLinks()}
+    </>
+  );
+};

package/src/components/wrapper/PrivateMessageDetails.tsx

@@ -1,23 +1,24 @@
-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} />
-  </>
-);
-
+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
+  refreshKey: number;
+}
+
+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} refreshKey={props.refreshKey} />
+  </>
+);
+

package/src/components/wrapper/PrivateMessages.tsx

@@ -1,87 +1,92 @@
-import React, { useState } from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { Box, Stack } from "@mui/material";
-import { SmallButton } from "../SmallButton";
-import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
-import { ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
-import { PrivateMessageDetails } from "./PrivateMessageDetails";
-import { NewPrivateMessage } from "./NewPrivateMessage";
-
-interface Props {
-  context: UserContextInterface;
-}
-
-export const PrivateMessages: React.FC<Props> = (props) => {
-
-  const [privateMessages, setPrivateMessages] = useState<PrivateMessageInterface[]>([]);
-  const [selectedMessage, setSelectedMessage] = useState<PrivateMessageInterface>(null);
-  const [inAddMode, setInAddMode] = useState(false);
-
-  const loadData = async () => {
-    const pms: PrivateMessageInterface[] = await ApiHelper.get("/privateMessages", "MessagingApi");
-    const peopleIds: string[] = [];
-    pms.forEach(pm => {
-      const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
-      if (peopleIds.indexOf(personId) === -1) peopleIds.push(personId);
-    });
-    if (peopleIds.length > 0) {
-      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
-      pms.forEach(pm => {
-        const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
-        pm.person = ArrayHelper.getOne(people, "id", personId);
-      })
-    }
-    setPrivateMessages(pms);
-  }
-
-  React.useEffect(() => { loadData(); }, []); //eslint-disable-line
-
-  const getMainLinks = () => {
-    let result: JSX.Element[] = [];
-    privateMessages.forEach(pm => {
-
-      const person = pm.person;
-      const message = pm.conversation.messages[0];
-      const photoUrl = PersonHelper.getPhotoUrl(person);
-
-      let datePosted = new Date(message.timeUpdated || message.timeSent);
-      const displayDuration = DateHelper.getDisplayDuration(datePosted);
-      const contents = message.content?.split("\n")[0];
-      const privateMessage = pm;
-      result.push(
-        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}>
-          <div className="postedBy">
-            <img src={photoUrl} alt="avatar" />
-          </div>
-          <Box sx={{ width: "100%" }} className="note-contents">
-            <Stack direction="row" justifyContent="space-between">
-              <div>
-                <b>{person.name?.display}</b> · <span className="text-grey">{displayDuration}</span>
-                <p style={{ maxHeight: 20, overflowY: "hidden" }}>{contents}</p>
-              </div>
-            </Stack>
-          </Box>
-        </div>
-      );
-    })
-    return result;
-  }
-
-  const handleBack = () => {
-    setInAddMode(false);
-    setSelectedMessage(null);
-    loadData();
-  }
-
-  if (inAddMode) return <NewPrivateMessage context={props.context} onSelectMessage={(pm: PrivateMessageInterface) => { setSelectedMessage(pm); setInAddMode(false); }} onBack={handleBack} />
-  if (selectedMessage) return <PrivateMessageDetails privateMessage={selectedMessage} context={props.context} onBack={handleBack} />
-  else return (
-    <>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="edit_square" onClick={() => { setInAddMode(true) }} />
-      </span>
-
-      {getMainLinks()}
-    </>
-  );
-};
+import React, { useState } from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { Box, Stack } from "@mui/material";
+import { SmallButton } from "../SmallButton";
+import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+import { PrivateMessageDetails } from "./PrivateMessageDetails";
+import { NewPrivateMessage } from "./NewPrivateMessage";
+
+interface Props {
+  context: UserContextInterface;
+  refreshKey: number;
+  onUpdate: () => void;
+}
+
+export const PrivateMessages: React.FC<Props> = (props) => {
+
+  const [privateMessages, setPrivateMessages] = useState<PrivateMessageInterface[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<PrivateMessageInterface>(null);
+  const [inAddMode, setInAddMode] = useState(false);
+
+  const loadData = async () => {
+    console.log("loading data");
+    const pms: PrivateMessageInterface[] = await ApiHelper.get("/privateMessages", "MessagingApi");
+    const peopleIds: string[] = [];
+    pms.forEach(pm => {
+      const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
+      if (peopleIds.indexOf(personId) === -1) peopleIds.push(personId);
+    });
+    if (peopleIds.length > 0) {
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      pms.forEach(pm => {
+        const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
+        pm.person = ArrayHelper.getOne(people, "id", personId);
+      })
+    }
+    setPrivateMessages(pms);
+    props.onUpdate();
+  }
+
+  React.useEffect(() => { loadData(); }, [props.refreshKey]); //eslint-disable-line
+  React.useEffect(() => { console.log("RELOADED PMS") }, []);
+
+  const getMainLinks = () => {
+    let result: JSX.Element[] = [];
+    privateMessages.forEach(pm => {
+
+      const person = pm.person;
+      const message = pm.conversation.messages[0];
+      const photoUrl = PersonHelper.getPhotoUrl(person);
+
+      let datePosted = new Date(message.timeUpdated || message.timeSent);
+      const displayDuration = DateHelper.getDisplayDuration(datePosted);
+      const contents = message.content?.split("\n")[0];
+      const privateMessage = pm;
+      result.push(
+        <div key={pm.id} className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}>
+          <div className="postedBy">
+            <img src={photoUrl} alt="avatar" />
+          </div>
+          <Box sx={{ width: "100%" }} className="note-contents">
+            <Stack direction="row" justifyContent="space-between">
+              <div>
+                <b>{person.name?.display}</b> · <span className="text-grey">{displayDuration}</span>
+                <p style={{ maxHeight: 20, overflowY: "hidden" }}>{contents}</p>
+              </div>
+            </Stack>
+          </Box>
+        </div>
+      );
+    })
+    return result;
+  }
+
+  const handleBack = () => {
+    setInAddMode(false);
+    setSelectedMessage(null);
+    loadData();
+  }
+
+  if (inAddMode) return <NewPrivateMessage context={props.context} onSelectMessage={(pm: PrivateMessageInterface) => { setSelectedMessage(pm); setInAddMode(false); }} onBack={handleBack} />
+  if (selectedMessage) return <PrivateMessageDetails privateMessage={selectedMessage} context={props.context} onBack={handleBack} refreshKey={props.refreshKey} />
+  else return (
+    <>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="edit_square" onClick={() => { setInAddMode(true) }} />
+      </span>
+
+      {getMainLinks()}
+    </>
+  );
+};