@churchapps/apphelper 0.1.10 → 0.1.12

package/src/components/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/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

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