@churchapps/apphelper 0.0.14 → 0.1.1

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

@@ -1,87 +1,87 @@
-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="add" 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;
+}
+
+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()}
+    </>
+  );
+};

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

@@ -1,145 +1,96 @@
-import React from "react";
-import { AppBar, Drawer, IconButton, styled, Toolbar, Icon, Typography, Box, Container, Link } from "@mui/material";
-import { UserHelper, AppearanceHelper, PersonHelper, AppearanceInterface, ApiHelper } from "../../helpers";
-import { UserMenu } from "./UserMenu";
-import { UserContextInterface } from "../../interfaces";
-import { useMountedState } from "../../hooks/useMountedState";
-import { SocketHelper } from "../../helpers/SocketHelper";
-
-
-interface Props {
-  navContent: JSX.Element,
-  context: UserContextInterface,
-  children: React.ReactNode,
-  appName: string,
-  router?: any,
-  appearance?: AppearanceInterface
-}
-
-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" }
-  })
-);
-
-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
-    }
-  })
-);
-
-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" }
-  })
-);
-
-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
-    })
-  })
-);
-
-export const SiteWrapper: React.FC<Props> = props => {
-  const [churchLogo, setChurchLogo] = React.useState<string>();
-  const [open, setOpen] = React.useState(false);
-  const toggleDrawer = () => { setOpen(!open); };
-  const isMounted = useMountedState();
-
-  const CustomDrawer = (open) ? OpenDrawer : ClosedDrawer;
-  const CustomAppBar = (open) ? OpenDrawerAppBar : ClosedDrawerAppBar;
-
-  const handleNotification = () => {
-    alert("Notification received.  Make GET to fetch bell count and toast message.")
-  }
-
-
-
-  React.useEffect(() => {
-    const getChurchLogo = async () => {
-      if (UserHelper.currentUserChurch) {
-        setChurchLogo(AppearanceHelper.getLogoDark(props.appearance, "/images/logo-wrapper.png"));
-      }
-    }
-
-    if (!isMounted()) {
-      getChurchLogo();
-    }
-  }, [isMounted, props.appearance]);
-
-
-  React.useEffect(() => {
-    if (!props.context.userChurch) SocketHelper.setPersonChurch({personId:null, churchId:null});
-    else SocketHelper.setPersonChurch({personId:props.context.userChurch?.person?.id, churchId:props.context.userChurch?.church?.id});
-  }, [props.context.userChurch]);
-
-  React.useEffect(() => {
-    SocketHelper.addHandler("notification", "notificationBell", handleNotification);
-    SocketHelper.init();
-  }, []);
-
-
-
-  return <>
-    <CustomAppBar position="absolute">
-      <Toolbar sx={{ pr: "24px" }}>
-        <IconButton edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: "36px", ...(open && { display: "none" }) }}>
-          <Icon>menu</Icon>
-        </IconButton>
-        <Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>
-        <div style={{ flex: 1 }}></div>
-        {UserHelper.user && <UserMenu profilePicture={PersonHelper.getPhotoUrl(props.context?.person)} userName={`${UserHelper.user?.firstName} ${UserHelper.user?.lastName}`} userChurches={UserHelper.userChurches} currentUserChurch={UserHelper.currentUserChurch} context={props.context} appName={props.appName} router={props.router} />}
-        {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
-      </Toolbar>
-    </CustomAppBar>
-
-    <CustomDrawer variant="permanent" open={open}>
-      <Toolbar sx={{ display: "flex", alignItems: "center", width: "100%", px: [1] }}>
-        <img src={churchLogo || "/images/logo-wrapper.png"} alt="logo" style={{ maxWidth: 170 }} />
-        <div style={{ justifyContent: "flex-end", flex: 1, display: "flex" }}>
-          <IconButton onClick={toggleDrawer}><Icon style={{ color: "#FFFFFF" }}>chevron_left</Icon></IconButton>
-        </div>
-      </Toolbar>
-      {props.navContent}
-    </CustomDrawer>
-    <Box component="main" sx={{ flexGrow: 1, overflow: "auto", marginTop: 8, minHeight: "90vh" }}>
-      <Container maxWidth={false} sx={{ mt: 4, mb: 4 }}>
-        {props.children}
-      </Container>
-    </Box>
-  </>
-};
+import React from "react";
+import { IconButton, Toolbar, Icon, Typography, Box, Container, Link } from "@mui/material";
+import { UserHelper, AppearanceHelper, PersonHelper, AppearanceInterface, ApiHelper } from "../../helpers";
+import { UserMenu } from "./UserMenu";
+import { UserContextInterface } from "../../interfaces";
+import { useMountedState } from "../../hooks/useMountedState";
+import { SocketHelper } from "../../helpers/SocketHelper";
+import { NotificationMenu } from "./NotificationMenu";
+import { ClosedDrawer, ClosedDrawerAppBar, OpenDrawer, OpenDrawerAppBar } from "./Drawers";
+
+interface Props {
+  navContent: JSX.Element,
+  context: UserContextInterface,
+  children: React.ReactNode,
+  appName: string,
+  router?: any,
+  appearance?: AppearanceInterface
+}
+
+export const SiteWrapper: React.FC<Props> = props => {
+  const [churchLogo, setChurchLogo] = React.useState<string>();
+  const [open, setOpen] = React.useState(false);
+  const [notificationCounts, setNotificationCounts] = React.useState({notificationCount:0, pmCount:0});
+  const toggleDrawer = () => { setOpen(!open); };
+  const isMounted = useMountedState();
+
+  const CustomDrawer = (open) ? OpenDrawer : ClosedDrawer;
+  const CustomAppBar = (open) ? OpenDrawerAppBar : ClosedDrawerAppBar;
+
+  const loadCounts = () => {
+    ApiHelper.get("/notifications/unreadCount", "MessagingApi").then(data => { setNotificationCounts(data); });
+  }
+  const handleNotification = () => {
+    //alert("Notification received.  Make GET to fetch bell count and toast message.")
+    console.log("Notification received.  Make GET to fetch bell count and toast message.");
+    loadCounts();
+  }
+
+
+
+  React.useEffect(() => {
+    const getChurchLogo = async () => {
+      if (UserHelper.currentUserChurch) {
+        setChurchLogo(AppearanceHelper.getLogoDark(props.appearance, "/images/logo-wrapper.png"));
+      }
+    }
+
+    if (!isMounted()) {
+      getChurchLogo();
+    }
+  }, [isMounted, props.appearance]);
+
+
+  React.useEffect(() => {
+    if (!props.context.userChurch) SocketHelper.setPersonChurch({personId:null, churchId:null});
+    else SocketHelper.setPersonChurch({personId:props.context.userChurch?.person?.id, churchId:props.context.userChurch?.church?.id});
+  }, [props.context.userChurch]);
+
+  React.useEffect(() => {
+    SocketHelper.addHandler("notification", "notificationBell", handleNotification);
+    SocketHelper.init();
+    loadCounts();
+  }, []);
+
+
+
+  return <>
+    <CustomAppBar position="absolute">
+      <Toolbar sx={{ pr: "24px" }}>
+        <IconButton edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: "36px", ...(open && { display: "none" }) }}>
+          <Icon>menu</Icon>
+        </IconButton>
+        <Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>
+        <div style={{ flex: 1 }}></div>
+        {UserHelper.user && <NotificationMenu onUpdate={loadCounts} counts={notificationCounts} context={props.context} router={props.router} />}
+        {UserHelper.user && <UserMenu profilePicture={PersonHelper.getPhotoUrl(props.context?.person)} userName={`${UserHelper.user?.firstName} ${UserHelper.user?.lastName}`} userChurches={UserHelper.userChurches} currentUserChurch={UserHelper.currentUserChurch} context={props.context} appName={props.appName} router={props.router} />}
+        {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
+      </Toolbar>
+    </CustomAppBar>
+
+    <CustomDrawer variant="permanent" open={open}>
+      <Toolbar sx={{ display: "flex", alignItems: "center", width: "100%", px: [1] }}>
+        <img src={churchLogo || "/images/logo-wrapper.png"} alt="logo" style={{ maxWidth: 170 }} />
+        <div style={{ justifyContent: "flex-end", flex: 1, display: "flex" }}>
+          <IconButton onClick={toggleDrawer}><Icon style={{ color: "#FFFFFF" }}>chevron_left</Icon></IconButton>
+        </div>
+      </Toolbar>
+      {props.navContent}
+    </CustomDrawer>
+    <Box component="main" sx={{ flexGrow: 1, overflow: "auto", marginTop: 8, minHeight: "90vh" }}>
+      <Container maxWidth={false} sx={{ mt: 4, mb: 4 }}>
+        {props.children}
+      </Container>
+    </Box>
+  </>
+};

package/src/components/wrapper/TabPanel.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Box, styled } from "@mui/material";
+
+interface TabPanelProps { children?: React.ReactNode; index: number; value: number; }
+
+const StyledMenuBox = styled(Box)(
+  ({ theme }) => ({
+    paddingTop: 10,
+    "& .MuiListItemButton-root": { paddingLeft: 30 },
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main
+    },
+    "& .MuiListItemText-root": { color: theme.palette.text.primary },
+    "& .selected .MuiListItemText-root span": { fontWeight: "bold" }
+  })
+);
+
+export function TabPanel(props: TabPanelProps) {
+  const { children, value, index } = props;
+
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`userMenuPanel-${index}`}>
+      {value === index && (
+        <StyledMenuBox>
+          <Box>{children}</Box>
+        </StyledMenuBox>
+      )}
+    </div>
+  );
+}