@churchapps/apphelper 0.1.6 → 0.1.8

package/src/components/wrapper/SiteWrapper.tsx

@@ -1,96 +1,99 @@
-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>
-  </>
-};
+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 => {
+      if (!notificationCounts || JSON.stringify(notificationCounts) !== JSON.stringify(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();
+    console.log("RELOADED SiteWrapper2");
+  }, []);
+
+
+  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

@@ -1,30 +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>
-  );
-}
+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>
+  );
+}

package/src/components/wrapper/UserMenu.tsx

@@ -1,106 +1,106 @@
-import React from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { UserHelper } from "../../helpers/UserHelper";
-import { Avatar, Menu, Typography, Icon, Button, Box, Tabs, Tab, Divider } from "@mui/material";
-import { NavItem, AppList } from ".";
-import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
-import { ChurchList } from "./ChurchList";
-import { SupportModal } from "../SupportModal";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
-import { TabPanel } from "../TabPanel";
-import { NavLink } from "react-router-dom";
-
-
-interface Props {
-  userName: string;
-  profilePicture: string;
-  userChurches: LoginUserChurchInterface[];
-  currentUserChurch: LoginUserChurchInterface;
-  context: UserContextInterface;
-  appName: string;
-  router?: any;
-}
-
-export const UserMenu: React.FC<Props> = (props) => {
-  const userName = props.userName;
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [showSupport, setShowSupport] = React.useState(false);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    setAnchorEl(e.currentTarget);
-  };
-
-  const handleClose = () => {
-    setTabIndex(0);
-    setAnchorEl(null);
-  };
-
-  const getMainLinks = () => {
-    const jwt = ApiHelper.getConfig("MembershipApi").jwt;
-    const churchId = UserHelper.currentUserChurch.church.id;
-    let result: JSX.Element[] = [];
-    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label="Profile" icon="person" router={props.router} />);
-    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label="Profile" icon="person" external={true} router={props.router} />);
-    result.push(<NavItem url="/logout" label="Logout" icon="logout" key="/logout" router={props.router} />);
-    result.push(<NavItem label="Support" key="Support" icon="help" onClick={() => { setShowSupport(true) }} />);
-    result.push(<div style={{borderTop:"1px solid #CCC", paddingTop:2, paddingBottom:2}}></div>)
-    result.push(<NavItem label="Switch App" key="Switch App" icon="apps" onClick={() => { setTabIndex(1); }} />);
-    if (props.userChurches.length > 1) result.push(<NavItem label="Switch Church" key="Switch Church" icon="church" onClick={() => { setTabIndex(2); }} />);
-    return result;
-  }
-
-  const getProfilePic = () => {
-    if (props.profilePicture) return props.profilePicture
-    else return "/images/sample-profile.png";
-  }
-
-  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);
-
-  const getTabs = () => (
-    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <TabPanel value={tabIndex} index={0}>
-        {getMainLinks()}
-      </TabPanel>
-      <TabPanel value={tabIndex} index={1}>
-        <NavItem label="Back" key="AppBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
-        <AppList currentUserChurch={props.currentUserChurch} appName={props.appName} />
-      </TabPanel>
-      {props.userChurches.length > 1 && <TabPanel value={tabIndex} index={2}>
-        <NavItem label="Back" key="ChurchBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
-        <ChurchList userChurches={props.userChurches} currentUserChurch={props.currentUserChurch} context={props.context} />
-      </TabPanel>}
-
-    </Box>
-  );
-
-  return (
-    <>
-      {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
-      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }} endIcon={<Icon>expand_more</Icon>}>
-        <Avatar src={getProfilePic()} sx={{ width: 32, height: 32, marginRight: 1 }}></Avatar>
-        <Typography color="inherit" noWrap>{userName}</Typography>
-      </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 { ApiHelper } from "../../helpers/ApiHelper";
+import { UserHelper } from "../../helpers/UserHelper";
+import { Avatar, Menu, Typography, Icon, Button, Box, Tabs, Tab, Divider } from "@mui/material";
+import { NavItem, AppList } from ".";
+import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
+import { ChurchList } from "./ChurchList";
+import { SupportModal } from "../SupportModal";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { TabPanel } from "../TabPanel";
+import { NavLink } from "react-router-dom";
+
+
+interface Props {
+  userName: string;
+  profilePicture: string;
+  userChurches: LoginUserChurchInterface[];
+  currentUserChurch: LoginUserChurchInterface;
+  context: UserContextInterface;
+  appName: string;
+  router?: any;
+}
+
+export const UserMenu: React.FC<Props> = (props) => {
+  const userName = props.userName;
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [showSupport, setShowSupport] = React.useState(false);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setAnchorEl(e.currentTarget);
+  };
+
+  const handleClose = () => {
+    setTabIndex(0);
+    setAnchorEl(null);
+  };
+
+  const getMainLinks = () => {
+    const jwt = ApiHelper.getConfig("MembershipApi").jwt;
+    const churchId = UserHelper.currentUserChurch.church.id;
+    let result: JSX.Element[] = [];
+    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label="Profile" icon="person" router={props.router} />);
+    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label="Profile" icon="person" external={true} router={props.router} />);
+    result.push(<NavItem url="/logout" label="Logout" icon="logout" key="/logout" router={props.router} />);
+    result.push(<NavItem label="Support" key="Support" icon="help" onClick={() => { setShowSupport(true) }} />);
+    result.push(<div style={{borderTop:"1px solid #CCC", paddingTop:2, paddingBottom:2}}></div>)
+    result.push(<NavItem label="Switch App" key="Switch App" icon="apps" onClick={() => { setTabIndex(1); }} />);
+    if (props.userChurches.length > 1) result.push(<NavItem label="Switch Church" key="Switch Church" icon="church" onClick={() => { setTabIndex(2); }} />);
+    return result;
+  }
+
+  const getProfilePic = () => {
+    if (props.profilePicture) return props.profilePicture
+    else return "/images/sample-profile.png";
+  }
+
+  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);
+
+  const getTabs = () => (
+    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <TabPanel value={tabIndex} index={0}>
+        {getMainLinks()}
+      </TabPanel>
+      <TabPanel value={tabIndex} index={1}>
+        <NavItem label="Back" key="AppBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
+        <AppList currentUserChurch={props.currentUserChurch} appName={props.appName} />
+      </TabPanel>
+      {props.userChurches.length > 1 && <TabPanel value={tabIndex} index={2}>
+        <NavItem label="Back" key="ChurchBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
+        <ChurchList userChurches={props.userChurches} currentUserChurch={props.currentUserChurch} context={props.context} />
+      </TabPanel>}
+
+    </Box>
+  );
+
+  return (
+    <>
+      {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
+      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }} endIcon={<Icon>expand_more</Icon>}>
+        <Avatar src={getProfilePic()} sx={{ width: 32, height: 32, marginRight: 1 }}></Avatar>
+        <Typography color="inherit" noWrap>{userName}</Typography>
+      </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/index.tsx

@@ -1,5 +1,5 @@
-export { NavItem } from "./NavItem";
-export { AppList } from "./AppList";
-export { SiteWrapper } from "./SiteWrapper";
-export { ChurchList } from "./ChurchList";
-export { UserMenu } from "./UserMenu";
+export { NavItem } from "./NavItem";
+export { AppList } from "./AppList";
+export { SiteWrapper } from "./SiteWrapper";
+export { ChurchList } from "./ChurchList";
+export { UserMenu } from "./UserMenu";