@churchapps/apphelper 0.4.17 → 0.4.18

package/src/components/wrapper/Drawers.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { AppBar, Drawer, styled } from "@mui/material";
-
-export const OpenDrawer = (styles:any) => styled(Drawer)(
-  ({ theme }) => ({
-    "& .MuiDrawer-paper": {
-      position: "relative",
-      backgroundColor: styles.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 = (styles:any) => styled(OpenDrawer(styles))(
-  ({ 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/wrapper/SiteWrapper.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import React, { CSSProperties, useCallback, useMemo } 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 "@churchapps/helpers";
-import { useMountedState } from "../../hooks/useMountedState";
-import { SocketHelper } from "../../helpers/SocketHelper";
-import { ClosedDrawer, ClosedDrawerAppBar, OpenDrawer, OpenDrawerAppBar } from "./Drawers";
-
-interface Props {
-  navContent: React.ReactElement,
-  context: UserContextInterface,
-  children: React.ReactNode,
-  appName: string,
-  onNavigate: (url: string) => void,
-  appearance?: AppearanceInterface,
-  omitOverflow?: boolean
-}
-
-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 = useCallback(() => { setOpen(!open); }, [open]);
-  const isMounted = useMountedState();
-
-  const CustomDrawer = useMemo(() => 
-    (open) ? OpenDrawer({backgroundColor:props.appearance?.wrapperBackground}) : ClosedDrawer({backgroundColor:props.appearance?.wrapperBackground}),
-    [open, props.appearance?.wrapperBackground]
-  );
-  const CustomAppBar = useMemo(() => (open) ? OpenDrawerAppBar : ClosedDrawerAppBar, [open]);
-
-  const loadCounts = useCallback(() => {
-    ApiHelper.get("/notifications/unreadCount", "MessagingApi").then(data => {
-      if (!notificationCounts || JSON.stringify(notificationCounts) !== JSON.stringify(data)) setNotificationCounts(data);
-    });
-  }, [notificationCounts]);
-
-  const handleNotification = useCallback(() => {
-    loadCounts();
-  }, [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();
-    
-    // Cleanup function to remove handlers and disconnect socket
-    return () => {
-      SocketHelper.removeHandler("notificationBell");
-    };
-  }, [handleNotification, loadCounts]);
-
-  const boxStyle: CSSProperties = useMemo(() => {
-    const style: CSSProperties = { flexGrow: 1, marginTop: 8, minHeight: "90vh" };
-    if (!props.omitOverflow) style.overflow = "auto";
-    return style;
-  }, [props.omitOverflow]);
-
-  return <>
-    <CustomAppBar position="absolute">
-      <Toolbar sx={{ pr: "24px", backgroundColor: props.appearance?.wrapperBackground }}>
-        <IconButton edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: "36px", ...(open && { display: "none" }) }} data-testid="open-navigation-drawer">
-          <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} onNavigate={props.onNavigate} loadCounts={loadCounts} notificationCounts={notificationCounts} />}
-        {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
-      </Toolbar>
-    </CustomAppBar>
-
-    <CustomDrawer style={{ backgroundColor: props.appearance?.wrapperBackground }} variant="permanent" open={open} onMouseOver={useCallback(() => setOpen(true), [])} onMouseLeave={useCallback(() => setOpen(false), [])}>
-      <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} aria-label="close navigation drawer" data-testid="close-navigation-drawer"><Icon style={{ color: "#FFFFFF" }}>chevron_left</Icon></IconButton>
-        </div>
-      </Toolbar>
-      {props.navContent}
-    </CustomDrawer>
-    <Box component="main" sx={boxStyle}>
-      <Container maxWidth={false} sx={{ mt: 4, mb: 4 }}>
-        {props.children}
-      </Container>
-    </Box>
-  </>
-};

package/src/components/wrapper/TabPanel.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-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/helpers/ApiHelper.ts

@@ -1,127 +0,0 @@
-import { ApiConfig, RolePermissionInterface, ApiListType } from "@churchapps/helpers";
-import { ErrorHelper } from "./ErrorHelper";
-
-export class ApiHelper {
-
-	static apiConfigs: ApiConfig[] = [];
-	static isAuthenticated = false;
-
-	static getConfig(keyName: string) {
-		let result: ApiConfig;
-		this.apiConfigs.forEach(config => { if (config.keyName === keyName) result = config });
-		//if (result === null) throw new Error("Unconfigured API: " + keyName);
-		return result;
-	}
-
-	static setDefaultPermissions(jwt: string) {
-		this.apiConfigs.forEach(config => {
-			config.jwt = jwt;
-			config.permissions = [];
-		});
-		this.isAuthenticated = true;
-	}
-
-	static setPermissions(keyName: string, jwt: string, permissions: RolePermissionInterface[]) {
-		this.apiConfigs.forEach(config => {
-			if (config.keyName === keyName) {
-				config.jwt = jwt;
-				config.permissions = permissions;
-			}
-		});
-		this.isAuthenticated = true;
-	}
-
-	static clearPermissions() {
-		this.apiConfigs.forEach(config => { config.jwt = ""; config.permissions = []; });
-		this.isAuthenticated = false;
-	}
-
-	static async get(path: string, apiName: ApiListType) {
-		const config = this.getConfig(apiName);
-		const requestOptions = {
-			method: "GET",
-			headers: { Authorization: "Bearer " + config.jwt },
-			cache: "no-store"
-		};
-
-		return await this.fetchWithErrorHandling(config.url + path, requestOptions);
-	}
-
-	static async getAnonymous(path: string, apiName: ApiListType, tags?: string[]) {
-		const config = this.getConfig(apiName);
-		const requestOptions: RequestInit = { method: "GET" };
-		if (tags?.length > 0) (requestOptions as any).next = { tags: tags };
-		else requestOptions.cache = "no-store";
-		return await this.fetchWithErrorHandling(config.url + path, requestOptions);
-	}
-
-	static async post(path: string, data: any[] | {}, apiName: ApiListType) {
-		const config = this.getConfig(apiName);
-		const requestOptions = {
-			method: "POST",
-			headers: { Authorization: "Bearer " + config.jwt, "Content-Type": "application/json" },
-			body: JSON.stringify(data)
-		};
-		return await this.fetchWithErrorHandling(config.url + path, requestOptions);
-	}
-
-	static async patch(path: string, data: any[] | {}, apiName: ApiListType) {
-		const config = this.getConfig(apiName);
-		const requestOptions = {
-			method: "PATCH",
-			headers: { Authorization: "Bearer " + config.jwt, "Content-Type": "application/json" },
-			body: JSON.stringify(data)
-		};
-		return await this.fetchWithErrorHandling(config.url + path, requestOptions);
-	}
-
-	static async delete(path: string, apiName: ApiListType) {
-		const config = this.getConfig(apiName);
-		const requestOptions = {
-			method: "DELETE",
-			headers: { Authorization: "Bearer " + config.jwt }
-		};
-		try {
-			const response = await fetch(config.url + path, requestOptions);
-			if (!response.ok) await this.throwApiError(response);
-		} catch (e) {
-			throw (e);
-		}
-	}
-
-	static async postAnonymous(path: string, data: any[] | {}, apiName: ApiListType) {
-		const config = this.getConfig(apiName);
-		const requestOptions = {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify(data)
-		};
-		return await this.fetchWithErrorHandling(config.url + path, requestOptions);
-	}
-
-	static async fetchWithErrorHandling(url: string, requestOptions: any) {
-		try {
-			const response = await fetch(url, requestOptions);
-			if (!response.ok) await this.throwApiError(response);
-			else {
-				if (response.status !== 204) {
-					return response.json();
-				}
-			}
-		} catch (e) {
-			console.log("Failed to fetch from " + url);
-			throw (e);
-		}
-	}
-
-	private static async throwApiError(response: Response) {
-		let msg = response.statusText;
-		try {
-			const json = await response.json();
-			msg = json.errors[0];
-		} catch { }
-		ErrorHelper.logError(response.status.toString(), response.url, msg);
-		throw new Error(msg || "Error");
-	}
-
-}